Point bullet styles

<article data-type="article">

Lorsque HTML est entrée en usage au début des années 1990, toutes les listes à puces ressemblaient parce qu`il n`y avait que le symbole de point noir standard pour utiliser comme point de balle. Avec Cascading Style Sheets (CSS), beaucoup plus est possible. Les listes peuvent être décorés avec des formes différentes, une image sélectionnée par l`utilisateur ou une combinaison d`options.

Standard Styles CSS Bullet

  • Les styles de puces standard, vous pouvez choisir en CSS comprennent un disque, ou un cercle carré ou un bas-romain, upper-roman, inférieur caractère alphabétique ou supérieure alpha. Le code pour un caractère romain inférieure ressemble à ce qui suit:

    ul {

    list-style-type: inférieur roman-

    }

    Pour modifier une liste désignée à ce style, créer une classe et lui donner l`attribut bas-romain, en tant que telle:

    .ul_new {

    list-style-type: inférieur roman-

    }




    Le code de liste apparaît dans le corps de votre document, en tant que tel:

  • première puce

Styling par la position de la balle

  • Vous pouvez également modifier la position de la balle, la modification que ce soit en retrait ou outdented.

    Ce code est maintenant écrit:

    .ul_new {

    list-style-type: inférieur romain;
    list-style-position: intérieur-

    }

    Ceci est utile lorsque vous voulez la balle en ligne avec d`autres contenus (à l`intérieur).

Changer le style avec une autre image

  • Une façon plus contrôlée pour obtenir le look exact du point de balle est d`utiliser votre propre image de balle pré-conçus. Assurez-vous que l`image est assez petit pour être un point de balle, comme des images plus grandes peuvent lancer la page de mise hors tension. Le code ressemblerait à quelque chose comme ceci:

    ul {

    list-style-image: URL (http: //locationoffile/nameoffile.jpg) -

    }

    L`URL pointant vers l`emplacement de l`image sur le serveur.

En HTML

  • Si vous souhaitez modifier directement la liste dans le code HTML, spécifier le style de liste dans chaque point:

  • texte 1

  • text2

La façon la plus rapide est par CSS.
Technologie / Web design & développement / Création de sites web

AUTRES

» » » » Point bullet styles