CSS概述

一.什么是CSS

 1.1 具体解读

1.2发展史

1.3快速入门

 

1.4 CSS的三种导入方式

 

内部样式   外部样式    行内样式

 

扩展：外部样式两种写法

 

二. 选择器

 

2.1 基本选择器

 

2.1.1 标签选择器

        

 

2.1.2 类 选择器 class

        

 

    

2.1.3 ID选择器

        

 

注释：id选择器 > class选择器 > 标签选择器

2.2层次选择器

2.2.1 后代选择器

        某个元素的后面  祖爷爷 爷爷 父亲 儿子

        body下面的所有元素

2.2.2 子选择器 

        儿子 只一代

        body下面的p元素

2.2.3 相邻兄弟选择器  同辈

 

2.2.4 通用选择器

 

2.3 结构伪类选择器

 

 

2.4属性选择器（常用）

        a[ 属性名 = 属性值（正则表达式）] {

        background = yellow;

        }

 

       

 

 

三、美化网页元素

3.1 为什么要美化网页

1.有效的传递页面信息

2.美化网页，页面漂亮，才能吸引用户

3.凸显页面的主题

4.提高用户体验

3.2 字体样式

 

3.3文本样式

        居中，首行缩进2字符

        水平对齐（图片和文字）

         文本装饰

3.4 阴影

 

3.5 超链接伪类

正常情况下，a a:hover

 3.6 列表

 

 3.7背景

 

3.8 渐变

四、盒子模型

4.1 什么是盒子模型

 4.2 边框

 

4.3 内外边距

 

盒子的计算方式：元素到底多大？

        margin + border + padding + 内容宽度 

4.4 圆角边框

四个角 ：左上 、右上、 右下、 左下  ，顺时针方向

圆圈：  圆角等于半径

 

4.5 阴影

 五、浮动

5.1 标准文档流

 

5.2 dispiay

 

5.3 float

        左右浮动 float

 

5.4 父级边框塌陷的问题

（父级下面的元素浮动之后，父级边框未被撑起来，就会变得很小）

解决方案：

 

 

 

 六、定位

6.1 相对定位

 

 

6.2 绝对定位

6.3 固定定位 fixed

 

6.4 z-index

z-index（图层操作 立体层面）: 默认是0，最高无限~999