CSS样式

1.CSS背景

背景色:background-color属性

背景图像background-image:url(图片路径)

background-image: url(1.jpg);

背景重复:

如果需要在页面上对背景图像进行平铺,可以使用 backdround-repeat属性。

属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺

背景定位:background-position

为 background-position 属性提供值有很多方法。首先,可以使用一些关键字:top、bottom、left、right 和 center。通常,这些关键字会成对出现,不过也不总是这样。还可以使用长度值,如 100px 或 5cm,最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。

background-position: 50% 50%;

background-position: top right;

长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。

background-position: 50px 150px;

背景关联:background-attachment:fixed/scroll

如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。

您可以通过 background-attachment 属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响

background-attachment 属性的默认值是 scroll,也就是说,在默认的情况下,背景会随文档滚动。

所有背景属性同时声明:

background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center; 

2.CSS 文本

 缩进文本

使用text-indent   值:可正可负,可以使用百分值,可继承

百分数要相对于缩进元素父元素的宽度。换句话说,如果将缩进值设置为 20%,所影响元素的第一行会缩进其父元素宽度的 20%

应注意使用负值可能超出浏览器范围,应当增加padding-left避免此现象

使用负值可以悬挂缩进

一般来说,可以为所有块级元素应用 text-indent,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用 text-indent 属性。不过,如果一个块级元素(比如段落)的首行中有一个图像,它会随该行的其余文本移动。

#red{
color: red;
text-indent: -5em;
padding-left: 5em;
}

水平对齐

text-align:center,left,right,justify

在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等

<CENTER> 不仅影响文本,还会把整个元素居中

字间隔

word-spacing 属性可以改变字(单词)之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。

word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值,那么字之间的间隔就会增加。为 word-spacing 设置一个负值,会把它拉近

字母间隔

letter-spacing与 word-spacing 的区别在于,字母间隔修改的是字符或字母之间的间隔。

字符转换

字母大小写转换 text-transform

值:none,uppercase,lowercase,capitalize,分别是无变化,全部大写,全部小写,首字母大写

文本装饰

text-decoration属性

值:none,underline,overline,line-through,blink

分别是无效果,下划线,上划线,贯穿线,闪烁

可以利用这个属性去掉超链接的下划线

a{
text-decoration: none;
}

 还可以在一个规则中结合多种装饰

#red{
/*color: red;*/
/*text-indent: 5%;*/
text-align: left;
text-decoration: line-through overline;
}

处理空白字符

white-space属性若值设成normal则会默认将连续空格合并成一个,并忽略换行符

如果 white-space 属性的值为 pre,浏览器将会注意额外的空格,甚至回车。在这个方面,而且仅在这个方面,任何元素都可以相当于一个 pre 元素。

与之相对的值是 nowrap,它会防止元素中的文本换行,除非使用了一个 br 元素。这样只有一行,不会根据浏览器尺寸换行,且忽略了空格

如果元素的 white-space 设置为 pre-wrap,那么该元素中的文本会保留空白符序列,但是文本行会正常地换行如果设置为这个值,源文本中的行分隔符以及生成的行分隔符也会保留。pre-line 与 pre-wrap 相反,会像正常文本中一样合并空白符序列,但保留换行符。

文本方向

direction

对块级元素有效,值为ltr和rtl

对于行内元素,只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。

行间距

line-height 值小于100%比标准小,大于100%比标准大