CSS基础知识（一）

<!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: aquamarine;

font-size: 30px;

background-color:gray;

width: 400px;

height: 400px;

}

</style>

</head>

<body>

<p>这是一个p标签</p>

</body>

</html>

1.2外联式

新建一个css文件，将样式写到里面，再在原本的HTML文件里引入新建的css文件。（较为常用）

<link rel="stylesheet" href="./my.css">

/* 选择器{ } */

p {

color: aquamarine;

font-size: 30px;

background-color:gray;

width: 400px;

height: 400px;

}

1.3行内式

直接写在body里，写在标签的style属性中。

<div style="color: red; font-size: 30px;">这是div标签</div>

1.4各种方式的使用场景

引入方式	书写位置	作用范围	使用场景
内嵌式	CSS写在style标签中	当前页面	小案例
外联式	CSS写在单独的CSS文件中，通过link引入	多个页面	项目中
行内式	CSS写在标签的style属性中	当前标签	配合js使用

2.选择器

2.1标签选择器

结构：标签名 {CSS属性名；属性值；}

注意：

选择的是一类标签，而不是单独的某一个标签。
标签选择器无论嵌套关系多深，都能找到对应的标签。

2.2类选择器

结构：.类名{CSS 属性；属性值；}

作用：给同意类名的标签设置相同样式。

注意：

所有标签都有class属性，属性值统称为类名。
类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头（只能由字母或下划线开头）
一个标签可以有多个类名，之间用空格隔开。
类名可以重复，一个类选择器可以同时选中多个标签。

2.3id选择器

结构：#id属性值{CSS属性名；属性值；}

作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式。

注意:

所有的标签都可以有且只有一个唯一的id，像身份证号一样。
一个id选择器只能选中一个标签。
id选择器多用于后期配合js使用。

2.4通配符选择器

结构：* {CSS属性名；属性值；}

作用：找到页面中所有的标签，设置样式。

注意：

在开发中极少数的情况才会使用到。
可用于去除标签默认的margin（外边距）和padding（内边距）。margin是元素和元素之间的距离，而padding则是元素的内容和边框之间的距离

* {

margin:0;

padding:0

}

3.字体和文本样式

3.1字体大小

属性名：font-size

取值：数字+px;

注意：

谷歌浏览器默认字体大小是16px
单位需要设置否则无效。

3.2字体粗细

属性名：font-weight

取值：

关键字：正常（normal）、加粗（bold）
取值：100-900的整数，正常400、加粗900

注意：

不是所有字体都提供九种粗细，因此部分取值页面中无变化。
实际开发中以：正常、加粗两种取值最多。

3.2.1字体font相关属性的连写

属性名：font（复合属性）

取值：font：style weight width height

注意：

只能省略前两个，恢复默认值。

font: italic 700 60px 微软雅黑;

3.3.2常见字体系列

无衬线字体(sans-serif)

1.特点:文字笔画粗细均匀，并且首尾无装饰

2.场景:网页中大多采用无衬线字体

3.常见该系列字体:黑体、Arial

衬线字体(serif)

1.特点:文字笔画粗细不均，并且首尾有笔锋装饰

2.场景:报刊书籍中应用广泛

3.常见该系列字体:宋体、Times New Roman

等宽字体( monospace)

1．特点:每个字母或文字的宽度相等

2.场景:一般用于程序代码编写，有利于代码的阅读和编写

3.常见该系列字体:Consolas、fira code

3.3.3字体颜色

属性名：

文字颜色：color
背景颜色：background-color

属性值：

颜色表示方法	表示含义	属性值
关键词	预定义的颜色名	red、gree、blue各种颜色的英文名
rgb表示法	红黄蓝三原色，每项的取值范围是0-255	rgb(0,0,0)括号中的数字可以改变
rgba表示法	红黄蓝+a表示透明度，a的取值范围是0-1	rgba(0，0，0，1)
十六进制表示法	#开头，将数字转换为十六进制表示	#000000、#ff0000，简写#000，#f00

六进制中，两两一组分别为红黄蓝，

建议安装power toys取色

3.3.4是否倾斜

属性名：font-style

取值：

默认值：normal
倾斜：italic

3.3.5样式层叠的问题

如果给一个标签设置了相同的样式，最下面的会生效。因为CSS为层叠样式表，即一层一层叠加覆盖。

3.4文本样式

3.4.1文本缩进

属性名：text-indent

取值：

数字+px
数字+em

em:一个字的大小

3.4.2水平对齐方式

属性名：text-align

取值：

属性值	效果
left	左对齐
center	居中对齐
right	右对齐

注意：如果需要让文本居中，text-align属性给文本标签（文本的父元素）设置

text-align: center可以让文本、span、a、input、img标签，需要给以上元素的父元素设置。

标签水平居中方法总结

margin：0 auto;一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度。

（0表示上下外边距，auto表示左右外边距相同）

3.4.3文本修饰

属性名：text-decoration

属性值	效果
underline	下划线
line-through	删除线
overline	上划线
none	无装饰线

注意：开发中会使用text-decoration：none；清楚a标签默认的下划线。

3.5行高

属性名：line-height

取值：

数值+px
倍数（当前标签font-size的倍数）

应用：

让单行文本垂直居中可以设置line-height：文字父元素高度。
设置line-height：可以取消上下间距。
垂直居中技巧：设置行高属性值=自身高度属性值

行高与font连写的注意点：

如果同时设置了行高和font连写，注意覆盖问题
font：style weight size/line-height family;(size和line-height之间要用/隔开，其余用空格隔开，其中style和weight可以省略)

3.6Chrome调试工具

在页面点击：检查或者用F12+Fn

出现被划掉的样式，可能是注释或者被覆盖了。

出现黄色感叹号则说明属性写错了

选中后按上下键可以更改数值的大小，用于调试

CSS上一行出错，下一行也会受影响

CSS进阶

1.复合选择器

1.1后代选择器：空格

选择器1 选择器2 {

}

选择器2是选择器1的后代（后代包括儿子、孙子、重孙子...）

1.2子代选择器：>

选择器1>选择器2 {

}

选择器2是选择器1的子代，子代选择器只包括儿子

2.并集选择器

选择器1,选择器2 {

}

同时选中两组，被选中的选择器可以是基础选择器也可以是复合选择器。通常每行只写一个选择器。

3.交集选择器

选择器1选择器2 {

}

（既又原则）找到页面中即能被选择器1选中，又能被选择器2选中的标签，设置样式。

交集选择器中如果有标签选择器，标签选择器必须写在最前面

4.伪类选择器

4.1hover伪类选择器

对鼠标悬停时的状态设置样式

:hover {

}

伪类选择器选中的时元素的某种状态

4.2emmet语法

快速生成代码

5.背景

5.1背景颜色

属性名：background-color（bgc）

属性值：rgb（0，0，0）或者rgba(0,0,0,0)最后一个值表示透明度。还可以直接使用颜色的名字和对应的十六进制来表示。

5.2背景图片

属性名：background-image（bgi）

属性值：

background-image：url('图片的路径')

注意:

背景图片中url可以省略''；

背景图片默认是在水平和垂直方向平铺的；

背景图片效果类似于背景颜色，是不能撑开盒子的，文字可以显示在背景图上。图片的数量会随着盒子的大小。

5.3背景平铺

属性名：background-repeat（bgr)

属性值：

取值	效果
repeat	（默认值）水平和垂直方向都平铺
no-repeat	不平铺
repeat-x	沿着水平方向（x轴）平铺
repeat-y	沿着垂直方向（y轴）平铺

5.4背景图位置

属性名：background-position（bgp)

属性值：background-position: 水平方向位置垂直方向位置;（参考坐标的值，左上角为原点，水平向左垂直向下为正）

5.5背景相关属性的连写形式

属性名：background（bg）

属性值：background：color image repeat position（可以进行省略，不分先后顺序）

特殊：特殊情况:在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background: url（）（即只包含background-image属性）

6.元素显示模式

6.1块级元素

显示特点：

独占一行；
宽度默认是父元素的高度，可以被内容撑开；
可以设置宽高。

代表标签：div p h ul il dl dt dd form header nav footer......

6.2行内元素

显示特点：

一行可以显示多个
宽度和高低默认由内容撑开
不可以设置宽高

代表标签：a span b u i s strong ins en del

6.3行内块元素

显示特点：

一行可以显示多个
可以设置宽高

代表标签：input、textarea、button、select

特殊情况: img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

6.4元素显示模式转换

目的：改变元素默认的选择特点，让元素符合布局要求。

属性	效果	使用频率
display:block	转化成块级元素	较多
display:inline-block	转换成行内块元素	较多
display;inline	转换成行内元素	极少

CSS特性

1.继承性

特性：子元素有默认继承父元素样式的特点

可以继承的常见属性（文字控制属性都可以继承）：

color
font-style、font-weight、font-size、font-family
text-indent、text-align4
line-height

可以通过调试工具判断样式是否可以继承（灰色表示不可以继承的样式，高亮表示可以继承的样式）

(拓展）继承的应用

好处:可以在一定程度上减少代码常见应用场景:

可以直接给ul设置list-style:none属性，从而去除列表默认的小圆点样式
直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小

(拓展）继承失效的特殊情况

如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式

1. a标签的color会继承失效

color属性继承了，但是被浏览器默认设置的样式覆盖了

2. h系列标签的font-size会继承失效

font-size属性也会被继承，同样也会被浏览器的默认样式覆盖

2.层叠性

给一个标签设置相同的属性，写在最后面的会生效。

给一个标签设置不同的属性，会共同作用在标签上。

3.优先级

3.1 优先级的介绍

特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式：
- 继承< 通配符选择器< 标签选择器< 类选择器< id选择器< 行内样式< !important
注意点：1.!important写在属性值的后面，分号的前面！2.!important不能提升继承的优先级，只要是继承优先级最低！3.实际开发中不建议使用!important 。
注意点：
- 1.!important写在属性值的后面，分号的前面！
- 2.!important不能提升继承的优先级，只要是继承优先级最低！
- 3.实际开发中不建议用!important

div {

color: red !important;

/*!important 一定要写在封号的前面，否则不会生效*/

}

3.2 权重叠加计算

场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
权重叠加计算公式：（每一级之间不存在进位）

比较规则：先看第一位，第一位不相同即数字大的优先级高；若第一位比较不出来，则向后继续比较，方法相同；如果最后所有数字都相同，则比较层叠性，写在下面的样式会覆盖之前的样式。
注意点：!important如果不是继承，则权重最高，天下第一！

（拓展）权重叠加计算案例

权重计算题解题步骤：

1.先判断选择器是否能直接选中标签，如果不能直接选中→ 是继承，优先级最低→ 直接pass

2.通过权重计算公式，判断谁权重最高

注意点：

实际开发中选择标签需要精准，尽量避免多个选择器同时选中一个标签的情况，不要自己难为自己
都是继承, 继承里面谁高, 看继承哪个父级, 哪个父级高, 哪个选择器生效