【精选】第5章 网页样式表CSS.pptVIP

网站规划与网页设计 5.6.2 色彩单位 1．用十六进制数表示色彩值 在HTML中，要使用RGB概念指定色彩时，前面是一个“#”号，再加上6个十六进制的数字表示，表示方法为：#RRGGBB。其中，前两个数字代表红光强度（Red），中间两个数字代表绿光强度（Green），后两个数字代表蓝光强度（Blue）。以上三个参数的取值范围为：00～ff，参数必须是两位数。对于只有一位的参数，应在前面补0。这种方法共可表示256?256?256种色彩，即16M种色彩。而红色、绿色、蓝色、黑色、白色对应的十六进制数分别为：#ff0000、#00ff00、#0000ff、#000000、#ffffff。例如， div { color: #ff0000 } 如果每个参数各自在两位上的数字都相同，也可缩写为#RGB的方式。例如：#ff8800可以缩写为#f80。 5.6.2 色彩单位 2．用rgb函数表示色彩值 在CSS中，可以用rgb函数设置出所要的色彩，语法格式为：rgb(R,G,B)。其中，R为红色值，G为绿色值，B为蓝色值。三个参数可取正整数值或百分数值，正整数值的取值范围为0～255，百分数值的取值范围为色彩强度的百分比0.0%～100.0%。例如， div { color: rgb(132,20,180) } div { color: rgb(12%,200,50%) } 3．用色彩名称表示色彩值 在CSS中也提供了与HTML一样的用色彩英文名称表示色彩的方式。CSS只提供了16种色彩名称。例如， div {color: red } * *吕梁高等专科学校汾阳师范分校 王建平 fysfwjp@163.com 5.1 CSS的特点和用途 5.2 在网页中插入CSS 5.3 class与id类选择符 5.4 div与span标记 5.5 多重CSS的层叠 5.6 CSS的属性单位 第5章 网页样式表CSS CSS（Cascading Style Sheets）中文翻译为层叠样式表单，简称样式表，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。样式就是格式，在网页中，文字的大小、色彩及图片位置等，都是设置显示内容的样式。层叠是指在HTML文档中引用多个定义样式的样式文件（CSS文件）时，若多个样式文件间所定义的样式发生冲突，将依据层次顺序处理。 它的主要用途如下所述。 ? 使页面的字体变得更漂亮，更容易编排，使页面效果真正达到赏心悦目。 ? 用户可以轻松地控制页面的整体风格和布局。 ?如果站点上所有的页面都使用同一个CSS文件进行控制，那么可以对许多网页的风格格式同时进行更新，不用再一页一页地更新了。只要修改这个CSS文件中相应的代码，整个站点的所有页面都会随之发生变动。 5.1 CSS的特点和用途 CSS控制网页内容显示格式的方式是通过许多定义好的样式属性（如字号、段落控制等）来实现的，并将多个样式属性定义为一组可供调用的选择符（selector）。其实，选择符就是某一个样式的名称。当HTML文档中某个元素要使用该样式时，必须使用该名称选择样式。在这里使用选择符这个名词的原因，是为了与W3C标准统一，其实可以直接把它当成样式名称，这样会比较好理解。 要想在浏览器中显示出样式表的效果，就要让浏览器识别并调用。当浏览器读取样式表时，要依照文本格式来读。这里介绍4种在页面中插入样式表的方法：内部样式、行内样式、链入外部样式和导入外部样式。 5.2 在网页中插入CSS 5.2.1 内部样式 内部样式（embedded styles）是把样式表放到页面的head…/head区内，这些定义的样式就可以应用到页面中了。样式表是用style标记插入的。定义的样式可以在整个HTML文档中调用。可以在HTML文档的html和body标记之间插入一个style…/style标记对，在其中定义样式。其格式为： style type=text/css !-- 选择符1{属性:属性值; 属性:属性值 …} /* 注释内容 */ 选择符2{属性:属性值; 属性:属性值 …} … 选择符n{属性:属性值; 属性:属性值 …} -- /style 5.2 在网页中插入CSS 【例5-1】 5.2.2 行内样式 行内样式（inline styles）也称内嵌样式，是指在HTML标记中插入style属性，再定义要显示的样式，而style属性的内容就是CSS的属性和值。用这种方法，可以很简单地对某个标记单独定义样式。它的特点是——“定义某一个标记的样式风格”，即只对所定义的标记