0%

CSS 基础知识

上文总结了HTML的基础知识,今天来学习一下CSS的基础知识。 《HTML5与CSS3基础教程(第8版)》 基础知识总结。

CSS 构造块

语法规则:

1
2
3
h1 {
color: red;
}

注释

/* ... */

理解继承与冲突

继承可以简化样式表,对于多数属性,可以使用 inherit 强制进行继承。

当发生冲突时,应考虑特殊性,顺序,和重要性来判断哪个规格应该起作用。

属性值

每个 CSS 属性可以接受那些值都有不同的规定,有的接受预定义的值,有的接受数字,整数,百分数,URL,颜色,相对值。

样式表

创建外部样式表

将代码写入CSS文件,文件的扩展名为 css。

创建嵌入式样式表

style 元素包围的样式规则,通常位于 head 部分。

内联样式表

内联样式是在 HTML 中应用 CSS 的第三种方式。不过,应当最后考虑这种方式,因为它将内容(HTML)和表现(CSS)混在了一起,严重地违背了最佳实践。

媒体相关的样式表

可以指定一个只用于特定输出的样式表, 如只用于打印,或只用于在浏览器中查看屏幕。例如,可以创建一个具有打印和屏幕版 本共有特征的通用样式表,再创建单独的打印样式表和屏幕样式表,分别包含只用于打印的属性和只用于屏幕显示的属性。

选择器

名称选择器

1
2
3
p {
color: red;
}

类或ID选择器

1
2
3
.architect {
color: red;
}

上下文选择元素

1
2
3
4
.architect p {
color: red;
}

architect 类元素后代的 p 元素。

1
2
3
4
.architect > p {
color: red;
}

architect 类元素的子元素 p 元素。

1
2
3
4
.architect p+p {
color: red;
}

相邻同胞结合符只选择直接跟在同胞 p 元素之后的元素。

选择第一个或者最后一个元素

:first-child 或者 :last-child

选择元素的第一个字母或第一行

:first-letter 或者 :first-line

链接元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* 未访问的链接,为红色 */
a:link {
color: red;
}

/* 访问过的链接,为橙色 */
a:visited {
color: orange;
}

/* 获得焦点的链接,为紫色 */
a:focus {
color: purple;
}

/* 鼠标停留的链接,为绿色 */
a:hover {
color: green;
}

/* 激活的链接,为篮色 */
a:active {
color: blue;
}

顺序可以为 LVFHA 或者 LVHFA 。

按属性选择元素

1
2
3
4
p[class] {
color: red;
}

所有具有class属性的段落。

元素组

1
2
3
h1, h2 {
color: red;
}