CSS : explication détaillée de l'utilisation du style de liste de style liste-tutoriel CSS-php.cn

CSS : explication détaillée de l'utilisation du style de liste de style liste

黄舟

Libérer： 2017-06-29 09:17:56

original

4006 Les gens l'ont consulté

AnalyseStyle de liste CSSStyle de liste d'attributs

Dans les pages de production quotidienne, l'attribut style de liste peut être couramment utilisé dans les objets d'élément de liste, mais il n'est pas utilisé en profondeur. Généralement, il est presque acceptable de réinitialiser la page entière en la définissant sur aucun. Peut-être que beaucoup de personnes, y compris moi-même, ne connaissent pas grand-chose des attributs plus détaillés de l'attribut list-style-type. plus probablement que les attributs list-style et Le concept d'attribut list-style-type est relativement vague. Il est maintenant nécessaire de l'évoquer et de le réapprendre, il est donc organisé comme suit.

Signification et utilisation

L'attribut raccourci de style liste définit tous les attributs de liste dans une seule instruction.

Description
Cet attribut est un attribut abrégé qui couvre tous les autres attributs de style de liste. Puisqu'il s'applique à tous les éléments avec display list-item, il ne peut être utilisé que sur les éléments li en HTML et XHTML normaux, mais en fait, il peut être appliqué à n'importe quel élément et est hérité par les éléments list-item.

peut définir les attributs suivants dans l'ordre :

•list-style-type
•list-style-position
•list- style -image

◆list-style

Définition : Un attribut raccourci utilisé pour définir tous les attributs d'une liste dans une seule déclaration. Cet attribut est un attribut raccourci qui couvre. Tous les autres attributs de style de liste sont affectés uniquement par les objets dont la valeur d'affichage est égale à list-item (tels que les objets li).

Connexe : list-style-imagelist-style-positionlist-style-type

◆list-style-image

Description : définit ou récupère le balisage de l'élément de liste en tant que image de l'objet. Si la valeur de cet attribut est nulle ou si l'image à l'adresse URL spécifiée ne peut pas être affichée, l'attribut list-style-type prendra effet.

Valeur :

aucune : valeur par défaut. Sans spécifier d'image

url(url) : Spécifiez une image en utilisant une adresse url absolue ou relative

Définissez l'image comme balise d'élément dans la liste :

ul
  {
  list-style-image:url("/i/arrow.gif");
  list-style-type:square;
  }

Copier après la connexion

Exemple

<html>
<head>
<style type="text/css">
ul 
{
list-style-image: url(&#39;/i/eg_arrow.gif&#39;)
}
</style>
</head>
<body>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
</body>
</html>

Copier après la connexion

◆list-style-position

Description : définit ou récupère la manière dont les balises d'éléments de liste en tant qu'objets sont disposées en fonction du texte. Si le patch extérieur gauche d'un élément de liste (margin-left) est défini sur 0, la marque de l'élément de liste ne sera pas affichée. La marge gauche peut être définie sur un minimum de 30. Fonctionne uniquement sur les objets avec une valeur d'attribut d'affichage égale à élément de liste. Tel que l'objet Li.

Valeur :

extérieur : Valeur par défaut. La balise d'élément de liste est placée à l'extérieur du texte et le texte environnant n'est pas aligné en fonction de la balise

à l'intérieur : la balise d'élément de liste est placée à l'intérieur du texte et le texte environnant est aligné en fonction de la balise

. 🎜>
instance

spécifie la liste Position de la balise de l'élément de liste :

ul
  {
  list-style-position:inside;
  }

Copier après la connexion

Instance

<html>
<head>
<style type="text/css">
ul.inside 
{
list-style-position: inside
}
ul.outside 
{
list-style-position: outside
}
</style>
</head>
<body>
<p>该列表的 list-style-position 的值是 "inside"：</p>
<ul class="inside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>
<p>该列表的 list-style-position 的值是 "outside"：</p>
<ul class="outside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>
</body>
</html>

Copier après la connexion

Support des navigateurs

Tous les navigateurs prennent en charge la liste Attribut -style-position.

Remarque : La valeur de l'attribut « hériter » n'est prise en charge dans aucune version d'Internet Explorer (y compris IE8).

◆list-style-type

Description : Définit ou récupère la balise par défaut utilisée par les éléments de la liste de l'objet. Cet attribut prendra effet si la valeur de l'attribut list-style-image est nulle ou si l'image à l'adresse URL spécifiée ne peut pas être affichée.

Exemple

Cet exemple change le type de la liste :

<html>
<head>
<script type="text/javascript">
function changeList()
  {
  document.getElementById("ul1").style.listStyle="decimal inside";
  }
</script>
</head>
<body>
<ul id="ul1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Water</li>
  <li>Soda</li>
</ul>
<input type="button" onclick="changeList()"
value="Change list style" />
</body>
</html>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!