网页样式表CSS.ppt

网站规划与网页设计 王建平王建平 1 1 吕梁高等专科学校汾阳师范分校吕梁高等专科学校汾阳师范分校 5.1 CSS5.1 CSS的特点和用途的特点和用途 5.2 5.2 在网页中插入在网页中插入CSS CSS 5.3 class5.3 class与与idid类选择符类选择符 5.4 5.4 与与标记标记 5.5 5.5 多重多重CSSCSS的层叠的层叠 5.6 CSS5.6 CSS的属性单位的属性单位 第第5 5章章 网页样式表网页样式表CSSCSS 2 2 CSSCSS（Cascading Style SheetsCascading Style Sheets）中文翻译为层叠样式表单中文翻译为层叠样式表单 ，简称样式表，是用于（增强）控制网页样式并允许将样式信，简称样式表，是用于（增强）控制网页样式并允许将样式信 息与网页内容分离的一种标记性语言。样式就是格式，在网页息与网页内容分离的一种标记性语言。样式就是格式，在网页 中，文字的大小、色彩及图片位置等，都是设置显示内容的样中，文字的大小、色彩及图片位置等，都是设置显示内容的样 式。层叠是指在式。层叠是指在HTMLHTML文档中引用多个定义样式的样式文件（文档中引用多个定义样式的样式文件（ CSSCSS文件）时，若多个样式文件间所定义的样式发生冲突，将文件）时，若多个样式文件间所定义的样式发生冲突，将 依据层次顺序处理。依据层次顺序处理。 它的主要用途如下所述。它的主要用途如下所述。 使页面的字体变得更漂亮，更容易编排，使页面效果真正达使页面的字体变得更漂亮，更容易编排，使页面效果真正达 到赏心悦目。到赏心悦目。 用户可以轻松地控制页面的整体风格和布局。用户可以轻松地控制页面的整体风格和布局。 如果站点上所有的页面都使用同一个如果站点上所有的页面都使用同一个CSSCSS文件进行控制，那文件进行控制，那 么可以对许多网页的风格格式同时进行更新，不用再一页一页么可以对许多网页的风格格式同时进行更新，不用再一页一页 地更新了。只要修改这个地更新了。只要修改这个CSSCSS文件中相应的代码，整个站点的文件中相应的代码，整个站点的 所有页面都会随之发生变动。所有页面都会随之发生变动。 5.1 CSS5.1 CSS的特点和用途的特点和用途 3 3 CSSCSS控制网页内容显示格式的方式是通过许多定义好的样控制网页内容显示格式的方式是通过许多定义好的样 式属性（如字号、段落控制等）来实现的，并将多个样式属式属性（如字号、段落控制等）来实现的，并将多个样式属 性定义为一组可供调用的选择符（性定义为一组可供调用的选择符（selectorselector）。）。其实，选择符其实，选择符 就是某一个样式的名称。当就是某一个样式的名称。当HTMLHTML文档中某个元素要使用该文档中某个元素要使用该 样式时，必须使用该名称选择样式。在这里使用选择符这个样式时，必须使用该名称选择样式。在这里使用选择符这个 名词的原因，是为了与名词的原因，是为了与W3CW3C标准统一，其实可以直接把它当标准统一，其实可以直接把它当 成样式名称，这样会比较好理解。成样式名称，这样会比较好理解。 要想在浏览器中显示出样式表的效果，就要让浏览器识别要想在浏览器中显示出样式表的效果，就要让浏览器识别 并调用。当浏览器读取样式表时，要依照文本格式来读。这并调用。当浏览器读取样式表时，要依照文本格式来读。这 里介绍里介绍4 4种在页面中插入样式表的方法：内部样式、行内样式种在页面中插入样式表的方法：内部样式、行内样式 、链入外部样式和导入外部样式。、链入外部样式和导入外部样式。 5.2 5.2 在网页中插入在网页中插入CSSCSS 4 4 5.2.1 5.2.1 内部样式内部样式 内部样式（内部样式（embedded embedded stylesstyles）是把样式表放到页面的是把样式表放到页面的 区内，这些定义的样式就可以应用到页面区内，这些定义的样式就可以应用到页面 中了。样式表是用中了。样式表是用标记插入的。定义的样式可以在整标记插入的。定义的样式可以在整 个个HTMLHTML文档中调用。可以在文档中调用。可以在HTMLHTML文档的文档的和和 标记之间插入一个标记之间插入一个标记对，在其中定义样式标记对，在其中定义样式 。其格式为：。其格式为： “ 5.2 5.2 在网页中插入在网页中插入CSSCSS 【例5-1】 5 5 5.2.2 5.2.2 行内样式行内样式 行内样式（行内样式（inline inline stylesstyles）也称内嵌样式，是指在也称内嵌样式，是指在HTMLHTML标标 记中插入记中插入stylestyle属性，再定义要显示的样式，而属性，再定义要显示的样式，而stylestyle属性的内属性的内 容就是容就是CSSCSS的属性和值。用这种方法，可以很简单地对某个的属性和值。用这种方法，可以很简单地对某个 标记单独定义样式。它的特点是标记单独定义样式。它的特点是“定义某一个标记的样式定义某一个标记的样式 风格风格” ”，即只对所定义的标记起作用，并非对整个页面起作用，即只对所定义的标记起作用，并非对整个页面起作用 。有时候这种方式非常有效，其格式为：。有时候这种方式非常有效，其格式为： ” style style属性可以应用于除属性可以应用于除basefontbasefont，paramparam和和scriptscript之外的任之外的任 意意标记（包括标记（包括本身）。本身）。 5.2 5.2 在网页中插入在网页中插入CSSCSS 【例5-2】 6 6 5.2.3 5.2.3 链入外部样式链入外部样式 链入外部样式（链入外部样式（linked linked stylesstyles）就是当浏览器读取到就是当浏览器读取到HTMLHTML文文 档的样式表链接标记时，将向所链接的外部样式表索取样式档的样式表链接标记时，将向所链接的外部样式表索取样式 。先将样式表保存为一个样式表文件（。先将样式表保存为一个样式表文件（. .csscss），），然后在网页中然后在网页中 用用标记链接这个样式表文件，这个标记链接这个样式表文件，这个标记必须放到标记必须放到 页面的页面的区内，其格式为：区内，其格式为： “ / relrel=“=“stylesheetstylesheet“ “属性定义在网页中使用外部的样式表，属性定义在网页中使用外部的样式表， type=“text/type=“text/csscss“ “属性定义文件的类型为样式表文本，属性定义文件的类型为样式表文本，hrefhref属性属性 用于定义用于定义. .csscss文件的文件的URLURL。 5.2 5.2 在网页中插入在网页中插入CSSCSS 【例5-3】 7 7 5.2.4 5.2.4 导入外部样式导入外部样式 导入外部样式（导入外部样式（imported imported stylesstyles）就是当浏览器读取就是当浏览器读取HTMLHTML 文件时，复制一份样式表到这个文件时，复制一份样式表到这个HTMLHTML文件中，即在内部样文件中，即在内部样 式表的式表的标记对里导入一个外部样式表文件。其格式为标记对里导入一个外部样式表文件。其格式为 ： “ 导入外部样式表输入方式上更有优势，实质上它相当于内部导入外部样式表输入方式上更有优势，实质上它相当于内部 样式。样式。 5.2 5.2 在网页中插入在网页中插入CSSCSS 【例5-4】 8 8 5.3.1 5.3.1 用类（用类（classclass）选择符定义样式选择符定义样式 用类选择符能够把相同的标记分类定义为不同的样式。例用类选择符能够把相同的标记分类定义为不同的样式。例 如，希望同一种标记（如如，希望同一种标记（如）在不同的地方使用不同的样在不同的地方使用不同的样 式（一个段落向右对齐，一个段落居中），就可以先定义两式（一个段落向右对齐，一个段落居中），就可以先定义两 个类，在应用时只要在标记中指定它属于哪一个类，就可以个类，在应用时只要在标记中指定它属于哪一个类，就可以 使用该类的样式了。其格式为：使用该类的样式了。其格式为： “ 5.3 class5.3 class与与idid类选择符类选择符 9 9 5.3.1 5.3.1 用类（用类（classclass）选择符定义样式选择符定义样式 还有一种用法，是在选择符中省略还有一种用法，是在选择符中省略HTMLHTML“ “标记标记” ”名，这样名，这样 可以把几个不同的元素定义成相同的样式。其格式为：可以把几个不同的元素定义成相同的样式。其格式为： “ 有无有无“ “标记标记” ”的区别在于，若在定义类选择符前加上的区别在于，若在定义类选择符前加上HTMLHTML标标 记，其适用范围将只限于该标记所包含的内容。这种省略记，其适用范围将只限于该标记所包含的内容。这种省略 HTMLHTML标记的类选择符是最常用的定义方法，使用这种方法标记的类选择符是最常用的定义方法，使用这种方法 ，可以很方便地在任意标记上套用预先定义好的类样式。，可以很方便地在任意标记上套用预先定义好的类样式。 5.3 class5.3 class与与idid类选择符类选择符 1010 5.3.2 5.3.2 用用idid选择符定义样式选择符定义样式 idid选择符用来对某个单一元素定义单独的样式。定义选择符用来对某个单一元素定义单独的样式。定义idid选选 择符时要在择符时要在idid名称前加上一个名称前加上一个“ “# #” ”号。与类选择符相同，定义号。与类选择符相同，定义 idid选择符也有两种方法。选择符也有两种方法。 第一种方法是用第一种方法是用idid选择符定义样式，格式为：选择符定义样式，格式为： “ 5.3 class5.3 class与与idid类选择符类选择符 1111 5.3.2 5.3.2 用用idid选择符定义样式选择符定义样式 还有一种方法，是在选择符中加上还有一种方法，是在选择符中加上HTMLHTML“ “标记标记” ”名，其格式名，其格式 为：为： “ “ “标记标记” ”是是HTMLHTML的标记名称。若在的标记名称。若在idid选择符前加上选择符前加上HTMLHTML 的标记，其适用范围将只限于该标记所包含的内容。的标记，其适用范围将只限于该标记所包含的内容。idid选择选择 符局限性很大，只能单独定义某个元素的样式，一般只在特符局限性很大，只能单独定义某个元素的样式，一般只在特 殊情况下使用。殊情况下使用。 5.3 class5.3 class与与idid类选择符类选择符 1212 5.4.1 5.4.1 使用使用标记标记 标记用来定义网页上的一个特定区域，在该区域的范标记用来定义网页上的一个特定区域，在该区域的范 围内可包含文字、图片、表格、窗体及其他围内可包含文字、图片、表格、窗体及其他标记等。在标记等。在 标记内的所有内容都将调用此标记所定义的样式，且区标记内的所有内容都将调用此标记所定义的样式，且区 域与区域之间是彼此独立的。在定义区域间使用不同样式时域与区域之间是彼此独立的。在定义区域间使用不同样式时 ，可使用，可使用标记。标记。标记的格式为：标记的格式为： . “. 或或 .“. 5.4.2 5.4.2 使用使用标记标记 标记主要用来定义网页上的区域，通常用于比较大标记主要用来定义网页上的区域，通常用于比较大 的范围；而的范围；而标记也可以用来定义区域，但一般用于网标记也可以用来定义区域，但一般用于网 页中某一个小问题段落，其格式为：页中某一个小问题段落，其格式为： . “. 或或 .“. 5.4 5.4 与与标记标记 1313 前面介绍了在网页中插入样式表的前面介绍了在网页中插入样式表的4 4种方法，那么，当这种方法，那么，当这4 4 种方法同时出现时，浏览器会以哪种方法定义的规则为准呢种方法同时出现时，浏览器会以哪种方法定义的规则为准呢 ？这就涉及了样式表的优先级别和叠加。一般原则是，最接？这就涉及了样式表的优先级别和叠加。一般原则是，最接 近目标的样式定义优先级最高。高优先级样式将继承低优先近目标的样式定义优先级最高。高优先级样式将继承低优先 级样式的未重叠定义，但覆盖重叠的定义。根据规定，样式级样式的未重叠定义，但覆盖重叠的定义。根据规定，样式 表的优先级别从高到低为：行内样式、内部样式、链接样式表的优先级别从高到低为：行内样式、内部样式、链接样式 、导入样式和默认浏览器样式。浏览器将按照上述顺序执行、导入样式和默认浏览器样式。浏览器将按照上述顺序执行 样式表的规则。样式表的规则。 样式表的层叠性就是继承性，样式表的继承规则是：外样式表的层叠性就是继承性，样式表的继承规则是：外 部的元素样式会保留下来，由这个元素所包含的其他元素继部的元素样式会保留下来，由这个元素所包含的其他元素继 承；所有在元素中嵌套的元素都会继承外层元素指定的属性承；所有在元素中嵌套的元素都会继承外层元素指定的属性 值，有时会把很多层嵌套的样式叠加在一起，除非另外更改值，有时会把很多层嵌套的样式叠加在一起，除非另外更改 ；遇到冲突的地方会以最后定义的为准。；遇到冲突的地方会以最后定义的为准。 5.5 5.5 多重多重CSSCSS的层叠的层叠 1414 5.6.1 5.6.1 长度、百分比单位长度、百分比单位 进行文字、排版、边界等设置时，常常会在属性值后加上进行文字、排版、边界等设置时，常常会在属性值后加上 长度单位或者百分比单位。长度单位或者百分比单位。 1 1长度单位长度单位 长度单位有相对长度单位和绝对长度单位两种类型。相对长度单位有相对长度单位和绝对长度单位两种类型。相对 长度单位是指以该属性前一个属性的单位值为基础，来完成长度单位是指以该属性前一个属性的单位值为基础，来完成 目前的设置。绝对长度单位，将不会随着显示设备的不同而目前的设置。绝对长度单位，将不会随着显示设备的不同而 改变。换句话说，属性值使用绝对长度单位时，不论在哪种改变。换句话说，属性值使用绝对长度单位时，不论在哪种 设备上显示都是一样的，例如，屏幕上的设备上显示都是一样的，例如，屏幕上的1cm1cm与打印机上的与打印机上的 1cm1cm是一样长的。是一样长的。 由于相对长度单位确定的是一个相对于另一个长度属性的长由于相对长度单位确定的是一个相对于另一个长度属性的长 度，因而它能更好地适应不同的媒体，所以它是首选的。度，因而它能更好地适应不同的媒体，所以它是首选的。 5.6 CSS5.6 CSS的属性单位的属性单位 1515 5.6.1 5.6.1 长度、百分比单位长度、百分比单位 2 2百分比单位百分比单位 百分比单位也是一种常用的相对类型。百分比值总是相对百分比单位也是一种常用的相对类型。百分比值总是相对 于另一个值来说的，该值可以是长度单位或其他单位。每一于另一个值来说的，该值可以是长度单位或其他单位。每一 个可以使用百分比值单位指定的属性，同时也自定义了这个个可以使用百分比值单位指定的属性，同时也自定义了这个 百分比值的参照值。在大多数情况下，这个参照值是该元素百分比值的参照值。在大多数情况下，这个参照值是该元素 本身的字体尺寸。并非所有属性都支持百分比单位。本身的字体尺寸。并非所有属性都支持百分比单位。 一个百分比值由可选的正号一个百分比值由可选的正号“ “+ +” ”或负号或负号“ “ ” ”，接着一个数字，接着一个数字， 后跟百分号后跟百分号“ “%” ”组成。如果百分比值是正的，正号可以不写组成。如果百分比值是正的，正号可以不写 。正负号、数字与百分号之间不能有空格。例如，。正负号、数字与百分号之间不能有空格。例如， p line-height: 150% p line-height: 150% /* /* 本段文字的高度为标准本段文字的高度为标准 行高的行高的1.51.5倍倍 * */ / hr width: 80% hr width: 80% /* /* 线段长度是相对于浏览线段长度是相对于浏览 器窗口的器窗口的80% */80% */ 5.6 CSS5.6 CSS的属性单位的属性单位 1616 5.6.2 5.6.2 色彩单位色彩单位 1 1用十六进制数表示色彩值用十六进制数表示色彩值 在在HTMLHTML中，要使用中，要使用RGBRGB概念指定色彩时，前面是一个概念指定色彩时，前面是一个 “# #”号，再加上号，再加上6 6个十六进制的数字表示，表示方法为：个十六进制的数字表示，表示方法为： #RRGGBB#RRGGBB。其中，前两个数字代表红光强度（其中，前两个数字代表红光强度（RedRed），），中中 间两个数字代表绿光强度（间两个数字代表绿光强度（GreenGreen），），后两个数字代表蓝光后两个数字代表蓝光 强度（强度（BlueBlue）。）。以上三个参数的取值范围为：以上三个参数的取值范围为：0000ff ff，参数参数 必须是两位数。对于只有一位的参数，应在前面补必须是两位数。对于只有一位的参数，应在前面补0 0。这种。这种 方法共可表示方法共可表示256256 256256 256256种色彩，即种色彩，即16M16M种色彩。而红色种色彩。而红色 、绿色、蓝色、黑色、白色对应的十六进制数分别为：、绿色、蓝色、黑色、白色对应的十六进制数分别为： #ff0000#ff0000、#00ff00#00ff00、#0000ff#0000ff、#000000#000000、# #ffffffffffff。例如，例如， div color: #ff0000 div color: #ff0000 如果每个参数各自在两位上的数字都相同，也可缩写为如果每个参数各自在两位上的数字都相同，也可缩写为 #RGB#RGB的方式。例如：的方式。例如：#ff8800#ff8800可以缩写为可以缩写为#f80#f80。 5.6 CSS5.6 CSS的属性单位的属性单位 1717 5.6.2 5.6.2 色彩单位色彩单位 2 2用用rgbrgb函数表示色彩值函数表示色彩值 在在CSSCSS中，可以用中，可以用rgbrgb函数设置出所要的色彩，语法格式为：函数设置出所要的色彩，语法格式为： rgb(R,G,Brgb(R,G,B) )。其中，其中，R R为红色值，为红色值，GG为绿色值，为绿色值，B B为蓝色值。为蓝色值。 三个参数可取正整数值或百分数值，正整数值的取值范围为三个参数可取