CSS复习之全部

今日目录

1、CSS简介

2、CSS引入

一、CSS简介

CSS 指层叠样式表 (Cascading Style Sheets)；我们可以把 HTML 理解成身体，CSS 理解成衣服；

二、CSS引入

今日目录

1、CSS基本语法

2、CSS基本选择器

3、在HTML中引入CSS的方法

一、CSS基本语法

二、CSS基本选择器

1、标记选择器

2、类别选择器

3、ID 选择器

三、在HTML中引入CSS的方法

1、行内样式

2、内嵌式

3、链接式

red.css

4、导入样式

yellow.css

5、几种方式的优先级比较

今日目录

1、复合选择器

2、CSS的继承特性

3、CSS的层叠特性

一、复合选择器

1.1 “交集”选择器

1.2 “并集”选择器

1.3 “后代”选择器

1.4 “子”选择器

二、CSS的继承特性

三、CSS的层叠特性

层叠样式的规则：行内样式 > ID 样式 > 类别样式 > 标记样式

今日目录

1、设置字体样式

2、设置文字的倾斜效果

3、设置文字的加粗效果

4、设置英文字母大小写转换

5、设置文字的大小

6、设置文字的装饰效果

7、设置段落首行缩进

8、设置字词间距

9、设置文字的行高

10、设置段落之间的距离

11、设置文本的水平位置

12、设置文字和背景的颜色

13、设置段落的垂直对齐方式

一、设置文字的字体

二、设置文字的倾斜效果

三、设置文字的加粗效果

四、设置英文字母大小写转换

五、设置文字的大小

六、设置文字的装饰效果

七、设置段落首行缩进

八、设置字词间距

九、设置文字的行高

十、设置段落之间的距离

十一、设置文本的水平位置

十二、设置文字和背景的颜色

十三、设置段落的垂直对齐方式

今日目录：

1、设置图片边框

2、设置图片大小及缩放

3、图文混排

4、设置图片与文字的对齐方式

一、设置图片边框

二、设置图片大小及缩放

三、图文混排

四、设置图片与文字的对齐方式

今日目录

1、设置背景颜色

2、设置背景图像

3、设置背景图像平铺

4、设置背景图像位置

5、设置背景图片位置固定

一、设置背景颜色

二、设置背景图像

三、设置背景图像平铺

四、设置背景图像位置

五、设置背景图片位置固定

今日目录

1、盒模型基本概念

2、边框

3、内边距

4、外边距

5、网页布局与盒模型

一、盒模型基本概念

盒模型：

相框边框 - > border

画和相框边框的距离 -> padding

相框之间的距离 -> margin

二、边框

border-width 边框宽度(粗细)

border-color 边框颜色

border-style 边框样式

三、内边距

四、外边距

五、网页布局与盒模型

六、盒子在标准流中的定位

1 ，行内元素之间的水平 margin

2 ，块级元素之间的竖直 margin

3 ，嵌套盒子之间的 margin

4 ，margin 属性可以设置成负值

今日目录

1、盒子的浮动float

2、使用clear消除浮动的影响

3、盒子定位postion

4、z-index空间位置

5、盒子的display属性

一、盒子浮动 float

Float 属性：

默认是 none ，按照标准流来定位；

Left：左悬浮；

Right：右悬浮；

二、使用 clear 清除浮动的影响

Clear 属性：

默认是 none，允许两边都可以有浮动对象；

Left： 不允许左边有浮动对象

Right：不允许右边有浮动对象

Both：不允许有浮动对象

三、盒子定位postion

Position 属性：

默认是 static，按照标准流来定位；

Relative：相对定位，相对于原本的标准位置偏移指定的距离；

Absolute：绝对定位，以它的包含框为基准进行偏移；

Fixed：固定定位，以浏览器窗口为基准进行定位；

四、z-index空间位置

Z-index 空间位置，默认是 0，z-index 值大的页面位于其值小的上方；

五、盒子的display属性

Display：

Inline：把元素变成内联元素；

Block：把元素变成块级元素；

今日目录：

1、设置表格的边框

2、设置表格的宽度

3、设置表格隔行还色

4、设置表格列样式

5、设置鼠标经过时变色效果

一、设置表格的边框

Border：设置表格边框；

Border-collapse：设置边框分离，合并 默认是 separate(分离) collapse 合并；

Border-spacing ：设置单元格的间距；

Padding：设置单元格内容和边框之间的距离；

二、设置表格的宽度

Table-layout

默认 auto 自动方式，根据单元格的内容自动调整宽度；

Fixed 固定方式 表格宽度固定；

三、设置表格隔行还色

四、设置表格列样式

五、设置鼠标经过时变色效果今日目录

1、使用 CSS 伪类别来设置超链接样式

2、创建按钮式超链接

一、使用 CSS 伪类别来设置超链接样式

链接的四种状态：

a:link：普通的、未被访问的链接

a:visited：用户已访问的链接

a:hover：鼠标指针位于链接的上方

a:active：链接被点击的时刻

二、创建按钮式超链接

今日目录

1、设置列表符号

2、设置列表图片符号

3、创建简单导航菜单

一、设置列表符号

二、设置列表符号

三、创建简单导航菜单

今日目录

1、CSS布局

2、绝对定位法

3、浮动法

一、CSS布局

二、绝对定位法

三、浮动法

添加小编微信可以获取免费资源，二维码

要用到的工具，关注公众号直接免费获取：