1.本章面试题

1.1 CSS中常用的文本样式属性

1.2 CSS中常用的背景样式属性

2.知识点

2.1 上一章内容回顾

上一章我们学习了CSS样式基础，主要是CSS选择器的使用。

2.2 本章主要讲解更多CSS的样式属性

3.具体内容

3.1 颜色 `color`

在CSS中，元素的前景色可以使用color属性来设置，在HTML表现中，前景色一般是元素文本的颜色，另外color还会应用到元素的所有边框，除非被其它边框颜色属性覆盖。

基本语法：

color : color_name | HEX | RGB | RGBA | HSL | HSLA | transparent ;

语法说明：

color_name

color_name是颜色英文名称，例如green表示绿色、red表示红色、gold表示金色。
HEX

HEX指颜色的十六进制表示法，所有浏览器都支持HEX表示法。该方法通过对红、绿和蓝三种光（RGB）的十六进制表示法进行定义，使用三个双位数来编写，以#号开头，基本形式为#RRGGBB，其中的RR（红光）、GG（绿光）、BB（蓝光）十六进制规定了颜色的成分，所有值必须介于00到FF之间，也就是说对每种光源设置的最低值可以是0（十六进制00），最高值是255（十六进制FF）。例如绿色表示为#00FF00、红色表示为#FF0000、金色表示为#FFD700。值得注意的是，在此表示方式中，如果每两位颜色值相同，可以简写为#RGB形式，如#F00也表示红色。
RGB

RGB是指用RGB函数表示颜色，所有浏览器都支持该方法，RGB颜色值规定形式为RGB(red,green,blue)。

red、green和blue分别表示红、绿、蓝光源的强度，可以为0-255之间的整数，或者是0%-100%之间的百分比值。例如：RGB(255,0,0)和RGB(100%,0%,0%)都表示红色。
RGBA

RGBA颜色值是CSS3新增表示方式，形式为RGBA(red,green,blue,alpha)。

此色彩模式与RGB相同，是RGB颜色的扩展，新增了A表示不透明度，A的取值范围为0.0（完全透明）至1.0（完全不透明）之间。例如RGBA(255,0,0,0.5)表示半透明的红色。
HSL

HSL颜色值是CSS3新增表示方式，形式为HSL(hue,saturation,lightness)。其中hue(色调)指色盘上的度数，取值范围为：0–360（0或360是红色，120是绿色，240是蓝色）。saturation(饱和度)，取值范围为：0%-100%（0%是灰色，100%是全彩）。lightness(亮度)，取值范围为：0%-100%（0%是黑色，100%是白色）。例如HSL(120,100%,100%)表示绿色。
HSLA

HSLA色彩记法是CSS3新增表示方式，形式为HSL(H,S,L,A)。此色彩模式与HSL相同，只是在HSL模式上新增了不透明度Alpha。例如HSL(120,100%,100%,0.5) 表示半透明的绿色。
transparent 表示透明

<!DOCTYPE html>
<html>
<head>
<title>颜色color</title>
<style type="text/css">
    body{
        color:orange;                 /* color_name */
        font-weight:bold;            /*字体加粗*/
        font-size:18px;              /*字体大小*/ 
    }           
    .hex1{ color:#808000; }             /* HEX #RRGGBB形式*/
    .hex2{ color:#F0F;}                /* HEX,#RGB形式 */
    .rgb1{color:RGB(0,145,153);}       /* RGB */
    .rgba1{color:RGBA(0,145,153,0.5);}      /* RGBA */
    .rgb2{color:RGB(80%,50%,50%);}       /* RGB */
    .rgba2{color:RGBA(80%,50%,50%,0.5);}      /* RGBA */
    .hsl{color:HSL(159,100%,69%);}         /* HSL */
    .hsla{color:HSLA(159,100%,69%,0.8);}    /* HSLA */
    .trans{color:transparent;}          /* transparent */
</style>
</head>
<body>
<p class="hex1">颜色为HEX形式，橄榄绿#808000</p>
<p class="hex2">颜色为HEX形式，紫红色#F0F</p> 
<p class="rgb1">颜色为RGB形式，RGB(0,145,153)</p> 
<p class="rgba1">颜色为RGBA形式，RGBA(0,145,153,0.5)</p> 
<p class="rgb2">颜色为RGB形式，RGB(80%,50%,50%)</p> 
<p class="rgba2">颜色为RGBA形式，RGBA(80%,50%,50%,0.5)</p> 
<p class="hsl">颜色为HSL形式，HSL(159,100%,69%)</p> 
<p class="hsla">颜色为HSLA形式，颜色为HSLA(159,100%,69%,0.8)</p> 
<p class="trans">颜色为transparent完全透明</p>
<p>颜色继承body的颜色，橙色orange</p>
</body>
</html>

3.2 字体属性

如下是常用的字体属性列表：

3.2.1 字型 font-family

font-family属性用于指定文本的字型，例如黑体、隶书、Arial、Cambria等。

基本语法：

font-family :字型1,字型2, …… ;

<!DOCTYPE html>
<html>
<head>
<title>设置字型</title>
<style type="text/css">
.font1{font-family:微软雅黑;}
.font2{font-family:隶书,华文行楷,宋体;}
.font3{font-family:Calibri,"Times New Roman",Arial;}
</style>
</head>
<body>
<h2>设置字型</h2>
<p class="font1">设置文本为微软雅黑</p>
<p class="font2">文本按照隶书、华文行楷、宋体的顺序设置</p>
<p class="font3">The order of font is Calibri,Times New Roman,Arial</p>
</body>
</html>

3.2.2 字型尺寸 font-size

在HTML5之前，HTML中设置字体尺寸使用<font>标记，它有大小7个级别的字号，具有很大的局限性，在HTML5中，摒弃了<font>标记，而将字体大小交由CSS来设置。在CSS中，使用font-size属性设置字体大小。

基本语法：

font-size:长度 | 绝对尺寸 | 相对尺寸 | 百分比 ;

语法说明：

长度

用长度值指定文字大小，不允许负值。长度单位有px（像素）、pt（点）、pc（皮卡）、in（英寸）、cm（厘米）、mm（毫米）、em（字体高）和ex（字符X的高度），其中px、em和ex是CSS相对长度单位，in、cm、mm、pt（1pt=1/72in）和pc（1pc=12pt）是css绝对长度单位。
绝对尺寸

绝对尺寸每一个值都对应一个固定尺寸，可以取值为xx-small（最小）、x-small（较小）、small（小）、medium（正常）、large（大）、x-large（较大）和xx-large（最大）。
相对尺寸

相对尺寸相对于父对象中字体尺寸进行相对调节，可选参数值为smaller和larger。
百分比

用百分比指定文字大小，相对于父对象中字体的尺寸。

<!DOCTYPE html>
<html>
<head>
<title>设置字体尺寸</title>
<style type="text/css">
.fs1{font-size:x-large;}
.fs2{font-size:medium;}
.fs3{font-size:14px;}
.fs4{font-size:12pt;}
.fs5{font-size:larger;}
.fs6{font-size:150%;}
</style>
</head>
<body>
<h2>字体尺寸（h2标题），父对象为浏览器窗口</h2>
<p class="fs1">x-large大小的文字</p>
<p class="fs2">medium大小的文字</p>
<p>未使用样式，默认大小的文字</p>
<p class="fs3">14px大小的文字</p>
<p class="fs4">12pt大小的文字</p>
<p class="fs5">larger大小的文字</p>
<p class="fs6">150%大小的文字</p>
</body>
</html>

3.2.3 字体粗细 font-weight

基本语法：

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;

语法说明：

normal：正常的字体。相当于数字值400。
bold：粗体。相当于数字值700。
bolder：定义比继承值更重的值。
lighter：定义比继承值更轻的值。
100-900：用数字表示字体粗细。

<!DOCTYPE html>
<html>
<head>
<title>字体粗细</title>
<style type="text/css">
.fw1{font-weight:100;}
.fw2{font-weight:200;}
.fw3{font-weight:300;}
.fw4{font-weight:400;}
.fw5{font-weight:500;}
.fw6{font-weight:600;}
.fw7{font-weight:700;}
.fw8{font-weight:800;}
.fw9{font-weight:900;}
.fw10{font-weight:normal;}
.fw11{font-weight:bold;}
.fw12{font-weight:bolder;}
.fw13{font-weight:lighter;}
</style>
</head>
<body>
<p>
    <span class="fw1">100</span>
    <span class="fw2">200</span>
    <span class="fw3">300</span>
    <span class="fw4">400</span>
    <span class="fw5">500</span>
    <span class="fw6">600</span>
    <span class="fw7">700</span>
    <span class="fw8">800</span>
    <span class="fw9">900</span>
</p>
<p>
    <span class="fw10">normal</span>
    <span class="fw11">bold</span>
    <span class="fw12">bolder</span>
    <span class="fw13">lighter</span>
</p>
<p class="fw10">
这段文字是normal文字，但有时我们会对其中某些文字进行强调，可将其设置为<span class="fw11">粗体bold</span>，这时它明显比其他文字粗一些。
</p>
<p class="fw11">
这段文字是bold文字，整段文字都是粗体，但有时我们需要其中某些文字恢复正常粗细，可将其设置为<span class="fw13">正常normal</span>，这时其他文字明显比它粗一些。
</p>
</body>
</html>

3.2.4 字体风格 font-style

基本语法：

font-style: normal | italic | oblique ;

语法说明：

normal：正常字体。
italic：指定文本字体样式为斜体。对于没有设计斜体的特殊字体，如果要使用斜体外观将应用oblique。
oblique：指定文本字体样式为倾斜的字体。人为的使文字倾斜，而不是去选取字体中的斜体字。

<!DOCTYPE html>
<html>
<head>
<title>字体风格</title>
<style type="text/css">
.fs1{font-style:normal;}
.fs2{font-style:italic;}
.fs3{font-style:oblique;}
</style>
</head>
<body>
<ul>
    <li class="fs1">正常字体normal</li>
    <li class="fs2">斜体italic</li>
    <li class="fs3">倾斜的字体oblique</li>
</ul>
</body>
</html>

3.2.5 小型大写字母 font-variant

基本语法：

font-variant: normal | small-caps ;

<!DOCTYPE html>
<html>
<head>
<title>小型大写字母</title>
<style type="text/css">
.fv1{font-variant:normal;}
.fv2{font-variant:small-caps;}
</style>
</head>
<body>
<p class= "fv1">Gone with the Wind</p>
<p class= "fv2">Gone with the Wind</p>
</body>
</html>

3.2.6 字体复合属性 font

基本语法：

font：font-style  font-variant  font-weight  font-size  font-family ;

语法说明：

font属性中的属性值排列顺序是font-style、font-variant、font-weight、font-size和 font-family。属性排列中，font-style、font-variant和font-weight可以进行顺序的调换，而font-size和font-family则必须按照固定顺序出现，如果这两个顺序错误或者缺少，那么整条样式可能会被忽略。

另外，在字体大小属性值部分可以添加行高属性，以/分隔。例如：“font:italic normal bold 13px/20px 宋体;”表示字体为斜体加粗的宋体、大小为13像素、行高为20像素。

3.3 文本格式化

3.3.1 行高 line-height

基本语法：

line-height: normal | 长度 | 百分比 | 数值 ;

语法说明：

normal：默认行高。
长度值：用长度值指定行高，不允许负值。如“line-height:18px”设定行高为18px。
长度值：用长度值指定行高，不允许负值。如“line-height:18px”设定行高为18px。
数值：用乘积因子指定行高，不允许负值。如“line-height:2” 设定行高为字体大小的2倍，相当于2倍行距。

<!DOCTYPE html>
<html>
<head>
<title>行高</title>
<style type="text/css">
p{font-size:13px;}
.lh1{ line-height:normal;}
.lh2{ line-height:24px;}
.lh3{ line-height:188%;}
.lh4{ line-height:1.5;}
</style>
</head>
<body>
<p class="lh1">
（line-height:normal;所有段落文字的大小均为13px）我与父亲不相见已二年余了，我最不能忘记的是他的背影。
</p>
<p class="lh2">
（line-height:24px;）那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子。我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说：“事已如此，不必难过，好在天无绝人之路！”
</p>
<p class="lh3">
（line-height:188%;）回家变卖典质，父亲还了亏空；又借钱办了丧事。这些日子，家中光景很是惨澹，一半为了丧事，一半为了父亲赋闲。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。
</p>
<p class="lh4">
（line-height:1.5;）到南京时，有朋友约去游逛，勾留了一日；第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌躇了一会。其实我那年已二十岁，北京已来往过两三次，是没有什么要紧的了。他踌躇了一会，终于决定还是自己送我去。我再三劝他不必去；他只说：“不要紧，他们去不好！”
</p>
</body>
</html>

3.3.2 水平对齐方式 text-align

基本语法：

text-align: left | right | center | justify | start | end | match-parent | justify-all;

语法说明：

left：内容左对齐。
center：内容居中对齐。
right：内容右对齐。
justify：内容两端对齐，适用于文字中有空格的情况，例如英文文本。

<!DOCTYPE html>
<html>
<head>
<title>对齐方式</title>
<style type="text/css">
p{ font-size:14px; }
.ta1{ text-align:left;}
.ta2{ text-align:center;}
.ta3{ text-align:right;}
.ta4{ text-align:justify;}
</style>
</head>
<body>
<p class="ta1">左对齐</p>
<p class="ta2">居中对齐</p>
<p class="ta3">右对齐</p>
<p class="ta1">
左对齐之段落：I have a dream that one day this nation will rise up and live out the true meaning of its creed: "We hold these truths to be self-evident, that all men are created equal."
</p>
<p class="ta4">
两端对齐段落：I have a dream that one day this nation will rise up and live out the true meaning of its creed: "We hold these truths to be self-evident, that all men are created equal."
</p>
</body>
</html>

3.3.3 文本缩进 text-indent

基本语法：

text-indent: [长度值 | 百分比] && hanging? && each-line?;

语法说明：

长度值：用长度值指定文本的缩进，可以为负值。如“text-indent:2em”表示缩进两个字体高。
百分比：用百分比指定文本的缩进，可以为负值。如“text-indent:20%”。
each-line：CSS3新增属性值，定义缩进作用在块容器的第一行或者内部的每个强制换行的首行，软换行不受影响。
hanging：CSS3新增属性，反向所有被缩进作用的行。
each-line和hanging关键字跟随在缩进数值之后，以空格分隔，如“div{text-indent:2em each-line;}”表示div容器内部的第一行及每一个强制换行都有2em的缩进。

<!DOCTYPE html>
<html>
<head>
<title>文本缩进</title>
<style type="text/css">
body{
    color:#035ee5;
}
h1{
    font-size:24px;
    text-align:center;
}
p{
    font:14px/22px 宋体;
    text-indent:2em;
}
</style>
</head>
<body>
<h1>窘 林徽因</h1>
<p>
暑假中真是无聊到极点，维杉几乎急着学校开课，他自然不是特别好教书的，——平日他还很讨厌教授的生活——不过暑假里无聊到没有办法，他不得不想到做事是可以解闷的。拿做事当作消遣也许是堕落。中年人特有的堕是，”维杉狠命地划一下火柴，“中年了又怎样？”他又点上他的烟卷连抽了几口。朋友到暑假里，好不容易找，都跑了，回南的不少，几个年轻的，不用说，更是忙得可以。当然脱不了为女性着忙，有的远赶到北戴河去。只剩下少朗和老晋几个永远不动的金刚，那又是因为他们有很好的房子有太太有孩子，真正过老牌子的中年生活，谁都不像他维杉的四不像的落魄！
</p>
<p>
维杉已经坐在少朗的书房里有一点多钟了，说着闲话，虽然他吃烟的时候比说话的多。难得少朗还是一味的活泼，他们中间隔着十年倒是一件不很 显著的事，虽则少朗早就做过他的四十岁整寿，他的大孩子去年已进了大学。这也是旧式家庭的好处，维杉呆呆地靠在矮榻上想，眼睛望着竹帘外大院子。一缸莲花和几盆很大的石榴树，夹竹桃，叫他对着北京这特有的味道赏玩。他喜欢北京，尤其是北京的房子、院子......
</p>
<p>
“你不吃西瓜么？”维杉想拿话岔开.少朗不响，吃了两口烟，一边站起来按电铃，一边轻轻地说：“难道你还没有忘掉？”
</p>
<p>
“笑话！”维杉急了，“谁的记性抵得住时间？”
</p>
</body>
</html>

3.3.4 大小写转换 text-transform

基本语法：

text-transform : none | capitalize | uppercase | lowercase | full-width;

语法说明：

none：无转换，正常显示。
capitalize：将每个单词的第一个字母转换成大写。
uppercase：将单词的每个字母转换成大写。
lowercase：将单词的每个字母转换成小写。
full-width：CSS3新增值，将所有字符转换成fullwidth（全字型或全角）形式。如果字符没有相应的fullwidth形式，将保留原样。

<!DOCTYPE html>
<html>
<head>
<title>大小写</title>
<style type="text/css">
.tt1{ text-transform:capitalize; }
.tt2{ text-transform:uppercase; }
.tt3{ text-transform:lowercase; }
.tt4{ text-transform:full-width; }
</style>
</head>
<body>
<p>原文：Confidence of success is almost success. </p>
<p>首字母大写：<span class="tt1">Confidence of success is almost success. </span> </p>
<p>大写：<span class="tt2">Confidence of success is almost success. </span> </p>
<p>小写：<span class="tt3">Confidence of success is almost success. </span> </p>
<p>全角：<span class="tt4">Confidence of success is almost success. </span> </p>
</body>
</html>

3.3.5 字符间距 letter-spacing

基本语法：

letter-spacing: normal | 长度 | 百分比;

语法说明：

normal：默认间隔。
长度：用长度值指定间隔，可以为负值。
百分比：CSS3新增，用百分比指定间隔，可以为负值，但目前主流浏览器均不支持百分比属性值。

<!DOCTYPE html>
<html>
<head>
<title>字符间距</title>
<style type="text/css">
.ls1{letter-spacing: normal;}
.ls2{letter-spacing:0.25em;}
.ls3{letter-spacing:-1px;}
</style>
</head>
<body>
<p>原文：Confidence of success is almost success. </p>
<p class="ls1">normal字符间距：Confidence of success is almost success. </p>
<p class="ls2">0.25em字符间距：Confidence of success is almost success. </p>
<p class="ls3">-1px字符间距：Confidence of success is almost success. </p>
</body>
</html>

3.3.6 单词间距 word-spacing

基本语法：

word-spacing: normal | 长度 | 百分比;

语法说明：

normal：默认间隔。
长度：用长度值指定间隔，可以为负值。
百分比：CSS3新增，用百分比指定间隔，可以为负值，但目前主流浏览器均不支持百分比属性值。

3.3.7 垂直对齐方式 vertical-align

基本语法：

vertical-align : baseline | sub | super | top | text-top | middle | bottom | text-bottom | 百分比 | 长度;

语法说明：

baseline：默认值，与基线对齐。
sub：垂直对齐文本的下标。
super：垂直对齐文本的上标。
top：顶端与行中最高元素的顶端对齐。
text-top：顶端与行中最高文本的顶端对齐。
middle：垂直对齐元素的中部。
bottom：底端与行中最低元素的底端对齐。
text-bottom：底端与行中最低文本的底端对齐。
百分比：用百分比指定由基线算起的偏移量，基线为0%。
长度：用长度值指定由基线算起的偏移量，基线为0。

<!DOCTYPE html>
<html>
<head>
<title>垂直对齐方式</title>
<style type="text/css">
p{ font-size:18px;font-weight:bold; }
span{ font-size:13px;}
.va1{ vertical-align:baseline; }
.va2{ vertical-align:sub; }
.va3{ vertical-align:super; }
.va4{ vertical-align:top; }
.va5{ vertical-align:text-top; }
.va6{ vertical-align:middle; }
.va7{ vertical-align:bottom; }
.va8{ vertical-align:text-bottom; }
.va9{ vertical-align:10px; }
.va10{ vertical-align:20%; }
</style>
</head>
<body>
<p>参考文字<span class="va1">baseline基线对齐</span></p>
<p>参考文字<span class="va2">sub下标对齐</span></p>
<p>参考文字<span class="va3">super上标对齐</span></p>
<p>参考图文<img src="images/panda.png" title="参考图片" /><span class="va4">top顶部对齐</span></p>
<p>参考图文<img src="images/panda.png" title="参考图片" /><span class="va5">text-top顶端对齐</span></p>
<p>参考文字<span class="va6">middle居中对齐</span></p>
<p>参考文字<span class="va7">bottom底部对齐</span></p>
<p>参考文字<span class="va8">text-bottom底部对齐</span></p>
<p>参考文字<span class="va9">10px数值对齐</span></p>
<p>参考文字<span class="va10">20%数值对齐</span></p>    
</body>
</html>

3.3.8 文本修饰text-decoration

text-decoration属性控制对象中的文本的装饰，包括修饰种类、样式和颜色。

在CSS2.1中，text-decoration设置文本的修饰种类，而在CSS3中，text-decoration是text-decoration-line、text-decoration-style和text-decoration-color的复合属性。

所有浏览器均支持CSS2.1中的text-decoration属性，在CSS3中，该属性定义被移植到其新的分解属性text-decoration-line上。大多数浏览器对CSS3就text-decoration的属性扩展以及分项属性text-decoration-line、text-decoration-style和text-decoration-color不支持，目前Firefox和Safari的高版本支持此属性的新解，但在个别细节上可能支持性仍然不够。

基本语法：

text-decoration:<text-decoration-line> || < text-decoration-style> || <text-decoration-color>;
text-decoration-line：none | [ underline || overline || line-through || blink ];
text-decoration-style：solid | double | dotted | dashed | wavy;
text-decoration-color：颜色;

语法说明：

text-decoration-line（修饰种类）

指定文本装饰线的位置和种类。相当于CSS2.1的 text-decoration 属性，可取值：none、underline、 overline、line-through 和blink，除了“none”之外的属性值可以组合。

none：关闭原本应用到一个元素上的所有装饰。通常，无装饰的文本是默认外观，但也不总是这样，例如，超链接默认有下划线，可以使用“text-decoration-line:none;”去掉超链接的下划线。
underline：下划线。
overline：上划线。
line-through ：贯穿线（删除线）。
blink：文本闪烁，大部分浏览器都不支持blink值，因为规范允许用户代理忽略该效果。

text-decoration-style（修饰样式）指定文本装饰的样式，也就是文本修饰线条的形状，值可以是solid、double、dotted、dashed和wave。solid表示实线，double表示双线，dotted表示点线，dashed表示虚线，wave表示波浪线。
text-decoration-color（修饰颜色）指定文本装饰线条的颜色，可以使用任何合法颜色值。

<!DOCTYPE html>
<html>
<head>
<title>文本修饰</title>
<style type="text/css">
.td1{ text-decoration:none; }
.td2{ text-decoration:underline; }
.td3{ text-decoration:line-through red; }
.td4{ text-decoration:overline blue double; }
.td5{ text-decoration:overline underline purple dotted; }
.td6{ text-decoration-line:overline underline; }
.td7{
    text-decoration-line:underline;
    text-decoration-style:dashed;
    text-decoration-color:#F09; 
}
</style>
</head>
<body>
<p><a href=http://www.baidu.com class="td1">此处是链接，使用样式去掉下划线</a></p>
<p class="td2">text-decoration添加下划线</p>
<p class="td3">text-decoration添加红色删除线</p>
<p class="td4">text-decoration添加蓝色双线上划线</p>
<p class="td5">text-decoration同时添加上划线和下划线，形式为紫色点线</p>
<p class="td6">text-decoration-line同时添加上划线和下划线</p>
<p class="td7">使用3个分项属性添加颜色为#F09的虚线下划线</p>
</body>
</html>

3.3.9 文本阴影 text-shadow

基本语法：

text-shadow : none | 阴影 [ , 阴影 ]* ;
阴影 =  长度1 , 长度2 , [ 长度3 ], [颜色];

语法说明：

none：无阴影。
阴影：可以设置多组阴影效果，每组参数之间用逗号分隔。
长度1：设置阴影的水平偏移值，可以为负值，正值表示阴影在右，负值在左。
长度2：设置阴影的垂直偏移值，可以为负值，正值表示阴影在上，负值在下。
长度3：可选，如果提供了此值则用来设置文本的阴影模糊值，不允许负值。
颜色：设置阴影的颜色。

<!DOCTYPE html>
<html>
<head>
<title>文本阴影</title>
<style type="text/css">
p{
    font-size:24px;
    font-family:黑体,微软雅黑;
    font-weight:bold;
}
.ts1{
    color:black;
    text-shadow:6px 6px 3px #333;
}
.ts2{
    color:#F93;
    text-shadow:-6px -4px 3px #FA6;
}
.ts3{
    color:black;
    text-shadow:5px 3px 2px #119cd5,10px 6px 2px #fed904,15px 9px 3px #7d4697;
}
</style>
</head>
<body>
<p class="ts1">一重阴影:6px 6px 3px #333</p>
<p class="ts2">一重阴影:-6px -4px 3px #FA6</p>
<p class="ts3">三重阴影:5px 3px 2px #119cd5,10px 6px 2px #fed904,15px 9px 3px #7d4697</p>
</body>
</html>

3.3.10 书写模式writing-mode

writing-mode控制对象的内容块固有的书写方向。原本是IE的私有属性之一，后期被w3c采纳成CSS3的标准属性，但各个流浏览器的支持性存在差异。

基本语法：

writing-mode: horizontal-tb | vertical-rl | vertical-lr | lr-tb | tb-rl ;

语法说明：

horizontal-tb：水平文本，左-右。CSS3标准属性，IE浏览器不支持，其它浏览器高版本一般支持。
vertical-rl：垂直文本，右-左。CSS3标准属性，IE浏览器不支持，其它浏览器高版本一般支持。
vertical-lr：垂直文本，左-右。CSS3标准属性，IE浏览器不支持，其它浏览器高版本一般支持。
lr-tb：水平文本，左-右。IE私有属性，但其它浏览器高版本一般也支持。
tb-rl：垂直文本，右-左。IE私有属性，但其它浏览器高版本一般也支持。

<!DOCTYPE html>
<html>
<head>
<title>书写模式</title>
<style type="text/css">

div{
	width:140px;
	height:140px;
	margin:10px;
	border:1px solid black;
	float:left;
	font-size:13px;
	line-height:1.3;
}
/* 水平文本，从上到下 */
.wm1{ 
	writing-mode:horizontal-tb;    /* 适用于大多浏览器，IE不支持 */
	writing-mode:lr-tb;           /*适用于IE，其他浏览器高版本亦可能支持 */
}
.wm2{ 
	writing-mode:vertical-rl;     /* 适用于大多浏览器，IE不支持 */
	writing-mode:tb-rl;           /*适用于IE，其他浏览器高版本亦可能支持 */
}
.wm3{ 
	writing-mode:vertical-lr;   /* 适用于大多浏览器，IE不支持 */
}
</style>
</head>
<body>
<div class="wm1">
明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间？
</div>
<div class="wm2">
明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间？	
</div>
<div class="wm3">
明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间？	
</div>
</body>
</html>

3.4 CSS列表属性

列表的符号和位置可以使用CSS进行设置。

3.4.1 列表项目符号list-style-type

基本语法：

list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin ;

语法说明：

disc：实心圆。
circle：空心圆。
square：实心方块。
decimal：阿拉伯数字。
none：不使用项目符号。

<!DOCTYPE html>
<html>
<head>
<title>列表符号</title>
<style type=text/css>
h1{ font:14px/12px Arial; }
ol,ul{ font-size:13px; }
.circle{ list-style-type:circle;}
.square{ list-style-type:square;}
.decimal{ list-style-type:decimal;}
.upper-roman{ list-style-type:upper-roman;}
.lower-alpha{ list-style-type:lower-alpha;}
.upper-alpha{ list-style-type:upper-alpha;}
.none{ list-style-type:none;}
.armenian{ list-style-type:armenian; }
.lower-greek{ list-style-type:lower-greek;}
</style>
</head>
<body>
<h1>circle：</h1>
<ul class="circle">
		<li>项目符号为空心圆</li>
		<li>这是列表项</li>
</ul>
<h1>square：</h1>
<ul class="square">
		<li>项目符号为实心方块</li>
		<li class="upper-alpha">这一项的项目符号为大写字母</li>
</ul>
<h1>decimal：</h1>
<ol class="decimal">
		<li>项目符号为数字</li>
		<li>这是列表项</li>
</ol>
<h1>upper-roman：</h1>
<ul class="upper-roman">
<li>项目符号为大写罗马字母</li>
	    <li>这是列表项</li>
</ul>
<h1>lower-alpha：</h1>
<ol class="lower-alpha">
		<li>项目符号为小写英文字母</li>
		<li>这是列表项</li>
</ol>
<h1>none：</h1>
<ul class="none">
		<li>无项目符号</li>
		<li>这是列表项</li>
</ul>
<h1>armenian：</h1>
<ul class="armenian">
		<li>项目符号为传统的亚美尼亚数字</li>
		<li>这是列表项</li>
</ul>
<h1>lower-greek：</h1>
<ul class="lower-greek">
		<li>项目符号为基本的希腊小写字母</li>
		<li>这是列表项</li>
</ul>
</body>
</html>

3.4.2 图片符号list-style-image

基本语法：

list-style-image:none | url(图像文件的URL);

语法说明：

none：不指定图像
url：指定列表项标记图像。

<!DOCTYPE html>
<html>
<head>
<title>图像列表符号</title>
<style type=text/css>
.limg{ 
	list-style-image:url(images/flower.png);
	font-size:16px;
}
</style>
</head>
<body>
<ul class="limg">
	<li>春花秋月何时了？往事知多少。</li>
	<li>小楼昨夜又东风，故国不堪回首月明中。</li>
	<li>雕栏玉砌应犹在，只是朱颜改。</li>
	<li>问君能有几多愁？恰似一江春水向东流。</li>
</ul>
</body>
</html>

3.4.3 列表符号位置list-style-position

基本语法：

list-style-position: outside | inside;

语法说明：

outside：默认值，列表项目符号放置在文本以外，且环绕文本不根据符号对齐。
inside：列表项目符号放置在文本以内，且环绕文本和项目符号对齐。

<!DOCTYPE html>
<html>
<head>
<title>列表符号位置</title>
<style type=text/css>
/* 列表所在容器的基本属性设置，后续章节详解 */
div{ 
	width:200px;
	float:left;
	margin:10px;
	border:1px solid #666;
}
/* 列表符号在文本外*/
.lspo{
	list-style-position:outside;
	list-style-type:upper-alpha;
}
/* 列表符号在文本内*/
.lspi{ 
	list-style-position:inside;
	list-style-type:upper-alpha; 
}
</style>
</head>
<body>
<div>
	<h1>outside</h1>
	<ol class="lspo">
		<li>春花秋月何时了？往事知多少。</li>
		<li>小楼昨夜又东风，故国不堪回首月明中。</li>
		<li>雕栏玉砌应犹在，只是朱颜改。</li>
		<li>问君能有几多愁？恰似一江春水向东流。</li>
	</ol>
</div>
<div>
	<h1>inside</h1>
	<ol class="lspi">
		<li>春花秋月何时了？往事知多少。</li>
		<li>小楼昨夜又东风，故国不堪回首月明中。</li>
		<li>雕栏玉砌应犹在，只是朱颜改。</li>
		<li>问君能有几多愁？恰似一江春水向东流。</li>
	</ol>
</div>
</body>
</html>

3.4.4 列表复合属性list-style

基本语法：

list-style: [list-style-image ] | [ list-style-position] | [ list-style-type];

语法说明：

复合属性，可以同时设置1项或多项。若list-style-image属性为none或指定图像不可用时，list-style-type属性将发生作用。

<!DOCTYPE html>
<html>
<head>
<title>列表复合属性</title>
<style type=text/css>
/* 列表所在容器的基本属性设置，后续章节详解 */
div{ 
	width:270px;
	height:240px;
	float:left;
	margin:5px;
	border:1px solid #666;
}
.ls1{
	list-style:outside upper-alpha;
}
.ls2{ 
	list-style:inside url(images/flower.png)  upper-alpha; 
}
</style>
</head>
<body>
<div>
	<ol class="ls1">
		<li>春花秋月何时了？往事知多少。</li>
		<li>小楼昨夜又东风，故国不堪回首月明中。</li>
		<li>雕栏玉砌应犹在，只是朱颜改。</li>
		<li>问君能有几多愁？恰似一江春水向东流。</li>
	</ol>
</div>
<div>
	<ol class="ls2">
		<li>春花秋月何时了？往事知多少。</li>
		<li>小楼昨夜又东风，故国不堪回首月明中。</li>
		<li>雕栏玉砌应犹在，只是朱颜改。</li>
		<li>问君能有几多愁？恰似一江春水向东流。</li>
	</ol>
</div>
</body>
</html>

3.5 CSS背景概述

3.5.1 背景颜色background-color

background-color属性能够为任何元素背景指定一个单一背景色，它可以用来设置网页、div、表格、单元格、段落等元素的背景色，同属性color一样，background-color可以接受任何有效的颜色值。

基本语法：

background-color: 颜色值;

<!DOCTYPE html>
<html>
<head>
<title>背景颜色</title>
<style type="text/css">
body {
	background-color:#000;    /*网页背景颜色*/ 
	text-align:center;
}
p{
	width:560px;
	height:auto;
	padding:10px;
	margin:10px auto;
	box-shadow:3px 3px 5px #FFF;
	text-align:left;
	font-size:13px;
	line-height:170%;
}
p b{
	background-color:#d9311c;
	color:#FFF;
}
.bc1{
	border:#d9311c 1px solid; 
	background-color:#ffe4cf;    /*段落背景颜色*/ 
}
.bc2{
	border:#038b3c 1px solid; 
	background-color:#bdffda;    /*段落背景颜色*/ 
}
.bc3{
	border:#e2bb04 1px solid; 
	background-color:#ffffab;    /*段落背景颜色*/ 
}
</style>
</head>
<body>
<p class="bc1">
找到一个机会<b>重新认识自己</b>，发现不同的自己。旅行并非是为了世界而行，在行走的途中，会经历很多对自己的考验。旅行，去行走，用足迹说话，发现的其实而不同的自己，抛掉世俗的一切，短暂的追求自己想要的自由。
</p>
<p class="bc2">
旅行会让人谦卑，你会知道地球之大，永远有着与你截然不同的人、事、物在地球的彼端发生。见的世面广了，也就不会把自己局限在小格局里，不再愤世嫉俗，与人为敌。所以，旅行永远是最好、最有效的心理治疗。
</p>
<p class="bc3">
我们在都市中被太多的琐事所累，旅行是放飞自由，解脱自我，活出自我的一种方式。这是个奇妙的世界，我们留在原地见不到所知外的一切不可思议的事，见证奇迹。你就更加明白自己想要什么，不再彷徨，不再迷茫，留下了对理想的希冀，努力，奋斗。
</p>
</body>
</html>

3.5.2 用背景颜色给页面分块

在排版布局时，可以使用background-color属性对HTML元素设置背景色，并使用背景色来实现分块的目的。

<!DOCTYPE html>
<html>
<head>
<title>利用背景颜色分块</title>
<style type="text/css">
body{
	background-color:#0f960c;	   /* 页面背景色 */
	text-align:center;
}
table{ 
	margin:0 auto;
	border-collapse:collapse;
	width:980px;
}
#top{
	height:160px;
	background-color:#beff96;   /* 顶端banner的背景色 */
}
#navi{
	height:30px;
	background-color:#dcffc7;   /* 导航部分的背景色 */
}
#left{
	width:280px;
	height:600px;
	background-color:#a4ef75;	/* 主体部分左侧背景色 */
}
#right{
	width:700px;
	height:600px;
	background-color:white;    /* 主体部分右侧背景色 */
}
#foot{
	height:80px;
	background-color:#8cd95d;   /* 页脚部分的背景色 */
}
</style>
</head>
<body>
<table>
	<tr>
		<td colspan="2" id="top"><img src="images/banner1.png" /></td>
	</tr>
	<tr>
		<td colspan="2" id="navi">&nbsp;</td>
	</tr>
	<tr>
		<td id="left">&nbsp;</td>
		<td id="right">&nbsp;</td>
	</tr>
  	<tr>
		<td colspan="2" id="foot">&nbsp;</td>
	</tr>
</table>
</body>
</html>

3.5.3 背景图像background-image

网页元素除了使用颜色作为背景外，也可以设置背景图像，虽然说图像背景可能会降低网站的加载速度，但是却以其优美的视觉效果受到人们的欢迎。

基本语法：

background-image: none | url(图像路径);

语法说明：

none：无背景。
url：背景图像的具体路径。

<!DOCTYPE html>
<html>
<head>
<title>背景图像</title>
<style type="text/css">
	body{ background-image:url(images/bg1.gif); }     /*设置页面背景图像*/
</style>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>背景颜色和背景图像</title>
<style type="text/css">
div{
	width:400px;
	height:300px;
	float:left;
	margin:10px;
}
#bi1{
	background-image:url(images/bg2.png);    /*背景图像*/
	background-color:#b4f4fd;        /*背景颜色*/

}
#bi2{
	background-image:url(images/bg2.png);    /*背景图像*/
	background-color:#f46350;        /*背景颜色*/
}
</style>
</head>
<body>
<div id="bi1"></div>
<div id="bi2"></div>
</body>
</html>

3.5.4 背景图像重复background-repeat

基本语法：

background-repeat: repeat | no-repeat | repeat-x | repeat-y| space | round;

语法说明：

repeat：默认值，背景图像在横向和纵向平铺。
no-repeat：背景图像不重复。
repeat-x：背景图像仅在水平方向平铺。
repeat-y：背景图像仅在垂直方向平铺。
round：CSS3新增关键字，背景图像自动缩放直到适应且填充满整个容器。
space：CSS3新增关键字，背景图像以相同的间距平铺且填充满整个容器或某个方向。

<!DOCTYPE html>
<html>
<head>
<title>背景图像平铺</title>
<style type="text/css">
div{
	width:240px;
	height:160px;
	float:left;
	margin:10px;
	font-size:30px;
	font-weight:900;
	text-align:center;
	border:1px solid black;
	background-image:url(images/bg3.jpg);    /*所有div设置同样的背景图像*/	
}
#br1{
	background-repeat:repeat;        /*背景图像重复*/
}
#br2{
	background-repeat:no-repeat;        /*背景图像不重复*/
}
#br3{
	background-repeat:repeat-x;        /*背景图像横向重复*/
}
#br4{
	background-repeat:repeat-y;        /*背景图像纵向重复*/
}
#br5{
	background-repeat:space;        /*背景图像纵向重复*/
}
#br6{
	background-repeat:round;        /*背景图像纵向重复*/
}
</style>
</head>
<body>
<div id="br1">repeat</div>
<div id="br2">no-repeat</div>
<div id="br3">repeat-x</div>
<div id="br4">repeat-y</div>
<div id="br5">space</div>
<div id="br6">round</div>
</body>
</html>

3.5.5 背景图像滚动background-attachment

基本语法：

background-attachment : scroll | fixed | local;

语法说明：

fixed：背景图像相对于窗体固定。
scroll：背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
local：CSS3新增关键字。背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。

<!DOCTYPE html>
<html>
<head>
<title>背景图像滚动</title>
<style type="text/css">
body{
	background-image:url(images/bg4.jpg);    /*网页的背景图像*/
	background-attachment:fixed;	        /*背景图像相对于窗体固定*/
}
div{
	width:300px;
	height:300px;
	margin:10px;
	overflow:auto;                            /*盒子内容溢出时自动加上滚动条*/
	border:1px solid black;
	background-image:url(images/bg5.jpg);    /*三个div设置同样的背景图像*/	
	line-height:2;

}
#ba1{          /*背景图像相对于元素固定，背景图像跟着元素(div盒子)本身*/
	background-attachment:scroll;       
}
#ba2{         /*背景图像相对于元素内容固定，背景图像跟着内容(文本)滚动*/
	background-attachment:local;       
}
</style>
</head>
<body>
<div id="ba1">
<h2>scroll</h2>
蒹葭苍苍，白露为霜。<br />所谓伊人，在水一方。<br />
溯洄从之，道阻且长。<br />溯游从之，宛在水中央。<br />
蒹葭萋萋，白露未晞。<br />所谓伊人，在水之湄。<br />
溯洄从之，道阻且跻。<br />溯游从之，宛在水中坻。<br />
蒹葭采采，白露未已。<br />所谓伊人，在水之涘。<br />
溯洄从之，道阻且右。<br />溯游从之，宛在水中沚。
</div>
<div id="ba2">
<h2>local</h2>
蒹葭苍苍，白露为霜。<br />所谓伊人，在水一方。<br />
溯洄从之，道阻且长。<br />溯游从之，宛在水中央。<br />
蒹葭萋萋，白露未晞。<br />所谓伊人，在水之湄。<br />
溯洄从之，道阻且跻。<br />溯游从之，宛在水中坻。<br />
蒹葭采采，白露未已。<br />所谓伊人，在水之涘。<br />
溯洄从之，道阻且右。<br />溯游从之，宛在水中沚。
</div>
<div>
<h2>div等元素默认滚动方式</h2>
蒹葭苍苍，白露为霜。<br />所谓伊人，在水一方。<br />
溯洄从之，道阻且长。<br />溯游从之，宛在水中央。<br />
蒹葭萋萋，白露未晞。<br />所谓伊人，在水之湄。<br />
溯洄从之，道阻且跻。<br />溯游从之，宛在水中坻。<br />
蒹葭采采，白露未已。<br />所谓伊人，在水之涘。<br />
溯洄从之，道阻且右。<br />溯游从之，宛在水中沚。
</div>
</body>
</html>

3.5.6 背景图像位置background-position

基本语法：

background-position : 关键字 | 百分比 | 长度

语法说明：

值可以是关键字、百分比和长度。
关键字在水平方向上有left、center和right，垂直方向有top、center和bottom，关键字含义如下。水平方向和垂直方向的关键字可以相互搭配使用。
- center：背景图像横向或纵向居中
- left：背景图像在横向上填充从左边开始。
- right：背景图像在横向上填充从右边开始。
- top：背景图像在纵向上填充从顶部开始。
- bottom：背景图像在纵向上填充从底部开始。
百分比表示用百分比指定背景图像填充的位置，可以为负值。一般要指定两个值，两个值之间用空格隔开，分别代表水平位置和垂直位置，水平位置的起始参考点在网页页面左端，垂直位置的起始参考点在页面顶端。默认值0% 0%，效果等同于left top。
长度表示用长度值指定背景图像填充的位置，可以为负值。也要指定两个值代表水平位置和垂直位置，起始点相对于页面左端和顶端。例如background-position : 200px -100px，表示背景图片的水平位置为左起200px，垂直位置为顶端起-100px。

<!DOCTYPE html>
<html>
<head>
<title>背景图像位置</title>
<style type="text/css">
body{
	background-image:url(images/bg4.jpg);    /*网页的背景图像*/
	background-attachment:fixed;	       /* 背景图像相对于窗体固定*/
	background-repeat:no-repeat;	       /* 背景图像不重复*/
	background-position:center bottom;      /* 背景图像水平居中，垂直底部*/
	text-align:center;
	line-height:1.5;
}
</style>
</head>
<body>
<h2>蒹葭</h2>
蒹葭苍苍，白露为霜。<br />所谓伊人，在水一方。<br />
溯洄从之，道阻且长。<br />溯游从之，宛在水中央。<br />
蒹葭萋萋，白露未晞。<br />所谓伊人，在水之湄。<br />
溯洄从之，道阻且跻。<br />溯游从之，宛在水中坻。<br />
蒹葭采采，白露未已。<br />所谓伊人，在水之涘。<br />
溯洄从之，道阻且右。<br />溯游从之，宛在水中沚。
</body>
</html>

3.5.7 背景参考原点background-origin

基本语法：

background-origin : padding-box | border-box | content-box;

语法说明：

padding-box：从padding区域（含padding）开始显示背景图像。
border-box：从border区域（含border）开始显示背景图像。
content-box：从content区域开始显示背景图像。

<!DOCTYPE html>
<html>
<head>
<title>背景参考原点</title>
<style type="text/css">
body{
	background-color:#fefab1;
}
p{
	width:300px;
	height:300px;
	padding:20px;
	border:10px dashed #000;
	background-color:#0dcff2;
	background-image:url(images/bg5.jpg);
	background-repeat:no-repeat;
	float:left;
	margin:10px;
	font-size:20px;
}
.bo1{ background-origin:padding-box; }
.bo2{ background-origin:border-box; }
.bo3{ background-origin:content-box; }
</style>
</head>
<body>
<p class="bo1">从padding开始显示背景图片</p>
<p class="bo2">从border开始显示背景图片</p>
<p class="bo3">从content开始显示背景图片</p>
</body>
</html>

3.5.8 背景图像尺寸background-size

基本语法：

background-size:长度|百分比| auto | cover | contain;

语法说明：

当使用长度和百分比值时，可以提供1~2个参数，不允许负值，使用百分比时，参考对象为背景区域。
- 如果提供2个参数，第1个用于定义背景图像的宽度，第2个用于定义背景图像的高度。
- 如果只提供1个参数，该值将用于定义背景图像的宽度，背景图以提供的宽度作为参照来进行等比缩放。
关键字的含义如下。
- auto：背景图像的真实大小。
- cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
- contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内

<!DOCTYPE html>
<html>
<head>
<title>背景图像尺寸</title>
<style type="text/css">
p{
	width:300px;
	height:300px;
	padding:20px;
	border:10px dashed #000;
	background-image:url(images/bg6.jpg);
	background-repeat:no-repeat;
	float:left;
	margin:10px;
	font-size:20px;
}
.bs1{ background-size:auto; }
.bs2{ background-size:cover; }
.bs3{ background-size:contain; }
.bs4{ background-size:400px; }
.bs5{ background-size:300px 200px; }
.bs6{ background-size:80% 90%; }      
</style>
</head>
<body>
<h3>背景图大小1000px*500px(比例2:1)，段落内容大小300px*300px（比例1:1）</h3>
<p class="bs1">auto：图像真实大小，1000px*500px</p>
<p class="bs2">cover：等比（图像比例2:1）缩放到完全覆盖盒子</p>
<p class="bs3">contain等比（图像比例2:1）缩放到宽度和盒子相同</p>
<p class="bs4">宽400px，高等比例(200px)</p>
<p class="bs5">宽300px，高200px</p>
<p class="bs6">宽高分别为背景区域的80%和90%</p>
</body>
</html>

3.5.9 背景图像裁剪区域background-clip

基本语法：

background-clip: border-box | padding-box | content-box | text;

语法说明：

border-box：默认值，不会发生裁剪。
padding-box：超出padding区域也就是border区域的背景将会被裁剪。
content-box：从content区域开始向外裁剪背景，即border和padding区域内的背景将会被裁剪掉。
text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果，IE、Firefox等浏览器不支持此效果，即使使用Chrome等支持该效果的浏览器，text的属性值也仅能使用webkit。

<!DOCTYPE html>
<html>
<head>
<title>背景图像裁剪</title>
<style type="text/css">
p{
	width:300px;
	height:120px;
	padding:20px;
	border:10px dashed #000;
	background-image:url(images/bg7.jpg);
	background-repeat:no-repeat;
	float:left;
	margin:10px;
	font-size:36px;
	font-weight:900;
	font-family:黑体;
}
.bclip1{ background-clip:border-box;  }
.bclip2{ background-clip:padding-box;  }
.bclip3{ background-clip:content-box;  }
.bclip4{
	-webkit-background-clip:text;      /*webkit，从前景内容的形状作为裁剪区域向外裁剪背景*/
	-webkit-text-fill-color:transparent;   /*webkit，文本颜色设置为透明，透出背景图像*/
}
</style>
</head>
<body>
<p class="bclip1"><br />不发生裁剪</p>
<p class="bclip2"><br />border区域背景被裁剪</p>
<p class="bclip3"><br />border和padding部分被裁剪</p>
<p class="bclip4">从前景内容的形状作为裁剪区域向外裁剪背景</p>
</body>
</html>

3.5.10 线性渐变背景图像

CSS3中可以使用linear-gradient()创建线性渐变图像，radial-gradient()创建径向渐变图像，repeating-linear-gradient()创建重复的线性渐变图像，repeat-radial-gradient()创建径向渐变图像。

基本语法：

<linear-gradient>：linear-gradient([ <point>,]? <color-stop>[, <color-stop>]+);
<point>：[ left | right ]? [ top | bottom ]? || <angle>?
<color-stop>：<color> [ <length> | <percentage> ]?

语法说明：

<point>
- left：设置左边为渐变起点的横坐标值。
- right：设置右边为渐变起点的横坐标值。
- top：设置顶部为渐变起点的纵坐标值。
- bottom：设置底部为渐变起点的纵坐标值。
- <angle>：用角度值指定渐变的方向（或角度）。
- <color-stop>：指定渐变的起止颜色。
<color-stop>
- <color>：指定颜色。
- <length>：用长度值指定起止色位置，不允许负值。
- <percentage>：用百分比指定起止色位置。

<!DOCTYPE html>
<html>
<head>
<title>背景图像渐变</title>
<style type="text/css">
body{
	background-image:linear-gradient(yellow, red);     /*网页背景从黄色渐变至红色*/
	background-attachment:fixed;
}
p{
	width:200px;
	height:100px;
	padding:10px;
	float:left;
	border:1px solid #000;
	background-repeat:no-repeat;
	margin:10px;
	font-size:14px;
}
/*背景从蓝色到白色到红色渐变*/
.blinear1{          
	background:linear-gradient(blue,white,red);
}
/*背景从白色到红色渐变，从80%开始*/
.blinear2{          
	background:linear-gradient(white 80%,red);
}
/*背景从白色到红色渐变，45度*/
.blinear3{          
	background:linear-gradient(45deg,white,red);
}
/*背景从白色到红色渐变，90度*/
.blinear4{          
	background:linear-gradient(90deg,white,red);
}
</style>
</head>
<body>
<p class="blinear1"><br />背景从蓝色到白色到红色渐变</p>
<p class="blinear2"><br />背景从白色到红色渐变，从80%开始</p>
<p class="blinear3"><br />背景从白色到红色渐变，45度</p>
<p class="blinear4"><br />背景从白色到红色渐变，90度</p>
</body>
</html>

3.5.11 背景复合属性background

background属性是其它背景属性的复合属性或快捷方式，其属性值可以由1个或多个值组成，值之间使用空格隔开，属性值之间没有顺序的要求。例如：“background: gray;”表示设置元素背景为灰色；“background: url(bg00.jpg) no-repeat fixed center;”表示设置背景图像为bg00.jpg、不重复、固定、水平垂直居中。

3.5.12 多背景

在CSS3 中，可以对一个元素应用多个图像作为背景，需要用逗号来区别各个图像。默认情况下，第一个声明的图像定位在元素顶部，其它的图像按序在其下排列，例如：

background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);

background:url(images/1.jpg) no-repeat top left,
		url(images/2.jpg) no-repeat top right,
		url(images/3.jpg) no-repeat bottom left,
		url(images/4.jpg) no-repeat bottom right,	
		url(images/5.jpg) no-repeat center center;

<!DOCTYPE html>
<html>
<head>
<title>多背景</title>
<style type="text/css">
body{
	text-align:center;
	/*设置3副背景图片，分别位于中上，右下和中下*/
	background:url(images/bg8.png) no-repeat center top fixed,
        url(images/bg9.png) no-repeat right bottom fixed,
        url(images/bg10.png) no-repeat center bottom fixed;  
}
#container{
	width:780px;
	margin:0 auto;
	margin-top:200px;
}
p{
	background:url(images/bg11.png);
	width:240px;
	height:240px;
	padding:30px;
	float:left;
	margin:20px;
	font-size:13px;
	line-height:2;
	text-align:left;
}
</style>
</head>
<body>
<div id="container">
<p>
<b>欧洲杯射手榜</b><br />
排名 球员 国家 进球数<br />
01 格列兹曼 法国 7<br />
02 纳尼 葡萄牙 3 <br />
03 C.罗 葡萄牙 3 <br />
04 帕耶特 法国 3 <br />
05 贝尔 威尔士 3 <br />
06 吉鲁 法国 3 <br />
07 莫拉塔 西班牙 3 
</p>
<p>
<b>小组赛</b><br />
比赛时间 比赛地点 交战对手<br />
2016.06.11 圣丹尼斯 法国VS罗马尼亚<br />
2016.06.11 朗斯 阿尔巴尼亚VS瑞士<br />
2016.06.12 波尔多 威尔士VS斯洛伐克<br />
2016.06.12 马赛 英格兰VS俄罗斯<br />
2016.06.12 巴黎 土耳其VS克罗地亚<br />
......
</p>
<p>
<b>足球宝贝</b><br />
性感女神力挺布冯<br />
意大利女神热舞助兴<br />
普罗旺斯迎来中国金花<br />
宝贝街头性感玩快闪<br />
妍子沁花海助威威尔士<br />
</p>
<p>
<b>新闻</b><br />
世预赛综述-卢卡库2球比利时胜<br /> 
C罗:没想到能捧欧洲杯<br />
华人文化重注体育大数据<br /> 
足球魔方领跑数据类应用<br />
比利时新帅：我来率领你们夺得世界冠军
</p>
</div>
</body>
</html>

3.5.13 定义不透明度

基本语法：

opacity: 浮点数;

语法说明：

使用浮点数指定对象的不透明度。值被约束在[0.0-1.0]范围内，如果超过了这个范围，其计算结果将截取到与之最相近的值。

<!DOCTYPE html>
<html>
<head>
<title>透明度</title>
<style type="text/css">
.div1{
	width:200px;
	height:200px;
	text-align:center;
	background:url(images/bg3.jpg);
}
.div2{
	width:200px;
	height:200px;
	text-align:center;
	margin:-150px 0 0 120px;
	background:url(images/bg12.jpg);
	opacity:0.6;    /*不透明度60%*/
}
</style>
</head>
<body>
<div class="div1">不透明度为100%的盒子</div>
<div class="div2">不透明度为60%的盒子</div>
</body>
</html>

4.本章总结

4.1 总结本章知识点

别张学习了字体样式，文本格式化，列表样式，背景样式。

4.2 面试题答案

4.2.1 CSS中常用的文本样式属性

文本样式属性有font-family,font-size,font-weight,font-style,font-variant。

4.2.2 CSS中常用的背景样式属性

背景样式有background-color,backgrond-image,background-repeat,background-postion,background-size。

小白入门之HTML--第四章 CSS样式深入

1.本章面试题

1.1 CSS中常用的文本样式属性

1.2 CSS中常用的背景样式属性

2.知识点

2.1 上一章内容回顾

2.2 本章主要讲解更多CSS的样式属性

3.具体内容

3.1 颜色 `color`

3.2 字体属性

3.3 文本格式化

3.4 CSS列表属性

3.5 CSS背景概述

4.本章总结

4.1 总结本章知识点

4.2 面试题答案

4.3 预习下一章重点

5.练习题

5.1 练习一

5.2 练习二

5.3 练习三

5.4 练习四

猜你喜欢

小白入门之HTML--第四章 CSS样式深入

1.本章面试题

1.1 CSS中常用的文本样式属性

1.2 CSS中常用的背景样式属性

2.知识点

2.1 上一章内容回顾

2.2 本章主要讲解更多CSS的样式属性

3.具体内容

3.1 颜色 color

3.2 字体属性

3.3 文本格式化

3.4 CSS列表属性

3.5 CSS背景概述

4.本章总结

4.1 总结本章知识点

4.2 面试题答案

4.3 预习下一章重点

5.练习题

5.1 练习一

5.2 练习二

5.3 练习三

5.4 练习四

猜你喜欢

3.1 颜色 `color`