CSS学习笔记七).docVIP

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边框、内外边距对元素尺寸的影响 7 6.4案例 7 6.5内边距 7 6.6外边距 7 七、 背景样式 8 7.1背景色 8 7.2背景图像 8 7.3背景平铺 8 7.4背景固定 8 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 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）声明：由一个或者多个属性/值对组成，用于设置元素的外观表现。 如何使用CSS样式表 一共有三种使用方式：内联样式、内部样式表、外部样式表。 2.1内联样式 样式定义在单个的HTML元素中。 1）样式定义在HTML元素的标准属性style里。 2）不需要定义选择器，也不需要大括号。 3）只需要将分号隔开的一个或者多个属性/值对，作为元素的style属性的值。 例如：h1 style=background-color:silver;color:blue文本/h1 2.2内部样式表 样式定义在HTML页的头元素中。 1）样式表规则位于文档头元素的style元素内。 2）在文档的head元素内添加style元素，在style元素中添加样式规则。 例如：headstyle type=text/css h1{ color:green; } /style/head bodyh1文本/h1/body 注意事项：style元素中的属性type=text/css可省略。且style元素里的注释要用CSS规定的注释/*注释*/，而不是HTML里的注释!--注释--。 2.3外部样式表 将样式定义在一个外部的CSS文件中（.css文件），由HTML页面引用样式表文件。 1）首先需要创建一个单独的样式表文件，用来保存样式规则。 ①一个纯文本文件。②该文件中只能包含CSS样式规则。③文件后缀为.css。 2）然后在需要使用该样式表文件的页面上，使用link元素链接需要的外