CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSを使用したリストのスタイリング

リストも順序付けされていません。 CSSを使用すると、セットリストアイテムのマーカーまたはマーカーの画像を設定できます。これにより、CSSを使用して、リストアイテムマーカーの位置を設定することもできます。

いくつかの例を見てみましょう-

list-style-type

list-style-typeは、リストアイテムマーカーのタイプを設定するために使用されます。

例

順序付きリストをフォーマットする例を見てみましょう（ol）-

<!DOCTYPE html>
<html>
<head>
<style>
ul {
   list-style-type: upper-roman;
}
</style>
</head>
<body>
<h2>Teams</h2>
<ul>
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ul>
</body>
</html>

出力

CSSを使用したリストのスタイリング

list-style-image

list-style-imageプロパティは、画像をリストアイテムマーカーとして設定するために使用されます。

例

例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
ul.demo1 {
   list-style-image: url('https://www.tutorialspoint.com/images/Swift.png');
}
ol.demo2 {
   list-style-image: url('https://www.tutorialspoint.com/images/Swift.png');
}
</style>
</head>
<body>
<h2>Teams</h2>
<ul class="demo1">
<li>India - Qualified for WordCup</li>
<li>Australia - Qualified for WordCup</li>
<li>England - Qualified for WordCup</li>
</ul>
<h2>Players</h2>
<ol class="demo2">
<li>Virat Kohli</li>
<li>David Warner</li>
<li>Steve Smith</li>
</ol>
</body>
</html>

出力

CSSを使用したリストのスタイリング

list-style-position

list-style-positionプロパティは、リストアイテムマーカーの位置を設定するために使用されます。

例

例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
ul.demo1 {
   list-style-position: outside;
}
ul.demo2 {
   list-style-position: inside;
}
</style>
</head>
<body>
<h1>Teams</h1>
<h2>ODI Teams</h2>
<ul class="demo1">
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ul>
<h2>Test Teams</h2>
<ul class="demo2">
<ul>
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ul>
</ul>
</body>
</html>

出力

CSSを使用したリストのスタイリング


  1. ::markerCSSSelectorを使用してリストの箇条書きの色を変更する

    構文 CSS::マーカーセレクターの構文は次のとおりです- Selector::marker {    attribute: /*value*/; } 例 次の例は、CSS::マーカーセレクターを示しています。 <!DOCTYPE html> <html>    <head>       <style>          ul {             list-

  2. CSSを使用したFirst-Lettersのスタイリング::first-letter

    CSSは、::first-letter疑似要素を使用して要素の最初の文字のスタイルを設定するのに役立ちます。句読点、有向グラフ、およびコンテンツプロパティによって、最初の文字が変更される可能性があることに注意してください。 次の例は、CSS::first-letter疑似要素を示しています。 例 <!DOCTYPE html> <html> <head> <style> body {    text-align: center; } ::first-letter {    font-size: 3em;