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

CSSでの順序なしリストと順序付きリストのフォーマット

順序付けされていないリストと順序付けられたリストのスタイルと位置は、CSSプロパティでlist-style-type、list-style-image、list-style-positionを使用してフォーマットできます。

構文

CSSリストスタイルプロパティの構文は次のとおりです-

Selector {
   list-style: /*value*/
}

例

次の例は、CSSリストスタイルのプロパティ-

を示しています。

次の例のスタイルの順序付きリスト-

<!DOCTYPE html>
<html>
<head>
<style>
ol {
   list-style: upper-roman;
   line-height: 150%;
}
</style>
</head>
<body>
<h2>Latest C# Versions</h2>
<ol>
<li>C# 8.0</li>
<li>C# 7.3</li>
<li>C# 7.2</li>
<li>C# 7.1</li>
<li>C# 7.0</li>
</ol>
</body>
</html>

出力

これにより、次の出力が得られます-

CSSでの順序なしリストと順序付きリストのフォーマット

例

次の例では、順序付けされていないリストのスタイルを設定します-

<!DOCTYPE html>
<html>
<head>
<style>
ul > ul{
   list-style: circle inside;
}
li:last-child {
   list-style-type: square;
}
</style>
</head>
<body>
<h2>Programming Languages</h2>
<ul>
<li>C++ programming language created by Bjarne Stroustrup as an extension of the C programming language.</li>
<li>Java programming language developed by James Gosling.</li>
<ul>
<li>Core Java</li>
<li>Advanced Java</li>
</ul>
<li>Scala is a modern multi-paradigm programming language designed to express common programming patterns in a concise, elegant, and type-safe way.</li>
</ul>
</body>
</html>

出力

これにより、次の出力が得られます-

CSSでの順序なしリストと順序付きリストのフォーマット


  1. CSSを使用してレスポンシブ価格表を作成するにはどうすればよいですか？

    CSSを使用してレスポンシブ価格表を作成するには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style>    * {       box-sizing: border-box;    }    body { &n

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

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