CSS+DIV-CSS的基本語法

2-1.html

< html >
< head >
< title >class選擇器 </title>
< style type ="text/css" >
<!--
.one{
  color:red;      /* 紅色 */
  font-size:18px;    /* 文字大小 */
}
.two{
  color:green;    /* 綠色 */
  font-size:20px;    /* 文字大小 */
}
.three{
  color:cyan;      /* 青色 */
  font-size:22px;    /* 文字大小 */
}
-->
</style>
     </head>

< body >
   < p class ="one" >class選擇器1 </p>
   < p class ="two" >class選擇器2 </p>
   < p class ="three" >class選擇器3 </p>
   < h3 class ="two" >h3一樣適用 </h3>
</body>
</html>

2-2.html

< html >
< head >
< title >class選擇器與標記選擇器 </title>
< style type ="text/css" >
<!--
p{            /* 標記選擇器 */
  color:blue;
  font-size:18px;
}
.special{        /* 類別選擇器 */
  color:red;      /* 紅色 */
  font-size:23px;    /* 文字大小 */
}

-->
</style>
     </head>

< body >
   < p >class選擇器與標記選擇器1 </p>
   < p >class選擇器與標記選擇器2 </p>
   < p >class選擇器與標記選擇器3 </p>
   < p class ="special" >class選擇器與標記選擇器4 </p>
   < p >class選擇器與標記選擇器5 </p>
   < p >class選擇器與標記選擇器6 </p>  
</body>
</html>

2-3.html

< html >
< head >
< title >標記選擇器.class </title>
< style type ="text/css" >
<!--
h3{            /* 標記選擇器 */
  color:blue;
  font-size:18px;
}
h3.special{        /* 標記.類別選擇器 */
  color:red;      /* 紅色 */
  font-size:23px;    /* 文字大小 */
}
.special{        /* 類別選擇器 */
  color:green;
}
-->
</style>
     </head>

< body >
   < h3 >標記選擇器.class1 </h3>
   < h3 >標記選擇器.class2 </h3>
   < h3 class ="special" >標記選擇器.class3 </h3>
   < h3 >標記選擇器.class4 </h3>
   < h3 >標記選擇器.class5 </h3>  
   < p class ="special" >使用於別的標記 </p>
</body>
</html>

2-4.html

< html >
< head >
< title >同時使用兩個class </title>
< style type ="text/css" >
<!--
.one{
  color:blue;    /* 顏色 */
}
.two{
  font-size:22px;  /* 字體大小 */
}
-->
</style>
     </head>

< body >
   < h4 >一種都不使用 </h4>
   < h4 class ="one" >同時使用兩種class，只使用第一種 </h4>
   < h4 class ="two" >同時使用兩種class，只使用第二種 </h4>
   < h4 class ="one two" >同時使用兩種class，同時使用 </h4>
   < h4 >一種都不使用 </h4>
</body>
</html>

2-5.html

< html >
< head >
< title >ID選擇器 </title>
< style type ="text/css" >
<!--
#one{
  font-weight:bold;    /* 粗體 */
}
#two{
  font-size:30px;      /* 字體大小 */
  color:#009900;      /* 顏色 */
}
-->
</style>
     </head>

< body >
   < p id ="one" >ID選擇器1 </p>
   < p id ="two" >ID選擇器2 </p>
   < p id ="two" >ID選擇器3 </p>
   < p id ="one two" >ID選擇器3 </p>
</body>
</html>

2-6.html

< html >
< head >
< title >集體聲明 </title>
< style type ="text/css" >
<!--
h1, h2, h3, h4, h5, p{      /* 集體聲明 */
  color:purple;        /* 文字顏色 */
  font-size:15px;        /* 字體大小 */
}
h2.special, .special, #one{    /* 集體聲明 */
  text-decoration:underline;  /* 下劃線 */
}
-->
</style>
     </head>

< body >
   < h1 >集體聲明h1 </h1>
   < h2 class ="special" >集體聲明h2 </h2>
   < h3 >集體聲明h3 </h3>
   < h4 >集體聲明h4 </h4>
   < h5 >集體聲明h5 </h5>
   < p >集體聲明p1 </p>
   < p class ="special" >集體聲明p2 </p>
   < p id ="one" >集體聲明p3 </p>
</body>
</html>

2-7.html

< html >
< head >
< title >全局聲明 </title>
< style type ="text/css" >
<!--
*{                /* 全局聲明 */
  color: purple;        /* 文字顏色 */
  font-size:15px;        /* 字體大小 */
}
h2.special, .special, #one{    /* 集體聲明 */
  text-decoration:underline;  /* 下劃線 */
}
-->
</style>
     </head>

< body >
   < h1 >全局聲明h1 </h1>
   < h2 class ="special" >全局聲明h2 </h2>
   < h3 >全局聲明h3 </h3>
   < h4 >全局聲明h4 </h4>
   < h5 >全局聲明h5 </h5>
   < p >全局聲明p1 </p>
   < p class ="special" >全局聲明p2 </p>
   < p id ="one" >全局聲明p3 </p>
</body>
</html>

2-8.html

< html >
< head >
< title >CSS選擇器的嵌套聲明 </title>
< style type ="text/css" >
<!--
p b{              /* 嵌套聲明 */
  color:maroon;        /* 顏色 */
  text-decoration:underline;  /* 下劃線 */
}
-->
</style>
     </head>

< body >
   < p >嵌套使 < b >用CSS </b>標記的方法 </p>
  嵌套以外的 < b >標記 </b>不生效
</body>
</html>

2-9.html

< html >
< head >
   < title >父子關係 </title>
   < base target ="_blank" >
< style >
<!--
h1{
  color:red;          /* 顏色 */
  text-decoration:underline;  /* 下劃線 */
}
h1 em{              /* 嵌套選擇器 */
  color:#004400;        /* 顏色 */
  font-size:40px;        /* 字體大小 */
}
-->
</style>
     </head>

< body >
   < h1 >祖國的首都 < em >北京 </em> </h1>
   < p >歡迎來到祖國的首都 < em >北京 </em>，這裏是全國 < strong >政治、 < a href ="economic.html" > < em >經濟 </em> </a>、文化 </strong>的中心 </p>
   < ul >
     < li >在這裏，你能夠：
       < ul >
         < li >感覺大天然的美麗 </li>
         < li >體驗生活的節奏 </li>
         < li >領略首都的激情與活力 </li>
       </ul>
     </li>
     < li >你還能夠：
       < ol >
         < li >去八達嶺爬長城 </li>
         < li >去香山看紅葉 </li>
         < li >去王府井逛夜市 </li>
       </ol>
     </li>
   </ul>
   < p >若是您有任何問題，歡迎 < a href ="contactus" >聯繫咱們 </a> </p>
</body>
</html>

2-10.html

< html >
< head >
   < title >父子關係 </title>
< style >
<!--
.li1{
  color:red;
}
.li2{
  color:blue;
}
.li1 ol li{            /* 利用CSS繼承關係 */
  font-weight:bold;      /* 粗體 */
  text-decoration:underline;  /* 下劃線 */
}
-->
</style>
     </head>

< body >
   < ul >
     < li class ="li1" >關係1
       < ul >
         < li >頁面父子關係複雜時 </li>
         < li >頁面父子關係複雜時 </li>
         < li >這裏省略20個嵌套... </li>
       </ul>
       < ol >
         < li >頁面父子關係複雜時 </li>
         < li >頁面父子關係複雜時 </li>
         < li >這裏省略20個嵌套... </li>
       </ol>
     </li>
     < li class ="li2" >關係2
       < ul >
         < li >頁面父子關係複雜時 </li>
         < li >頁面父子關係複雜時 </li>
         < li >這裏省略20個嵌套... </li>
       </ul>
       < ol >
         < li >頁面父子關係複雜時 </li>
         < li >頁面父子關係複雜時 </li>
         < li >這裏省略20個嵌套... </li>
       </ol>
     </li>
   </ul>
</body>
</html>

來源：《精通CSS+DIV網頁樣式與佈局 》