精通CSS.DIV网页样式与布局_第二章
<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 name="code"><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 name="code"><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 name="code"><html><head><title>同时使用两个class</title><style type="text/css"><!--.one{color:blue;/* 颜色 */}.two{font-size:22px;/* 字体大小 */}--></style> </head><body><h4>一种都不使用</h4><h4 name="code"><html><head><title>ID选择器</title><style type="text/css"><!--#one{font-weight:bold;/* 粗体 */}#two{font-size:30px;/* 字体大小 */color:#009900;/* 颜色 */}--></style> </head><body> <!-- id标记与class标记区别: id不能用于两个标签 ,因为JS使用的时候不允许 声明的时候:.与# 引用的时候:class与id --><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><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 name="code"><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 name="code"><html><head><title>CSS选择器的嵌套声明</title><style type="text/css"><!-- /*p标签里的b标签用上样式*/p b{/* 嵌套声明 */color:maroon;/* 颜色 */text-decoration:underline;/* 下划线 */}--></style> </head><body><p>嵌套使<b>用CSS</b>标记的方法</p>嵌套之外的<b>标记</b>不生效</body></html><html><head><title>父子关系</title><base target="_blank"><style><!-- /**h1 标签下的em 用自己特有的*/h1{color:red;/* 颜色 */text-decoration:underline;/* 下划线 */}h1 em{/* 嵌套选择器 */color:#004400;/* 颜色 */font-size:80px;/* 字体大小 */}--></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><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>