DIV+CSS(一) 4种样式表 和 6种 样式 规则 选择器
1. <div> 中可以嵌套任何标签
2. <div> 中可以嵌套 <p> 标签，但反之，
不应该在 <p> 标签中 嵌套 <div> 标签，
因为结果是不确定的。
3. 层叠样式表（Cascading Style Sheet）
4. 样式表的分类有 4 种
内联式样式表
嵌入式样式表
外部样式表
输入样式表
内联式样式表 的例子：
嵌入式样式表 的例子：
外部样式表 的例子：
假定在 style 文件夹下有 test.css 和 demo.css 文件,
输入样式表的 例子(一)：
则 test.css 的内容 类似于下面：
输入样式表的 例子(二)：
5. 样式规则的 选择器
html selector
class selector
id selector
关联 选择器
组合 选择器
伪元素 选择器
html selector 的例子
class selector 的例子
或
id selector 的例子
关联选择器的 例子
组合选择器 的例子
伪元素选择器 的例子
稍作变化
2. <div> 中可以嵌套 <p> 标签，但反之，
不应该在 <p> 标签中 嵌套 <div> 标签，
因为结果是不确定的。
3. 层叠样式表（Cascading Style Sheet）
4. 样式表的分类有 4 种
内联式样式表
嵌入式样式表
外部样式表
输入样式表
内联式样式表 的例子：
<p style="font-size:3cm; color:rend; background-color:green">aaaaaa</p>
嵌入式样式表 的例子：
<html>
<title></title>
<style type="text/css">
<!--
p { font-size:3cm;
color:red;
background-color:green;
text-decoration:underline
}
//-->
</style>
<html>
外部样式表 的例子：
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style/test.css">
</head>
<body>
<p>aaaaaaaaaaaaaa</p>
<p>bbbbbbbbbbbbbb</p>
<p>cccccccccccccc</p>
</body>
</html>
假定在 style 文件夹下有 test.css 和 demo.css 文件,
输入样式表的 例子(一)：
则 test.css 的内容 类似于下面：
p { font-size:3cm;
color:red;
background-color:green;
text-decoration:underline
}
@import url(demo.css);
输入样式表的 例子(二)：
<html>
<head>
<title></title>
<style>
<!--
@import url(style/test.css);
//-->
</style>
</head>
</html>
5. 样式规则的 选择器
html selector
class selector
id selector
关联 选择器
组合 选择器
伪元素 选择器
html selector 的例子
p {font-size:15px; color:yellow}
class selector 的例子
.aaa {font-size:15px; color:yellow}
或
p.aaa {font-size:15px; color:yellow}
id selector 的例子
#aaa {font-size:15px; color:yellow}
关联选择器的 例子
p em {font-size:15px; color:yellow}
组合选择器 的例子
p, div, .aaa, #bbb {font-size:15px; color:yellow}
伪元素选择器 的例子
a:link {font-size:1cm; color:red}
a:hover {font-size:5cm; color:green}
a:visited {font-size:2cm; color:yellow}
稍作变化
a.one:link {font-size:1cm; color:red}
a.two:hover {font-size:5cm; color:green}
a.three:visited {font-size:2cm; color:yellow}