CSS

# CSS

## 概述

- CSS 指层叠样式表 (*C*ascading *S*tyle *S*heets)

- 样式定义*如何显示* HTML 元素

- 样式通常存储在*样式表*中

- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

- *外部样式表*可以极大提高工作效率

- 外部样式表通常存储在 *CSS 文件*中

- 多个样式定义可*层叠*为一

## CSS样式

### 行内样式

应用内嵌样式到各个网页元素

```HTML

I love China!

```

### 内页样式

再网页上创建嵌入的样式表

```HTML

I love China!

```

### 外部样式

将网页连接到外部样式表

1. 建立一个css文件

2. 在`HTML`文件的``中写``

3. 在css中编写

```HTML

```

## CSS3 选择器

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。

"CSS" 列指示该属性是在哪个 CSS 版本中定义的。

| 选择器 | 例子 | 例子描述 | CSS |

| :--------------------------------------: | :-------------------: | :-------------------------------------------------: | :--- |

| #id | #firstname | 选择 id="firstname" 的所有元素。 | 1 |

| * | * | 选择所有元素。 | 2 |

| element | p | 选择所有

元素。 | 1 |

| element,element | div,p | 选择所有

元素和所有

元素。 | 1 |

| element element | div p | 选择

元素内部的所有

元素。 | 1 |

| element>element | div>p | 选择父元素为

元素的所有

元素。 | 2 |

| element+element | div+p | 选择紧接在

元素之后的所有

元素。 | 2 |

| :first-letter | p:first-letter | 选择每个

元素的首字母。 | 1 |

| :first-line | p:first-line | 选择每个

元素的首行。 | 1 |

| :first-child | p:first-child | 选择属于父元素的第一个子元素的每个

元素。 | 2 |

| :before | p:before | 在每个

元素的内容之前插入内容。 | 2 |

| :after | p:after | 在每个

元素的内容之后插入内容。 | 2 |

| :lang(*language*) | p:lang(it) | 选择带有以 "it" 开头的 lang 属性值的每个

元素。 | 2 |

| *element1*~*element2* | p~ul | 选择前面有

元素的每个

| :first-of-type | p:first-of-type | 选择属于其父元素的首个

元素的每个

元素。 | 3 |

| :last-of-type | p:last-of-type | 选择属于其父元素的最后

元素的每个

元素。 | 3 |

| :only-of-type | p:only-of-type | 选择属于其父元素唯一的

元素的每个

元素。 | 3 |

| :only-child | p:only-child | 选择属于其父元素的唯一子元素的每个

元素。 | 3 |

| :nth-child(*n*) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个

元素。 | 3 |

| :nth-of-type(*n*) | p:nth-of-type(2) | 选择属于其父元素第二个

元素的每个

元素。 | 3 |

| :last-child | p:last-child | 选择属于其父元素最后一个子元素每个

元素。 | 3 |

| :empty | p:empty | 选择没有子元素的每个

元素（包括文本节点）。 | 3 |

| :not(*selector*) | :not(p) | 选择非

元素的每个元素。 | 3 |

## CSS三大特性

### 层叠性

层叠性是指当一个标签被设置了多个重复的样式的时候，一个属性会覆盖另外一个属性。

层叠性主要遵循的原则是就近原则，在不考虑优先级的情况下，在多个样式中最终生效的样式是离标签最近的样式。这里要注意只覆盖同样的不可重复的样式属性，不会覆盖不重复的属性，不重复的属性会合并下来

```HTML

Document

123

```

![image-20201223152737197](css.assets/image-20201223152737197.png)

### 继承性

- 继承性是指当子标签没有设置样式时，会继承父标签的样式。

- 比如一个子标签没有设置背景颜色，那么子标签会继承父标签的背景颜色。

可继承的属性比如有字体类属性（字体颜色、字体大小之类的）、文本类属性（行高之类的）、背景类属性（背景颜色之类的）（要注意子标签不会继承父标签的宽度、高度、边距属性）

```HTML

Document

p继承div的样式

```

![image-20201223152904867](css.assets/image-20201223152904867.png)

### 优先级

- 优先级：!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承【优先级高的规则会忽视层叠性，忽视就近原则来定义样式。比如定义了!important，即使行内样式离得近，最终生效的还是!important标注的属性】

- - !important是css的一种语法，定义在样式属性后面，代表这个属性不会被覆盖，最终生效的属性一定是!important标注的属性。[![image](css.assets/1053079-20180501154823992-2001739410.png)](https://images2018.cnblogs.com/blog/1053079/201805/1053079-20180501154823658-883822458.png)

```HTML

Document

```

#### 权重计算方法

##### 规则

- 权重使用四个数字来衡量(x,x,x,x)【CSS2使用三位】

- 继承的权重为(0,0,0,0)

- 标签选择器的权重为(0,0,0,1)

- 类、伪类选择器的权重为(0,0,1,0)

- id选择器选择器的权重为(0,1,0,0)

- 行内样式的权重为(1,0,0,0)

- !important的权重无限大

##### 计算方法

- 多个选择器混杂时，权重之和也是用四个数字来组成，每一位的值为多个选择器四个数字的每位之和，比如div:first-child的权重为(0,0,0,1)+(0,0,1,0)=(0,0,1,1)，比如div ul li 为(0,0,0,3),比如a:hover为(0,0,1,1)

- 权重之和的数制是不会进位的，再多的标签选择器权重加和也抵不过一个类选择器。

- 多个选择器之间的顺序是无关的，不影响权重之和。

- 对于并集选择器来说不是权重的加和，因为理论上它还是独立的，它只相当于将多个选择器的相同内容归于一个并集选择器中，理论上每一个选择器还是独立的。[![image](css.assets/1053079-20180501154824593-1122794927.png)](https://images2018.cnblogs.com/blog/1053079/201805/1053079-20180501154824334-1990617461.png)

## CSS常用单位

### px

px 是图像显示的基本单元，是 viewport 像素，是相对单位。同样都是 1px，在不同设备上的显示有可能是不一样的。

### rem

rem 是相对于根元素 `` 的 font-size 来计算的，比如说你设置了1.2rem，根元素的font-size是100px，那么这个元素动态算出来的px数就是120px。不同宽度，设置不同px，这样就可以适配所有宽度的设备了。

### em

em 是相对于父元素的 font-size 来计算的。

### vw，vh，vmin，vmax

（1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。

视窗(Viewport)是你的浏览器实际显示内容的区域（不包括工具栏和按钮）。

（2）具体描述如下：

- vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）

- vh：视窗高度的百分比

- vmin：当前 vw 和 vh 中较小的一个值

- vmax：当前 vw 和 vh 中较大的一个值

（3）vmin、vmax 用处

做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。

由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。

（4）浏览器兼容性

（1）桌面 PC

- Chrome：自 26 版起就完美支持（2013年2月）

- Firefox：自 19 版起就完美支持（2013年1月）

- Safari：自 6.1 版起就完美支持（2013年10月）

- Opera：自 15 版起就完美支持（2013年7月）

- IE：自 IE10 起（包括 Edge）到现在还只是部分支持（不支持 vmax，同时 vm 代替 vmin）

（2）移动设备

- Android：自 4.4 版起就完美支持（2013年12月）

- iOS：自 iOS8 版起就完美支持（2014年9月）

（5）用途

- 设置元素的尺寸，字体大小

- 设置遮罩层的尺寸

### 百分号 %

% 是相对于父元素的尺寸来计算的。

## 元素的常用属性

### 1、字体属性：(font)

- **大小：font-size**

x-large (特大) xx-small;(极小) 一般中文用不到，还可以使用单位来表示：ps em rem

- **样式：font-style**

oblique （偏斜体) italic(斜体) normal(正常)

- **行高：line-height**

normal(正常) 单位：PX、EM

- **粗细：font-weight**

bold(粗体) lighter(细体) normal(正常) 还可使用数值100-900，定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。

- **修饰：text-decoration**

underline(下划线) overline(上划线) line-through(删除线) blink(闪烁)

常用字体： (font-family) "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sansserif, Verdana

### 2、背景属性： (background)

- **背景颜色**

这个属性接受任何合法的颜色值，

1、三基色比例表示， #RRGGBB，前两位是红色，中间2位是绿色，后两位是蓝色，最小是0，最大是F。

2、rgba表示方式，rgb(255,0,0)或者rgb(100%,0,0)表示红色，可以传第四个参数代表透明度

3、英文单词 background-color: #FFFFFF background-color: rgb(255,0,0,.5) background-color: red

- **图片**

{background-image: url();}

- **重复**

{background-repeat: no-repeat;}

- **滚动**

background-attachment:

fixed(固定) scroll(滚动)

- **位置**

background-position

left(水平) top(垂直)

- **简写方法**

{background:#000 url(..) repeat fixed left top;}

/简写·这个在阅读代码中经常出现，要认真的研究/、

```css

body

{

background-image:url('gradient2.png');

background-repeat:repeat-x;

}

```

### 3、列表属性： (List-style)

- **类型：list-style-type:**

disc(圆点) circle;(圆圈) square(方块) decimal;(数字) lower-roman(小罗码数字) upper-roman ower-alpha（希腊 upper-alpha

- **位置：list-style-position **

outside(外) inside

- **图像：list-style-image:**

url(..);

### 4、边框属性：

- (**Border) 边框类型：border-style**

dotted(点线) dashed(虚线) solid（实线） double(双线) groove(槽线) ridge(脊状) inset (凹陷) outset;

- **边框宽度：border-width**

- **边框颜色：border-color**

- **简写方法：border：1px solidcolor;**

### 5、区块属性： (Block)

- **字间距：letter-spacing**

可以使用px等单位

- 端对齐：text-align

left;(左对齐) right;(右对齐) center(居中)

- **缩进：text-indent**

数值px

- 垂直对齐：vertical-align: baseline

(基线) sub(下标) super;(下标) top; text-top; middle; bottom; text-bottom;

- **词间距：word-spacing**

数值

- **显示：display（重要）**

none(不显示)

inline(默认：内联元素)

block(块)

inline-block（行内块元素）

list-item;(列表项)

**块级元素(block)特性：**

- 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;

- 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

**内联元素(inline)特性：**

- 和相邻的内联元素在同一行;

- 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的 top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

**块级元素主要有：**

- div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , ol , p , table , ul , li

**内联元素主要有：**

- a , i , img , input , select , span , strong ,textarea

### 6、盒子模型（box）

对于块状元素，多个元素套在一起就像几个盒子套在一起，怎么紧凑的排版是个问题。

- **宽：width**

表示内容区域的宽度

- **高：**

height 表示内容区域的宽度

- **外边距：**

margin margin-top：本元素顶部距离上一个元素的距离

margin-bottom：本元素低部距离上一个元素的距离

margin-left：本元素左侧部距离上一个元素的距离

margin-right：本元素右侧距离上一个元素的距离

合并写： margin: 上右下左 margin:10px 10px 10px 10px;

还可以是 margin: 上下左右 margin:10px 10px;

左右居中 margin:0 auto; 或者 margin: auto;

垂直居中后边说。

- **内边距：padding**

padding-top：本元素顶部空出的距离

padding-bottom：本元素低部空出的距离

padding-left：本元素左侧部空出的距离

padding-right：本元素右侧空出的距离

合并写： padding: 上右下左 padding:10px 10px 10px 10px;

还可以是 padding: 上下左右 padding:10px 10px;

- **box-sizing**：定义如何计算元素的宽度和高度:是否应该包含填充和边框

默认情况下，元素的宽度和高度计算如下： width + padding + border =元素的实际宽度 height + padding + border =元素的实际高度这意味着：当您设置元素的宽度/高度时，元素通常看起来比您设置的大（因为元素的边框和填充被添加到元素的指定宽度/高度）。

content-box：More Actionscontent-box这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。

border-box：元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit：规定应从父元素继承 box-sizing 属性的值。

### 7、定位属性： (Position)

文档流是指在网页中将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.(自己的理解是从头到尾按照文档的顺序，该在什么位置就在什么位置，自上而下，自左到右的顺序),这是普通流的说法。

- **定位：Position: static：**

文档流定位，默认的。

absolute：绝对定位

relative;：相对定位

fixed: 固定定位

- **可见性：visibility**

inherit（继承父元素）;

visible（可见）

hidden（隐藏）

- **溢出：overflow visible**

（可见） hidden（隐藏） scroll（滚动）;

### 8、浮动

#### （1）定义浮动：float

left（左浮动） right（右浮动）

浮动的问题

浮动元素会脱离了文档流，造成父元素的高度坍塌，所以包围图片和文本的 div 不占据空间。于是使用了浮动的元素，后边紧跟其他元素会错乱，就要清除浮动。

#### （2）清除浮动

1、通过属性clear:both;达到清除浮动的目的；

元素浮动后，只需要在浮动元素添加多一个块级元素，并添加clear: both;属性，便可以达到清除浮动的目的。

```html

```

2、通过给父级元素添加伪类after，达到清除浮动的目的；

这种方式也是使用clear: both;的方式达到效果，只是变相的使用了伪类after，使得页面结构更简洁，也是常用的清理浮动的方式。

```html

```

3、使用双伪类；

此方式和三原理一样，代码更简洁。

```html

```

CSS

你可能感兴趣的:(CSS)