背景
背景色 [background-color]
- 可以为所有元素设置背景色,这包括 body 一直到 em 和 a 等行内元素。
- background-color 不能继承,其默认值是 transparent。
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent} <!-- h2不设置背景色,浏览器的颜色设置不会影响到您的设计 -->
p {background-color: rgb(250,0,255)}
p.no2 {background-color: gray; padding: 20px;}
背景图像 [background-image]
- 如果需要设置一个背景图像,必须为这个属性设置一个URL值
- 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。
- 默认地,背景图像起始点(background-position)位于元素的左上角,并在水平和垂直方向上重复(background-repeat)。
- 可以通过设置背景关联(background-attachment)来防止背景图像的滚动。
- background-image 也不能继承。事实上,所有背景属性都不能继承。
background-image:url('eg_bg_03.gif');
background-repeat:no-repeat; <!-- 图像只显示一次,不延伸重复显示 -->
background-position:center; <!-- 将图像起始位置定在元素的中间位置 -->
background-attachment:fixed; <!-- 页面滚动时,背景图像不滚动 -->
文本
文本颜色 [color]
- 此属性接收3种形式的值:colorname,
#xxxxxx
, rgb(x, x, x),如:
body {color:red}
h1 {color:#00ff00}
p.ex {color:rgb(0,0,255)}
缩进文本 [text-indent]
- 通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。
p {text-indent: -5em; padding-left: 5em;}
- text-indent 可以使用百分比值,百分数要相对于缩进元素父元素的宽度。
div { width: 500px; }
p { text-indent: 20%;}
<div>
<p>this is a paragragh</p> <!-- 段落缩进值是父元素的 20%,即 100 个像素 -->
</div>
- text-indent 属性可以继承
div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text.
<p>this is a paragragh.</p> <!-- 段落也缩进50个像素 -->
</div>
</div>
水平对齐 [text-align]
- text-align 是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式
<CENTER>
不仅影响文本,还会把整个元素居中。text-align
不会控制元素的对齐,而只影响内部内容。
h1 {text-align: center}
p {text-align: justify} <!-- 两端对齐,一般不提倡使用 -->
字母间隔 [letter-spacing]
- 修改字母与字母之间的间隔
- 默认关键字是 normal(即letter-spacing:0)。输入的长度值会使字母之间的间隔增加或减少指定的量
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>
字间隔 [word-spacing]
- 修改单词与单词之间的间隔
- 默认关键字是 normal(即word-spacing:0)。输入的长度值会使字母之间的间隔增加或减少指定的量
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
This is a paragraph. The spaces between words will be increased.
</p>
<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>
行间距 [line-height]
- 属性的值可以是像素(如,30px)、整数(默认值为1)、百分比(默认100%)
p.small { line-height: 10px }
p.middel { line-height: 0.5 }
p.big { line-height: 200% }
字符转换 [text-transform]
- 属性的值有5种:none, uppercase, lowercase, capitalize(首字母大写), inherit,如下所示:
h1 {text-transform: uppercase}
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
文本修饰 [text-decoration]
- 属性的值有6种:none, underline, overline(划线在字体上方), line-through, blink, inherit。
如:去掉超链接的默认下划线:
a {text-decoration: none;}
- 如果两个不同的装饰都与同一元素匹配,胜出规则的值会完全取代另一个值。如:
h2 {text-decoration: underline overline;}
h2.stricken {text-decoration: line-through;}
则所有 class 为 stricken 的 h2 元素都只有一个贯穿线装饰,而没有下划线和上划线。
处理空白符 [white-space]
- 属性可以应用到任何元素,取值有以下几种:
值 | 含义 |
---|---|
normal | 默认。空白会被浏览器忽略 |
nowrap | 文本不会换行,文本会在在同一行上继续,直到遇到 标签为止 |
pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 标签 |
pre-wrap | 保留空白符序列,正常地进行换行 |
pre-line | 合并空白符序列,正常地进行换行 |
inherit | 规定应该从父元素继承 white-space 属性的值 |
如:保留段落的原始格式:
p {white-space: pre;}
- 下面总结了white-space的行为:
值 | 空白符 | 换行符 | 自动换行 |
---|---|---|---|
normal | 合并 | 忽略 | 允许 |
nowrap | 合并 | 忽略 | 不允许 |
pre | 保留 | 保留 | 不允许 |
pre-wrap | 保留 | 保留 | 允许 |
pre-line | 合并 | 保留 | 允许 |
文本方向 [direction]
- 属性的值有3种:ltr, rtl, inherit。如:
div.one { direction: rtl }
div.two { direction: ltr }
更多请参考:W3School