ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS リストのスタイルとは何ですか? CSSでリストのスタイルを設定する方法

CSS リストのスタイルとは何ですか? CSSでリストのスタイルを設定する方法

不言オリジナル: 2018-08-18 14:05:344300ブラウズ

リストの CSS スタイルと CSS リストスタイルの設定方法とは何ですか?次の記事ではCSSリストスタイルについて紹介します。

1. CSS 順序付きリスト (ol) と CSS 順序なしリスト (ul)
list.html

<!doctype html><html><head>
    <meta charset="utf-8">
    <title>列表样式</title>
    <link href="box.css" type="text/css" rel="stylesheet"></head><body>
   <p>
        <ul>
            <li>水果              <ol>
                <li>苹果</li>
                <li>香蕉</li>
                <li>梨子</li>
              </ol>
            </li>
        </ul>
    </p></body></html>

2. CSS リストラベルスタイル list-style-type
属性値:
円; 中空の円
ディスク; 塗りつぶされた円
小数; 数値
list.css

 ul>li{
     list-style-type:circle;
     }
ul>li>ol>li{
    list-style-type:disc;
    }

3. CSSラベルスタイルlist-style-positionの表示方法
属性値：outside（テキストの外側、デフォルト）
内部 (テキスト付き)
list.css

ul{
    text-align: center;    
    list-style-position:outside;
    }
ul>li{
    list-style-type:circle;
    }
ul>li>ol>li{
    list-style-type:disc;
    }

CSS リストのスタイルとは何ですか? CSSでリストのスタイルを設定する方法

関連記事