CSS权威指南（第三版）读书笔记
CSS13 分钟 读完 (大约 1916 个字)

CSS权威指南（第三版）读书笔记

《CSS权威指南（第三版）》覆盖了CSS2 + CSS2.1的内容。
《CSS权威指南（第四版）》加入了CSS3的内容。

CSS和文档

  1. CSS：层叠样式表

  2. 替换元素：img、input等等。

    非替换元素：大多数都是非替换元素。

  3. 块元素、行内元素，html和xhtml中块元素不能继承行内元素，但是CSS没有限制块元素和行内元素的嵌套。行内元素可以继承块元素，块元素不能继承行内元素。可以自定义元素并赋予样式。

  4. 引入外部样式表：

1
<link rel="stylesheet" type="text/css" href="basic.css" media="screen, print" />
  1. 候选样式表：需要用户手动选择，下面是如何定义候选样式表。候选样式表的title属性定义了候选样式表的名称。
1
2
3
<link rel="stylesheet" type="text/css" href="default.css" title="default" />
<link rel="alternate stylesheet" type="text/css" href="alt01.css" title="alt01" />
<link rel="alternate stylesheet" type="text/css" href="alt02.css" title="alt02" />
  1. style标签：type一定要设置为 text/css ，还可以给style指定media属性。
1
2
3
<style type="text/css">
    /* css code */
</style>
  1. @import规则

必须要放在样式表中，而且在最前面。

1
2
3
<style type="text/css">
    @import url(style.css);
</style>

指定应用的媒体：

1
2
3
4
5
<style type="text/css">
    @import url(style.css) all;
    @import url(screen.css) screen;
    @import url(printandprojection.css) print, projection;
</style>
  1. 向后可访问性，使不能识别style标签的浏览器忽略标签中的声明（几乎用不到了）

写法：

1
2
3
4
5
6
7
8
9
<style type="text/css">
    <!--
    @import url(style.css) all;

    h1 {
        background: yellow;
    }
    -->
</style>
  1. 注释，不能嵌套
1
2
3
4
5
/* 注释1 */

/*
	注释2
*/
  1. 内联样式，可用于body以及body中的任何标签，现在几乎不用这种写法。
1
2
3
<p style="color: red; font-size: 14px;">
    this is a paragraph.
</p>

选择器

规则结构

  • 每条规则都由选择器和声明块组成。

  • 选择器定义了声明块影响文档中内容的范围。

  • 声明块由一个或者多个声明组成，每条声明是一个属性-值对。

如下：

1
2
3
4
h1 {
    color: red;
    background: yellow;
}

一个属性的属性值可以有多个：

1
2
3
p {
    font: red 14px bold;
}

选择器

  1. 元素选择器
1
2
3
p {
    color: red;
}
  1. 选择器分组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
h1 {
    color: red;
}

h2 {
    color: red;
}

h3 {
    color: red;
}

h4 {
    color: red;
}

h5 {
    color: red;
}

h6 {
    color: red;
}

可以用分组来压缩代码：

1
2
3
4
5
6
7
8
h1,
h2,
h3,
h4,
h5,
h6 {
    color: red;
}
  1. 通配选择器
1
2
3
4
5

* {

    color: red;
}
  1. 声明分组
1
2
3
4
5
6
7
8
9
10
11
p {
    color: red;
}

p {
    font-size: 14px;
}

p {
    background: yellow;
}
1
2
3
4
5
p {
    color: red;
    font-size: 14px;
    background: yellow;
}

每条声明后面的分号不能少。

  1. 结合选择器和声明的分组

为h1-h6设置字体颜色、背景颜色和border

1
2
3
4
5
6
7
8
9
10
h1,
h2,
h3,
h4,
h5,
h6 {
    color: red;
    background: yellow;
    border: 1px solid gray;
}
  1. 类选择器，可以给多个元素设置同一个类名
1
2
3
4
5
6
7
8
9
<p class="warning">
    WARNING!
</p>

<style>
    .warning {
        font-weight: bold;
    }
</style>

也可以只让包含warning类的所有p元素字体变粗：

1
2
3
4
5
6
7
8
9
<p class="warning">
    WARNING!
</p>

<style>
    p.warning {
        font-weight: bold;
    }
</style>

这里的 p.warning 比 .warning 更特殊，故而前者的声明会覆盖后者。

  1. 多类选择器

比如要选中既有urgent类又含有warning类的元素：

1
.urgent.warning {}
  1. id选择器，只能给一个元素设置id名，id选择器一般用于js而不是css
1
2
3
4
5
6
7
<p id="para">
    this is a paragraph.
</p>

<style>
    #para {}
</style>

  1. 使用类选择器还是ID选择器？

  2. 属性选择器

  • 简单属性选择器

选择含有class属性的所有h1元素：

1
h1[class] {}

选择同时有href和title属性的a元素：

1
a[href][title] {}
  • 根据具体属性值选择（属性值必需完全匹配）：
1
2
3
4
5
/* 根据一个特定属性选择a元素 */
a[href="https://www.google.com"] {}

/* 根据多个属性值选择a元素 */
a[href="https://www.google.com"][title="google"] {}
  • 根据部分属性值选择：
1
2
3
<p class="urgent warning">
    qwertyuiop
</p>
1
p[class~="warning"] {}

以上选择器选择了class属性包含warning的元素。（以空格做隔断）

  • 子串匹配属性选择器：
类型 描述
[foo^=”bar”] 选择foo属性值以“bar”开头的所有元素
[foo$=”bar”] 选择foo属性值以“bar”结尾的所有元素
[foo*=”bar”] 选择foo属性值包含子串“bar”的所有元素
[foo~=”bar”] 选择foo属性值包含以空格隔断的“bar”子串的所有元素

这里注意最后两条的区别。

  • 特定属性选择器
1
*[lang|="en"] {}

这个规则会选择lang属性为en或者以en开头的所有元素，这种选择器最常用的用途是匹配语言。

也就是：

类型 描述
[foo|=”bar”] 选择foo属性值等于“bar”或者以其为开头的所有元素
  1. 后代选择器：也叫上下文选择器，
1
2
/* 这个选择器会选择作为h1后代的所有em元素 */
h1 em {}

上面选择器中的空格表示后代。

  1. 子元素选择器：选择元素的直接后代，也就是子元素。
1
p>a {}
  1. 相邻兄弟选择器
1
2
<p></p>
<h1></h1>
1
p+h1 {}

以上选择器读作：选择作为p元素同级别的紧邻的下一个h1元素。

  1. 伪类选择器

静态伪类选择器

1
2
3
4
5
/* 未访问的链接 */
a:link {}

/* 访问过的链接 */
a:visited {}

动态伪类选择器

1
2
3
4
5
6
7
8
/* 获取了焦点的元素 */
a:focus {}

/* 鼠标悬停的元素 */
a:hover {}

/* 激活的元素 */
a:active {}

以上伪类的书写顺序应该为：LVHA或者LVFHA。

比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
a:link {
    color: navy;
}

a:visited {
    color: gray;
}

a:focus {
    color: red;
}

a:hover {
    color: blue;
}

a:active {
    color: yellow;
}

伪类结合使用，不能把互斥的伪类一起使用

1
2
3
4
5
6
7
a:link:hover {
    color: red;
}

a:visited:hover {
    color: maroon;
}

选择第一个子元素：

1
2
3
4
5
6
7
8
9
10
<div>
    <p></p>
    <ul></ul>
</div>

<style>
    p:first-child {
        color: red;
    }
</style>

以上选择器选择作为第一个子元素的p元素。

根据语言选择：

使用:lang()伪类

例子：选择所有语言为法语的元素

1
*:lang(fr) {}
  1. 伪元素选择器
1
2
3
p:first-letter {}

p:first-line {}

伪元素 :before 和 :after 用于在元素前后插入内容并赋予其样式。

before实例：

1
2
3
4
p:before {
    content: 'new';
    color: red;
}

结构和层叠

特殊性

重要声明： !important
例子：

1
2
3
p {
    color: red !important;
}

继承

一个例外：body元素的属性会传递到html标签。

层叠

LVHA或者VLHA

值和单位

值

值分为数字（整数和小数）和百分数。

颜色

css2.1中的17个颜色：
aqua
fuchsia
lime
olive
red
white
black
gray
maroon
orange
silver
yellow
blue
green
navy
purple
teal

字体

字体系列

CSS定义的5种通用字体系列。

  • Serif：衬线体，Times、Georgia、New Century Schoolbook。
  • Sans-serif：非衬线体，Helvetica、Geneva、Verdana、Arial、Univers。
  • Monospace：等宽字体，Courier、Courier New、Andale Mono。
  • Cursive：手写体，Zapf Chancery、Author、Comic Sans。
  • Fantasy：Western、Woodblock、Klingon。

使用字体

1
2
3
p {
    font-family: Georgia, serif;
}

有空格或者有特殊字符的字体需要用引号括起来。

正确地font属性书写方式：

1
2
3
4
h1 {
    /* 前三个font-style,font-weight,font-variant顺序随意，后面两个顺序一定要先写font-size再写font-family且必须要写不能省略 */
    font: italic normal small-caps 16px Arial, sans-serif;
}

font-size和line-height的写法： 16px/1.2 。

font-face规则

已经从css2.1删除。

1
2
3
4
5
/* 下载字体 */
@font-face {
    font-family: 'new font name';
    src: url(...);
}

文本属性

  1. text-indent

只能用于块元素缩进，如果行内元素想要缩进则可以设置padding-left或者margin-left。

  1. text-align

  2. vertical-align

只能用于行内元素和替换元素，不影响块元素中内容的对齐。

  1. line-height

  2. word-spacing

  3. letter-spacing

  4. text-transform

  5. text-decoration

  6. text-shadow

  7. white-space

  8. direction

基本视觉格式化

水平格式化

垂直格式化

喜欢这篇文章？打赏一下作者吧

评论

关注我

链接

分类

最新文章

归档

标签

二分查找1
二叉树1
二维数组1
动态规划2
双指针1
字符串1
排序1
数学1
数组3
树1
递归2
链表2

订阅更新

×