css样式表(五).ppt

CSS样式表 CSS样式表 CSS是CascadingStyleSheets的英文缩写 译成中文的意思是层叠样式表作用 可以在同一网页中使用不同的网页样式 使网页的元素更丰富更多元化 引用样式表的三种方式 直接插入式内部文档头方式外部文件方式 直接插入式 作用范围 只作用于本标志插入格式 例 内部文档头插入方式 作用范围 定义的本网页文件内插入格式 p font family 宋体 color red pre font family 黑体 color yellow 引用外部文件方式 作用范围 所有引用该外部文件的网页插入方式 如何建立样式表 第一种方式 HTML标志 标示属性 属性值 标志属性 属性值 第二种方式 类名称 标示属性 属性值 标志属性 属性值 如何建立样式表 第三种方式 HTML标志1 HTML标志2 标示属性 属性值 标志属性 属性值 用CSS样式表设定字体样式 设置字体的样式 font family 黑体 仿宋体 设置字体的风格 font style normal itallic设置字体的加粗 font weight bold bolder lighter 100 900设置字体的大小 font size 用CSS样式表设置边框样式 设置边框颜色 border color 颜色值 设置边框粗细 border width 数值设置边框的样式 border style solid double dotted dashed 如何设置边框不显示 border top none border bottom none border left none border right none 用CSS样式表设置超链接的颜色 未链接前的颜色a link text decoration none color blue 链接过后的颜色a visited text decoration none color red 链接活动时的颜色a active text decoration none color green 链接盘旋时的颜色a hover text decoration none color yellow 设置边框颜色 分别设定边框颜色 border top color 颜色值 border bottom color 颜色值 border left color 颜色值 border right color 颜色值 设定文本样式 设定文本的样式 text decoration underline overline line throungh none设定文本的对齐 text align left right center justify 用CSS样式表在HTML标签内 实现元素隐藏 第一种方式 隐藏 style visibility hidden 显示 style visibility visible 第二种方式隐藏 style display none 显示 style display 用CSS样式表在JavaScript内 实现元素隐藏 第一种方式隐藏 元素名称 style visibility hidden 显示 元素名称 style visibility visible 第二种方式隐藏 元素名称 style display none 显示元素名称 style display 用CSS样式表实现定位 绝对定位HTML标志 position absolute left 像素值 top 像素值 z index 数值 相对定位HTML标志 position relative left 像素值 top 像素值 z index 数值 用CSS样式表设置滚动条 body scrollbar face color 颜色值 滚动条页面颜色scrollbar track color 颜色值 滚动条底面颜色scrollbar arrow color 颜色值 滚动条两端箭头颜色scrollbar highlight color 颜色值 滚动条斜面和左面颜色scrollbar shadow color 颜色值 滚动条下斜面和右面颜色 用CSS样式表设置背景图片 设置背景图片background image url 绝对路径 相对路径 设置图片不平铺background repeat no repeat 设置图片的位置是固定的background attachment fixed 设置图片的位置是居中的background position center 用CSS样式表设置鼠标样式 第一种方式 style