00你认真学了CSS？

发表于 | 更新于: | 分类于 ， | 阅读次数:
字数统计: 4,206 | 阅读时长 ≈ 17

前言

以前刚接触css的时候，总觉得一个元素对应着它相应的属性，并且与对应的html文件结合，大概就能出现你想要的漂亮页面把。但在CSS身上，“事与愿违”简直就是新手对它的代名词。

在css的世界里，不管是前端老手，还是资质尚浅的前端新手，都一定会犯“只知其一不知其二”这样的错误。以此，CSS也常被戏称为“不是科学，是艺术”。

要知道，“只知其一不知其二”这种错误真的是致命的，因为你永远不知道你明明检查了几万遍的正确的元素属性，到底是哪里出错了。所以在学习CSS之前，请先看一下方应杭老师回答的这篇，你就会对接下来学习CSS语法有更多的心理准备。

CSS那么难学竟然是因为它“不正交”：为什么 CSS 这么难学？

这里先搞清楚几个基本概念：
标签、元素、属性，有很多人会搞不清出哪个是指着哪个，一图释所有：image

一、CSS介绍

1、什么是css？

CSS（Cascading Style sheets），是用来为网页添加样式的代码

2、盒模型：

image
（1）内边距（padding）：围绕着内容的空间，比如围绕段落的空间
（2）边框（border）：紧接着内边距的实体线段
（3）外边距（margin）：围绕元素外部的空间
（4）宽度（width）：这个涉及了IE盒模型和标准盒模型
（5）高度（height）

二、应用

1、简单示例：

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
</head>
<body>
<h1>hello css!</h1>
<p>css 很6666</p>
</body>
</html>
1
2
3
4
5
6
/*style.css*/
h1{
padding:10px;
background-color: orange;
border:1px solid black;
}

2、CSS的工作原理

image
三阶段：

浏览器输入url ——浏览器向服务器发送请求 —— 服务器将相关数据处理返返至浏览器 —— 浏览器拿到并加载页面 —— 解析html的字符串，词法分析解析成树状结构 —— create Dom tree
解析html时，加载css，文件被下载——解析css文件对其分析—— attach style to Dom nodes，加入 create Dom tree
两树状结构对应起 来—— 新的dom树（节点相关的元素、参数）—— 渲染、绘制页面

？：白屏、加载顺序、加载时机

3、css应用方式

（1）外部样式表（推荐）
A、链接方式：通过<link>引入css，如：

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>hello css!</h1>
<p>css 很6666</p>
</body>
</html>

B、导入方式：通过@import引入样式，放入css中，不要忘记分号
可选择以下几种方式：如

1
2
3
4
5
@import 'style2.css';
@import "style2.css";
@import url("style2.css");
@import url('style2.css');
@import url(style2.css);

1
2
/*加入条件限制，如媒体查询属性 */
@import url('landscape.css') screen and (orientation:landscape);

（2）内部样式（内嵌方式）
即将CSS放在页面的<style>元素中，如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<link rel="stylesheet" href="style.css">
<style>
@import "style2.css";
p{
font-size: 50px;
}
</style>
</head>
<body>
<h1>hello css!</h1>
<p>你好</p>
</body>
</html>

题外话：

  • 注意文件路径
  • 右键——检查——查看源代码——点击显示错误链接：
    1
    failed to load resource：net：ERR_FILE_NOT_FOUND

即提示有可能是以下错误可能：

  • 文件不存在
  • 文件路径写错了

（3）内联样式（行内方式）（不推荐）
即直接在html的标记中使用style属性，将css元素属性的代码直接写在其中，如：

1
<p  style="background:orange; font-size:24pax;">css很棒</p>

（4）属性样式（废弃）
如：<img src="a.png" width=100 height=200>

三、css选择器

1、选择器类型

A、基础选择器
（1）*：通用元素选择器，匹配页面任何元素（比较少用）
（2）#id：id选择器，匹配特定id的元素
（3）.class：类选择器，匹配class包含（不是等于）特定类的元素
（4）element：标签选择器

B、组合选择器
（1）E,F
多元选择器，相当于并列选择器。用, 分隔，同时匹配元素E或者元素F
（2）E F
后代选择器。用空格分隔，匹配E元素所有的后代（不只是子元素，子元素向下递归），元素F
（3）E>F
子元素选择器。用 > 分隔，匹配E元素的所有直接子元素（再嵌套的子元素就没有用）
（4）E+F
直接相邻选择器。匹配E元素之后的相邻的同级元素F
（5）E~F
普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F （无论直接相邻与否）
（6）.class1.class2 （既、又）id和class选择器和选择器连写的时候中间没有分隔符，.和#本身充当分隔符的元素
（7）element#id
id和class选择器和选择器连写的时候中间没有分隔符，.和#本身充当分隔符的元素
C、属性选择器
D、伪类选择器
E、伪元素选择器

关于这两类详情请看： miya Wang：#07你认真学了css？（基本样式7：伪类和伪元素

2、基础选择器

（1）* ：
通用元素选择器，匹配页面任何元素（比较少用）
（2）#id：
id选择器，匹配特定id的元素
（3）.class：
类选择器，匹配class包含（不是等于）特定类的元素
（4）element：
标签选择器

演示图：image

3、组合选择器

（1）E,F
多元选择器，相当于并列选择器。用,分隔，同时匹配元素E或者元素F
image
（2）E F
后代选择器。选择它所有的后代子元素。用空格分隔，匹配E元素所有的后代（不只是子元素，子元素向下递归），元素F
image
（3）E>F
子元素选择器。（普遍）选择它第一子元素，对再嵌套的子元素没用。用>分隔，匹配E元素的所有直接子元素
image
（4）E+F
直接相邻选择器。匹配E元素之后的相邻同级所有元素F
image
（5）E~F
普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F （无论直接相邻与否）
image
（6）.class1.class2 既、又，直接靠在一起，同时拥有这两个类选择器特性的一个元素。id和class选择器和选择器连写的时候中间没有分隔符，.和#本身充当分隔符的元素
image
（7）element#id
id和class选择器和选择器连写的时候中间没有分隔符，.和 #本身充当分隔符的元素

4、属性选择器

（1）E[attr]
匹配所有具有属性attr的元素，如div[id] 就能取到所有有id属性的div
（2）E[attr=value] 匹配属性attr值为value的元素，如div[id=test]，匹配id=test的div
image

5、伪类选择器

（1）定义：代表一个元素的另一种状态
（2）类型：
A、第一类：

  • E: first-child匹配元素E的第一个子元素
  • E：link 匹配所有未被点击的链接
  • E: visited匹配所有已被点击的链接
  • E：active匹配鼠标已经其上按下，还没被释放的E元素
  • E：hover 匹配鼠标悬停器上的E元素
  • E：focus匹配获得当前焦点的E元素
  • E：lang(c)匹配lang属性等于c的E元素
  • E：enabled 匹配表单中可用的元素
  • E：disabled 匹配表单中禁用的元素
  • E：checke 匹配表单中被选中的radio或checkbox元素
  • E：selection 匹配用户当前选中的元素

例子1：如设置E：hover时，鼠标悬停元素时字体颜色就会变成蓝色。
选择器权重会使得a:hover{color:blue;}大于a{color：red;}的权重，所以样式产生了覆盖，如图：image

例子2:
a链接上常用的css属性选择器：

  • E：link 匹配所有未被点击的链接
  • E: visited匹配所有已被点击的链接
  • E：hover 匹配鼠标悬停器上的E元素
  • E：active 匹配鼠标已经其上按下，还没被释放的E元素
    由于css元素按顺序填写，依次展现元素属性，这里涉及到：a这个元素下的伪类选择器权重，从而造成样式覆盖，如图演示：
    image

例子3：
(1) E：enabled 匹配表单中可用的元素
(2) E：disabled 匹配表单中禁用的元素
如输入框被禁用，如何设置css里的元素属性，如图：
image

B、第二类：
(1) E：root匹配文档的根元素，对于html文档，实际上就是html元素
(2) E：nth-child（n） 匹配其父元素的第n个子元素，第一个编号为1
image
注： E:nth-of-type(n)与:nth-child()作用类似，但仅匹配使用同种标签的元素
如图当n=1时
image
如图当n=？（1除外的任意数）
image
n的取值

1
2
3
1，2，3，4，5
2n+1，2n，4n-1
odd，even：

如何运用： 做一个表格上，分别可以做两色相间的表格效果，那么就可以运用odd，even

1
2
3
4
5
/* nth-child(odd) 与 :nth-child(even) 分别匹配序号为奇数与偶数的元素 */

.h-table tr:nth-child(even){
background-color: #f1f1f1;
}

例子：

6、伪元素选择器

（1）E::first-line 匹配E元素内容的第一行
（2）E::first-letter 匹配E元素内容的第一个字母
（3）E::before 在E元素之前插入生成的内容
（4）E::after 在E元素之后插入生成的内容

举例如图：image

7、选择器的优先级

（1）定义
如果多条规则作用于同一个元素上，且定义的相同属性的不同值。

（2）代码如下：

1
2
3
4
5
<style>
#test{color:#666;}
p {color:#333;}
</style>
<p id="text">Text</p>

（3）CSS优先级
从高到低分别是：
A、在属性后面使用 ：！important 即会覆盖页面内任何位置定义的元素样式
B、作为style属性写在元素标签上的内联样式
C、id选择器
D、类选择器
E、伪类选择器
F、属性选择器
G、标签选择器
H、通配符选择器
I、浏览器自定义

（4）复杂场景(按顺序）

a、行内样式<div style="XXX"><div>
b、ID选择器
c、类、属性选择器、伪类选择器
d、标签选择器、伪元素

注： 选择器的优先级是如何计算的？

A、按顺序来计算的：假设：

a等级：行内样式<div style="XXX"><div>
b等级：ID选择器
c等级：类、属性选择器、伪类选择器
d等级：标签选择器、伪元素

即a-d等级权值依次为5、4、3、2，按照a-d等级的属性顺序依次得分，若取到相应等级的权值，最高的则为最优先级别。

B、参考：当不同类别的多个选择器混合使用个怎么计算优先级？有一个简单的算法，设

a.内联样式表的权值为1000
b.ID选择器的权值为100
c.class类选择器的权值为10
d.HTML标签选择器的权值为1

（5）样式覆盖
后面的样式会覆盖到前面的样式

（6）选择器使用经验

  • 遵守css书写规范
  • 使用合适的命名空间
  • 合理地复用class
    -

习题练习：

1、CSS 加载方式有几种？

答：（1）外部样式表（链接+导入）（推荐）

  • 通过<link>引入css
  • 通过@import导入样式，放入css中，不要忘记分号。在html或者css文件中都可以导入@import
    （2）内部样式（内嵌方式），即将CSS放在页面的<style>元素中
    （3）内联样式（行内方式）（不推荐），即直接在html的标记中使用style属性，将css元素属性的代码直接写在其中
    （4）属性样式（废弃）

2、@charset有什么作用？

在外部样式表文件内使用，指定该样式表使用的字符编码。该规则后面的分号是必需的，如果省略了此分号，会生成错误信息。如在外部css文件中写：

1
2
3
@charset "utf-8";
* {sRules}
.class{sRules}

3、@import有什么作用？如何使用？

答：作用：通过@import引入样式或者css文件，可以减少文件的容量，加快文件加载速度。用法：

1
2
3
4
5
@import 'style2.css';
@import "style2.css";
@import url("style2.css");
@import url('style2.css');
@import url(style2.css);

4、id 选择器和 class 选择器的使用场景分别是什么？

答：
（1）id选择器，用于匹配特定id的元素，具有独一无二不可代替性
（2）class选择器，用于匹配class包含（不是等于）特定类的元素，描述一组元素的样式，你可以多次使用class赋值，来命名元素名

5、CSS选择器常见的有几种？

答：基础选择器、组合选择器、属性选择器、伪类选择器、伪元素选择器

6、伪类选择器有哪些？伪元素有哪些？

答：（1）伪类选择器：

  • E: first-child匹配元素E的第一个子元素
  • E：link 匹配所有未被点击的链接
  • E: visited 匹配所有已被点击的链接
  • E：active 匹配鼠标已经其上按下，还没被释放的E元素
  • E：hover 匹配鼠标悬停器上的E元素
  • E：focus匹配获得当前焦点的E元素
  • E：lang(c) 匹配lang属性等于c的E元素
  • E：enabled 匹配表单中可用的元素
  • E：disabled 匹配表单中禁用的元素
  • E： checked 匹配表单中被选中的radio或checkbox元素
  • E： selection 匹配用户当前选中的元素
  • ：root 匹配文档的根元素，对于html文档，实际上就是html元素
  • E：nth-child（n） 匹配其父元素的第n个子元素，第一个编号为1
  • E:nth-of-type(n)与：nth-child()作用类似，但仅匹配使用同种标签的元素

（2）伪元素：

  • E::first-line 匹配E元素内容的第一行
  • E::first-letter 匹配E元素内容的第一个字母
  • E::before 在E元素之前插入生成的内容
  • E::after 在E元素之后插入生成的内容

7、以下选择器分别是什么意思?

（1）

1
2
#header{
}

答：id选择器，匹配id为header的元素

（2）

1
2
.header{
}

答：类选择器，匹配class为header元素

（3）

1
2
.header  .logo{
}

答：后代选择器，匹配class为header的元素logo

（4）

1
2
.header.mobile{
}

答：即又关系的并列元素，同时匹配这两个类选择器特性的一个元素

（5）

1
2
.header p, .header h3{
}

答：多元选择器，同时匹配.header p 和 .header h3两个元素

（6）

1
2
#header a:hover{
}

答：在id为header元素下匹配a元素鼠标悬停属性

（7）

1
2
#header .logo~p{
}

答：在id为header元素下匹配logo元素之后的同级所有元素p （无论直接相邻与否）

（8）

1
2
#header .logo+p{
}

答：在class为header元素下匹配logo元素之后的相邻同级元素p

（9）

1
2
#header .logo p{
}

答：在id为header元素下匹配class为logo的后代元素p

（10）

1
2
#header .logo>p{
}

答：在id为header元素下匹配class为logo元素的所有直接子元素，即第一子元素p

（11）

1
2
#header p.logo{
}

答：在id为header元素下同时匹配p元素和class为logo元素这类既又关系（并列）的元素的特性

（12）

1
2
#header .logo.p{
}

答：在id为header元素下同时匹配class为logo和p的元素

（13）

1
2
#header input[checked]{
}

答：在id为header元素下匹配checked值的input的元素

8、运行如下代码，并对结果做出解释

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
.box:first-child {
color: red;
}
.box:first-of-type {
background: blue;
}
.box :first-child {
font-size: 30px;
}
.box :first-of-type {
font-weight: bold;
}
</style>
<div class="container">
<div class="box">div.box</div>
<p class="box">p.box</p>
<div class="box">div.box</div>
<div class="box">
<div class="item">div.item</div>
<p class="item">p.item</p>
</div>
<p class="box"></p>
</div>

（1）效果图展示：
image
（2）对其结果作出解释：
运行1：

1
2
3
.box:first-child {
color: red;
}

选择同级第一个元素,并且这个元素class是 box,显示该标签元素的内容颜色为红色

运行2：

1
2
3
.box:first-of-type {
background: blue;
}

选择同级第一个标签元素,并且这个元素是这个同级中的第一个标签，显示背景色为蓝色

运行3：（.box : :.box和:之间要有空格）

1
2
3
.box :first-child {
font-size: 30px;
}

表示.box 里面（父元素）的第一个元素，显示字体大小为30px的结果

运行4：

1
2
3
.box :first-of-type {
font-weight: bold;
}

选择 .box里（父元素）第一个同类型的元素，字体粗细为粗体

-------------本文结束感谢您的阅读-------------