第5章 CSS高级 网站设计与开发素质课课件.pptVIP

第5章 CSS高级 5.1 CSS背景 background-color： 设置元素的背景颜色 可以为所有元素设置背景色 这个属性接受任何合法的颜色值 p {background-color: gray;} 5.1 CSS背景 background-image： 设置一个背景图像 默认值是 none，表示背景上没有放置任何图像 这个属性需要设置一个 URL 值 body {background-image: url(/images/bg.jpg);} 5.1 CSS背景 background-repeat： 设置背景重复方式，可取值：repeat-x,repeat-y和no-repeat body { background-image: url(/images/bg.jpg); background-repeat: repeat-y; } 5.1 CSS背景 background-position ： 改变图像在背景中的位置 可以取值：top、bottom、left、right 和 center 也可具体的数值：50px body { background-image:url(/images/bg.gif); background-repeat:no-repeat; background-position:center; } 5.1 CSS背景 background-attachment： 如果文档比较长时，向下滚动时，背景图像也会随之滚动 此属性可以设置背景图像固定于可视区 body { background-image:url(/images/bg.gif); background-repeat:no-repeat; background-attachment:fixed ; } 5.2 CSS文本 text-indent： 把页面上的段落的第一行缩进 无法将该属性应用于行内元素 p { text-indent: 5em; } 5.2 CSS文本 text-align： 设置元素内文本的对齐方式 值 left、right 、 center和justify分别代表左对齐、右对齐、居中和两端对齐 p { text-indent: 5em; Text-align:justify; } 5.2 CSS文本 word-spacing和letter-spacing ： word-spacing设置字（单词）之间的标准间隔 letter-spacing设置字母之间的间隔 p { word-spacing: 30px; letter-spacing: 20px; } 5.2 CSS文本 text-transform： 设置文本的大小写 取值：none (不做处理)、uppercase(大写) 、lowercase(小写) 、capitalize(首字符大写) h1 {text-transform: uppercase} 5.2 CSS文本 text-decoration： 文本装饰 取值： None：无装饰 underline ：下划线 overline ：上划线 line-through：贯穿线 blink ：闪烁 a {text-decoration: none;} 5.3 CSS字体 font-family ： 指定字体 如果字体名称中有一个或多个空格或者如果字体名包括 # 或 $ 之类的符号 ，则需要在字体名称上添加单引号 p { font-family: Times, TimesNR, New Century Schoolbook, Georgia, New York, serif; } 5.3 CSS字体 font-style： 设置字体风格 取值： normal - 文本正常显示 italic - 文本斜体显示 oblique - 文本倾斜显示 5.3 CSS字体 font-size ： 设置文字大小 p {font-size:14px;} 5.4 CSS列表 list-style-type、list-style-image、list-style-position和list-style list-style-type：改变列表标志的类型 list-style-image：设置标志类型为一个图片 list-style-position：设置标志位置 list-style：综合了以上三个属性 li {list-style : url(example.gif) square inside} 5.5 CSS表格 表格边框：border，(table、th和td拥