第7章 CSS构造块

7.1 构造样式规则

样式表中的每条规则都有两个主要部分：
- 选择器：选择元素
- 声明块：指定元素的样式
  - 声明块由一个或多个属性-指对组成，每个属性-值对构成一个声明

h1 {
    color:red;
}
<!-- h1部分为选择器 -->
<!-- 花括号包围起来的部分时声明块 -->
<!-- color:red;构成一个声明 -->

7.2 为样式规则添加注释

/*
输入注释
*/

7.3 理解继承

<body>
<div>
    <h1>The Ephemeral Blue Flax</h1>

    <img src="img/blueflax.jpg" width="300" height="175" alt="Blue Flax (Linum lewisii)" />

    <p>I am continually <em>amazed</em> at the beautiful, delicate Blue Flax that somehow took hold in my garden.They are awash in color every morning, yet not a single flower remains by the afternoon. They are the very definition of ephemeral.</p>

    <p><small>&copy; Blue Flax Society. </small></p>
</div>
</body>

浏览器会把上面的这份HTML理解为下面的文档树：

graph TD
A(bdoy)-->B(div)
B-->C(h1)
B-->D(img)
B-->E(p)
B-->F(p)
E-->H(em)
F-->I(smal)

下层元素会继承上层元素的可继承属性

对大多数属性来说，还可以使用inherit值强制进行继承

哪些属性会被继承?
- 文本
  - color（颜色，a元素除外）
  - direction（方向）
  - font（字体）
  - font-family（字体系列）
  - font-size（字体大小）
  - font-style（用于设置斜体）
  - font-variant（用于设置小型大写字母）
  - font-weight（用于设置粗体）
  - letter-spacing（字母间距）
  - line-height（行高）
  - text-align（用于设置对齐方式）
  - text-indent（用于设置首行缩进）
  - text-transform（用于修改大小写）
  - visibility（可见性）
  - white-space（用于指定如何处理空格）
  - word-spacing（字间距）
- 列表
  - list-style（列表样式）
  - list-style-image（用于为列表指定定制的标记）
  - list-style-position（用于确定列表标记的位置）
  - list-style-type（用于设置列表的标记）
- 表格
  - border-collapse（用于控制表格相邻单元格的边框是否合并为单一边框）
  - border-spacing（用于指定表格边框之间的空隙大小）
  - caption-side（用于设置表格标题的位置）
  - empty-cells（用于设置是否显示表格中的空单元格）
- 页面设置（对于印刷物）
  - orphans（用于设置当元素内部发生分页时在页面底部需要保留的最少行数）
  - page-break-inside（用于设置元素内部的分页方式）
  - widows（用于设置当元素内部发生分页时在页面顶部需要保留的最少行数）
- 其他
- cursor（鼠标指针）
- quotes（用于指定引号样式）

7.4 层叠：当规则发生冲突时

一般规则：

1.同一元素声明属性相同时，后一条声明会覆盖前一条声明

.example{
    color:magenta;
    
}
.example{
    color:green;
    /*会覆盖上一条声明*/
}

2.同一元素声明属性不相同时，两条声明会结合起来

.example{
    color:bule;
}
.example{
    font-size:.875em;
}

特殊规则：
1.特殊性：选择器指定的元素越特殊，应用程度越高

选择器	对应的HTML
`p { ... }`	`<p>...</p>`
`.someClass { ... }`	`<p class="someClass">...</p>`
`.someClass.someOtherClass { ... }`	`<p id="someID">...</p>`

id选择器最特殊
除了浏览器默认样式外，继承的样式是最一般的，可以被任何其他规则覆盖

建议在样式表中多使用类选择器，避免使用ID选择器。使用ID选择器通常会矫枉过正，降低了灵活性。

2.顺序：晚出现的优先级高

例如，直接应用在HTML元素上的规则被认为比外部样式表中或插在HTML文档顶部的特殊性相同的规则出现得更晚，因此优先级更高

3.重要性

在某条声明的末尾加入!important;，可以使该声明优先级最高

特殊情况下使用，否则不推荐使用这种方法

<head>
	<title>Important</title>
	<style type="text/css">
		.example{
			color: red !important;
		}
		.example{
			color: green;
		}
	</style>
</head>
<body>
	<p class="example">Hello World!</p>
</body>
<!--p中的文本会显示为红色-->

7.5 属性的值

每个CSS属性对于它可以接受哪些值都有不同的规定。有的属性只能接受预定义的值。有的属性接受数字、整数、相对值、百分数、URL或者颜色。有的属性可以接受多种类型的值。

inherit：强制继承父元素的属性的值，如p{border:inherit;}
预定义的值：CSS属性中可供使用的预定义值
长度和百分数
纯数字
URL：如background:url(bg-pattern.png);
CSS颜色
RGB：通过指定红绿蓝的量来构建自己的颜色，比如color:rgb(89,0,127)(三个值的范围都是[0,255])
十六进制
CSS3提供的更多的指定颜色的方式：
1. RGBA：RGBA是在RGB的基础上加了一个代表alpha透明度的A，比如background:rgba(89,0,127,1);(A的值的范围为[0,1])
2. HSL：色相(hue)、饱和度(saturation)和亮度(lightness),色相取值为[0,360],饱和度和亮度的取值是百分数，范围为[0,100%],比如color:hsl(282,100%,25%);
3. HSLA：类似于RGB和RGBA，用法如color:hsla(95,100%,28%,4);

Cap220590

发布了25 篇原创文章 · 获赞 5 · 访问量 4581

私信关注

《HTML5与CSS3基础教程》第七章学习笔记 CSS构造块

文章目录