Cascading Style Sheet,层叠样式表,用于给 HTML 页面标签添加各种样式,定义网页的显示效果,通过css可以分别为网页的每一个层来设置样式,而最终我们能看到的只有网页的最上边一层

CSS 将网页内容和显示样式进行分离,增强了显示功能

HTML 的缺陷

1.不能够适应多种设备
2.要求浏览器必须智能化足够庞大
3.数据和显示没有分开
4.功能不够强大

CSS 优点

1.使数据和显示分开
2.降低网络流量
3.使整个网站视觉效果一致
4.使开发效率提高了

css语法

1
2
3
4
5
6
7
8
9
10
11
12
选择器 {
k: v;
k: v;
k: v;
k: v;
}
选择器 {
k: v;
k: v;
k: v;
k: v;
}

CSS 和 HTML 结合的方式

1.行内样式:某个特定标签内使用 style 属性

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<P style = "color :red ; font-size : 20px;">行内样式</P>
</body>
</html>

2.内嵌样式表:在页面的 head 里采用 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">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color:darkolivegreen;
font-size:100px;
}
</style>
</head>
<body>
<P>内部样式</P>
</body>
</html>

3.引入外部 css 文件的方式

  • 采用 link 标签
  • 采用 import

两种引入方式的区别:外部样式表中不能写 link 标签,但是可以写 import 语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 可以将CSS样式编写到一个外部的css文件中,然后通过link标签来引入外部的css文件
这也是实战中最佳的方案,类似于c++中的分离式编译
外部样式表需要通过link标签进行引入,意味着只要想使用这些样式的网页都可以对其进行引用,可以使样式在不同页面之间复用
将样式编写到外部css文件中,可以使用到浏览器的缓存机制,从而加快网页的加载速度-->
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<p>外部样式表</p>
</body>
</html>

CSS 选择器

指定 CSS 作用的标签

选择器总共两大类:基本选择器和扩展选择器

常用的三种器的区别

1.标签选择器针对的是页面上的一类标签
2.ID 选择器针对特定的一个标签
3.类选择器可以被多种标签使用

基本选择器

基本语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 
基本语法:
选择器 声明快
选择器 通过选择器可以选中页面中的指定元素
声明块 通过声明块来指定要为元素设置的样式
声明块由一个一个的声明组成
声明是一个名值对结构
一个样式对应一个样式值
名和值之间:连接,以;结尾 */

p{
color:aquamarine;
font-size:100px;
}

注释

1
/* 我是注释 */

标签选择器(元素选择器)

选择所有某种类型的标签,用于描述共性

所有的标签,都可以是选择器
选择的是所有,而不是一个

1
2
3
4
5
6
7
8
9
10
/* 
元素选择器
作用:根据标签名来选中指定的元素
语法:标签名{}
例子:P{} h1{} div{}
*/
p{
color:aquamarine;
font-size:100px;
}

p 标签内的文字大小都是 100px

ID 选择器

针对某一个特定的标签来使用,以#来定义

1
2
3
4
5
6
7
8
9
/* 
id选择器
作用:根据元素的id属性值选中一个元素
语法:#id属性值{}
例子:#red{} #mytitle{}
*/
#mytitle{
border:3px dashed green;
}

任何的 HTML 标签都可以有 id 属性。表示这个标签的名字

这个标签的名字,可以任取,但是:

只能有字母、数字、下划线
必须以字母开头
不能和标签同名
HTML 页面不能出现相同的 ID
一个标签可以被多个 css 选择器选择,共同作用

类选择器

用.来定义某一个类的标签

1
2
3
4
5
6
7
/* 类选择器
作用:根据元素的class属性值选中一组元素
语法: .class属性值 */

.aa{
color:bisque;
}

不要试图用一个类写完所有标签的样式,多写几个类
每一个类尽可能小,有公共的概念,让更多的标签使用
到底用 id 还是 class?
尽可能用 class
因为 id 是给 js 使用的,js 通过 id 来获取标签,所以 css 层面尽可能不用 id
另一方面,我们认为一个有 id 的元素,有动态效果
类上样式,id 上行为

通用选择器

*, 匹配任何标签,效率低,不使用

1
2
3
4
5
6
7
8
/* 
通配选择器
作用:选中页面中的所有元素
语法:*
*/
*{
color:cornflowerblue;
}

多类样式声明

一个标签可以使用多个类样式,用空格隔开

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.d1{
color: aqua;
}
.d2{
background-color:green;
font-size: 20px;
}
.d3{
border: solid 6px darksalmon;
}
</style>
</head>
<body>
<div class="d1 d2 d3">我是陈若</div>
</body>
</html>

CSS 的高级选择器

后代选择器

如果选择的是E F,表示所有属于 E 元素的后代的 F 元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    div p {
font-size: 19px;
color: aqua;
}

div span {
font-family: 微软雅黑;
font-size: 3em;
color: blue;
}
<div>
<p>你好,我是陈若</p>
<div>
<div>
<p>你好</p>
</div>
</div>
<span>哈哈哈哈</span>
<h2>失败</h2>
</div>

交集选择器

两个选择器紧密相连,以标签名开头

如果后一个是类选择器,就写成div.food,如果后一个是 id 选择器,就写成div#food

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 
交集选择器
作用:选中同时复合多个条件的元素
语法:选择器1选择器2选择器3选择器n{}
注意点:交集选择器中如果有元素选择器,必须使用元素选择器开头 */

div.asd{
color:cyan;
}

.as.asd.asdw{
color:darkblue;
}
并集选择器

简单来说就是多选

1
2
3
4
5
6
7
/* 
并集选择器
作用:同时选择多个选择器对应的元素
语法:选择器1,选择器2,选择器3,选择器n{} */
h1,p{
color:darkmagenta;
}

CSS3 的一些选择器

子代选择器

只有是儿子的时候才能被选择

1
2
3
div > p {
color: red;
}

只能选择

1
2
3
4
5
6
<div>
<p>我是div的儿子</p>
<div>
<p>无效</p>
</div>
</div>

不能选择

1
2
3
4
5
<div>
<ul>
<p>我是div的孙子</p>
</ul>
</div>
序选择器

设置无序列表

    中的第一个
  • 为红色:

1
2
3
ul li:first-child {
color: red;
}

设置无序列表

    中的最后一个
  • 为红色:

1
2
3
ul li:last-child {
color: blue;
}
下一个兄弟选择器
  • 表示选择下一个兄弟

把 h3 元素后面的一个 p 标签变成红色

1
2
3
h3 + p{
color: red;
}
属性选择器
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
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
标签名[属性名] 选择含有指定属性的元素
标签名[属性名 = 属性值] 选择含有指定属性和属性值的元素
标签名[属性名 ^= 属性值] 选择属性值以指定值开头的元素
标签名[属性名 ~= 属性值] 选择属性值中包含指定词汇的元素
标签名[属性名 |= 属性值] 选择属性值以指定值开头的属性值的元素,该值必须是整个单词
标签名[属性名 $= 属性值] 选择属性值以指定值结尾的元素
标签名[属性名 *= 属性值] 选择属性值中含有某值的元素的元素*/
p[title *=e] {
color: darkorange;
}

p[title] {
background-color: aqua;
}

p[title][value] {
border: solid 2px red;
}
</style>
</head>

<body>
<p title="asdees">属性选择器</p>
<p title value> nihao </p>
</body>

</html>

伪类选择器

伪类,也就是不存在的类,特殊的类,用来定义元素的特殊状态

例如:

  • 设置鼠标悬停在元素上时的样式

  • 为已访问和未访问链接设置不同的样式

  • 设置元素获得焦点时的样式

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 一般情况下都是使用:开头
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第n个子元素
特殊值:
n 第n个 n的范围0到无穷
2n或even 表示选中偶数位的元素
2n+1或odd 表示选中奇数位的元素

以上这些伪类都是根据所有的子元素进行排序
:first-of-type
:last-of-type
:nth-of-type()
这几个伪类的功能和上述的类似,不同点在于它们是在同类型元素中进行排序
:not() 否定伪类
将符合条件的元素从选择器中去除*/

ul >li.fired{
color:red;
font-size: 70px;
}
/*ul >li#ide{
color:aqua;
font-size:80px;
}
*/

ul >li:first-child{
color:blueviolet;
font-size:80px;
}
ul >li:last-child{
color:coral;
font-size:90px;
}
ul >li:nth-child(n){
color:cornflowerblue;
font-size:20px;
}
ul >li:not(:nth-child(4)){
color :indianred;
font-size:100px;

}
</style>
</head>
<body>
<ul>
<li class ="fired">第一个</li>
<li class = "fired">第二个</li>
<li id = "ide">第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
</body>
</html>
超链接的伪类
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
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* :link 用来表示没访问过的链接(正常的链接) */
a:link{
color:darkorchid;
}
/* :visited 用来表示访问过的链接
由于隐私等多方面的原因,所以visited这个伪类只能修改链接的颜色 */
a:visited{
color:darkseagreen;
}
/* :hover 用来表示鼠标移入的状态 */
a:hover{
color:darkviolet;
font-size:100px;
}
/* :active 用来表示鼠标点击 */
a:active{
color:dodgerblue;
}
</style>
</head>
<body>

</body>
</html>

更多的伪类的信息

所有CSS伪元素

表示页面中一些特殊的并不真实的存在的元素

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 语法:
伪元素使用::开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始
::after 元素的最后
before和after必须结合content属性来使用 -->
<style>
p::first-letter{
font-size:100px;
}
p::first-line{
background-color:forestgreen;
}
p::selection{
background-color:fuchsia;
}
p::before{
content:"<!!!>";
}
p::after{
content:">@@@<";
}
</style>
</head>
<body>
<p> 天时不如地利,地利不如人和。三里之城,七里之郭,环而攻之而不胜。夫环而攻之,必有得天时者矣,然而不胜者,是天时不如地利也。城非不高也,池非不深也,兵革非不坚利也,米粟非不多也,委而去之,是地利不如人和也。

  故曰,域民不以封疆之界,固国不以山溪之险,威天下不以兵革之利。得道者多助,失道者寡助。寡助之至,亲戚畔之。多助之至,天下顺之。以天下之所顺,攻亲戚之所畔,故君子有不战,战必胜矣。</p>
</body>
</html>

继承

定义:样式的继承,我们为了一个元素设置的样式同时也会应用到它的后代元素上,是发生在祖先后代之间的关系

好处:

  • 方便于开发而设计的
  • 利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上,这样只需设置一次就可以让所有的元素都具有该样式

注意事项:

  • 并不是所有的样式都会继承的,例如,背景有关的,布局有关的等都不会被继承
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color:lightgreen;
font-size:90px;
background-color:rgb(140, 172, 26);
}

</style>
</head>
<body>
<p>
继承
<span>子元素</span>
</p>
</body>
</html>

选择器优先级(权重)

行内样式粒度
id选择器0100
类和类属性值0010
标签选择器,伪类选择器0001
通配选择器0000
行内样式1000

首先加载标签选择器,再加载类选择器,然后加载ID选择器,最后加载行内样式,后加载会覆盖先加载的同名样式

权重可叠加使用

在同优先级的前提下,后加载的会覆盖先加载的同名样式,所以离的越近越优先

可以在某一个样式的后边添加 !important ,则此时该样式会获取到最高的优先级,甚至超过行内样式,但在开发中,一定要慎用

长度单位

像素

  • 像素越小的屏幕显示的效果越清晰,不同的显示设备的像素大小是不同的

百分比

  • 可以将属性值设置为相对于其父元素属性的百分比
  • 设置百分比可以使子元素跟随父元素的改变而改变

em

  • 是相对于元素的字体大小来计算的
  • 会根据字体大小的变化而变化

rem

  • 是根据根元素的字体大小来计算的

vh

  • 表示相对视口高度(Viewport Height),1vh = 1% * 视口高度

颜色单位

单词

  • 以单词的形式进行设置颜色
  • 语法:#颜色单词

RGB值

  • RGB通过三种颜色的不同浓度来调配出不同的颜色
  • 语法:RGB(红色,绿色,蓝色)
  • 每一种颜色的范围在0255 (0%100%)之间

RGBA值

  • 在RGB的基础上在后面添加了一个a表示不透明度
  • 语法:RGBA(红色,绿色,蓝色,不透明度)
  • 1表示完全不透明 0表示完全透明 .5半透明

十六进制的RGB值

  • 语法:#红色绿色蓝色
  • 每一种颜色的浓度的范围在00~ff
  • 如果颜色两位重复可以简写例如 #aabbcc –> #abc

HSLA值

  • H表示色相(0~360)
  • S表示饱和度、颜色的浓度(0%~100%)
  • L表示亮度、颜色的亮度(0%~100%)
  • A表示不透明度(1表示完全不透明 0表示完全透明 .5半透明 0~1)

文档流

定义:网页是一个多层的结构,一层挨着一层,作为用户来讲只能看到最顶上一层

元素在文档流中的特点

块级元素**(block element)**

其就是以块状呈现,具有块的基本特征,如高度、宽度等等

  • 在新行上开始,在页面中独占一行,行高以及外边距和内边距都可控制(使用float属性除外)
  • 可以设置 width, height属性和margin,padding等属性
  • 默认宽度是父元素的全部,而默认高度是被内容撑开
  • 它可以容纳内联元素和其他块元素

比如我们常用的div,p, h1等,都是块级元素

行内元素(内联元素)(inline element)

  • 不会独占页面一行,只占自身的大小
  • 在页面中左向右水平排列,如果一行之中不能则元素会换到第二行,继续自左向右排列
  • 默认宽度和高度都是被内容撑开
  • 高,行高及外边距和内边距不可改变;只能改变宽度,Margin和padding只能改变左右,上下无效
  • 宽度就是它的文字或图片的宽度,不可改变
  • 内联元素只能容纳文本或者其他内联元素

比如我们常用的span、a、input都是内联元素