第9章 CSS字体与段落

《第9章 CSS字体与段落》由会员分享，可在线阅读，更多相关《第9章 CSS字体与段落（52页珍藏版）》请在文档大全上搜索。

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