目录

1. 样式
2. 选择器
3. 基本元素美化
4. 盒子模型
5. 浮动
6. 定位
7. 网页动画（特效效果）

---

1. CSS简介

1.1 CSS是什么

Cascading Style Sheet 层叠级联样式表

CSS：表现（美化网页）

字体、颜色、边距、高度、宽度、北京图片、网页定位、网页浮动

---

1.2 CSS发展史

CSS1.0

CSS2.0 DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO

CSS2.1 浮动，定位

CSS3.0 圆角，阴影，动画。。。浏览器兼容性~

---

1.3 快速入门

第一个CSS文件

index.html

	
    
    
    
    
    
    
    
    

	
我是标题
    

   

style.css

h1{
    color:red;
}

优点：

1. 内容与表现分离
2. 网页结构表现统一，可以实现复用
3. 样式非常丰富
4. 建议使用独立于html的css文件
5. 利用SEO，容易被搜索引擎收录

---

1.4 CSS的四种导入方式

1. 内部样式

   html文件：

   
       ...
       
   
   

2. 外部样式一，建议使用

   html文件：

   
       ...
       
   
   

   css文件：

选择器{
语法1；
语法2；
...
}

3. 外部样式二，不建议使用，这里是使用了css代码导入，在生成大页面时，html会先出现，css渲染有延迟

html文件：

```html

4. 行内样式

   我是标题
   

ps：

1. style标签内是css代码，其注释是/* */

2. 优先级：就近原则

---

2. 三种基本选择器

选择器作用：选择页面上的某一个或者某一类元素

2.1 基本选择器

1. 标签选择器——会选择这个页面上所有该标签

   标签名{
   	声明；
   }
   

2. 类选择器

   
   
   
   标题1
   标题2
   标题3
   p标签
   

3. id选择器

   
   
   标题1
   

---

2.2 层次选择器

ps：*代指所有

1. 后代选择器：在某个元素的下级所有元素

   元素1 元素2{
       ...
   }
   

2. 子选择器：在某元素的后面的一代，仅限于直系一代，孙辈就不算

   元素1>元素2{
   	...
   }
   

3. 相邻兄弟选择器：仅限于同辈下一个

   元素1 + 元素2{
   	...
   }
   

4. 通用兄弟选择器：选择接下来的所有同级元素（弟弟选择器）

   元素1~元素2{
   	...
   }
   

---

2.3 结构伪类选择器

伪类： 条件

/* ul下的第一个li*/
ul li:first-child{
    color:red;
}

ul li:last-child{
    color:red;
}

/*  选中p1 ： 定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！ 顺序
*/
p:nth-child(2){
    background:green;
}

/*选中父元素，下的p元素的第二个，类型*/
p:nth-of-type(1){
    background:yellow;
}

---

2.4 属性选择器

id + class结合

/* 属性名， 属性名 = 属性值（正则）
 = 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
*/

/* 存在id属性的元素   a[]{} */
a[id]{
    ...
}

/* id=first的元素 */
a[id = first]{
    ...
}

/* class中有links的元素 */
a[class *= "links"]{
    ...
}

/* 选中href中以http开头的元素 */
a[href ^= http]{
    ...
}

/* 选中href中以jpg结尾的元素 */
a[href $= jpg]{
    ...
}

---

3. 美化网页元素

3.1 为什么要美化

1. 有效传递信息
2. 美化网页，页面漂亮，才能吸引用户
3. 凸显页面的主题
4. 提高用户的体验

span标签：突出文字

注：其实这些标签没有本义，其名字都可以自己取，但是意义是，如此一来，这段文字有个标签包着，我们可以用css去美化文字了。

---

3.2 字体样式

---

3.3 文本样式

1. 颜色

   color : 单词 -> color:red;

   color:RGB -> color:#FFFFFF;

   ? color:rgb(0,255,255);

   color:RGBA -> color:rgba(0,255,255,0.5);

   rgb:00_FF/0255

   rgba的a ： 透明度：0~1

2. 排版

   text-align : center/left/right;

3. 首行缩进

   text-indent:2em; //首行收缩2个字

4. 行高

   行高和块的高度一致就可以实现上下居中

   
   height=300px
   
   line-height=300px
   

5. 装饰（划线）

   
   text-decoration:underline;
   
   text-decoration:line-through;
   
   text-decoration:overline;
   

6. 文本图片水平对齐

   vertical-align:middle;
   

---

3.4 阴影

/* text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径 
   以xy坐标轴为例，水平偏移右为正，垂直偏移下为正
*/
#price{
    text-shadow : blue 10px -10px 2px;
}

---

3.5 超链接伪类

通俗来讲，超链接伪类就是想a：hover这样的东西，就是css选择器的一种，用来修饰超链接的，通过超链接伪类，我们可以使用css代码来修改超链接的样式。

常规来说，a，a:hover就够用了

/* 默认的颜色 */
a{
    text-decoration : none;
    color : #000000;
}

/* 鼠标悬浮的状态 */
a:hover{
    color : orange;
    font-size : 50px;
}

---

3.6 列表

/* 
list-style:
	none 去掉圆点
	circle 空心圆
	decimal 数字
	square 正方形
*/

ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

---

3.7 背景

---

3.8 渐变

background-color: #FFFFFF
background-image: linear-gradient(115deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%)

---

4. 盒子模型

4.1 什么是盒子模型

margin：外边距

padding：内边距

border：边框

注意：盒子大小 = margin + padding + border + 内容宽度

---

4.2 边框

设置边框代码如下:

border-left/right/top/bottom-style/width/color:

/* 上右下左：顺时针 */
border: 0 0 0 0;

1. 边框的粗细--width
2. 边框的样式--style
3. 边框的颜色--color

---

4.3 内外边距

/* 外边距 */
margin-left/right/top/bottom-style/width/color:

/* 内边距 */
padding-left/right/top/bottom-style/width/color:

/* 上右下左：顺时针 */
margin: 0 0 0 0;

/* 第一个：上下
   第二个：左右 */
margin: 0 1px;

/* 自动对齐：auto 
   margin: 0 auto; 居中
   要求： 在块元素中，且块元素有固定的宽度


*/
 
margin: 0 auto;

---

4.4 圆角边框

border-radius: 参数;

/* 4参数： 顺时针
   2参数： 左上右下 右上左下 */

/* 圆圈： 圆角 = 半径？ */

---

4.5 盒子阴影

box-shadow: 10px 10px 100px yellow;

---

5. 浮动

5.1 标准文档流

块级元素，独占一行

h1~h6 p div 列表...

行内元素，不独占一行

span a img strong...

块级元素可以包含行内元素，反之不行。

---

5.2 display

display : block;  /* 块元素 */
display : inline;  /* 行内元素 */
display : inline-block;  /* 是块元素，但是可以内联，在一行 */
display : none  /* 消失，不显示 */

这个也是一种实现行内元素排列的方式，但是我们很多情况都是用float，因为方向不可控制

---

5.3 float

左右浮动 float

float: right;
float: left;

浮动相对于display，浮动可以控制方向，比如向左漂还是向右飘。

---

5.4 父级边框塌陷的问题（浮动元素超出父级元素的框范围）

clear： 清除浮动，让浮动起来的东西按照标准文档流的方式排列（还是浮动的）

clear: left;  左侧不允许有浮动
clear: right;  右侧不允许有浮动
clear: both;  两侧不允许有浮动
clear: none;

解决方案：

1. 增加父级元素的高度，让父级元素可以包住浮动内容。

   height: 800px; /* 让父级元素够高 */
   

2. 增加一个空的div标签，清除浮动（本来上面的东西是要浮动到下面的，可是呢下面增加了一个不允许两侧有浮动的东西，也就是不允许上面的东西浮动到下面，所以父级边框把它框起来了）（或者说：因为下面不允许漂浮，所以浮动元素只能回到父级元素里撑开）

   
   
       ...
       
   
   
   
   
   
   

3. overflow

   在父级元素中增加一个 overflow: hidden; 这种方式多的内容会被修剪，多被用
   在父级元素中增加一个 overflow: auto/scroll； 这种方式是加上滚动条，拉动滚动条可以看到完整内容
   

4. 父类添加一个伪类: after （与上面第二种是一样的原理） （目前最受欢迎）

   #father:after{
       content: '';
       display: block;
       clear: both;
   }
   

---

6. 定位

6.1 相对定位

/* 相对自己原来的位置进行指定的偏移 */
#first{
    ...
    position: relative;
    top: -20px; /* 向上偏移20个像素，但是为什么是负数呢，可以理解为，这个元素的top被-20px的东西填了，要是是20px就会被空白迫着往下走了，但是是负，所以就向上走了 */
    left: 20px; /* 向右偏移20个像素，这个代表左边被填了20px的空白东西，所以元素向右走了20px */
}

注：它仍然在标准文档流中，原来的位置会被保留。

---

6.2 绝对定位

定位：基于xxx定位，上下左右~

1. 没有父级元素定位的前提下，相当于浏览器定位

2. 假设父级元素存在定位，我们通常会相对于父级元素进行偏移~

3. 不在标准文档流中，原来的位置不会被保留

   position: absolute;
   left: 100px;
   

---

6.3 固定定位

固定定位的元素会定在那里，不会随着滚动条的改变而改变位置

position: fixed;
right: 0;
botton: 0; /* 这个语句把元素定在页面的右下方，就像回到顶部的小火箭一样 */

---

6.4 z-index

z-index: 0;  /* 数字代表层数，数字越大就代表越上面的层，越优先被显示,最低是0，最高无限 */

opacity: 0.5  /* 背景透明度 */
filter: Alpha(opacity=50)

---