CSS常见属性

文/饥人谷_韩宝亿(简书作者)
原文链接:http://www.jianshu.com/p/bfccac3b3b5a
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

1、文本相关属性
(1)文本缩进--text-indent

通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。
注意:一般来说,可以为所有块级元素应用 text-indent,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用 text-indent 属性。不过,如果一个块级元素(比如段落)的首行中有一个图像,它会随该行的其余文本移动。
p{text-indent:2em;}


Paste_Image.png
使用负值

text-indent 还可以设置为负值。利用这种技术,可以实现很多有趣的效果,比如“悬挂缩进”,即第一行悬挂在元素中余下部分的左边:p{text-indent:-2em;}
不过在为 text-indent 设置负值时要当心,如果对一个段落设置了负值,那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题,建议针对负缩进再设置一个外边距或一些内边距:p{ text-indent:-2em; padding-left:2em;}


Paste_Image.png
(2)对齐--text-align

text-align 是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式。值 left、right 、 center和justify 会导致元素中的文本分别左对齐、右对齐、居中对齐和两端对齐。


Paste_Image.png
(3)字间隔/字母间隔--word-spacing/letter-spacing

word-spacing 属性可以改变字(单词)之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值,那么字之间的间隔就会增加。为 word-spacing 设置一个负值,会把它拉近;
letter-spacing 属性与 word-spacing 的区别在于,字母间隔修改的是字符或字母之间的间隔。
与 word-spacing 属性一样,letter-spacing 属性的可取值包括所有长度。默认关键字是 normal(这与 letter-spacing:0 相同)。输入的长度值会使字母之间的间隔增加或减少指定的量。

(4)字符转换--text-transform

text-transform 属性处理文本的大小写。这个属性有 4 个值:
none、uppercase、lowercase、capitalize
默认值 none 对文本不做任何改动。
uppercase 和 lowercase 将文本转换为全大写和全小写字符。
capitalize 只对每个单词的首字母大写。


Paste_Image.png


使用 text-transform 有两方面的好处。首先,只需写一个简单的规则来完成这个修改,而无需修改 h1 元素本身。其次,如果您以后决定将所有大小写再切换为原来的大小写,可以更容易地完成修改。

(5)处理空白符--white-space

white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。
下面的代码是处理文字超过父元素边界后不换行,且多余的文字隐藏并带有省略号。


Paste_Image.png
2、背景相关属性
(1)背景色--background-color

可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值(常用的四种背景色写法)。


Paste_Image.png
(2)背景图像--background-image

要把图像放入背景,需要使用 background-image 属性。background-image 属性的默认值是 none,表示背景上没有放置任何图像。
如果需要设置一个背景图像,必须为这个属性设置一个 URL 值:


Paste_Image.png
(3)背景重复--background-repeat

如果需要在页面上对背景图像进行平铺,可以使用 background-repeat 属性
属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺。


Paste_Image.png
(4)背景关联--background-attachment

如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失(background-attachment:scroll)。
我们可以通过 background-attachment 属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响:


Paste_Image.png
(5)实例--如何在一个声明中设置所有背景属性:

Paste_Image.png
posted @ 2016-03-17 16:54  菜鸟-小宝  阅读(207)  评论(0编辑  收藏  举报