[经管营销]第03章 层叠样式表.pptVIP

Web技术原理及应用Web系统与技术 烟台大学计算机学院 陈智育 内容 3.1 简介 3.2 样式表的层次 3.3 样式说明格式 3.4 选择器格式 3.5 特性值的格式 3.6-3.11 字体,列表,颜色,对齐,盒模型,图片 3.12 span标签和div标签 3.1 简介 CSS - Cascading Style Sheets CSS嵌入在HTML文档中，用于控制和改变HTML文档的外观显示[presentation] 样式表可为一个或多个文档指定一致的标准样式 样式表可分离内容和表示,简化文档的编写和维护 CSS1规范-1996 CSS2规范-1998 CSS3规范-正在制订 样式通过指定标签特性值来对标签产生作用 层叠：样式可在三个层次上定义，层叠确定效果 3.2 样式表的层次 样式表3个层次 行内样式：仅对一个标签起作用。与样式表目的相悖，不推荐使用。 文档样式表：对一个文档整体起作用 外部样式表：可对多个文档起作用，推荐使用。 样式作用顺序 行内，文档，外部，浏览器默认 3.2 样式表的层次 行内样式在标签内由属性style指定 文档样式表在文档头部(head)用style定义 外部样式表作为一个单独文件存在，独立于文档，存放位置灵活 为文本文件, 后缀css, MINE类型为text/css 文档头部的link指定外部样式表文件 文档头部的style使用@import指令引用 3.3 样式说明格式 行内样式 样式由属性style指定 一般格式： 3.3 样式说明格式 文档样式表 文档头部使用style指定样式规则列表 style必须指定属性type为text/css“ 样式规则列表中的注释使用“/*…*/” 一般格式： 3.3 样式说明格式 外部样式表 独立的文本文件，后缀一般为css 文件内容包含样式规则和注释 与文档样式表style元素的内容格式相同 一般格式 3.3 样式说明格式 规则格式 selector {list of property/values} 选择器：用于指定受影响的标签 特性/值对：property: value 特性/值对由分号分隔 同行内样式的列表格式 3.4 选择器格式 简单的选择器 由标签名形成的选择器 一个标签名 h1 {…} 多个标签名(逗号分隔) h1,h2 {…} 多个标签名形成上下文选择器(空格分隔) p h1 {…} 3.4 选择器格式 类选择器 用于同一种标签指定不同的样式说明 格式：标签名.类名 {…} 用标签的class属性指定类名 例： 3.4 选择器格式 一般选择器 为不同类型的标签指定样式 格式：.类名 {…} 例： 3.4 选择器格式 id选择器 可为一个特定的元素应用样式 格式：#id {…} 例： 通配选择器 为所有元素指定样式 格式：* {…} 3.4 选择器格式 伪类选择器 当某种事件发生时才能发挥作用的样式 格式：:伪类 {…} 例： 3.5 特性值[Property]的格式 约60种特性分为7类： 字体[Fonts] 列表[Lists] 文本对齐[Alignment of text] 边距[Margins] 颜色[Colors] 背景[Backgrounds] 边框[Borders] 3.5 特性值的格式 关键字特性值 right, center, small… 不区分大小写,建议小写 数字作为属性值 长度单位 px-pixel[像素], in-inch[英寸],cm, mm,pt-point[点],pc-pica[活字] em和ex[字母高度像素] 单位和数字之间不能有空格, 例1.5 in非法 3.5 特性值的格式 百分比类型的值 表示相对尺寸, 可加正负号 url值 url(protocol://server/pathname) 颜色 名称: red 6位十六进制数: #FF0000 rgb格式: rgb(255,0,0) 某些特性值可被嵌套的元素所继承 例: body { font-size: 16pt }, 主体中p继承该值 3.6 字体属性 字体族[font-family] 指定一系列字体名称, 浏览器按指定显示文字 font-family: Arial, Helvetica, Futura 通用[Generic]字体: CSS定义, 浏览器用相应字体显示, 表3-1 P86 font-family: Arial, Helvetica, Futura, sans-serif 若字体名称由多个单词组成,应加单引号 font-family: ‘Times New Roman’ 3.6 字体属性 字体大小[font-size] 用于指定字体大小,例: font-size: 10pt 关键字特性值: small,