Maison > Article > interface Web > Comment définir le style de l'élément li avec CSS

Comment définir le style de l'élément li avec CSS

PHPzoriginal: 2023-04-21 11:26:082897parcourir

CSS est l'un des langages de style les plus couramment utilisés dans la conception de sites Web. Pour écrire du code de site Web, il est très important de maîtriser le CSS.

Dans la conception Web, nous utilisons souvent des listes pour présenter des informations, et les éléments ul et li sont des balises utilisées pour créer des listes non ordonnées et des listes ordonnées. Lors de la création d'une liste, le paramètre de style est également très important. Apprenons à définir le style de l'élément li.

Format CSS

Les formats de style CSS sont principalement divisés en trois types, à savoir les styles en ligne, les styles internes et les styles externes.

Style en ligne

Le style en ligne consiste à ajouter des styles CSS dans l'attribut style de la balise HTML. Par exemple :

<ul>
  <li style="color: red;">列表项1</li>
  <li style="color: blue;">列表项2</li>
  <li style="color: green;">列表项3</li>
</ul>

Bien qu'un code comme celui-ci puisse définir directement le style de l'élément li, il est rarement utilisé dans le développement réel et n'est pas propice à la maintenance du code et à la réutilisation du style.

Style interne

Le style interne consiste à ajouter la balise <head> dans l'en-tête du fichier HTML, puis à y ajouter le code de style. Par exemple : <head> 标签中添加 <style> 标签，然后在其中添加样式代码。例如：

<head>
  <style>
    li {
      color: red;
    }
  </style>
</head>
<body>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
  </ul>
</body>

这种方式可以在同一页内使用，其他页面需要相同的样式时还需要重复写一遍相同的代码。

外部样式

外部样式是在一个独立的 CSS 文件中编写并引用到 HTML 文件中。例如：

<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
  </ul>
</body>

这种方式是最常用的，具有代码简洁、易维护、样式统一等特点。

设置 li 元素的样式

我们可以对 li 元素进行各种排版和样式设置，例如字体、字号、颜色、行高、背景色、边框等，下面我们来具体介绍一下。

字体和字号

字体和字号是常用的样式设置，可以通过 font-family 和 font-size 属性来设置。

li {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

颜色

颜色的设置可以使用 color 属性，也可以使用 background-color 属性来设置背景色。

li {
  color: red;
  background-color: #ccc;
}

行高

行高可以使用 line-height 属性来设置。

li {
  line-height: 1.5;
}

边框

边框可以使用 border 属性来设置，该属性包含了边框的宽度、样式和颜色，也可以单独使用 border-width、border-style 和 border-color 属性来设置。

li {
  border: 1px solid black;
}

列表样式

有序列表和无序列表的样式也可以单独设置。例如，无序列表可以使用 list-style-type 属性来设置特定的标记样式。

ul {
  list-style-type: disc; /* 实心圆 */
}

有序列表可以使用 list-style-type

ol {
  list-style-type: lower-roman; /* 小写罗马数字 */
}

Cette méthode peut être utilisée au sein de la même page. Lorsque d'autres pages nécessitent le même style, le même code doit être réécrit.

Styles externes

Les styles externes sont écrits dans un fichier CSS séparé et référencés dans le fichier HTML. Par exemple :

rrreee

Cette méthode est la plus couramment utilisée et présente les caractéristiques d'un code concis, d'une maintenance facile et d'un style unifié. 🎜🎜Définir le style de l'élément li🎜🎜Nous pouvons effectuer divers paramètres de mise en page et de style sur l'élément li, tels que la police, la taille de la police, la couleur, la hauteur de ligne, la couleur d'arrière-plan, la bordure, etc. Présentons-le en détail ci-dessous. 🎜🎜Police et taille de police🎜🎜La police et la taille de police sont des paramètres de style courants et peuvent être définies via les attributs font-family et font-size. 🎜rrreee🎜Color🎜🎜Vous pouvez utiliser l'attribut color pour définir la couleur, ou vous pouvez utiliser l'attribut background-color pour définir la couleur d'arrière-plan. 🎜rrreee🎜Hauteur de la ligne🎜🎜La hauteur de la ligne peut être définie à l'aide de l'attribut line-height. 🎜rrreee🎜Border🎜🎜La bordure peut être définie à l'aide de l'attribut border, qui inclut la largeur, le style et la couleur de la bordure. Vous pouvez également utiliser border-width, Propriétés border-style et border-color à définir. 🎜rrreee🎜Style de liste🎜🎜Les styles des listes ordonnées et des listes non ordonnées peuvent également être définis séparément. Par exemple, une liste non ordonnée peut utiliser l'attribut list-style-type pour définir des styles de balisage spécifiques. 🎜rrreee🎜Les listes ordonnées peuvent utiliser l'attribut list-style-type pour définir différents styles de nombres. 🎜rrreee🎜Résumé🎜🎜Grâce à l'introduction de cet article, nous avons appris à utiliser CSS pour définir le style des éléments li, notamment la police, la taille de la police, la couleur, la hauteur de ligne, la couleur d'arrière-plan, le style de bordure et de liste, etc., et également expliqué les paramètres de style CSS. Il existe trois manières : les styles en ligne, les styles internes et les styles externes. 🎜🎜Créer des styles uniques peut rendre votre site Web plus attrayant et personnalisé, mais vous devez également faire attention à la cohérence et à la compatibilité des styles. Dans le développement réel, nous devons utiliser les styles CSS de manière raisonnable en fonction des besoins de la page et des exigences du concepteur. 🎜

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!

css html border background ul li

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：Explication détaillée sur la façon de supprimer les bordures des tableaux CSSArticle suivant：Explication détaillée sur la façon de supprimer les bordures des tableaux CSS

Articles Liés

Voir plus