WEB前端技术第7讲 CSS样式设计.pptVIP

（一）基本选择器 HTML标记 自定义的类 自定义的ID 伪类 1. HTML标记选择器 HTML标记选择器重新定义了HTML标记的显示效果。 语法格式： 例如： h1{font-size:25px;color:red} 标记名{属性名1:属性值1;属性名2:属性值2;…} 2.自定义的类与ID 使用自定义类或ID，可以定义一个通用的样式，以便应用到任何需要的地方。它们的应用需要分别使用到class和id属性 语法格式示例： 例如： .text2{color:red;font-size:25px;} #text1{color:red;font-size:25px;} .classname{属性名1:属性值1;属性名2:属性值2;…} #idname{属性名1:属性值1;属性名2:属性值2;…} 类选择器 ID选择器 样式定义示例一 3.伪类选择器 伪类是一种特殊的选择器，用于向某些选择器添加特殊的效果，如设置超链接不同状态的样式以及元素第一个子对象的样式等等。 语法格式： 使用伪类定义超链接不同状态下样式： a:link 设置未访问过的超链接格式 a:visited 设置已访问过的超链接格式 a:hover 设置悬停状态的超链接格式 a:active 设置活动超链接格式 选择器:伪类{属性名1:属性值1;属性名2:属性值2;…} 样式定义示例（二） 注意：使用时请按上述顺序定义各状态样式 （二） 复合选择器 复合选择器就是两个或多个基本选择器，通过不同方式连接而成的选择器，为元素的样式定义提供更加精确的控制。 复合选择器类型 交集选择器 并集选择器 后代选择器 1.交集选择器 交集选择器是由两个选择器直接连接构成，其中第一个选择器必须是标记选择器，第2个必须是类选择器或者ID选择器 注意：两个选择器之间必须连续写，不能有空格 语法格式： 标记选择器.classname{属性名1:属性值1;…} 标记选择器#idname{属性名1:属性值1;…} 或： 交集选择器示例 2.并集选择器 并集选择器是由任何形式的多个选择器通过逗号连接而成的，用于声明这些选择器的公共格式。 如果某些选择器的格式是相同的，或者部分相同，就可以利用并集选择器来共同声明这些相同的格式 语法格式： 选择器1,选择器2,选择器3,…{属性名1:属性值1;…} 并集选择器示例 3.后代选择器 后代选择器用于对嵌套选择器的格式进行声明。声明方法是：外层选择器写在前面，内层选择器写在后面，之间用空格分隔 例如：当标记发生嵌套时，内层的标记就成为外层标记的后代 语法格式： 选择器1 选择器2{属性名1:属性值1;…} 后代选择器示例 7.3 CSS常用属性 1.字体属性及其属性值 字体属性示例 2.文本属性及其属性值 文本属性示例 3.颜色和背景属性及其属性值 颜色和背景属性示例 4.列表属性及其属性值 列表属性示例 5.鼠标属性及其属性值 属 性 属性值 描 述 cursor pointer 设置鼠标为手形状 crosshair 设置鼠标为十字交叉形状 text 设置鼠标为文本选择形状 wait 设置鼠标为Windows的沙漏形 default 设置鼠标为默认的形状 help 设置鼠标为带问号的形状 e-resize 设置鼠标为指向东的箭头 ne-resize 设置鼠标为指向东北的箭头 n-resize 设置鼠标为指向北的箭头 nw-resize 设置鼠标为指向西北的箭头 w-resize 设置鼠标为指向西的箭头 sw-resize 设置鼠标为指向西南的箭头 s-resize 设置鼠标为指向南的箭头 se-resize 设置鼠标为指向东南的箭头 可以对任何对象使用 cursor CSS属性来改变移动到对象上的鼠标样式 鼠标属性示例 6. 盒子模型及其属性 请参见下一讲 7.3 CSS关联HTML文档的方式 内联式 内嵌式 链接式 导入式 1.内联式 该方式通过在主体区域内使用HTML标记的style属性设置样式，例如： p style=“text-align:center” 优点：可单独设置某个标记的样式 缺点：没有发挥CSS统一设置格式的优势 * * * * * * * * * * * * * * * * * * * * * 表格结构包含哪些标记？td和th有什么不同？ rowspan和colspan是什么标记的属性？ 表单作用有什么作用？ 表单组成标记有哪些？ 表单元素可分为哪几大类？分别使用什么标记？ 如何设置不同的表单输入元素？ 第7讲 CSS层叠样式表 7.1 CSS概述 7.2 定义CSS样式表 7.