网页设计第10章

《网页设计第10章》由会员分享，可在线阅读，更多相关《网页设计第10章（102页珍藏版）》请在金锄头文库上搜索。

1、Company name第10章使用CSS格式化 网页 主要内容 CSS在页面风格设计中的作用 用多个HTML页面调用一个CSS文件 用DIV+CSS的方式来写HTML页面 用CSS控制背景图片的显示方式 用CSS设置滚动条的样式 用CSS设置滚动条的样式10.1理解CSSl10.1.1 CSS的简介l10.1.2 CSS构造CSS的简介lCSS的英文名为Cascading Style Sheet，译成中文的 意思为层叠样式表。l样式就是格式，对于网页来说，像网页显示的文字的大小 、颜色以及图片位置以及段落、列表等，都是网页显示的 样式。层叠就是指当HTML文件引用多个CSS样式时，如 果CS

2、S的定义发生冲突，浏览器将依据层次的先后顺序来 应用样式，如果不考虑样式的优先级时，一般会遵循“最 近优选原则”。lCSS能将样式的定义与HTML文件内容分离。只要建立定 义样式的CSS文件，并且让所有的HTML文件都来调用 CSS文件所定义的样式，如果要改变HTML文件中任意部 分的显示风格时，只要把CSS文件打开，更改样式就可以 了。CSS构造 l构造样式规则样式表的每个规则都有两个主要部分：选择符（ selector）和声明（declaration）。选择器决定哪些 因素要受到影响，声明由一个或多个属性值对组成。 基本语法： selector属性:属性值;属性:属性值 语法说明：sele

3、ctor表示希望进行格式化的元素；声明部分包括在选择器后的大括号中；用“属性:属性值”描述要应用的格式化操作；声明中的多个属性值对之间必须用分号隔开。 CSS构造l在样式规则中添加注释在样式表规则中添加注释有助于记住复杂的样式规则 的作用，应用的范围等，便于进行维护和应用。例如 ，下面是一个添加注释的样例。 /*此标记应用在文档中*/ h1color:red;background:yellow;注意：注释不能嵌套。CSS构造l继承继承是CSS的一个主要特征，许多CSS属性不但影响选 择符所定义的元素，而且会被这些元素的后代继承。 例如一个body定义了的颜色值也会应用到段落的文本 中。下面举例

4、说明。CSS的继承性CSS的继承性10.2 样式表的定义与使用l在CSS里可以使用四种不同的方法， 将样式表的功能加到网页里。直接定义标记的style属性定义内部样式表嵌入外部样式表链接外部样式表定义标记的style属性 l将CSS样式定义在HTML标记内的，这是最简单 的样式定义方法。 基本语法： 语法说明：标记：HTML标记，如body、table、p等；标记的style定义只能影响标记本身；style的多个属性之间用分号分割；标记本身定义的style优先于其他所有样式定义。直接定义标记的style属性此行文字被style属性定义为蓝色显示此行文字没有被style属性定义l示例代码第一个段

5、落标记被直接定义了style属 性，此行文字将显示18像素大小，蓝色字体；而 第二个段落标记没有被定义，将按照默认设置来 显示文字样式。结果如图10-2所示。 定义内部样式表 l内部样式表允许在他们所应用的HTML文档的顶 部设置样式，后在整个HTML文件中直接调用使 用该样式的标记。 基本语法：定义内部样式表语法说明：元素是用来说明所要定义的样式，type属性是 指style元素以CSS的语法定义；隐藏标记：避免了因浏览器不支持CSS而 导致错误，加上这些标记后，不支持CSS的浏览器，会 自动跳过此段内容，避免一些错误；选择符1选择符n：选择符可以使用HTML标记的名 称，所有的HTML标记

6、都可以作为选择符；样式属性主要是关于对选择符格式化显示风格的样式 属性名称；属性值设置对应样式属性的值。定义内部样式表定义内部STYLE属性此行文字被内部的样式定义为蓝色显示此行文字没有被内部的样式定义定义内部样式表嵌入外部样式表 l嵌入外部样式表就是在HTML代码的主体中直接 导入样式表的方法。 基本语法：import url(“外部样式表 的文件名称“);语法说明：import语句后的“;”号，一定要加上！外部样式表的文件名称是的是要嵌入的样式表文件名 称，后缀为.css；import应该放在style元素的任何其他样式规则前面 。嵌入外部样式表嵌入外部样式表import url(“sty

7、le.css“)；此行文字被style属性定义为蓝色显示此行文字没有被style属性定义嵌入外部样式表l示例代码调用的外部style.css文件的内容是：.p1font-size:18px; color:bluel执行结果如图链接外部样式表 l除了以嵌入外部样式表的方法达到在HTML文件中引用 样式表的目的外，还可以用链接的方式，使用外部CSS 文件。 基本语法： 语法说明：链接外部样式表时，不需要使用style元素，只需直接用标 记放在标记中就可以了；同样外部样式表的文件名称是要嵌入的样式表文件名称，后缀为 .css；CSS文件一定是纯文本格式；在修改外部样式表时，引用它的所有外部页面也会自

8、动地更新；外部样式表中的URL相对于样式表文件在服务器上的位置；外部样式表优先级低于内部样式表；可以同时链接几个样式表，靠后的样式表优先于靠前的样式表。链接外部样式表嵌入外部样式表此行文字被style属性定义为蓝色显示此行文字没有被style属性定义10.3 定义选择符l选择符决定了格式化将应用于哪些元素。最简单 的选择符可以对给定类型的所有元素进行格式化 ，更复杂的选择符可以根据元素的class或id、 上下文、状态等来应用格式化规则。 按照名称选择元素l选择要格式化的元素最常用的标准可能是元素的 名称或类型。例如，可以让所有p元素显示为红 色、且大小为16像素。l下面的示例中除非指定其他情

9、况，指定类型的所 有元素（这里是标记p）都将被格式化。pfont-size:16px; color:red;按照id和class选择元素 l如果已经在页面元素中标识了id或class属性， 那么就可以在选择器定义中使用，从而对被标识 的元素进行格式化。按照id和class选择元素基本语 法或者l语法说明 可以单独使用classname和idname选择器，也可以与其 他选择器标准一起使用。例如， “.newscolor:red;”会影响所有标记中定义了 “class=“news“”类的元素，而 “h1.newscolor:red;”只影响属性中定义了 “class=“news“”类的h1元素。

10、示例ID和类的定义此段文字以默认方式显示此段文字以16像素大小，红色字体显示此段文字以26像素大小，玫红色字体显示按照上下文选择元素 l在CSS中，可以根据元素的祖先元素、父元素或 同胞元素来定位它们。祖先元素就是包含所关心 元素（希望样式影响的元素）的任何元素，父元 素就是直接包含所关心元素的元素。基本语法： 祖先元素 祖先元素 显示元素属性名=属性 值;. 语法说明：祖先元素是希望格式化的元素的祖先元素的名称，上 面程序中是“#divdemo”；如果还需要继续指定后续的祖先元素，则元素名中加 空格；最后是最终希望格式化影响的元素名，上面程序中指 定了影响段落标记P，也可以是前面讲过的一个I

11、D（ #p1）或者CLASS（.p1)，例如： 如果祖先元素和影响元素是父子关系，则可采取下面 的定义风格：#divdemo #p1font-size:26px; color:#FF0066;#divdemo .p1font-size:26px; color:#FF0066; #divdemo pfont-size:26px; color:#FF0066; 选择元素的一部分 l还可以只选择元素的第一个字母或第一行进行格 式化。基本语法：选择符:first-letterfont-size:26px; color:#FF0066;选择符:first-linefont-size:26px; colo

12、r:#FF0066; 语法说明：下面是关于此规定的一个实例。p:first-letterfont-size:26px; color:#FF0066;p:first-linefont-size:26px; color:#FF0066;指定元素组 l多个元素使用同样的样式规则，可以组合使用选 择器。例如：h1,h2,divcolor:#FF0066;这里规定了标记h1、h2和 div的color都是同样的颜色。组合选择其中的元素名 中间要用“,”隔开。h1,h2,divcolor:#FF0066; 10.4 文字与排版样式的使用lCSS 的网页排版功能十分强大，使用 CSS，不 仅可以控制文字的大

13、小、颜色、对齐方式和字体 ，还可以控制行高、字母间距、大小写（全部大 写、首字大写、小型大写或全部都小写等），甚 至还可以控制文本的第一个字或第一行的样式。l不仅如此，只需要在某一位置创建样式规则（即 样式表），就可以让这些样式规则应用于整个网 站的所有文本（当然也可以为特定的段落或网页 的某些区域创建特别的样式表）。此外，任何时 候发现需要让网站上的文字增大，或是需要改变 正文的字体，只需更改样式表中的“值”即可。长度、百分比单位 l在CSS文字、排版、边界等的设置上，常常会在 属性值后加上长度或者百分比单位，通过本小节 的学习将掌握两种单位的使用。长度单位百分比单位l百分比单位也是一种常用

14、的相对类型，通常的参 考依据为元素的font-size属性，下面的语句将 设置margin属性值为font-size的150%，如 下所示：lpmargin:150%此处表示的是相对于font -size 高度的150%。需要注意的是，不管使用 哪种单位，在设置的时候，数值与单位间不需要 加上空格。10.4.2 文字样式属性lfont-family设置字体lfont-size设置字号lfont-style设置字体样式lfont-weight设置字体加粗lfont-variant设置字体变体ltext-decoration设置文字效果属性lfont设置综合字体属性font-family设置字体l

15、除了利用HTML的标记来设置字体外，也可以用 CSS的font-family属性来设置需要的字体。基本语法：font-family:字体一，字体二，字体三 语法说明：上面的语法定义了几种不同的字体，并用逗号隔开， 当浏览器找不到字体一时，将会用字体二代替，以此 类推，当浏览器完全找不到字体时，则使用默认字体 （宋体）。设置字体设置字体的顺序为，黑体，草书，宋体设置字体的顺序为，琥珀，草书，宋体font-size设置字号lfont-size设置字号可以用标记来设置文字的大小。在CSS 里，利用font-size属性来设置字号。 基本语法：font-size：绝对大小 | 相对大小 语法说明：绝对

16、大小：是以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)来指定。设置字号的相对大小设置字号