一、CSS背景
1、背景色background-color属性
{background-color:color;}
可以为所有元素设置背景色,这包括body一直到em和a等行内元素。
background-color不能继承,其默认值是 transparent。
2、背景图像background-image属性
{background-image:url();}
理论上讲,甚至可以向textareas和select等替换元素的背景应用图像,不过并不是所有用户代理都能很好地处理这种情况。
另外还要补充一点,background-image也不能继承。事实上,所有背景属性都不能继承。
3、背景重复background-repeat属性
{background-repeat:repeat;}
no-repeat、repeat-x、repea-y
4、背景定位background-position属性
{background-position:position;}
A、关键字
top、bottom、left、right、center
B、百分数值
%
C、长度值
px、cm
5、背景关联background-attachment属性
scroll、fixed
二、CSS文本
CSS文本属性可定义文本的外观。
通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等。
1、缩进文本
text-indent
注意:一般来说,可以为所有块级元素应用text-indent,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用text-indent属性。不过,如果一个块级元素(比如段落)的首行中有一个图像,它会随该行的其余文本移动。
提示:如果想把一个行内元素的第一行"缩进",可以用左内边距或外边距创造这种效果。
A、使用负值
text-indent还可以设置为负值。利用这种技术,可以实现很多有趣的效果,比如"悬挂缩进",即第一行悬挂在元素中余下部分的左边。不过在为text-indent设置负值时要当心,如果对一个段落设置了负值,那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题,建议针对负缩进再设置一个外边距或一些内边距。
B、使用百分比值
text-indent可以使用所有长度单位,包括百分比值。
百分数要相对于缩进元素父元素的宽度。换句话说,如果将缩进值设置为20%,所影响元素的第一行会缩进其父元素宽度的20%。假设父元素的宽度为500px,那20%,即100个像素。
C、继承
div#inner {text-indent:10%;}
<div id="inner">some text. some text. some text.
<p>this is a paragragh.</p>
</div>
这里看似情况不必应用到继承,可直接使用p元素定义缩进,但假设如果div里包含多个元素,这些元素都需要缩进,那一个个定义缩进繁琐,直接应用父级元素定义即可。
2、水平对齐
text-align是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式。
值left、right和center会导致元素中的文本分别左对齐、右对齐和居中。
<CENTER>不仅影响文本,还会把整个元素居中。
justify在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。
3、字间隔
word-spacing属性可以改变字(单词)之间的标准间隔。其默认值normal与设置值为0是一样的。
word-spacing属性接受一个正长度值或负长度值。如果提供一个正长度值,那么字之间的间隔就会增加。为word-spacing设置一个负值,会把它拉近。
4、字母间隔
letter-spacing属性与word-spacing的区别在于,字母间隔修改的是字符或字母之间的间隔。
与word-spacing属性一样,letter-spacing属性的可取值包括所有长度。默认关键字是normal(这与letter-spacing:0相同)。输入的长度值会使字母之间的间隔增加或减少指定的量。
5、字符转换
text-transform属性处理文本的大小写。这个属性有 4 个值:
none
uppercase
lowercase
capitalize
默认值none对文本不做任何改动,将使用源文档中的原有大小写。顾名思义,uppercase和lowercase将文本转换为全大写和全小写字符。最后,capitalize只对每个单词的首字母大写。
6、文本装饰
text-decoration属性5 个值,这是一个很有意思的属性,它提供了很多非常有趣的行为。
none
underline
overline
line-through
blink
不出所料,underline会对元素加下划线,就像HTML中的U元素一样。overline的作用恰好相反,会在文本的顶端画一个上划线。值line-through则在文本中间画一个贯穿线,等价于HTML中的S和strike元素。blink会让文本闪烁,类似于Netscape支持的颇招非议的blink标记。
可以在一个规则中结合多种装饰。如超链接既有下划线,又有上划线。
如果两个不同的装饰都与同一元素匹配,胜出规则的值会完全取代另一个值。text-decoration值会替换而不是累积起来。
7、处理空白符
white-space属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。
A、值pre
如果将white-space设置为pre,受这个属性影响的元素中,空白符的处理就有所不同,其行为就像XHTML的pre元素一样;空白符不会被忽略。
如果white-space属性的值为pre,浏览器将会注意额外的空格,甚至回车。在这个方面,而且仅在这个方面,任何元素都可以相当于一个 pre 元素。
B、值nowrap
与之相对的值是nowrap,它会防止元素中的文本换行,除非使用了一个br元素。在CSS中使用nowrap非常类似于HTML4中用<td nowrap>将一个表单元格设置为不能换行,不过white-space值可以应用到任何元素。
C、值pre-wrap和值pre-line
CSS2.1引入了值pre-wrap和pre-line,这在以前版本的CSS中是没有的。这些值的作用是允许创作人员更好地控制空白符处理。
如果元素的white-space设置为pre-wrap,那么该元素中的文本会保留空白符序列,但是文本行会正常地换行。如果设置为这个值,源文本中的行分隔符以及生成的行分隔符也会保留。pre-line与pre-wrap相反,会像正常文本中一样合并空白符序列,但保留换行符。
D、总结
下面的表格总结了white-space属性的行为:
值 空白符 换行符 自动换行
normal 合并 忽略 允许
pre 保留 保留 不允许
nowrap 合并 忽略 不允许
pre-wrap 保留 保留 允许
pre-line 合并 保留 允许
8、文本方向
direction属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的为止。
注释:对于行内元素,只有当unicode-bidi属性设置为embed或bidi-override时才会应用direction属性。
direction属性有两个值:ltr和rtl。大多数情况下,默认值是 ltr,显示从左到右的文本。如果显示从右到左的文本,应使用值rtl。
三、CSS字体系列
CSS 字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)。
1、CSS 字体系列
在 CSS 中,有两种不同类型的字体系列名称:
通用字体系列 - 拥有相似外观的字体系统组合(比如 "Serif" 或 "Monospace")
特定字体系列 - 具体的字体系列(比如 "Times" 或 "Courier")
除了各种特定的字体系列外,CSS 定义了 5 种通用字体系列:
Serif 字体
Sans-serif 字体
Monospace 字体
Cursive 字体
Fantasy 字体
2、指定字体系列
我们可以通过结合特定字体名和通用字体系列来解决这个问题:
h1 {font-family: Georgia, serif;}
也可以为给定的元素指定一系列类似的字体。要做到这一点,需要把这些字体按照优先顺序排列,然后用逗号进行连接:
p {font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;}
使用引号
您也许已经注意到了,上面的例子中使用了单引号。只有当字体名中有一个或多个空格(比如 New York),
或者如果字体名包括 # 或 $ 之类的符号,才需要在 font-family 声明中加引号。
单引号或双引号都可以接受。但是,如果把一个 font-family 属性放在 HTML 的 style 属性中,则需要使用该属性本身未使用的那种引号。
3、字体风格
font-style 属性最常用于规定斜体文本。
该属性有三个值:
normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示
italic 和 oblique 的区别
斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。与此不同,倾斜(oblique)文本则是正常竖直文本的一个倾斜版本。
4、字体变形
font-variant 属性可以设定小型大写字母。
小型大写字母不是一般的大写字母,也不是小写字母,这种字母采用不同大小的大写字母。
normal
small-caps
5、字体加粗
font-weight 属性设置文本的粗细。
使用 bold 关键字可以将文本设置为粗体。
关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100 对应最细的字体变形,900 对应最粗的字体变形。数字 400 等价于 normal,而 700 等价于 bold。
如果将元素的加粗设置为 bolder,浏览器会设置比所继承值更粗的一个字体加粗。与此相反,关键词 lighter 会导致浏览器将加粗度下移而不是上移。
6、字体大小-font-size
使用 px 来设置字体大小
在 Firefox, Chrome, and Safari 中,可以重新调整以上例子的文本大小,但是在 Internet Explorer 中不行。
使用 em 来设置字体大小
如果使用 em 单位,则可以在所有浏览器中调整文本大小。
结合使用百分比和 EM
在所有浏览器中,可以显示相同的文本大小,并允许所有浏览器缩放文本的大小。
四、CSS 列表
CSS 列表属性允许你放置、改变列表项标志,或者将图像作为列表项标志。
1、列表类型
要修改用于列表项的标志类型,可以使用属性 list-style-type
circle, square, upper-roman, lower-alpha
2、列表项图像
有时,常规的标志是不够的。你可能想对各标志使用一个图像,这可以利用 list-style-image 属性做到
url()
3、列表标志位置
CSS2.1 可以确定标志出现在列表项内容之外还是内容内部。这是利用 list-style-position 完成的。
inside, outside
4、简写列表样式
为简单起见,可以将以上 3 个列表样式属性合并为一个方便的属性:list-style
li {list-style : url(example.gif) square inside}
五、CSS 表格
CSS 表格属性可以帮助您极大地改善表格的外观。
1、表格边框
如需在 CSS 中设置表格边框,请使用 border 属性。
table, th, td
{
border: 1px solid blue;
}
2、折叠边框
border-collapse 属性设置是否将表格边框折叠为单一边框。
table
{
border-collapse:collapse;
}
3、表格宽度和高度
通过 width 和 height 属性定义表格的宽度和高度。
table
{
width:100%;
}
th
{
height:50px;
}
4、表格文本对齐
text-align 和 vertical-align 属性设置表格中文本的对齐方式。
td
{
text-align:right;
}
td
{
height:50px;
vertical-align:bottom;
}
5、表格内边距
如需控制表格中内容与边框的距离,请为 td 和 th 元素设置 padding 属性。
td
{
padding:15px;
}
6、表格颜色
下面的例子设置边框的颜色,以及 th 元素的文本和背景颜色。
th
{
background-color:green;
color:white;
}
六、CSS 轮廓
1、outline
outline 在一个声明中设置所有的轮廓属性
outline: outline-color outline-style outline-width
2、outline-color
outline-color 设置轮廓的颜色
#000000 black rgb(0,0,0)
3、outline-style
outline-style 设置轮廓的样式
dotted dashed solid double groove ridge inset outset
4、outline-width
outline-width 设置轮廓的宽度
thin thick 100px cm em