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网页样式与布局 》