当样式需要应用于很多页面时,外部样式表将是理想的选择在使用外部样式表的情况下可以通过改变一个文件来改变整个站点的外观
每个页面使用 标签链接到样式表 标签在文档的头部(head)
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>外部样式表可以在任何文本编辑器中进行编辑,文件不能包含任何的 html 标签,样式表应该以 .css 扩展名进行保存 注意:样式表的属性值和单位之间不允许有空格
hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");}当单个文档需要特殊的样式时,就应该使用内部样式表 你可以使用style标签在文档头部定义内部样式表
<head> <style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} </style> </head>要使用内联样式,需要在相关的标签内使用样式(style)属性
如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来
padding属性声明背景色将在文本外进行外延,background-color属性不能继承
属性值repeat将在x和y方向上都进行重复 属性值repeat-x或者repeat-y则只在x或者y方向上进行重复
body { background-image: url(/i/eg_bg_03.gif); background-repeat: repeat-y; }为background-position提供属性值有多种方法
a.使用关键字
根据规范,位置关键字可以按任何顺序出现,只要保证不超过两个关键字 - 一个对应水平方向,另一个对应垂直方向 如果只出现一个关键字,则认为另一个关键字是 center
b.使用百分数
百分数同时作用于元素与图像,例如
body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:aa% bb%; }将会把图像的aa%,bb%与元素的aa%,bb%处对齐
如果只提供一个百分数值,所提供的这个值将用作水平值,垂直值将假设为 50%
c.使用长度值
长度值解释的是元素内边距区左上角的偏移,偏移点是图像的左上角
background-position:50px 100px;background-attachment默认属性是scoll,背景会随着网页滚动而滚动将其设置为fixed会防止这种滚动
CSS提供了text-indent属性进行文本缩进 例如常用的首行缩进
p {text-indent: 5em;}如果使用负值可以进行悬挂缩进,不过可能造成文本超出网页显示范围之外,所以可以设置一个外边距或者内边距
p {text-indent: -5em; padding-left: 5em;}text-indent也可以使用百分数值作为属性值,缩进为父元素的百分长度 注意:text-indent属性可以继承
使用text-align属性设置文本水平对齐 text-align默认属性值为left 某些文字可能从右往左书写,可以使用right属性值 middle将居中对齐 text-align: justify进行两端对齐,宽度为父元素的内边框
通过word-spacing和letter-spacing属性更改字间距和字母间距 两者的默认值均为0
p.spread {word-spacing: 30px;} p.spread {word-spacing: 30px;}text-transform 属性处理文本的大小写
属性值说明none默认值 不进行改动uppercase全部大写lowercase全部小写capitalize仅单词首字母大写text-decoration属性提供五个值
属性值说明none关闭元素上所有装饰underline下划线overline上划线line-through贯穿线(删除线)blink文本闪烁可以在一个规则中结合多种装饰
a:link a:visited {text-decoration: underline overline;}text-decoration 值会替换而不是累积起来,所以如果两个不同的装饰都与同一元素匹配,胜出规则的值会完全取代另一个值
white-space属性确定对源文件中空格及换行的处理,总结如下
属性值空格换行自动换行pre-line合并保留允许normal合并忽略允许nowrap合并忽略不允许pre保留保留不允许pre-wrap保留保留允许direction 属性有两个值:ltr 和 rtl 大多数情况下,默认值是 ltr,显示从左到右的文本 如果显示从右到左的文本,应使用值 rtl