第8章 使用css格式化网页.pptVIP

利用RGB设置颜色 在HTML网页，或者CSS样式的颜色定义里，设置颜色的方式是利用RGB概念，在RGB的概念中，所有颜色都是由红色、绿色、蓝色混合而成。 CSS则有四种定义颜色的方法： 十六进制数 RGB函数（整数） RGB函数（百分比） 颜色名称 颜色的表示 在计算机中，定义每种颜色的强度都是由0~255。当所有颜色的强度为0时，将产生黑色，当所有颜色的强度都是255时，将产生白色。在HTML中，要使用RGB来指定颜色时，将使用#号，加上6个十六进制的数字来表示，表示方法如下： #RRGGBB 其中R，G，B这三个字母的值范围0，1，2，3，4，5，6，7，8，9，a，b，c，d，e，f这16个数字。比如要表示红色的值，则表示方法为：#FF0000。 利用RGB函数设置颜色 RGB函数 在CSS里，可以利用RGB函数，加上三组范围为0~255的数字来设置所要的颜色。因为每组数字可表现256种颜色强度，所以利用RGB函数共可表达出256*256*256种颜色表示方法如下： RGB(R，G，B) 其中，R，G，B代表的整数范围为0~255。比如现在要表示红色的值，则表示方法为：RGB（255，0，0）。 利用颜色名称设置颜色 背景颜色的属性 背景颜色 在HTML里，可以使用标记的bgcolor属性来设置网页的背景颜色，而在CSS里，不仅可以用background-color属性来设置网页背景颜色的变化，还可以设置文字的背景颜色。 基本语法： background-color：关键字 | RGB值 | transparent 语法说明： transparent表示透明的意思，也是浏览器的默认值。 !--程序8-21-- htmlhead title背景颜色的属性/title style type=text/css !-- body{background-color:# ADD8E6} .p1{background-color:#FF0000;font-size:30px} .p2{background-color:yellow;font-size:30px} -- /style /headbody p class=p1此行文字以红色背景显示n/p p class=p2此行文字以黄色背景显示/p/body/html 背景图片的属性 background-image插入背景图片 background-attachment插入背景附件 background-repeat设置重复背景图片 background-position设置背景图片位置 background-image插入背景图片 除了可以设置背景的颜色以外，还可以用background-image来设置背景图片。 基本语法： background-image:url | none 语法说明： url表示要插入背景图片的路径，路径可以是绝对路径也可以是相对路径，none表示不加载图片。 background-attachment插入背景附件 background-attachment背景附件属性是用来设置背景图片是否随着滚动条的移动而一起移动。 基本语法： background-attachment：scroll | fixed 语法说明： scroll表示背景图片是随着滚动条的移动而移动，是浏览器的默认值；fixed表示背景图片固定在页面上不动，不随着滚动条的移动而移动。 指定元素组 多个元素使用同样的样式规则，可以组合使用选择器。例如： h1,h2,div{color:#FF0066;}这里规定了标记h1、h2和div的color都是同样的颜色。组合选择其中的元素名中间要用“,”隔开。 h1,h2,div{color:#FF006;} h1,h2,div{color:#FF0066;} CSS全局选择符 CSS全局选择符 -- 匹配文档中的任意一个元素 语法: * *代表文档中的所有元素 说明： 匹配文档中的任意一个元素 如果全局选择符只是一个简单选择符的一部分，*可以省略 * { color: pink; font-size: 12px; border: 1px solid blue; } 8.4 文字与排版样式的使用 CSS 的网页排版功能十分强大，使用 CSS，不仅可以控制文字的大小、颜色、对齐方式和字体，还可以控制行高、字母间距、大小写（全部大写、首字大写、小型大写或全部都小写等），甚至还可以控制文本的第一个字或第一行的样式。 不仅如此，只需要在某一位置创建样式规则（即样式表），就可以让这些样式