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%比标准大