CSS样式_背景&文本

背景

背景色 [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