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

CSSを使用したリストスタイルタイプの設定

CSSでリストスタイルタイプを設定するには、CSSでlist-style-typeプロパティを使用します。

例

順序付けされていないリストのリストスタイルタイプを設定している例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
ul {
   list-style-type: square;
}
</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を使用したリストスタイルタイプの設定

例

順序付きリストのリストスタイルタイプを設定している例を見てみましょう（ol）-

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

出力

CSSを使用したリストスタイルタイプの設定


  1. CSSの一般的な兄弟セレクター

    CSSの一般的な兄弟セレクターは、最初の要素に続くすべての要素を選択して、両方が同じ親の子になるようにするために使用されます。 構文 CSSの一般的な兄弟セレクターの構文は次のとおりです element ~ element {    /*declarations*/ } 次の例は、CSSの一般的な兄弟セレクター-を示しています。 例 <!DOCTYPE html> <html> <head> <style> * {    float: left;    padding-left: 1

  2. 基本リストをCSSでリストグループに変換するにはどうすればよいですか？

    基本リストをCSSで「リストグループ」に変換するためのコードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana