#00你认真学了css？

作者: 饥人谷_远方 | 来源:发表于2018-06-07 15:21 被阅读46次

前言

以前刚接触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、简单示例：

<!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>

/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
如：

<!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中，不要忘记分号
可选择以下几种方式：如

@import 'style2.css';
@import "style2.css";
@import url("style2.css");
@import url('style2.css');
@import url(style2.css);

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

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

<!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>

题外话：

注意文件路径
右键——检查——查看源代码——点击显示错误链接：

failed to load resource：net：ERR_FILE_NOT_FOUND

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

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

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

<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： checked 匹配表单中被选中的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：

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

B、第二类：

E：root匹配文档的根元素，对于html文档，实际上就是html元素
E：nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1

image
E:nth-of-type(n) 与：nth-child()作用类似，但仅匹配使用同种标签的元素
如图当n=1时

image

如图当n=？（1除外的任意数）

image

n的取值

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

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

/* ```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）代码如下：

<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文件中写：

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

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

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

@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匹配用户当前选中的元素E：root匹配文档的根元素，对于html文档，实际上就是html元素E：nth-child（n）匹配其父元素的第n个子元素，第一个编号为1E:nth-of-type(n) 与：nth-child（）```作用类似，但仅匹配使用同种标签的元素
（2）伪元素：

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

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

（1）

#header{
}

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

（2）

.header{
}

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

（3）

.header  .logo{
}

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

（4）

.header.mobile{
}

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

（5）

.header p, .header h3{
}

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

（6）

#header a:hover{
}

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

（7）

#header .logo~p{
}

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

（8）

#header .logo+p{
}

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

（9）

#header .logo p{
}

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

（10）

#header .logo>p{
}

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

（11）

#header p.logo{
}

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

（12）

#header .logo.p{
}

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

（13）

#header input[checked]{
}

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

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

<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：

.box:first-child {
  color: red;
}

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

运行2：

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

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

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

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

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

运行4：

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

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

#00你认真学了css？

前言

一、CSS介绍

1、什么是css？

2、盒模型：

二、应用

1、简单示例：

2、CSS的工作原理

3、css应用方式

三、css选择器

1、选择器类型

2、基础选择器

3、组合选择器

4、属性选择器

5、伪类选择器

6、伪元素选择器

7、选择器的优先级

习题练习：

1、CSS 加载方式有几种？

2、`@charset`有什么作用？

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

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

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

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

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

沐汐技术博客

我爱编程

#00你认真学了css？

前言

一、CSS介绍

1、什么是css？

2、盒模型：

二、应用

1、简单示例：

2、CSS的工作原理

3、css应用方式

三、css选择器

1、选择器类型

2、基础选择器

3、组合选择器

4、属性选择器

5、伪类选择器

6、伪元素选择器

7、选择器的优先级

习题练习：

1、CSS 加载方式有几种？

2、@charset有什么作用？

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

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

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

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

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

沐汐技术博客

我爱编程

2、`@charset`有什么作用？

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