Maison > Article > interface Web > Quels attributs sont utilisés pour contrôler le style des listes en CSS

Quels attributs sont utilisés pour contrôler le style des listes en CSS

青灯夜游original: 2021-12-09 14:52:594506parcourir

Contrôlez les attributs du style de liste : 1. "list-style-type", définissez le type de marque de liste ; 2. "list-style-position", définissez la position de placement de la marque ; -style-image", Définit l'image comme marque de liste ; 4. "list-style".

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3. Liste des propriétés -style- image

Définissez le image comme marqueur d'élément de liste1

list-style-positionDéfinissez la position de placement du marqueur d'élément de liste1list-style-typeDéfinissez le type du marqueur d'élément de liste 1 (1) list-style-type : utilisé pour contrôler la forme d'apparence du marqueur. Pour les listes non ordonnées, les valeurs de cet attribut sont les suivantes : 1. aucun, pas de marqueur ; 2. disque (valeur par défaut), cercle rempli ; 3. cercle, cercle creux ; 4. carré, carré rempli ; . Pour les listes ordonnées, les valeurs de cet attribut sont les suivantes : 1. décimal, nombres ; 2. zéro décimal, nombres précédés de 0. alphabétique inférieure, lettres minuscules ; , lettres majuscules ; 5. lettres romaines minuscules, lettres romaines minuscules ; 6. lettres romaines majuscules ; Le drapeau extérieur sera placé à une certaine distance de la bordure de l'élément de liste, mais cette distance n'est pas définie en CSS. Les indicateurs internes sont traités comme s'il s'agissait d'éléments en ligne insérés au début du contenu de l'élément de liste. Pour les listes imbriquées, vous pouvez utiliser la valeur hériter pour spécifier que la valeur de l'attribut list-style-position doit être héritée de l'élément parent. Utilisez comme suit : Il convient de noter que si vous utilisez une liste imbriquée, cet attribut héritera de l'élément parent afin d'éviter l'héritage, list-style-image doit être défini sur none.




	(2) list-style-position : Cet attribut est utilisé pour déclarer la position de la marque de liste par rapport au contenu de l'élément de liste.
(3) list-style-image : Spécifiez une image comme balisage.		li { list-style-image: url("haha.gif") }

(4) style de liste : La forme abrégée

peut exprimer plusieurs attributs des trois attributs ci-dessus à la fois et peut apparaître dans n'importe quel ordre.

Le rendu du test est le suivant :

Le code CSS est le suivant :

li { border: red solid thin; }
ul { list-style: square outside }
ol { list-style: upper-alpha inside; }
 ul.one { list-style: url("test1.jpg") inside;  }

Le code HTML est le suivant :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
	<head>
		<meta charset="utf-8" />  
		<base href="/testsmarty/templates/"></base>
		<title>CSS控制列表样式</title>
		<link rel="stylesheet" type="text/css" href="test1.css">
	</head>
	
	<body>
		<table width="700" border="1">
			<tr>
				<td>无序列表样式</td>
				<td>有序列表样式</td>
				<td>使用图片做标记符</td>
			</tr>
			<tr>
				<td>
					<ul>
						<li>one</li>
						<li>two</li>
						<li>three</li>
					</ul>
				</td>
				<td>
					<ol>
						<li>one</li>
						<li>two</li>
						<li>three</li>
					</ol>
				</td>
				<td>
					<ul class="one">
						<li>one</li>
						<li>two</li>
						<li>three</li>
					</ul>
				</td>
			</tr>
			<tr>
				<td colspan="3">注意outside与inside其标记符与li元素框的位置</td>
			</tr>
		</table>		
	</body>
</html>

(Partage vidéo d'apprentissage :

tutoriel vidéo CSS)

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!

html5 css css3 html 继承 position

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Quels sont les attributs de police couramment utilisés en CSSArticle suivant：Quels sont les attributs de police couramment utilisés en CSS

Articles Liés

Voir plus