DW小常识
一、CSS的语法结构
在将CSS应用到网页中，首先要做的就是选择合适的对象。这些对象可以是标签（如body、h1等）、类选择器、伪类选择器、特定的ID选择符（如#main表示<div id=”mian”>，即一个名称为main的ID对象）。
1．标签选择器
标签选择器是直接将HTML标签作为选择器，用来定义这些标签采用的CSS样式，其语法如图所示例如，p选择器就是用于声明页面中所有<p>标签的样式风格。例如下面这段代码：
CSS代码：
p{
color:red;
font-size:18px;
}
以上代码声明了HTML页面中所有的<p>标签,文字的颜都采用红，大小都是18px。如果希望所有的<p>标签不再采用红，而是蓝，这时仅仅需要将属性color的值修改为blue，
在将CSS应用到网页中，首先要做的就是选择合适的对象。这些对象可以是标签（如body、h1等）、类选择器、伪类选择器、特定的ID选择符（如#main表示<div id=”mian”>，即一个名称为main的ID对象）。
1．标签选择器
标签选择器是直接将HTML标签作为选择器，用来定义这些标签采用的CSS样式，其语法如图所示例如，p选择器就是用于声明页面中所有<p>标签的样式风格。例如下面这段代码：
CSS代码：
p{
color:red;
font-size:18px;
}
以上代码声明了HTML页面中所有的<p>标签,文字的颜都采用红，大小都是18px。如果希望所有的<p>标签不再采用红，而是蓝，这时仅仅需要将属性color的值修改为blue，
即可全部生效。
2．类选择器
使用标签选择器，可以让页面中所有的相应标签都会相应的产生变化。例如当声明了p标签样式时，页面中所有的<p>标签都将显示为红。如果希望其中的某一个<p>标签显示时蓝，这时仅靠标签选择器时不够的，还需要引入类选择器。它可以将同一类型HTML标签定义出不同样式，例如：
CSS代码：
.red{
color:red;
font-size:18px;
}
.green{
color:green;
font-size:16px;
}
2．类选择器
使用标签选择器，可以让页面中所有的相应标签都会相应的产生变化。例如当声明了p标签样式时，页面中所有的<p>标签都将显示为红。如果希望其中的某一个<p>标签显示时蓝，这时仅靠标签选择器时不够的，还需要引入类选择器。它可以将同一类型HTML标签定义出不同样式，例如：
CSS代码：
.red{
color:red;
font-size:18px;
}
.green{
color:green;
font-size:16px;
}
HTML代码：
<p class="red">类选择器1</p>
<p class="green">类选择器2</p>
</body>
其显示效果如图所示，可以看到2个<p>标签分别呈现出不同的颜和字体大小。
3．ID选择符ID选择器和类选择器的使用方法基本相同，不同之处在于ID选择器只能在页面中使用一次，因此其针对性更强。在HTML标签中只需要利用id属性，就可以直接调用CSS中的ID选择器。例如：
CSS代码：
#red { /* ID选择符*/
font-size: 18px; /* 字体大小*/
color: red; /*文本颜*/
}
#green { /* ID选择符*/
font-size: 16px; /* 字体大小*/
<p class="red">类选择器1</p>
<p class="green">类选择器2</p>
</body>
其显示效果如图所示，可以看到2个<p>标签分别呈现出不同的颜和字体大小。
3．ID选择符ID选择器和类选择器的使用方法基本相同，不同之处在于ID选择器只能在页面中使用一次，因此其针对性更强。在HTML标签中只需要利用id属性，就可以直接调用CSS中的ID选择器。例如：
CSS代码：
#red { /* ID选择符*/
font-size: 18px; /* 字体大小*/
color: red; /*文本颜*/
}
#green { /* ID选择符*/
font-size: 16px; /* 字体大小*/
color: green; /*文本颜*/
}
HTML代码：
<p id="red">ID选择器1</p>
<p id="green">ID选择器2</p>
显示效果如图6-2所示，可以看到2行文字分别以所对应的ID选择器样式来显示。
4．复合选择器
上面3种是基本选择器，通过组合，还可以生成更多类型的选择器，实现更强、更方便的选择功能。复合选择器就是由两个或以上的基本选择器通过不同的连接方式构成。
（1）交集选择器
交集选择器是由两个选择器直接连接构成的，其结合的结果是选中二者各自元素范围的交集。但是要注意：第一个选集器必须是标签选择器，第二个选择器必须是类别选择器或者是ID选择器，且这两个选择器之间不能有空格，必须连续书写。例如：
CSS代码：
p{ /*标签选择器*/
}
HTML代码：
<p id="red">ID选择器1</p>
<p id="green">ID选择器2</p>
显示效果如图6-2所示，可以看到2行文字分别以所对应的ID选择器样式来显示。
4．复合选择器
上面3种是基本选择器，通过组合，还可以生成更多类型的选择器，实现更强、更方便的选择功能。复合选择器就是由两个或以上的基本选择器通过不同的连接方式构成。
（1）交集选择器
交集选择器是由两个选择器直接连接构成的，其结合的结果是选中二者各自元素范围的交集。但是要注意：第一个选集器必须是标签选择器，第二个选择器必须是类别选择器或者是ID选择器，且这两个选择器之间不能有空格，必须连续书写。例如：
CSS代码：
p{ /*标签选择器*/
color:red;
}
p.special{ /*标签﹒类别选择器*/
color:blue;
}
.special{ /*﹒类别选择器*/
color:green;
}
HTML代码：
<p>普通段落文本（红） </p>
<p class="special">指定了.special 类别的段落文本（蓝）</p>
<h4 class="special">指定了.special 类别的标题文本（绿）</h4>
在上面的例子中<p>和<h4>都为标签选择器，.special为类别选择器，此外还定义了p.special，用于特殊控制，这个样式仅仅适用于<p class="special">标签，而不会影响使用了.special的其他标签，因此<h4>效果将不受此影响，显示的效果是h4和spcial的结合，也
}
p.special{ /*标签﹒类别选择器*/
color:blue;
}
.special{ /*﹒类别选择器*/
color:green;
}
HTML代码：
<p>普通段落文本（红） </p>
<p class="special">指定了.special 类别的段落文本（蓝）</p>
<h4 class="special">指定了.special 类别的标题文本（绿）</h4>
在上面的例子中<p>和<h4>都为标签选择器，.special为类别选择器，此外还定义了p.special，用于特殊控制，这个样式仅仅适用于<p class="special">标签，而不会影响使用了.special的其他标签，因此<h4>效果将不受此影响，显示的效果是h4和spcial的结合，也
就是绿加粗，显示效果如图所示。
（2）并集选择器
与交集选择器相对应的还有一种并集选择器，它的结果是同时选中各个基本选择器所选择的范围。与交集选择器不同的是，它可以是任何形式的选择器（包括标签选择器、类别选择器、ID选择器）都可以作为并集选择器的一部分，并集选择器是多个选择器通过逗号连接而成的。在声明各种css选择器时，如果某些选择器的风格完合相同或是部分相同，这时就可以利用并集选择器同时声明风格相同的css选择器。例如：
CSS代码：
h1, h2, h3, h4, h5 { /*并集选择器*/
color: blue; /*文本颜*/
}
HTML代码：
<h1>示例文本h1</h1>
<h2>示例文本h2</h2>
<h3>示例文本h3</h3>
（2）并集选择器
与交集选择器相对应的还有一种并集选择器，它的结果是同时选中各个基本选择器所选择的范围。与交集选择器不同的是，它可以是任何形式的选择器（包括标签选择器、类别选择器、ID选择器）都可以作为并集选择器的一部分，并集选择器是多个选择器通过逗号连接而成的。在声明各种css选择器时，如果某些选择器的风格完合相同或是部分相同，这时就可以利用并集选择器同时声明风格相同的css选择器。例如：
CSS代码：
h1, h2, h3, h4, h5 { /*并集选择器*/
color: blue; /*文本颜*/
}
HTML代码：
<h1>示例文本h1</h1>
<h2>示例文本h2</h2>
<h3>示例文本h3</h3>
<h4>示例文本h4</h4>
<h5>示例文本h5</h5>
显示效果如图所示，通过并集选择器同时对h1, h2, h3, h4, h5这五个标签声明相同的样式，所有的标题文本均显示蓝。
（3）后代选择器
在CSS选择器中，还可以通过嵌套的方式对特殊位置的标签进行声明，当标签发生嵌套时，内层的标签就成为外层标签的后代。如：<p>这是外层的文本1<span>这是内层的文本</span>外层的文本2</p>，外层是<p>标签，内层是<span>标签，即<span>为<p>标签的后代。
后代选择器可以是各种选择器（标签选择器、类别选择器、ID选择器）进行嵌套。后代选择器的写法就是把外层的标签写在前面，内层的标签写在后面，之间用空格分隔。例如：
CSS代码：
p span { /*后代选择器*/
color: red; /*文本颜*/
text-decoration: underline; /*下划线*/
<h5>示例文本h5</h5>
显示效果如图所示，通过并集选择器同时对h1, h2, h3, h4, h5这五个标签声明相同的样式，所有的标题文本均显示蓝。
（3）后代选择器
在CSS选择器中，还可以通过嵌套的方式对特殊位置的标签进行声明，当标签发生嵌套时，内层的标签就成为外层标签的后代。如：<p>这是外层的文本1<span>这是内层的文本</span>外层的文本2</p>，外层是<p>标签，内层是<span>标签，即<span>为<p>标签的后代。
后代选择器可以是各种选择器（标签选择器、类别选择器、ID选择器）进行嵌套。后代选择器的写法就是把外层的标签写在前面，内层的标签写在后面，之间用空格分隔。例如：
CSS代码：
p span { /*后代选择器*/
color: red; /*文本颜*/
text-decoration: underline; /*下划线*/
}
span {
color: blue; /*文本颜*/
}
HTML代码：
<p>嵌套<span>使用css标签（红下划线）</span>的方法</p>
<span>嵌套之外的标签不生效（蓝）</span>
通过将<span>选择器嵌套在<p>选择器中进行声明，该效果只适用于<p>和</p>之间的<span>标签，，而对于其外的<span>标签并不产生任何效果，如图所示。
需要注意的是，后代选择器产生的影响不仅限于元素的“直接后代”，而且会影响到它的“各级后代”。例如，在上面的例子中我们追加HTML代码如下：<p>这是最外层文<span>本这是中间层文本网页设计html代码大全继承关系<b>这是最里层文本</b></span></p>，如CSS设置如下：
p b {
color: green;
}
span {
color: blue; /*文本颜*/
}
HTML代码：
<p>嵌套<span>使用css标签（红下划线）</span>的方法</p>
<span>嵌套之外的标签不生效（蓝）</span>
通过将<span>选择器嵌套在<p>选择器中进行声明，该效果只适用于<p>和</p>之间的<span>标签，，而对于其外的<span>标签并不产生任何效果，如图所示。
需要注意的是，后代选择器产生的影响不仅限于元素的“直接后代”，而且会影响到它的“各级后代”。例如，在上面的例子中我们追加HTML代码如下：<p>这是最外层文<span>本这是中间层文本网页设计html代码大全继承关系<b>这是最里层文本</b></span></p>，如CSS设置如下：
p b {
color: green;
}
如图所示，最里层的文本显示为绿，说明里面的<b>标签被p b选择器选中了，这是因为<b>标签是</p>标签的“孙子元素”。
二、CSS继承特性
1． 继承性的运用
CSS的一个主要特征就是继承，它是依靠于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如对<BODY>标签声明的颜值也会应用到段落的文本中。下面举例说明：
CSS代码：
body{ /*标签选择器*/
color:purple; /*文本颜*/
}
HTML代码：
<p>CSS的<strong>层叠和继承</strong>深入探讨</p>
“CSS的层叠和继承深入探讨”这段话以紫颜显示，因为<p>和<strong>都是<body>的子
二、CSS继承特性
1． 继承性的运用
CSS的一个主要特征就是继承，它是依靠于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如对<BODY>标签声明的颜值也会应用到段落的文本中。下面举例说明：
CSS代码：
body{ /*标签选择器*/
color:purple; /*文本颜*/
}
HTML代码：
<p>CSS的<strong>层叠和继承</strong>深入探讨</p>
“CSS的层叠和继承深入探讨”这段话以紫颜显示，因为<p>和<strong>都是<body>的子
标签，它们会继承父标签的样式风格。
2． 继承的局限性
在CSS中，继承是一种非常自然的行为，我们甚至不需要考虑是否能够这样去做，但是继承也有其局限性。并不是所有的属性都会自动传给子元素，即有的属性不会自动继承父元素的属性值。上面举的文本颜color属性，子对象会继承父对象的文本颜属性，但是如果给某个元素设置了边框，它的子元素就不会自动加上一个边框，因为边框属性是非自动继承的。
实际上，在CSS的规范中，每种CSS属性都有一个默认的属性值，有些属性的默认值是“继承”（inherit），这些属性就会自动继承父元素的属性值了。而另外的属性的默认属性值不是“继承”（inherit），比如边框宽度的默认属性值为0，因此边框宽度属性就不具有自动的继承性，除非人为指定为继承。多数边框类属性，比如象Padding（补白），Margin（边界），背景和边框的属性都是不能继承的。
3． 继承中的问题
有时候继承也会带来些错误，比如说下面这条CSS定义：
body{
2． 继承的局限性
在CSS中，继承是一种非常自然的行为，我们甚至不需要考虑是否能够这样去做，但是继承也有其局限性。并不是所有的属性都会自动传给子元素，即有的属性不会自动继承父元素的属性值。上面举的文本颜color属性，子对象会继承父对象的文本颜属性，但是如果给某个元素设置了边框，它的子元素就不会自动加上一个边框，因为边框属性是非自动继承的。
实际上，在CSS的规范中，每种CSS属性都有一个默认的属性值，有些属性的默认值是“继承”（inherit），这些属性就会自动继承父元素的属性值了。而另外的属性的默认属性值不是“继承”（inherit），比如边框宽度的默认属性值为0，因此边框宽度属性就不具有自动的继承性，除非人为指定为继承。多数边框类属性，比如象Padding（补白），Margin（边界），背景和边框的属性都是不能继承的。
3． 继承中的问题
有时候继承也会带来些错误，比如说下面这条CSS定义：
body{
color:blue;
}
根据 CSS继承规则，子元素从父元素继承属性。根据上面这条规则，站点的 body 元素中的文本以蓝显示。子元素继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p， td， ul，ol， li等），所有的body 的子元素都应该以蓝显示文本，子元素的子元素也一样。
但在有些浏览器中这句定义会使除表格之外的文本变成蓝。从技术上来说，这是不正确的，但是它确实存在。所以我们经常需要借助于某些技巧，比如将CSS定义成如下样式，就可以使表格内的文本也变成蓝。
body,table,th,td{
color:blue
}
4． 多重样式混合应用中的冲突
既然有了继承性，那么在CSS的应用上可能会存在多个样式同时应用到一个对象上的情形。例如：
}
根据 CSS继承规则，子元素从父元素继承属性。根据上面这条规则，站点的 body 元素中的文本以蓝显示。子元素继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p， td， ul，ol， li等），所有的body 的子元素都应该以蓝显示文本，子元素的子元素也一样。
但在有些浏览器中这句定义会使除表格之外的文本变成蓝。从技术上来说，这是不正确的，但是它确实存在。所以我们经常需要借助于某些技巧，比如将CSS定义成如下样式，就可以使表格内的文本也变成蓝。
body,table,th,td{
color:blue
}
4． 多重样式混合应用中的冲突
既然有了继承性，那么在CSS的应用上可能会存在多个样式同时应用到一个对象上的情形。例如：
CSS代码：
p {
p {
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论