CSS学习笔记
Java相关课程系列笔记之七
笔记内容说明 CSS（王春梅老师主讲，占笔记内容100%）；
目 录
一、 CSS概述 ............................................................................................................................... 1
1.1 CSS的作用......................................................................................................................... 1 1.2什么是CSS......................................................................................................................... 1 1.3 CSS的基础语法 ................................................................................................................. 1 二、 如何使用CSS样式表 .......................................................................................................... 2
2.1内联样式 ............................................................................................................................. 2 2.2内部样式表 ......................................................................................................................... 2 2.3外部样式表 ......................................................................................................................... 2 2.4三种用法的区别 ................................................................................................................. 2 2.5 CSS样式表特征和优先级 ................................................................................................. 3 三、 CSS选择器 ........................................................................................................................... 4
3.1元素选择器 ......................................................................................................................... 4 3.2类选择器 ............................................................................................................................. 4 3.3分类选择器 ......................................................................................................................... 4 3.4元素id选择器.................................................................................................................... 4 3.5派生选择器 ......................................................................................................................... 4 3.6选择器分组 ......................................................................................................................... 5 3.7伪类选择器 ......................................................................................................................... 5 3.8选择器优先级 ..................................................................................................................... 5 四、 CSS单位 ............................................................................................................................... 5
4.1尺寸 ..................................................................................................................................... 5 4.2颜色 ..................................................................................................................................... 5 4.3尺寸属性 ............................................................................................................................. 5 五、 边框样式 ............................................................................................................................... 6
5.1简写方式 ............................................................................................................................. 6 5.2单边定义 ............................................................................................................................. 6 5.3单边宽度border-width ....................................................................................................... 6 5.4单边样式border-style ........................................................................................................ 6 5.5单边颜色border-color ........................................................................................................ 6 5.6案例 ..................................................................................................................................... 6 六、 框模型 ................................................................................................................................... 6
6.1 框模型图 ............................................................................................................................ 6 6.2 width和height.................................................................................................................... 6 6.3边框、内外边距对元素尺寸的影响 ................................................................................. 6 6.4案例 ..................................................................................................................................... 7 6.5内边距 ................................................................................................................................. 7 6.6外边距 ................................................................................................................................. 7 七、 背景样式 ............................................................................................................................... 8
7.1背景色 ................................................................................................................................. 8 7.2背景图像 ............................................................................................................................. 8 7.3背景平铺 ............................................................................................................................. 8 7.4背景固定 ............................................................................................................................. 8
1
7.5背景定位 ............................................................................................................................. 8 7.6组合设置 ............................................................................................................................. 8 7.7案例 ..................................................................................................................................... 8 八、 文本/字体样式 ...................................................................................................................... 9
8.1指定字体 ............................................................................................................................. 9 8.2字体颜色 ............................................................................................................................. 9 8.3字体大小 ............................................................................................................................. 9 8.4字体加粗 ............................................................................................................................. 9 8.5文本排列 ........................................................................................................................... 10 8.6行高 ................................................................................................................................... 10 8.7文字修饰 ........................................................................................................................... 10 8.8文本缩进 ........................................................................................................................... 10 九、 表格样式 ............................................................................................................................. 11 9.1垂直对齐 ........................................................................................................................... 11 9.2边框合并 ........................................................................................................................... 11 9.3边框边距 ........................................................................................................................... 11 十、 布局 ..................................................................................................................................... 12
10.1浮动定位说明图 ............................................................................................................. 12 10.2什么是浮动定位 ............................................................................................................. 12 10.3浮动定位移动图 ............................................................................................................. 12 10.4 float属性 ........................................................................................................................ 12 10.5 clear属性 ........................................................................................................................ 13 10.6 display属性 .................................................................................................................... 13 十一、 列表样式 ......................................................................................................................... 14
11.1列表项前的标识符号图像 ............................................................................................. 14 11.2列表项前使用的预设标识符号 ..................................................................................... 14 十二、 定位 ................................................................................................................................. 14
12.1定位概述 ......................................................................................................................... 14 12.2 position（定位）属性 .................................................................................................... 14 12.3偏移属性 ......................................................................................................................... 14 12.4堆叠属性 ......................................................................................................................... 15 12.5相对定位：relative ......................................................................................................... 15 12.6绝对定位：absolute ....................................................................................................... 15
2
一、CSS概述
1.1 CSS的作用
早期，依靠HTML元素的属性设置样式，比如：border/align；而每个元素的属性不尽相同，所以样式设置比较混乱；因此，W3C推出了一套标准：使用某种样式声明后，所有的元素通用，即CSS产生，它是对页面的样式进行统一的定义（声明）的。
1.2什么是CSS
1）CSS（Cascading Style Sheets）：层叠样式表，又叫级联样式表，简称样式表。 2）用于HTML文档中元素的样式定义。 3）实现了将内容与表现分离。
4）提高了代码的可重用性和可维护性。
1.3 CSS的基础语法
1）样式表由多个样式规则组成，每个样式规则有两个部分：选择器和声明。 2）选择器：决定哪些元素使用这些规则。
3）声明：由一个或者多个属性/值对组成，用于设置元素的外观表现。
1