css小知识点总结

背景

1、背景色 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。 例：这条规则把元素的背景设置为灰色：p {background-color: gray;}

2、背景图像 background-image 属性为元素设置背景图像。background-image 属性的默认值是 none，表示背景上没有放置任何图像。 例：如果需要设置一个背景图像，必须为这个属性设置一个 URL 值： body {background-image: url(/i/eg_bg_04.gif);}

3、背景重复 background-repeat属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。默认地，背景图像将从一个元素的左上角开始。 例： body { background-image: url(/i/eg_bg_03.gif); background-repeat: repeat-y; }

4、背景定位 background-position 属性改变图像在背景中的位置： 例：在 body 元素中将一个背景图像居中放置： body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:center; }

5、背景关联 您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响： body { background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat; background-attachment:fixed }

文本

1、文本颜色：text-indent 属性： 例：p {background-color: gray;} a) 使用负值： 例：{text-indent: -5em;} 注意：在为 text-indent 设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距： p {text-indent: -5em; padding-left: 5em;} b) 使用百分比值 例：p {text-indent: 20%;}

2、水平对齐：text-algin属性：值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。

3、字间隔：word-spacing 属性 word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近： p.spread {word-spacing: 30px;} p.tight {word-spacing: -0.5em;} <p class="spread">This is a paragraph. The spaces between words will be decreased.</p> <p class="tight">This is a paragraph. The spaces between words will be increased.</p>

4、字符转换text-transform 属性 text-transform 属性处理文本的大小写。这个属性有 4 个值：none 、uppercase 、lowercase 、capitalize 。 默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。 例：h1 {text-transform: uppercase}

5、文本装饰 text-decoration 属性，这是一个很有意思的属性，它提供了很多非常有趣的行为。 text-decoration 有 5 个值：none 、underline、overline 、line-through、blink。 不出所料，underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。 a {text-decoration: none;}

6、direction 属性规定文本的方向 / 书写方向。 该属性指定了块的基本书写方向，以及针对 Unicode 双向算法的嵌入和覆盖方向。不支持双向文本的用户代理可以忽略这个属性。 实例： 把文本方向设置为“从右向左”：div { direction: rtl }