Css的引入方式一共有三种：行内样式、内部样式表、外部样式表

• 行内样式

通过style属性引入css样式

示例：

 二、内部样式表

在style标签里面写css样式

示例：

 三、外部样式表

Css代码保存到外部的css文件中，html文件通过link标签引用该css样式表。

示例：

 四、规定元素的定位类型。

说明：这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对定位或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

通过设置top bottom left right 四个属性值来决定偏移位置。值可以为关键词、百分比、绝对单位

值           描述

Static       默认值，没有定位。元素出现在正常的流中。（忽略top、right、bottom、left和z-index属性）

relative     生成相对定位的元素，相对于其正常位置进行定位。

absolute      生成绝对定位的元素，相对于最近的非static父元素进行定位。绝对定位的元素可以设置外边距（margin），且不会与其他他边距合并。

fixed         生成绝对定位的元素，相对于浏览器窗口(viewport)进行定位。 sticky 盒位置根据正常流计算，然后相当于该元素在流中的flow root(BFC)和containing block（最近的块级元素）定位。

五、Fixed定位示例如下：

 六、Relative相对定位示例如下：

 七、Absolute绝对定位示例如下：

 八、伪元素

伪元素用于设置元素指定部分的样式。

比如说设置元素的首字母、首行的样式;在元素的内容之前或之后插入内容

常见的伪元素如下图

 

语法：

selector::pseudo-element {

  property: value;

}

选择器::伪元素{

   属性：属性值;

}

常用伪元素

::after	p::after	在每个 <p> 元素之后插入内容。
::before	p::before	在每个 <p> 元素之前插入内容。
::first-letter	p::first-letter	选择每个 <p> 元素的首字母。
::first-line	p::first-line	选择每个 <p> 元素的首行。
::selection	p::selection	选择用户选择的元素部分。

示例：

 九、伪类

CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

十、常用伪类 ：

:hover 把鼠标放在链接上的状态

:nth-of-type()、:nth-of-child()等结构选择器

:checked、:disabled 等表单相关的伪类。

示例：