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"> </td> </tr> <tr> <td id="left"> </td> <td id="right"> </td> </tr> <tr> <td colspan="2" id="foot"> </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。
4.3 预习下一章重点
下一章块状元素和行内元素的关系。
5.练习题
5.1 练习一
5.2 练习二
5.3 练习三
5.4 练习四