Quels attributs sont utilisés pour contrôler le style des listes en CSS-Questions et réponses frontales-php.cn

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

青灯夜游

Libérer： 2021-12-09 14:54:42

original

4509 Les gens l'ont consulté

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".

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

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") } Copier après la connexion

(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;  }

Copier après la connexion

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>

Copier après la connexion

(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!