002：CSS基础

注意：蓝色

重要：红色

目录：

1. 学会使用CSS选择器：　　　　9大选择器。交集选择器、并集选择器、后代选择器、子代选择器、伪类选择器。

2.font、color、横向竖向居中、文本修饰、首行缩进。

　　font合写规则

3. 熟练掌握CSS背景属性

　　5大属性

4. 熟练掌握CSS三种显示模式。换行、宽高内外边距、总宽高、包容。

5. 熟练掌握CSS三大特性：层叠、继承、优先级（权重）

前言：CSS

1：CSS(Cascading Style Sheets)  层叠样式表（级联样式表）

2：引入CSS样式表（书写位置）

　　行内样式表、内部样式表、外部样式表

3：css声明、标签引用。

一：选择器

1：标签选择器

2：class选择器　　　 　.声明

　　多类名选择器

　　div class="pink fontWeight font20">亚瑟</div>

3：id选择器　　　　　　#声明

4：通配选择器　　　　  *声明

5：后代选择器选择全部

6：子代选择器-选择亲儿子

在css中。后面的会把前面的属性覆盖

7：并集选择器

8：交集选择器

9：链接伪类选择器

- :link      /* 未访问的链接 */

- :visited   /* 已访问的链接 */

- :hover     /* 鼠标移动到链接上 */

- :active    /* 选定的链接 */

注意写的时候，他们的顺序尽量不要颠倒  按照  lvha 的顺序。   love   hate  爱上了讨厌 记忆法    或者   lv 包包 非常 hao

二：font属性

2.1：font-size font-family　font-style、font-weight

　　注意：

　　font-size和font-family必须是最后，且顺序不能够调整。

　　font-style font-weight 可以调换顺序

　　 文本显示不完就会溢出，给定宽高的前提下。

　　2.1.1：font-style 字体风格

　　normal：指定文本字体样式为正常的字体

　　italic：指定文本字体样式为斜体。对于没有设计斜体的特殊字体，如果要使用斜体外观将应用oblique

　　oblique：指定文本字体样式为倾斜的字体。人为的使文字倾斜，而不是去选取字体中的斜体字

　　2.1.2：font-weight 字体加黑

　　2.1.3：font-size: 字体大小

　　2.1.4:font-family 字体 宋体

　　font-size的单位

　　　　

2.2： 横向纵向居中

　　text-align: center;

　　line-height: 100px; /*100%这种写法不起作用*/

　　lineheight（行高比字体大8像素左右）

2.3：text-decoration   通常我们用于给链接修改装饰效果

| 值            | 描述

| ------------ | -----------------------

| none         | 默认。定义标准的文本。

| underline    | 定义文本下的一条线。下划线 也是我们链接自带的

| overline     | 定义文本上的一条线。

| line-through | 定义穿过文本下的一条线。

2.4：首行缩进

text-indent: 2em;

三：CSS 背景

背景颜色、背景图片、背景平铺、背景附着（滚动和定位）、背景位置

CSS 可以添加背景颜色和背景图片，以及来进行图片设置。

| background-color                      | 背景颜色     |

| background-image                      | 背景图片地址   |

| background-repeat                     | 是否平铺     |

| background-position                   | 背景位置     |

| background-attachment                 | 背景固定还是滚动 |

| 背景的合写（复合属性）

| background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 |

没有强制要求

3.1：背景颜色

3.2：背景图片(image)

background-image : none | url (url)

参数：

none : 　无背景图（默认的）

url : 　使用绝对或相对地址指定背景图像

background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。 如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。

小技巧：  我们提倡 背景图片后面的地址，url不要加引号。

3.3：背景平铺（repeat）

语法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y

参数：

repeat : 　背景图像在纵向和横向上平铺（默认的）

no-repeat : 　背景图像不平铺

repeat-x : 　背景图像在横向上平铺

repeat-y : 　背景图像在纵向平铺

设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。

repeat-x : 　背景图像在横向上平铺

repeat-y : 　背景图像在纵向平铺

3.4：背景位置(position)

语法：

background-position : length || length

background-position : position || position

参数：

length : 　百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位

position : 　top | center | bottom | left | center | right

说明：

设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。

如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。

注意：

1. position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。

2. 如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top;   则 15px 一定是  x坐标   top是 y坐标。

实际工作用的最多的，就是背景图片居中对齐了。

3.5：背景附着

语法：

background-attachment : scroll | fixed

参数：

scroll : 　背景图像是随对象内容滚动

fixed : 　背景图像固定

说明：

设置或检索背景图像是随对象内容滚动还是固定的。

背景简写

background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：

background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

background: transparent url(image.jpg) repeat-y  scroll 50% 0 ;

四：块元素、行元素、行内块

换行、宽高内外边距、自身宽高、容纳。

标签的类型(显示模式)

HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。具体如下：

4.1：块级元素(block-level)

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

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

块级元素的特点：

（1）总是从新行开始

（2）高度，行高、外边距以及内边距都可以控制。

（3）宽度默认是容器的100%

（4）可以容纳内联元素和其他块元素。

4.2： 行内元素(inline-level)

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。

行内元素的特点：

（1）和相邻行内元素在一行上。

（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。

（3）默认宽度就是它本身内容的宽度。

（4）行内元素只能容纳文本或则其他行内元素。（a特殊）

注意：

1. 只有 文字才 能组成段落  因此 p  里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。

2. 链接里面不能再放链接。

4.3：行内块元素（inline-block）

在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

行内块元素的特点：

（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。

（2）默认宽度就是它本身内容的宽度。

（3）高度，行高、外边距以及内边距都可以控制。

4.4： 标签显示模式转换 display

块转行内：display:inline;

行内转块：display:block;

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

五：CSS三大特性

5.1：层叠性。

5.2：继承性。

5.3:  CSS优先级

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。

行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。

权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。

CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

CSS特殊性（Specificity）

关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准 具体规范入如下：

specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

| 继承或者* 的贡献值      | 0,0,0,0 |

| --------------- | ------- |

| 每个元素（标签）贡献值为    | 0,0,0,1 |

| 每个类，伪类贡献值为      | 0,0,1,0 |

| 每个ID贡献值为        | 0,1,0,0 |

| 每个行内样式贡献值       | 1,0,0,0 |

| 每个!important贡献值 | ∞ 无穷大   |

权重是可以叠加的

比如的例子：

div ul  li   ------>      0,0,0,3

.nav ul li   ------>      0,0,1,2

a:hover      -----—>      0,0,1,1

.nav a       ------>      0,0,1,1

#nav p       ----->       0,1,0,1

​ 1.数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。

1. 继承的 权重是 0

总结优先级：

1. 使用了 !important声明的规则。

2. 内嵌在 HTML 元素的 style属性里面的声明。

3. 使用了 ID 选择器的规则。

4. 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。

5. 使用了元素选择器的规则。

6. 只包含一个通用选择器的规则。

7. 同一类选择器则遵循就近原则。

总结：权重是优先级的算法，层叠是优先级的表现