第十章1使用CSS格式化网页

,*,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,Click to edit Master title style,第,10,章使用,CSS,格式化网页,清华大学出版社,第一部份,主要内容,CSS,在页面风格设计中的作用,用多个,HTML,页面调用一个,CSS,文件,用,DIV+CSS,的方式来写,HTML,页面,用,CSS,控制背景图片的显示方式,用,CSS,设置滚动条的样式,用,CSS,设置滚动条的样式,10.1,理解,CSS,10.1.1 CSS,的简介,10.1.2 CSS,构造,CSS,的简介,CSS,的英文名为,Cascading Style Sheet,，译成中文的意思为层叠样式表。,样式就是格式，对于网页来说，像网页显示的文字的大小、颜色以及图片位置以及段落、列表等，都是网页显示的样式。层叠就是指当,HTML,文件引用多个,CSS,样式时，如果,CSS,的定义发生冲突，浏览器将依据层次的先后顺序来应用样式，如果不考虑样式的优先级时，一般会遵循“最近优选原则”。,CSS,能将样式的定义与,HTML,文件内容分离。只要建立定义样式的,CSS,文件，并且让所有的,HTML,文件都来调用,CSS,文件所定义的样式，如果要改变,HTML,文件中任意部分的显示风格时，只要把,CSS,文件打开，更改样式就可以了。,CSS,构造,构造样式规则,样式表的每个规则都有两个主要部分：选择符（,selector,）和声明（,declaration,）。选择器决定哪些因素要受到影响，声明由一个或多个属性值对组成。,基本语法：,selector,属性,:,属性值,;,属性,:,属性值,语法说明：,selector,表示希望进行格式化的元素；,声明部分包括在选择器后的大括号中；,用“属性,:,属性值”描述要应用的格式化操作；,声明中的多个属性值对之间必须用分号隔开。,CSS,构造,在样式规则中添加注释,在样式表规则中添加注释有助于记住复杂的样式规则的作用，应用的范围等，便于进行维护和应用。例如，下面是一个添加注释的样例。,/*,此标记应用在文档中*,/ h1color:red;background:yellow;,注意：,注释不能嵌套。,CSS,构造,继承,继承是,CSS,的一个主要特征，许多,CSS,属性不但影响选择符所定义的元素，而且会被这些元素的后代继承。例如一个,body,定义了的颜色值也会应用到段落的文本中。下面举例说明。,CSS,的继承性,CSS,的,继承性,10.2,样式表的定义与使用,在,CSS,里可以使用四种不同的方法，将样式表的功能加到网页里。,直接定义标记的,style,属性,定义内部样式表,嵌入外部样式表,链接外部样式表,定义标记的,style,属性,将,CSS,样式定义在,HTML,标记内的，这是最简单的样式定义方法。,基本语法,：,语法说明：,标记：,HTML,标记，如,body,、,table,、,p,等；,标记的,style,定义只能影响标记本身；,style,的多个属性之间用分号分割；,标记本身定义的,style,优先于其他所有样式定义。,直接定义标记的,style,属性,此行文字被,style,属性定义为蓝色显示,此行文字没有被,style,属性定义,示例代码第一个段落标记被直接定义了,style,属性，此行文字将显示,18,像素大小，蓝色字体；而第二个段落标记没有被定义，将按照默认设置来显示文字样式。结果如图,10-2,所示。,定义内部样式表,内部样式表允许在他们所应用的,HTML,文档的顶部设置样式，后在整个,HTML,文件中直接调用使用该样式的标记。,基本语法：,定义内部样式表,语法说明：,元素是用来说明所要定义的样式，,type,属性是指,style,元素以,CSS,的语法定义；,隐藏标记：避免了因浏览器不支持,CSS,而导致错误，加上这些标记后，不支持,CSS,的浏览器，会自动跳过此段内容，避免一些错误；,选择符,1,选择符,n,：选择符可以使用,HTML,标记的名称，所有的,HTML,标记都可以作为选择符；,样式属性主要是关于对选择符格式化显示风格的样式属性名称；,属性值设置对应样式属性的值。,定义内部样式表,定义内部,STYLE,属性,此行文字被内部的样式定义为蓝色显示,此行文字没有被内部的样式定义,定义内部样式表,嵌入外部样式表,嵌入外部样式表就是在,HTML,代码的主体中直接导入样式表的方法。,基本语法：,import,url,(,外部样式表的文件名称,);,语法说明：,import,语句后的“,;”,号，一定要加上！,外部样式表的文件名称是的是要嵌入的样式表文件名称，后缀为,.,css,；,import,应该放在,style,元素的任何其他样式规则前面。,嵌入外部样式表,嵌入外部样式表,import,url(style.css,),；,此行文字被,style,属性定义为蓝色显示,此行文字没有被,style,属性定义,嵌入外部样式表,示例代码调用的外部,style.css,文件的内容是：,.p1font-size:18px;,color:blue,执行结果如图,链接外部样式表,除了以嵌入外部样式表的方法达到在,HTML,文件中引用样式表的目的外，还可以用链接的方式，使用外部,CSS,文件。,基本语法：,语法说明：,链接外部样式表时，不需要使用,style,元素，只需直接用,标记放在,标记中就可以了；,同样外部样式表的文件名称是要嵌入的样式表文件名称，后缀为,.,css,；,CSS,文件一定是纯文本格式；,在修改外部样式表时，引用它的所有外部页面也会自动地更新；,外部样式表中的,URL,相对于样式表文件在服务器上的位置；,外部样式表优先级低于内部样式表；,可以同时链接几个样式表，靠后的样式表优先于靠前的样式表。,链接外部样式表,嵌入外部样式表,此行文字被,style,属性定义为蓝色显示,此行文字没有被,style,属性定义,10.3,定义选择符,选择符决定了格式化将应用于哪些元素。最简单的选择符可以对给定类型的所有元素进行格式化，更复杂的选择符可以根据元素的,class,或,id,、上下文、状态等来应用格式化规则。,按照名称选择元素,选择要格式化的元素最常用的标准可能是元素的名称或类型。例如，可以让所有,p,元素显示为红色、且大小为,16,像素。,下面的示例中除非指定其他情况，指定类型的所有元素（这里是标记,p,）都将被格式化。,pfont-size:16px;,color:red,;,按照,id,和,class,选择元素,如果已经在页面元素中标识了,id,或,class,属性，那么就可以在选择器定义中使用，从而对被标识的元素进行格式化。,按照,id,和,class,选择元素,基本语法,或者,语法说明,可以单独使用,classname,和,idname,选择器，也可以与其他选择器标准一起使用。例如，“,.,newscolor:red,;”,会影响所有标记中定义了“,class=news”,类的元素，而“,h1.newscolor:red;”,只影响属性中定义了“,class=news”,类的,h1,元素。,示例,ID,和类的定义, ,此段文字以默认方式显示,此段文字以,16,像素大小，红色字体显示,此段文字以,26,像素大小，玫红色字体显示,按照上下文选择元素,在,CSS,中，可以根据元素的祖先元素、父元素或同胞元素来定位它们。祖先元素就是包含所关心元素（希望样式影响的元素）的任何元素，父元素就是直接包含所关心元素的元素。,基本语法：,祖先元素,祖先元素,显示元素,属性名,=,属性值,;.,语法说明：,祖先元素是希望格式化的元素的祖先元素的名称，上面程序中是“,#,divdemo,”,；,如果还需要继续指定后续的祖先元素，则元素名中加空格；,最后是最终希望格式化影响的元素名，上面程序中指定了影响段落标记,P,，也可以是前面讲过的一个,ID,（,#p1,）或者,CLASS,（,.p1),，例如：,如果祖先元素和影响元素是父子关系，则可采取下面的定义风格：,#,divdemo,#p1font-size:26px; color:#FF0066;,#divdemo .p1font-size:26px; color:#FF0066;,#,divdemo,pfont-size:26px; color:#FF0066;,选择元素的一部分,还可以只选择元素的第一个字母或第一行进行格式化。,基本语法：,选择符,:first-letterfont-size:26px; color:#FF0066;,选择符,:first-linefont-size:26px; color:#FF0066;,语法说明：,下面是关于此规定的一个实例。,p:first-letterfont-size:26px; color:#FF0066;p:first-linefont-size:26px; color:#FF0066;,指定元素组,多个元素使用同样的样式规则，可以组合使用选择器。例如：,h1,h2,divcolor:#FF0066;,这里规定了标记,h1,、,h2,和,div,的,color,都是同样的颜色。组合选择其中的元素名中间要用“,”,隔开。,h1,h2,divcolor:#FF0066;,10.4,文字与排版样式的使用,CSS,的网页排版功能十分强大，使用,CSS,，不仅可以控制文字的大小、颜色、对齐方式和字体，还可以控制行高、字母间距、大小写（全部大写、首字大写、小型大写或全部都小写等），甚至还可以控制文本的第一个字或第一行的样式。,不仅如此，只需要在某一位置创建样式规则（即样式表），就可以让这些样式规则应用于整个网站的所有文本（当然也可以为特定的段落或网页的某些区域创建特别的样式表）。此外，任何时候发现需要让网站上的文字增大，或是需要改变正文的字体，只需更改样式表中的“值”即可。,长度、百分比单位,在,CSS,文字、排版、边界等的设置上，常常会在属性值后加上长度或者百分比单位，通过本小节的学习将掌握两种单位的使用。,长度单位,百分比单位,百分比单位也是一种常用的相对类型，通常的参考依据为元素的,font-size,属性，下面的语句将设置,margin,属性值为,font-size,的,150%,，如下所示：,pmargin:150%,此处表示的是相对于,font-size,高度的,150%,。需要注意的是，不管使用哪种单位，在设置的时候，数值与单位间不需要加上空格。,10.4.2,文字样式属性,font-family,设置字体,font-size,设置字号,font-style,设置字体样式,font-weight,设置字体加粗,font-variant,设置字体变体,text-decoration,设置文字效果属性,font,设置综合字体属性,font-family,设置字体,除了利用,HTML,的标记来设置字体外，也可以用,CSS,的,font-family,属性来设置需要的字体。,基本语法：,font-family:,字体一，字体二，字体三,语法说明：,上面的语法定义了几种不同的字体，并用逗号隔开，当浏览器找不到字体一时，将会用字体二代替，以此类推，当浏览器完全找不到字体时，则使用默认字体（宋体）。,设置字体,设置字体的顺序为，黑体，草书，宋体,设置字体的顺序为，琥珀，草书，宋体,font-size,设置字号,font-size,设置字号,可以用,标记来设置文字的大小。在,CSS,里，利用,font-size,属性来设置字号。,基本语法：,font-size,：绝对大小,|,相对大小,语法说明：,绝对大小：是以,pt,为单位，以绝对大小的方式来设置字号。可以指定精确的大小，如,16px,，或者使用关键字来指定大小，如：,font-size,属性的关键字（,xx-small | x-small | small | medium | large | x-large | xx-large,）。不过这些关键字，在不同的设备下，可能会显示不同的字号。,设置字号的绝对大小,设置字号为,xx-small,设置字号为,x-small,设置字号为,small,设置字号为,medium,设置字号为,large,设置字号为,x-large,相对大小：利用百分比或者,em,(,当前字母中，字母的宽度,),，以相对父元素大小的方式来设置大小。例如指定,font-size,的属性值时父元素的,1.5em,或,150%,，或者使用相对关键字,(larger | smaller),来指定。,设置字号的相对大小,设置字号的相对大小,设置字号的相对大小,font-style,设置字体样式,在,HTML,里，可以使用,标记，将网页文字设置为斜体。而在,CSS,里，则可以利用,font-style,属性来达到字体变化的效果。,基本语法：,font-style:normal | italic | oblique,语法说明：,normal,为默认值，一般以浏览器默认的字体来显示，,italic,为斜体效果，,oblique,为歪斜体效果。,font-weight,设置字体加粗,在,HTML,里，可以利用,标记或者,标记将文字设置为粗体。在,CSS,里，则可以利用,font-weight,属性来设置字体的粗细。,基本语法：,font-weight,：,normal |,blod,| bolder | lighter | 100-900,语法说明：,normal,表示默认字体，,bold,表示粗体，,bolder,表示粗体再加粗，,lighter,表示比默认字体还细，,100-900,共分为九个层次（,100,、,200,、,900,），数字越小字体越细、数字越大字体越粗。,font-weight,字体加粗, ,此段文字正常显示,此段文字以,blod,方式显示,此段文字以,bolder,方式显示,此段文字以,lighter,方式显示,此段文字以,900,方式显示,font-variant,设置字体变体,在,HTML,里设置字体变体，实际就是设置字体是否显示为小型的大写字母。而,CSS,中的字体变体主要用于设置英文字体。,基本语法：,font-,variant:normal,| small-caps,语法说明：,normal,表示默认值，,small-caps,表示英文字体显示为小型的大写字母。,font-variant,字体变体,font-,variant:normal,字体变体,font-,variant:small,-caps,字体变体,Thank You !,