第六章 层叠样式表.pdf

层叠样式表层叠样式表 层叠样式表层叠样式表 CSS简介简介 1 CSS属性设置属性设置 2 CSS2新增功能新增功能 3 层叠样式表层叠样式表 CSS的概念的概念 CSS Cascading Style Sheet 层叠样式表 层叠样式表 也称为级联样式表也称为级联样式表 用来进行网页风格设计用来进行网页风格设计 在几乎所有的浏览器上都可以使用在几乎所有的浏览器上都可以使用 使页面的字体变得更漂亮 更容易编排使页面的字体变得更漂亮 更容易编排 可以轻松地控制页面的布局可以轻松地控制页面的布局 可以将许多网页的风格格式同时更新可以将许多网页的风格格式同时更新 CSS简介简介 层叠样式表层叠样式表 CSS基本语法基本语法 标签标签 标签属性标签属性1 属性值属性值1 标签属性标签属性2 属性值属性值2 标签属性标签属性3 属性值属性值3 P background color red font size 12pt color black CSS的使用的使用 内部内部CSS 外部外部CSS 内外内外CSS CSS简介简介 层叠样式表层叠样式表 CSS文档结构文档结构 charset utf 8 CSS Document 公共类公共类 body font size 12px color 333 background fff url img top bg02 gif repeat x 0 0 scroll margin 0 padding 0 td th tr font size 12px Img border none CSS简介简介 CSS文件编码文件编码 CSS注释注释 以下为以下为CSS文件主体内容文件主体内容 层叠样式表层叠样式表 字体设置 font属性 CSS属性设置属性设置 font属性 说明 可选值 font family 指定字体的字型 用户系统中已经安装了的字体 font style 指定字体的风格 Normal Italic 斜体 Oblique 倾斜幅 度不大的斜体 font size 指定字体的大小 整数 pt font weight 指定字体的亮度 Normal Bold Bolder Lighter element font weight 900 font variant 指定字体全为大写字母 Normal small caps font stretch 指定字体的拉伸或压缩方式 Normal wider 更进一步的伸展值 narrower 更进一步的收缩值 层叠样式表层叠样式表 字体设置字体设置 文本属性文本属性 text align 作用于块元素 用来设置块中文本的对齐方式 取作用于块元素 用来设置块中文本的对齐方式 取 值为 值为 left 左对齐左对齐 right 右对齐右对齐 center 居中居中 justify 两两 端对齐端对齐 inline height 控制文本连续行之间的距离 可以用来调整文控制文本连续行之间的距离 可以用来调整文 本的垂直线的距离本的垂直线的距离 text indent 设置第一行缩进距离 如 设置第一行缩进距离 如 name text indent 2em 表示第一行缩进两个字的长度表示第一行缩进两个字的长度 letter spacing 设置字母间隔设置字母间隔 单位为单位为 em Word spacing 设置文字间隔设置文字间隔 单位为单位为 em name word spacing 5em 表示增加字母间距为文本高度的表示增加字母间距为文本高度的 1 2 CSS属性设置属性设置 层叠样式表层叠样式表 色彩与背景图象设置色彩与背景图象设置 色彩属性色彩属性 color RGB 十进制十进制 十六进制十六进制 RGB 百分数百分数 颜色名称颜色名称 Background CSS属性设置属性设置 子属性名称 说明 例子 background color 为元素设置背景色 body background color gray background image 设置一个背景图像 body background image url i eg bg 04 gif background repeat 对背景图像进行平铺 body background image url i eg bg 03 gif background repeat repeat y background position 改变图像在背景中的位 置 body background image url i eg bg 03 gif background repeat no repeat background position center 层叠样式表层叠样式表 边界属性边界属性 设置元素在文件中的位置设置元素在文件中的位置 border style 在元素周围添加边框在元素周围添加边框 并设置边框的样式并设置边框的样式 及大小及大小 resume border style solid dotted solid dotted 当当border style被赋予被赋予 四个不同的值时四个不同的值时 表示的是对元素的四条边框设置不同的样式这些值依次表示的是对元素的四条边框设置不同的样式这些值依次 是对顶 右 底 左边框进行设置是对顶 右 底 左边框进行设置 控制相邻元素的位置控制相邻元素的位置 可使用可使用 float left right none clear等来控制等来控制 CSS属性设置属性设置 层叠样式表层叠样式表 新增的部分定位属性新增的部分定位属性 position 检索对象的定位方式检索对象的定位方式 z index 设置对象的层叠顺序设置对象的层叠顺序 top 设置对象与最近一个定位的父对象顶部相关的位设置对象与最近一个定位的父对象顶部相关的位 置置 right 设置对象与最近一个定位的父对象右边相关的位设置对象与最近一个定位的父对象右边相关的位 置置 bottom 设置对象与最近一个定位的父对象底边相关的设置对象与最近一个定位的父对象底边相关的 位置位置 left 设置对象与最近一个定位的父对象左边相关的位置设置对象与最近一个定位的父对象左边相关的位置 CSS2新增功能新增功能 层叠样式表层叠样式表 新增的部分伪类新增的部分伪类 focus 设置对象在成为输入焦点时的样式表属性设置对象在成为输入焦点时的样式表属性 first child 设置对象的第一个子对象的样式表属性设置对象的第一个子对象的样式表属性 first 设置页面容器第一页使用的样式表属性设置页面容器第一页使用的样式表属性 left 设置位于装订线左边的所有页面使用的样式表属性设置位于装订线左边的所有页面使用的样式表属性 right 设置位于装订线右边的所有页面使用的样式表属设置位于装订线右边的所有页面使用的样式表属 性性 lang 设置对象使用特殊语言的内容样式表属性设置对象使用特殊语言的内容样式表属性 CSS2新增功能新增功能 层叠样式表层叠样式表 什么是伪类什么是伪类 伪元素伪元素 伪类和伪元素是特殊的类和元素伪类和伪元素是特殊的类和元素 能自动地被支持能自动地被支持CSS的浏览器所的浏览器所 识别识别 伪类区别开不同种类的元素伪类区别开不同种类的元素 例如 例如 visited links 已访问的已访问的 连接连接 和和active links 可激活连接可激活连接 描述了两个定位锚描述了两个定位锚 anchors 的的 类型类型 伪元素指元素的一部分伪元素指元素的一部分 例如段落的第一个字母例如段落的第一个字母 伪类或伪元素规则的形式如伪类或伪元素规则的形式如 选择符选择符 伪类伪类 属性属性 值值 例 例 a link c