CSS は、Web デザインで最も一般的に使用されるスタイル言語の 1 つであり、Web サイトのコードを記述するには、CSS に習熟することが非常に重要です。
Web デザインでは、情報を表示するためにリストを使用することがよくあります。ul 要素と li 要素は、順序なしリストと順序付きリストを作成するために使用されるタグです。リストを作成する際にはスタイルの設定も重要ですので、li要素のスタイルの設定方法を学びましょう。
CSS スタイル形式は、主にインライン スタイル、内部スタイル、外部スタイルの 3 種類に分類されます。
インラインスタイルとは、HTMLタグのstyle属性にCSSスタイルを追加することです。例:
<ul> <li style="color: red;">列表项1</li> <li style="color: blue;">列表项2</li> <li style="color: green;">列表项3</li> </ul>
このようなコードは li 要素のスタイルを直接設定できますが、実際の開発ではほとんど使用されず、コードのメンテナンスやスタイルの再利用には役立ちません。
内部スタイルは、先頭の <head> タグに <style> タグを追加することです。 HTML ファイルを作成し、それにスタイル コードを追加します。例:
<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 要素でさまざまなレイアウトとスタイルの設定を実行できます。 . 以下で詳しく紹介していきます。
フォントとフォント サイズは一般的なスタイル設定であり、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; /* 小写罗马数字 */
}この記事の導入部を通じて、CSS を使用してフォント、フォント サイズ、色、行の高さ、背景色などの li 要素のスタイルを設定する方法を学びました。ボーダーやリストスタイルなど、CSSのスタイルを設定する3つの方法（インラインスタイル、内部スタイル、外部スタイル）についても説明しています。
独自のスタイルを作成すると、Web サイトがより魅力的でパーソナライズされたものになりますが、スタイルの一貫性と互換性にも注意を払う必要があります。実際の開発では、ページのニーズやデザイナーの要件に応じて CSS スタイルを合理的に使用する必要があります。
以上がcssでli要素のスタイルを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
