第9章 CSS字体与段落

1、color : Color Name | HEX | RGB | RGBA | HSL | HSLA | transparent ;Color Name是颜色英文名称，如green表示绿色、brown表示褐色，需要注意的是用颜色名称指定color可能不被一些浏览器接受。HEX指颜色的十六进制记法，形式为#RRGGBB或者#RGB，如#00FF00表示绿色、#a52a2a表示褐色。另外在此表示方式中，如果每两位颜色值相同，可以简写为#RGB形式，如#0F0也表示绿色。RGB是指用RGB函数表示颜色，形式为RGB(R,G,B)，R、G、B分别表示红、绿、蓝，可以为0-255的正整数或0%-100%

2、的百分数。例如RGB(0,255,0)和RGB(0%,100%,0%)都表示绿色。RGBA色彩记法是CSS3新增表示方式，形式为RGBA(R,G,B,A)。此色彩模式与RGB相同，只是在RGB模式上新增了A表示Alpha透明度，A的取值范围为0-1之间，0表示完全透明，1表示不透明。例如RGBA(0,255,0,0.5)表示半透明的绿色。HSL色彩记法是CSS3新增表示方式，形式为HSL(H,S,L)。其中H表示Hue(色调)，取值范围为：0360；S表示Saturation(饱和度)，取值范围为：0.0%-100.0%；L表示Lightness(亮度)，取值范围为：0.0%-100.0%。例

3、如HSL(120,100%,100%)表示绿色。HSLA色彩记法是CSS3新增表示方式，形式为HSL(H,S,L,A)。此色彩模式与HSL相同，只是在HSL模式上新增了Alpha透明度。例如HSL(120,100%,100%,0.5) 表示半透明的绿色。Transparent表示透明。文本颜色bodycolor:purple;h2color:#00FF00;.hexcolor:#903;.rgb1color:rgb(153,0,255);.rgb2color:rgb(100%,0%,40%);.rgbacolor:rgba(100%,0%,40%,0.6);.hslcolor:hsl(225,

4、100%,60%);.hslacolor:hsla(225,100%,60%,0.4);.transcolor:transparent;9-1.html二级标题，颜色为绿色#00FF00普通正文文本，颜色为紫色purple正文文本，颜色为#903 正文文本，颜色为rgb(153,0,255) 正文文本，颜色为rgb(100%,0%,40%) 正文文本，颜色为rgba(100%,0%,40%,0.6) 正文文本，颜色为hsl(225,100%,60%) 正文文本，颜色为hsla(225,100%,60%,0.4) 正文文本，颜色为transparent续接续接9-1.html9.2.1 设置字体

5、设置字体font-family9.2.2 设置字号设置字号font-size9.2.3设置字体风格设置字体风格font-style9.2.4设置字体加粗设置字体加粗font-weight9.2.5设置小型大写字母设置小型大写字母font-variant9.2.6 字体复合属性字体复合属性font基本语法：基本语法： font-family :字体1, 字体2, ;语法说明：语法说明： font-family可以设置一个字体，也可以一次设置多个字体，浏览器在解释执行时，会按照先后顺序来决定使用哪种字体，首先判断客户端计算机上是否有第一种字体，如果没有则查找是否有第二种字体，以此类推，如果定义的字

6、体都没有安装，则使用系统默认字体。设置字体h2font-family:华文彩云;pfont-family:隶书,黑体,宋体;字体设置为华文彩云字体按照隶书、黑体、宋体的顺序设置9-2.html在HTML5之前，HTML中设置字号使用标记，它的字体大小只有7个级别，具有很大的局限性，在HTML5中，不再使用标记，而统一使用CSS来设置字号。在CSS中，使用font-size属性设置字号。基本语法：基本语法： font-size: 绝对尺寸 | 相对尺寸 | 长度 | 百分比 ;语法说明：语法说明：1. 绝对尺寸绝对尺寸绝对根据对象字体进行调节，可选参数值为xx-small、x-small、sma

7、ll、medium、large 、x-large和xx-large，从左到右字体越来越大。以 medium 作为基础参照， medium为1 (h4)，xx-small相当于3/5 (h6)，x-small为3/4，small为8/9 (h5)，large为6/5 (h3)，x-large为3/2 (h2)，xx-large为2 (h1)。2. 相对尺寸相对尺寸相对于父对像中字体尺寸进行相对调节，可选参数值为smaller和larger。3. 长度用长度值指定文字大小，不允许负值。长度单位有px（像素）、pt（点）、pc（皮卡）、in（英寸）、cm（厘米）、mm（毫米）、em（字体高）和ex（

8、字体的x高度）。其中最常用的单位是像素px。4. 百分比用百分比指定文字大小，其百分比取值是基于父对象中字体的尺寸。设置字号.zi1font-size:20px;.zi2font-size:16pt;.zi3font-size:5mm;.zi4font-size:medium;.zi5font-size:xx-small;.zi6font-size:x-large;.zi7font-size:larger;.zi8font-size:50%;9-3.html这是未加样式的文字这是20px大小的文字这是16pt大小的文字这是5mm大小的文字这是medium大小的文字这是xx-small大小的文字

9、这是x-large大小的文字这是larger大小的文字这是50%大小的文字续接续接9-3.htmlfont-style属性用来定义字体风格，即字体的显示样式，是否将字体设置为斜体。基本语法：基本语法： font-style: normal | italic | oblique ;字体风格.fs1font-style:normal;.fs2font-style:italic;.fs3font-style:oblique;这是正常字体这是斜体这是倾斜字体9-4.html基本语法：基本语法： font-weight: normal | bold | bolder | lighter | 数值;语法说

10、明：语法说明：normal：正常的字体，相当于数值为400的字体。bold：粗体，相当于数值为700的字体。bolder：特粗体。lighter：细体。数值：用数字表示文本字体粗细，取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900。设置粗体.fw1font-weight:normal;.fw2font-weight:bold;.fw3font-weight:bolder;.fw4font-weight:lighter;.fw5font-weight:100;.fw6font-weight:300;.fw7font-weight:7

11、00;.fw8font-weight:900;9-5.html这是normal粗细的文字这是bold粗细的文字这是bolder粗细的文字这是lighter粗细的文字这是100粗细的文字这是300粗细的文字这是700粗细的文字这是900粗细的文字续接续接9-5.html基本语法：基本语法： font-variant: normal | small-caps ;语法说明：语法说明： normal：正常的字体，默认值。 small-caps：小写转换为小型的大写字母字体。.fv1font-variant:normal;font-size:20px;.fv2font-variant:small-cap

12、s; /*小型大写字母*/font-size:20px;Oh Jingle Bells Jingle Bells. Jingle all the Way!Oh Jingle Bells Jingle Bells. Jingle all the Way!9-6.html在设计网页时，往往需要同时对字体的多个属性进行设置，例如定义字体的大小、粗体等，此时可以使用font属性一次性对多个属性进行设置。基本语法：基本语法： font：font-style font-variant font-weight font-size font-family ;语法说明：语法说明：属性排列中，font-style

13、、font-variant和font-weight可以进行顺序的调换，而font-size和和font-family则必则必须按照固定顺序出现，须按照固定顺序出现，如果这两个顺序错误或者缺少，那么整条样式可能会被忽略。另外，在字体大小属性值部分可以添加行高属性，以/分隔。例如：“font:italic normal bold 14px/20px 隶书;”表示字体为斜体加粗的隶书，字体大小为12像素，行高为20像素。综合设置字体bodycolor:#006633;font:normal bolder normal 14px/21px 黑体;h1font-size:36px;午后的阳光午后，阳光轻

14、轻地从窗帘的缝隙探近来。有个诗人曾经说过：黑夜给了我黑色的眼睛，9-7.html9.3.1行高行高line-height9.3.2 文本缩进文本缩进text-indent9.3.3 水平对齐方式水平对齐方式text-align9.3.4 垂直对齐方式垂直对齐方式vertical-align9.3.5 大小写大小写text-transform9.3.6 单词间距单词间距word-spacing9.3.7 字符间隔字符间隔letter-spacing9.3.8文本修饰文本修饰text-decoration9.3.9文本阴影文本阴影text-shadow基本语法：基本语法： line-height:

15、 normal | | 长度值长度值 | 百分比百分比 | 数值数值 ;语法说明：语法说明：normal：默认行高。长度值：用长度值指定行高。如“line-height:20px;”设定行高为20px。百分比：用百分比指定行高，其百分比取值是基于字体的高度尺寸。如“line-height:150%;”设定行高为字体大小的150%，相当于1.5倍行距。数值：用乘积因子指定行高。如“line-height:1.5;” 设定行高为字体大小的1.5倍，相当于1.5倍行距。bodyfont-size:12px;.lh1line-height:normal;.lh2line-height:20px;.lh

16、3line-height:208%;.lh4line-height:1.5;（默认行高）窗帘的背后是什么？.。（20像素行高）窗帘的背后是什么？.。（208%行高）窗帘的背后是什么？.。（1.5倍行高）窗帘的背后是什么？.。9-8.html基本语法：基本语法： text-indent: 长度值|百分比 & hanging | each-line;语法说明：语法说明：长度值：用长度值指定文本的缩进，如“text-indent:2em;”表示缩进两个字体高。百分比：用百分比指定文本的缩进。如“text-indent:25%;”。文本缩进body font:14px 黑体; text-ind

17、ent:2em; color:#F09;当阳光完完全全的从房间退去，9-9.html基本语法：基本语法： text-align: left | right | center | justify | start | end | ;语法说明：语法说明：left：内容左对齐。center：内容居中对齐。right：内容右对齐。justify：内容两端对齐。对齐方式.align1text-align:left;.align2text-align:center;.align3text-align:right;.align4text-align:justify;我是左对齐内容我是居中对齐内容我是右对齐内容

18、You dreamed I was your lover 你梦见,我是你的爱人。.9-10.html基本语法：基本语法： vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom | 百分比 | 长度;语法说明：语法说明： 各属性值的意义如下表所示。属性值属性值说明说明baseline默认值，与基线对齐sub垂直对齐文本的下标super垂直对齐文本的上标top元素的顶端与行中最高文本的顶端对齐text-top元素的顶端与行中最高文本的顶端对齐middle垂直中部对齐bottom元

19、素的顶端与行中最低元素的底端对齐text-bottom元素的顶端与行中最低文本的底端对齐百分比用百分比指定由基线算起的偏移量，基线对于百分数来说就是0%长度用长度值指定由基线算起的偏移量，基线对于数值来说为0垂直对齐方式pfont-size:20px;spanfont-size:14px;.valign1vertical-align:baseline;.valign2vertical-align:sub;.valign3vertical-align:super;.valign4vertical-align:top;.valign5vertical-align:text-top;.valign6

20、vertical-align:middle;.valign7vertical-align:bottom;.valign9vertical-align:10px;9-11.html参考文字基线对齐参考文字下标对齐参考文字上标对齐参考文字顶部对齐参考文字text-top对齐参考文字居中对齐参考文字底部对齐参考文字10px数值对齐续接续接9-11.html基本语法：基本语法： text-transform : none | capitalize | uppercase | lowercase | full-width;语法说明：语法说明： none：无转换，正常显示capitalize：将每个单词的

21、第一个字母转换成大写。uppercase：将每个单词转换成大写。lowercase：将每个单词转换成小写。full-width：CSS3新增值，将所有字符转换成fullwidth形式。如果字符没有相应的fullwidth形式，将保留原样。这个值通常用于排版拉丁字符和数字等表意符号。大小写转换.tran1text-transform:none;.tran2text-transform:uppercase;.tran3text-transform:lowercase;.tran4text-transform:capitalize;9-12.html正常oceans apart day after

22、DAY. i hear your voice ON THE Line.大写oceans apart day after DAY. i hear your voice ON THE Line.小写oceans apart day after DAY. i hear your voice ON THE Line.首字母大写oceans apart day after DAY. i hear your voice ON THE Line.续接续接9-12.html基本语法：基本语法： word-spacing: normal | 长度 | 百分比;语法说明：语法说明： normal：默认间隔。长度：

23、用长度值指定间隔，可以为负值。百分比：CSS3新增，用百分比指定间隔，可以为负值。单词间距.ws1word-spacing:normal;.ws2word-spacing:10px;默认间距，Oceans apart day after day. I hear your voice on the line.10px间距，Oceans apart day after day. I hear your voice on the line.9-13.html基本语法：基本语法： letter-spacing: normal | 长度 | 百分比;语法说明：语法说明： normal：默认间隔。长度：用

24、长度值指定间隔，可以为负值。百分比：CSS3新增，用百分比指定间隔，可以为负值。字母间隔.ls1letter-spacing:normal;.ls2letter-spacing:2px;默认字符间隔，Oceans apart day after day. I hear your voice on the line.2px字符间隔，Oceans apart day after day. I hear your voice on the line.9-14.htmltext-decoration是text-decoration-line、 text-decoration-style和text-de

25、coration-color的综合属性。目前主流浏览器大多不支持text-decoration-line、text-decoration-style和text-decoration-color属性，仅支持text-decoration对基本修饰种类的设置。text-decoration基本语法：基本语法： text-decoration: none | underline | overline |line-through | blink；语法说明：语法说明：none：关闭原本应用到一个元素上的所有装饰。通常，无装饰的文本是默认外观，但也不总是这样，例如，链接默认有下划线可以使用text-dec

26、oration:none去掉超链接的下划线。underline：对元素加下划线。overline：在文本的顶端画一个上划线。line-through ：在文本中间画一个贯穿线（删除线）。blink：文本闪烁。注意Firefox1.0及Opera4.0开始支持blink，其它浏览器尚不支持。文本修饰.td1text-decoration:none;.td2text-decoration:underline;.td3text-decoration:overline;.td4text-decoration:line-through;.td5text-decoration:blink;9-15.html此处是链接此段文字添加下划线此段文字添加上划线此段文字添加删除线此段文字添加闪烁效果续接续接9-15.htmltext-shadow是CSS3新增属性，用来设置对象中