《网页设计与制作实用技术（第二版）教学课件 齐建玲 CH12》由会员分享，可在线阅读，更多相关《网页设计与制作实用技术（第二版）教学课件 齐建玲 CH12（45页珍藏版）》请在金锄头文库上搜索。
1、通过本章学习，应该掌握以下内容： 什么是CSS CSS样式和常用的选择器 在网页中使用CSS的方法 CSS的各种属性,第12章 在网页中使用CSS样式,12.1 CSS简介,CSS（Cascading Style Sheet，层叠样式表）技术是一种格式化网页的标准方式，它通过设置CSS属性使网页元素获得各种不同效果。CSS不是一种程序设计语言，而只是一种用于网页排版的标识性语言，是对现有HTML语言功能的补充和扩展。 CSS的主要功能是通过对HTML选择器进行设定，来实现对网页中的字体、字号、颜色、背景、图像及其他元素的控制，使网页能够完全按照设计者的要求来显示。,CSS的定义由三部分构成：选
2、择符selector、属性property和属性值value。其基本格式如下： selectorproperty l：value l；property 2：value 2； 其中selector（选择符）表示需要应用样式的内容，property表示由CSS标准定义的样式属性，value表示样式属性的值。,12.2 CSS样式,12.2.1 CSS样式表组成,12.2.2 几种常用的选择器,HTML标记符是最典型的选择器类型，网页设计者可以为某个或某些具体的HTML元素应用样式定义。如： BODYcolor：black 如果属性的值是多个单词组成的，必须在值前加上双引号。如果需要对一个选择器指定
3、多个属性时，应使用分号将所有的属性和值分开。,1HTML标签选择器,如果需要为位于某个标签内的标签设置特定的样式规则，则应将选择器指定为具有上下文关系的HTML标签。例如，如果只想使位于H1标签内的A标签具有特定的属性，则应使用以下格式： H1 Acolor：blue,2具有上下文关系的HTML标签选择器,可以使用类（class）来为单一HTML标签创建多个样式。要想将一个类包括到样式定义中，可将一个句点和一个类名称添加到选择器后，如下所示： selector.classname property：value； 可以使用任何名称命名类，但通常使用具体含义的名称。,3用户定义的类选择器,4用户定
4、义的ID 选择器,当网页设计者想在整个网页或几个页面上多处以相同样式显示标签时，除了使用类定义一个通用类样式以外，还可以使用ID定义样式。ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。 要将一个ID样式包括在样式定义中，应用一个#号作为ID名称的前缀，如下所示： #IDnameproperty：value 定义了ID样式后，需要在引用该样式的标签内使用id属性。,可以单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义，例如： TABLE Afont-size：10px 使用上规则后，在表格内的链接改变了样式，
5、文字大小为10像素，而表格外的链接的文字仍为默认大小。,5包含选择器,层叠性，即继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。 不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。ID选择符，类选择符和HTML标记选择符，因为ID选择符是最后加在元素上的，所以优先级最高，其次是类选择符。如果想超越这三者之间的关系，可以在定义样式时加上!important，来提升样式表的优先权。,6样式表的层叠性选择器,7虚类选择器,虚类可以看作是一种特殊的类选择符，是能被支持CSS的浏览器自动识别的特殊选择符。它最大的用处就是可以在不同状态下定义不同的样式超链接
6、效果。 将虚类和类组合起来用，就可以在同一个页面中做几组不同类型的链接效果了。所谓不同类型超链接，是指访问过的（A:visited）、未访问过的（A:link）、激活的（A:active）以及鼠标指针悬停于其上（A:hover）的这4种状态的超链接。,8注释选择器,用户可以在CSS中插入注释来说明用户代码的意思，注释有利于用户或别人以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。与HTML注释一样，CSS注释也以“/*”开头，以“*/”结尾。,12.3 CSS属性,字体属性用于控制网页中的文本的字符显示方式，例如控制文字的大小、粗细以及使用的字体等。CSS中的字体属性包括字体族
7、科（font-family）、字体风格（font-style）、字体变形（font-variant）、字体加粗（font-weight）、字体大小（font-size）五个属性。其中字体族科和字体大小属性是比较常用的。,12.3.1 字体属性,1字体族科属性（font-family）,字体族科属性相当于HTML中FONT标记符的face属性，用于设定文字的字体，当所设定的字体在用户端没有时会用浏览器默认的字体代替。 该样式允许指定多种字体供选择，用逗号进行分隔即可。在客户端会根据字体指定的优先级（先后顺序）寻找字体予以显示。比如： font-family：华文行楷，楷体-GB2312，宋体,2
8、字体风格属性（font-style）,字体风格属性的值有三种：普通（normal），斜体（italic）和倾斜（oblique），默认值为normal。,3字体变形属性（font-variant）,字体变形属性有普通（normal）和小型大写字母（small-caps）两个值，默认值为normal。当使用small-caps属性时，文字一律转换为大写字母，并且都会以一种大小介于普通小写字母和大写字母之间的字体显示。,字体加粗属性用于设定字体的粗细，跟HTML中的B标记符效果相似。它的取值可以是以下值中的一个：normal、bold、bolder、lighter、100、200、300、400、
9、500、600、700、800、900，默认值为normal，表示正常粗细；bold表示粗体。也可以使用数值，范围为100至900，对应从最细到最粗。normal相当于400，bold相当于700。如果使用bolder或lighter，则表示相对于上一级元素中的字体更粗或更细。,4字体加粗属性（font-weight）,字体大小属性用来定义字体的大小。 可以使用的值包括绝对大小、相对大小、长度、百分比，其中使用长度时单位又分为绝对单位磅（pt）、毫米（mm）、厘米（cm）、帕（pc）、英寸（in）和相对单位像素（px）、em。,5字体大小属性（font-size）,文字间隔属性定义一个附加在文
10、字（单词）之间的间隔数量。该值必须符合长度格式，允许使用负值。 需要特别说明的是，该属性是针对英文单词的间隔，而不是中文的文字间隔，中文的文字间隔应该用下面讲到的letter-spacing。同时在中文版的IE浏览器中也不支持该属性。,12.3.2 文本属性,1文字间隔属性(word-spacing),字母间隔属性定义一个附加在字符之间的间隔数量（间距）。它的取值可以是normal或具体的长度值（该值必须符合长度格式），也可以是负值。默认值为normal，表示浏览器根据最佳状态调整字符间距。一个设为0的值会阻止显示文字时的间隔调整。,2字母间隔属性(1etter-spacing),纵向排列属性
11、可以用来定义一个内部元素的纵向位置，相对于它的上级元素或者相对于元素行。 该值可以是一个相对于元素行高属性的百分比，它会在上级基线上增高元素基线的指定数量。允许使用负值，也可以是一个关键字。该属性对于图像设置特别有用。,3纵向排列属性(vertical-align),指定了所选元素的对齐方式（类似于HTML标记符的align属性），取值可以是：left 、right、center、，分别表示左对齐、右对齐、居中对齐和两端对齐。此属性的默认值依浏览器的类型而定。若浏览器不支持justify属性。则使用左对齐或者右对齐代替。,4文本排列属性(text-align),文本缩进属性可以应用于块级元素（
12、P，H1等），以定义该块级元素第一行可以接受的缩进数量。该值必须是一个长度或者百分比。若为百分比则视上级元素的宽度而定。该属性常用于段落的缩进。此属性的默认值是0，表示无缩进。,5文本缩进属性(text-indent),文字修饰属性可以对特定选项的文本进行修饰，它的取值为：none、underline、overline、line-through、blink，默认值为none，表示不加任何修饰。underline表示添加下划线；overline表示添加上划线；line-through表示添加删除线；blink表示添加闪烁效果。 另外IE浏览器并不支持文字修饰属性值blink（闪烁）。,6文字修饰
13、属性（text-decoration）,行高属性决定了相邻行之间的间距。其取值可以是数字、长度或百分比，默认值是normal。当以数字指定值时，行高就是当前字体高度与该数字相乘的倍数。如果指定具体的长度值，则行高为该值。如果用百分比指定行高，则行高为当前字体高度与该百分比相乘。该属性不允许使用负值。,7行高属性 (line-height),文本转换属性用于转换文本，取值为：capitalize、uppercase、lowercase、none，默认值是none表示使用原始值。capitalize值表示所选元素中文本的每个单词的首字母以大写显示；uppercase值表示所有的文本都以大写显示；l
14、owercase值表示所有文本都以小写显示。,8文本转换属性(text-transform),background属性是一个组合属性，可用于同时设置background- color、background- image、back2round-attachment、background-position、background-repeat等背景属性。,12.3.3 颜色与背景属性,1background属性,用于设置HTML元素的背景颜色。此属性的默认值是transparent，表示没有任何颜色，此时上级元素的背景可以在子元素中显示出来。,2background-color属性,用于设置HTML
15、元素的背景图案，取值为url或none。默认值为none，即没有背景图案。该属性相当于HTML中BODY标签的background属性，只是它可以定义更多元素的背景图像。,3background-image属性,用于控制背景图像是否随内容一起滚动，取值为scroll、fixed。默认值为scroll，表示背景图案随着内容一起滚动；fixed表示背景图案静止，而内容可以滚动。,4background-attachment属性,用于指定背景图案相对于关联区域左上角的位置。该属性通常指定由空格隔开的两个值。,5background-position属性,表示当使用背景图案时，背景图案是否重复显示。取
16、值可以是：repeat表示在水平方向和垂直方向都重复，即像铺地板一样将背景图案平铺；repeat-x表示在水平方向上平铺；repeat-y表示在垂直方向上平铺；no-repeat表示不平铺，即只显示一幅背景图案。,6background-repeat属性,所有网页上的元素都有边框，只是大部分缺省没有显示出来。CSS边框属性设置包括三项：边框颜色（color）、边框样式（style）和边框宽度（width），而边框又包括四个方向：上（top）、下（bottom）、左（1eft）和右（right）。将边框设置和方向组合起来，则构成了多种属性。如：border-bottom、border-bottom-color、border-bottom-style、border-bottom-width、border-right-color、border-right-style、border-right-width等等。,12.3.4 布局属性,1边框属性,CSS边界属性包括边界margin、下
