了解CSS

CSS是层叠样式表的简称，属于一种标记语言，用于设计html页面的文本、图片、版面等等的布局和外观显示样式，通俗点说，美化html。

构成方式：选择器+一条或多条声明，举例：

h1{ color:red; fontsize: 25px;}（记得加分号）

css语言写在head标签内，归属于style标签。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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>
      /* css注释样例，用Ctrl+/可以快速打出 */
      /* css构成：选择器+声明 */
        p{
            color:red;
        }
    </style>
</head>
<body>
    <p>这是一句红色的字体</p>
</body>
</html>

css代码风格：

①紧凑格式：

1
h1{color: deeppink;font-size: 20px}

②展开格式：(多采用这种格式书写)

1
2
3
4
h1 {
	color: pink;
	font-size: 12px;
}

基础选择器

选择器就是根据不同需求把不同的标签选出来。

标签选择器

以标签名作为选择器。

语法：

1
2
3
4
类名 {
	属性: 属性值;
	...
}
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
<!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>
        /* css构成：选择器+声明 */
        p {
            color: red;
        }
        div {
            color: blue;
        }
    </style>
</head>

<body>
    <p>这是一句红色的字体</p>
    <div>这是一句蓝色的字体</div>
    <span>这是一句黑色的字体</span>
</body>

</html>

类选择器

（开发最常用）单独选一个或者某几个标签。

语法：在类名前面加点

1
2
3
4
.类名 {
	属性: 属性值;
	...
}
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
<!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>
        /* css构成：选择器+声明 */
        .red {
            color: red;
        }
        .violet-color {
            color: violet;
        }
    </style>
</head>

<body>
    <p>这是一句黑色的字体</p>
    <div class="red">这是一句红色的字体</div>
    <span>这是一句黑色的字体</span>
    <h1 class="red">我也想变成红色</h1>
    <span class="violet-color">这是粉色的字体</span>
</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
<!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>
        .red {
            /* 背景颜色、宽度、高度 */
            background-color: red;
            width: 200px;
            height: 100px;
        }
        .green {
            background-color: green;
            width: 200px;
            height: 100px;   
        }
    </style>
</head>

<body>
    <div class="red">我是一个红色的黑字盒子</div>
    <div class="green">我是一个绿色的黑字盒子</div>
</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
<!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>
        .box {
            width: 200px;
            height: 100px;
        }
        .red {
            background-color: red;
        }
        .green {
            background-color: green;
        }
        .font {
            /* 字体大小 */
            font-size: 25px;
        }
    </style>
</head>

<body>
    <div class="box red font">我是一个红色的黑字盒子，字体还很大</div>
    <div class="box green">我是一个绿色的黑字盒子</div>
    <div class="box font">我是一个字体很大的无色盒子</div>
</body>

</html>

ID选择器

id选择器可以选择带有特定id的html元素，只能调用一次，一般和js搭配使用。

语法：在类名钱加井字号。

1
2
3
4
#类名 {
	属性: 属性值;
	...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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>
        #name {
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div id="name">我的名字叫小亮</div>
</body>

</html>

通配符选择器

能选取页面中所有的元素，只用星星，不需要类名。

1
2
3
* {
	属性: 属性值;
}
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>
        * {
            color: blue;
        }
    </style>
</head>

<body>
    <h1>我们都是蓝色字体</h1>
    <p>我们都是蓝色字体</p>
    <span>我们都是蓝色字体</span>
    <div>我们都是蓝色字体</div>
</body>

</html>

CSS字体属性

字体系列

属性：font-family

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
<!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 {
            /* 微软雅黑可以替换为英文名：'Microsoft YaHei' */
            font-family: "微软雅黑";
        }
        h2 {
            font-family: "宋体";
        }
    </style>
</head>

<body>
    <h2>这里是宋体</h2>
    <p>我是微软雅黑</p>
</body>

</html>

如果存在多个字体，使用逗号分隔，这里的意思是如果用户电脑没有第一种字体，就执行第二种字体，以此类推。

1
2
3
h2 {
    font-family: '宋体',Arial, Helvetica, sans-serif;
}

字体大小

属性：font-size

px（像素）是最常用的单位。

可以给body标签指定整个页面文字的大小。

字体粗细

属性：font-weight

常用参数：normal（正常），bold（粗体），bolder（特粗体），lighter（细体）

文字样式

属性：font-style

参数：normal，italic（斜体）

复合属性

1
2
3
4
类名 {
    /*line-height为行高*/
	font: font-style font-weight font-size/line-height font-family;
}

不能更改顺序，直接修改对应位置改为对应参数即可。

文本颜色

属性：color

表示方法 属性值
预设的颜色值 red,green,blue……
十六进制颜色码 #FF0000,#FF6600,#2E2134
RGB代码 rgb(255,0,0)或者rgb(100%,0%,0%)

文本对齐

属性：text-align

只能设定水平对齐方式：left，right，center

装饰文本

属性：text-decoration

添加文本修饰，常用的属性值：

none（无），underline（下划线，链接a默认带下划线），overline（上划线），line-through（删除线）

可以使用这种方法去掉超链接的默认下划线。

文本缩进

属性：text-indent

指定将段落的首行缩进，单位为像素（px）。

或者使用相对单位em，一个em相当于当前元素（font-size）1个文字的大小，我们可以使用2em来缩进两个字。

行间距

属性：line-height

可以控制文字行与行之间的距离。

文本有上间距和下间距之分，这里有转换关系：

上间距=下间距=(line-height - font-size)/2

CSS引入方式

按照书写位置，我们可以把CSS样式表分为三类：

行内样式表（行内式）
内部样式表（嵌入式）
外部样式表（链接式）

三种样式表有优先级：行内优先于内部，内部优先于外部。

内部样式表

写到html页面内部，单独放在style标签内。

理论上可以把style标签放在html文档任何地方，不过一般会放在head中。

行内样式表

直接在标签内部style属性中设置css样式，适用于较为简单的修改：

1
2
3
4
5
6
7
<body>
    <p>我是一只可爱的小羊</p>
    <p style="color: green;">我是一只绿色的小羊</p>
    <p>我是一只可爱的小羊</p>
    <p>我是一只可爱的小羊</p>
    <p>我是一只可爱的小羊</p>
</body>

我是一只绿色的小羊

外部样式表

适用于样式非常多的情况，方法是：样式单独写到css文件里，然后把css引入到html页面中，实际开发中最为常用。

引入方法：

1.新建一个后缀为 .css 的样式文件，把所有的css代码都放在这个文件里。
2.在html里使用link标签引入这个文件。

使用例：

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>
    <!-- 我们在这里进行引用 -->
    <link rel="stylesheet" href="1.css">
</head>
<body>
    <h1>我是一只可爱的小羊</h1>
    <h2>我是一只可爱的小羊</h2>
    <h3>我是一只可爱的小羊</h3>
    <div>我是一只可爱的小羊</div>
    <span>我是一只可爱的小羊</span>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* css文件里只有样式没有标签 */
h1 {
    color: green;
}

h2 {
    font-size: 50px;
}

h3 {
    color: yellow;
}

div {
    font-weight: bolder;
}

span {
    font-style: italic;
}

实例1：新闻页面

页面预览：

代码：

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
<!DOCTYPE html>
<html lang="zh-CN">
<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>案例1 - 新闻页面</title>
    <link rel="stylesheet" href="1.css">
</head>
<body>
    <div id="top">热到膨胀！北方高温明日达鼎盛，京津冀局地地表温度将超60℃</div>
    <div id="info">2019-07-03 16:31:47 来源：<a id="weather" herf="http://www.weather.com.cn/">中国天气网 </a><input type="text" placeholder="请输入查询条件"  >  <input id="search" value='搜索' type="button" /></div>
    <hr>
    <p>中国天气网讯 今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。</p>
    <h3>气温41.4℃！地表温度66.5℃！北京强势迎七月首个高温日</h3>
    <p>今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。</p>
    <div class="pic1"><img src="https://pics5.baidu.com/feed/f31fbe096b63f624afcf7dac87ebf9fd184ca3c7.jpeg@f_auto?token=417435c75068f79625faa8e567e8bf19&s=39B71A9A5A307E8686BB0DE80300F02B" /></div>
    <p>今天，北京地区迎来今年七月份的首个高温日。监测显示，截至今天下午3点，城区气温普遍在36到39℃之间，古观象台、大观园、回龙观等地气温超过40℃，气温最高的站点出现在昌平区流村，达到41.4℃。</p>
    <p>在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。</p>
    <h3>明日热度再升级！京津冀携手冲击38℃+</h3>
    <p>中国天气网气象分析师王伟跃介绍，明天（4日），华北、黄淮地区35℃以上的高温天气还将继续升级，并进入鼎盛阶段，高温强度和范围都将发展到最强。明天，北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。</p>
    <p>不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。在此提醒当地居民注意防暑降温，防范持续高温带来的各种不利影响。（文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽）</p>
    <span>来源：中国天气网 责任编辑：刘京</span>
</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
#top {
    text-align: center;
    font-size: 33px;
    font-weight: 450;
    line-height: 80px;
}

#weather {
    text-decoration: none;
    color: blue;
}

#info {
    color: gray;
    text-align: center;
}

#search {
    font-weight: bold;
}

.pic1 {
    text-align: center;
}

p {
    text-indent: 2em;
}

span {
    color: gray;
    font-size: 13px;
    text-indent: 2em;
}

* {
    font-family: 'Microsoft YaHei';
}

Emmet语法

Emmet语法可以通过缩写等方法来进一步提高html和css的编写速度，在VScode里已经集成了该语法。

快速生成HTML

之前学到的使用叹号生成html骨架就属于一种Emmet语法。

常用语法操作：

输入标签名后按Tab键或者回车等都可以自动生成一对标签。

打出标签名后加星号+数字可以快速输入一组标签：

1
2
3
4
5
6
7
8
9
10
11
<!-- div*10 -->
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

要写父子结构的标签可以借助大于号：

1
2
3
4
5
6
<!-- ul>li -->
    <ul>
        <li></li>
    </ul>
<!-- div>span -->
<div><span></span></div>

并列的标签我们可以借助加号：

1
2
3
<!-- div+p -->
    <div></div>
    <p></p>

如果生成的div带有特定的class或者id，我们可以按照css的语法直接生成：

1
2
3
4
<!-- .banner -->
<div class="banner"></div>
<!-- #footer -->
<div id="footer"></div>

当然，我们如果不想生成div，想生成点别的标签，我们可以在前面加点约束：

1
2
3
4
5
6
7
8
<!-- p.one -->
<p class="one"></p>
<!-- span#gray -->
<span id="gray"></span>
<!-- ul>li#two -->
    <ul>
        <li id="two"></li>
    </ul>

如果我们想生成同样的命名但是带有序号的标签，我们可以使用 $ 号：

1
2
3
4
5
6
7
<!-- .img$*6 -->
    <div class="img1"></div>
    <div class="img2"></div>
    <div class="img3"></div>
    <div class="img4"></div>
    <div class="img5"></div>
    <div class="img6"></div>

如果我们需要在生成的标签带有相同的文字内容，我们可以使用大括号：

1
2
3
4
5
6
7
8
9
<!-- div{我是一只可爱的小羊}*8 -->
    <div>我是一只可爱的小羊</div>
    <div>我是一只可爱的小羊</div>
    <div>我是一只可爱的小羊</div>
    <div>我是一只可爱的小羊</div>
    <div>我是一只可爱的小羊</div>
    <div>我是一只可爱的小羊</div>
    <div>我是一只可爱的小羊</div>
    <div>我是一只可爱的小羊</div>

不同的标签混搭着用都是没问题的，我们也可以生成有顺序的数字：

1
2
3
4
5
6
7
8
9
10
11
<!-- div.num${$}*10 -->
    <div class="num1">1</div>
    <div class="num2">2</div>
    <div class="num3">3</div>
    <div class="num4">4</div>
    <div class="num5">5</div>
    <div class="num6">6</div>
    <div class="num7">7</div>
    <div class="num8">8</div>
    <div class="num9">9</div>
    <div class="num10">10</div>

快速生成css

对于属性和属性值的英文字母，我们可以使用每个单词首字母连拼后按Tab键或者回车可以直接获得这个属性值：

比如我们需要生成一个text-align: center;，我们可以采用首字母：

1
2
3
4
.num1 {
    /* tac */
    text-align: center;
}

其他的也是同样的道理：

1
2
3
4
5
6
7
8
9
10
.num2 {
    /* w100 */
    width: 100px;
    /* h200 */
    height: 200px;
    /* ti2e */
    text-indent: 2em;
    /* tdn */
    text-decoration: none;
}

复合选择器

css中我们可以把选择器根据类型分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基础选择器进行组合而成的。

常用的复合选择器包括：后代选择器，子选择器，并集选择器，伪类选择器等。

后代选择器

如果这里存在有序列表和无序列表，我们需要单独给ol的li修改css：

1
2
3
4
5
6
<ol>
    <li></li>
</ol>
<ul>
    <li></li>
</ul>

这里我们就需要使用后代选择器：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<head>
    <style>
        /* 元素1 元素2 {声明} */
        ol li {
            color: red;
        }
    </style>
</head>

<body>
    <ol>
        <li>红色</li>
    </ol>
    <ul>
        <li>黑色</li>
    </ul>
</body>

注意事项：两个元素之间用空格隔开，元素1为父级，元素2为子级，这样写最终选择的是元素2。

元素2可以为儿子，可以为孙子，只要是元素1的后代即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<head>
    <style>
        ol li {
            color: red;
        }
        ol li a {
            color: green;
        }
    </style>
</head>

<body>
    <ol>
        <li>红色</li>
        <li><a href="#">绿色</a></li>
    </ol>
    <ul>
        <li>黑色</li>
        <li><a href="#">不会变色</a></li>
    </ul>
</body>

如果在多个相同的父子结构里我们需要选择其中一个，我们可以给父级加class：

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
<head>
    <style>
        .nav li a {
            color: red;
        }
    </style>
</head>

<body>
    <ul>
        <li>我要变色</li>
        <li>我要变色</li>
        <li>我要变色</li>
        <li>我要变色</li>
        <li>我要变色</li>
    </ul>
    <ul class="nav">
        <li>我要变色</li>
        <li>我要变色</li>
        <li>我要变色</li>
        <li><a href="#">我是红色</a></li>
        <li>我要变色</li>
    </ul>
    <ul>
        <li>我要变色</li>
        <li>我要变色</li>
        <li>我要变色</li>
        <li>我要变色</li>
        <li>我要变色</li>
    </ul>
</body>

注意到这里如果我们需要选择子代的a标签，子代的子代还有a标签，我们再使用后代选择器就行不通了，它会把我们要的所有a标签都选中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<head>
    <style>
        div a {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <a href="#">我是红色</a>
        <p>
            <a href="#">我怎么也变红了</a>
        </p>
    </div>
</body>

如果我们只想选子代的a，不需要其他代的a，我们这里就需要使用子选择器。

子选择器

子选择器只能选择作为某元素最近的一级子元素：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<head>
    <title>Document</title>
    <style>
        /* 元素1>元素2 {声明} */
        div>a {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <a href="#">我是红色</a>
        <p>
            <a href="#">我没变色</a>
        </p>
    </div>
</body>

元素1和元素2用大于号分隔开，元素2必须为子代。

并集选择器

并集选择器可以选择多组标签，同时为它们定义相同的样式，使用方法是用逗号分隔：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<head>
    <style>
        /* 书写习惯:竖着写 */
        div, 
        p {
            color: red;
        }
    </style>
</head>

<body>
    <div>我是红色</div>
    <p>我是红色</p>
    <span>我是黑色</span>
    <ul>
        <li>我是黑色</li>
        <li>我是黑色</li>
        <li>我是黑色</li>
    </ul>
</body>

和其他选择器共用也是ok的，任何其他类型的选择器都可以作为并集选择器的一部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<head>
    <style>
        div, 
        p, 
        .nav li a {
            color: red;
        }
    </style>
</head>

<body>
    <div>我是红色</div>
    <p>我是红色</p>
    <span>我是黑色</span>
    <ul class="nav">
            <li>我是黑色</li>
            <li><a href="#">我是红色</a></li>
            <li>我是黑色</li>
    </ul>
</body>

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个、第n个元素。

书写时用冒号表示。

链接伪类选择器

样式 说明
a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择鼠标按下未弹起的链接 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<head>
    <style>
        /* 未点开链接为黑色 */
        a:link {
            color: black;
        }
        /* 点开的链接为黄色 */
        a:visited {
            color: yellow;
        }
        /* 鼠标移动到链接上为天蓝色 */
        a:hover {
            color: skyblue;
        }
        /* 鼠标按下后变为绿色 */
        a:active {
            color: green;
        }
    </style>
</head>

<body>
    <a href="#">链接</a>
</body>

这里一定要注意对于链接的伪类选择器按照lvha的顺序写：link在前，然后是visited，然后是hover，然后是active，否则不起作用。

开发时常用写法举例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<head>
    <style>
        a {
            color: black;
            text-decoration: none;
        }
        a:hover {
            color: skyblue;
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <a href="#">链接</a>
</body>

focus伪类选择器

focus伪类选择器用于选取获得焦点的表单元素。

1
2
3
4
5
6
7
8
9
10
11
12
<head>
    <style>
        /* 将鼠标点击选取的输入框变为天蓝色 */
        input:focus {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <input type="text"><input type="text"><input type="text">
</body>

CSS元素显示模式

网页的标签非常多，了解它们的特点可以更好地布局网页。
元素显示模式就是指元素以什么方式进行显示，比如div自己占据一行，一行放多个span。

HTML元素分为块元素和行内元素。

块元素

常见的块元素标签有h1~h6、p、div、ul、ol、li等，div为最典型的块元素。

特点：

自己独占一行，可以设计高度宽度、外边距和内边距。
默认宽度为父级宽度的100%（比如div的父级为body即为占据横向网页），为一个容器或者盒子，可以放行内或者块级元素。

文字类的元素不能再加入子级块元素，例如：p标签里面不能放div。

常见的文字类元素：p、h1~h6

行内元素

常见的行内元素：a、strong、em、i、del、s、ins、u、span等等，span为最典型的行内元素。

特点：

相邻行内元素在一行上，一行可以显示多个。
高宽直接设置是无效的，默认宽度为其内容本身的宽度。
行内元素内只能容纳文本或者其他行内元素。

注意链接里面不能再放链接，特殊情况下链接a里面可以放块级元素。

行内块元素

在行内元素中有几个特殊的标签，如img、input、td。它们同时有块元素和行内元素的特点，叫做行内块元素。

特点：

和相邻行内（行内块）元素在一行上，一行可以显示多个。
默认宽度为本身内容的宽度。高度，行高，内外边距都可以控制。

显示模式的转换

特殊情况下，我们需要对元素的模式进行转换，比如想要增加a元素的触发范围：

例如这里，我们只是给a设置宽高是无效的：

1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
    <style>
        a {
            width: 100px;
            height: 150px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <a href="#">链接</a>
</body>

但是，如果这里我们添加一个新的属性display，使其拥有块元素的性质，我们就可以给它增加宽高背景之类的了，点击这个块即可实现超链接：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
    <style>
        a {
            width: 100px;
            height: 150px;
            background-color: pink;
            display: block;
        }
    </style>
</head>

<body>
    <a href="#">链接</a>
</body>

如果我们想实现一行多个，可以转化为行内元素：display: inline;

转化为行内块元素：display: inline-block;

实例2：小米侧边栏

预览效果：

代码：

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
<!DOCTYPE html>
<html lang="zh-CN">

<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>
        a {
            width: 200px;
            height: 50px;
            line-height: 50px;
            background-color: rgb(70, 70, 70);
            display: block;
            text-indent: 2em;
            text-decoration: none;
            color: white;
        }
        a:hover {
            background-color: rgb(255, 136, 0);
        }
    </style>
</head>

<body>
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>
</body>

</html>

字体垂直居中原理：

行高等于盒子高度，上下空隙把文字挤到居中位置。

CSS背景属性

背景颜色

属性：background-color

默认值：transparent（透明的）

后面可跟十六进制颜色码、RGB、预设颜色等等。

背景图片

属性：background-image

优点是便于控制位置。

默认值为none。

后跟url（图片地址，可为网图、绝对地址或者相对地址）：

1
2
3
div {
	background-image: url(xxxxxx);
}

背景平铺

平铺是指用完全相同的图进行图片重复，填满盒子。在html中图片背景是默认平铺的。

属性：background-repeat

属性值：repeat、no-repeat、repeat-x、repeat-y

背景平铺在背景颜色图层之上，如果图片背景为透明，那么盒子背景色也是能显示的。

背景图片位置

属性：background-position

默认为位于左上角。

参数可以使用x坐标和y坐标、或者使用方位名词或者精确单位：

1
2
3
4
div {
	/*background-position: x y;*/
    background-position: center top;/*中间靠上*/
}

注意：两个值如果都为方位词那么前后顺序无关。

如果只指定一个方位名词，另一个省略，那么第二个值默认居中对齐。

对于精确到像素的位置设置，如果只指定一个数值，那么一定为x坐标，另一个默认为垂直居中。

如果为混合单位（像素+方位词），那么第一个指x坐标，第二个指y坐标。

背景固定

属性：background-attachment

这个属性可以设置背景图像是否固定或随着页面其余部分滚动。

属性值：scroll（滚动），fixed（固定）

复合属性

属性：background

简写时没有固定的顺序，约定俗成的顺序为：颜色，图片地址，平铺，滚动，位置。

背景色半透明

1
2
/* 透明度的0.3的0可以省略 */
background: rgba(0, 0, 0, 0.3);

a为alpha，可以修改透明度，取值在0和1之间，0为全透明，1为不透明。

CSS三大特性

CSS有三大特性：层叠性、继承性、优先级。

层叠性

层叠性主要解决样式冲突的问题，如果样式冲突，采取就近原则，哪个样式离结构近就执行哪个样式，后来者居上。

如果属性不冲突，那么不会被覆盖，都会执行。

1
2
3
4
5
6
7
8
/* 这里两个重复的css只有black被覆盖掉了 */
		div {
            color: black;
            font-size: 18px;
        }
        div {
            color: red;
        }

原理就是代码从上往下解析，重复出现的就把之前已解析的覆盖掉了。

继承性

子标签会继承父标签的某些样式，如文本颜色和字号，在控制台样式中会显示：继承自xxx（父元素）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
    <style>
        div {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div>
        我是蓝色
        <p>我也是蓝色</p>
    </div>
</body>

行高的继承性

行高的继承取决于实际的字体大小：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<head>
    <style>
        body {
            color: blue;
            /* 这里的1.5指实际字体大小的1.5倍 */
            font: 18px/1.5;
        }
        div {
            /* 实际字体大小最终为24像素，行高为36像素 */
            font-size: 24px;
        }
    </style>
</head>

<body>
    <div>我是蓝色</div>
</body>

行高可以跟单位也可以不跟单位。

优先级

当相同的一个元素被多个选择器指定，那么就会产生优先级：

如果选择器类型相同，那么执行层叠性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
    <style>
        /* 都为内部选择器，执行层叠性 */
        div {
            color: red;
        }
        .text {
            color: blue;
        }
    </style>
</head>

<body>
    <div class="text">我是蓝色</div>
</body>

选择器类型不同，那么按照选择器权重进行：

权重分级：

权重等级 选择器
最低 继承性或者 *
第二 标签选择器
第三 类选择器 伪类选择器
第四 ID选择器
第五 行内style
无穷大 !important

下面是对比：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<head>
	<style>
        * {
            color: yellow;
        }
        div {
            color: red;
        }
        .text {
            color: blue;
        }
        #res {
            color: gray;
        }
    </style>
</head>

<body>
    <div class="text" id="res" style="color: purple">我是紫色</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<head>
	<style>
        * {
            color: yellow;
        }
        div {
            color: red !important;
        }
        .text {
            color: blue;
        }
        #res {
            color: gray;
        }
    </style>
</head>

<body>
    <div class="text" id="res" style="color: purple">我是红色</div>
</body>

注意：继承的权重为0。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<head>
    <style>
    /* #res为继承性，p为标签选择器 */
        #res {
            color: red;
        }
        p {
            color: green;
        }
    </style>
</head>

<body>
    <div id="res">
        <p>你以为我是红色，其实我是绿色</p>
    </div>
</body>