第10章网页设计1

(102页)

(此文档疑似侵权,无法预览全文,无法下载。)
'第10章网页设计1'
Company name WEB编程基础 第10章使用CSS格式化网页 清华大学出版社 主要内容? CSS在页面风格设计中的作用? 用多个HTML页面调用一个CSS文件? 用DIV+CSS的方式来写HTML页面? 用CSS控制背景图片的显示方式? 用CSS设置滚动条的样式? 用CSS设置滚动条的样式 10.1理解CSSl 10.1.1 CSS的简介l 10.1.2 CSS构造 CSS的简介l CSS的英文名为Cascading Style Sheet,译成中文的意 思为层叠样式表。l 样式就是格式,对于网页来说,像网页显示的文字的大小、 颜色以及图片位置以及段落、列表等,都是网页显示的样 式。层叠就是指当HTML文件引用多个CSS样式时,如果 CSS的定义发生冲突,浏览器将依据层次的先后顺序来应 用样式,如果不考虑样式的优先级时,一般会遵循“最近 优选原则”。l CSS能将样式的定义与HTML文件内容分离。只要建立定 义样式的CSS文件,并且让所有的HTML文件都来调用 CSS文件所定义的样式,如果要改变HTML文件中任意部 分的显示风格时,只要把CSS文件打开,更改样式就可以 了。 CSS构造 l 构造样式规则 – 样式表的每个规则都有两个主要部分:选择符 (selector)和声明(declaration)。选择器决定哪 些因素要受到影响,声明由一个或多个属性值对组成。 基本语法: – selector{属性:属性值[[;属性:属性值]…]} 语法说明: – selector表示希望进行格式化的元素; – 声明部分包括在选择器后的大括号中; – 用“属性:属性值”描述要应用的格式化操作; – 声明中的多个属性值对之间必须用分号隔开。 CSS构造l 在样式规则中添加注释 – 在样式表规则中添加注释有助于记住复杂的样式规则 的作用,应用的范围等,便于进行维护和应用。例如, 下面是一个添加注释的样例。 – /*此标记应用在文档中*/ h1{color:red;background:yellow;} – 注意:注释不能嵌套。 CSS构造l 继承 – 继承是CSS的一个主要特征,许多CSS属性不但影响选 择符所定义的元素,而且会被这些元素的后代继承。 例如一个body定义了的颜色值也会应用到段落的文本 中。下面举例说明。<!--程序10-1--><html><head><title>CSS的继承性</title><style type="text/css"><!-- body{color:red;} --></style></head><body><p>CSS的<strong>继承性</strong></p></body></html> 10.2 样式表的定义与使用l 在CSS里可以使用四种不同的方法,将 样式表的功能加到网页里。 – 直接定义标记的style属性 – 定义内部样式表 – 嵌入外部样式表 – 链接外部样式表 定义标记的style属性 l 将CSS样式定义在HTML标记内的,这是最简单的 样式定义方法。 基本语法: – <标记 style="样式属性:属性值;样式属性:属性 值;…"> 语法说明: – 标记:HTML标记,如body、table、p等; – 标记的style定义只能影响标记本身; – style的多个属性之间用分号分割; – 标记本身定义的style优先于其他所有样式定义。<!--程序10-2--><html><head><title>直接定义标记的style属性</title><body><p style="font-size:18px; color:#003366">此行文字被style属性定义为蓝色显示</p><p>此行文字没有被style属性定义</p></body></head></html> l 示例代码第一个段落标记被直接定义了style属性, 此行文字将显示18像素大小,蓝色字体;而第二 个段落标记没有被定义,将按照默认设置来显示 文字样式。结果如图10-2所示。 定义内部样式表 l 内部样式表允许在他们所应用的HTML文档的顶 部设置样式,后在整个HTML文件中直接调用使 用该样式的标记。 基本语法: – <style type="text/css"><!--选择符1(样式属性:属 性值;样式属性:属性值;……)选择符2(样式属性: 属性值;样式属性:属性值;……)选择符3(样式属 性:属性值;样式属性:属性值;……)……选择符n (样式属性:属性值;样式属性:属性值;……)-- ></style> 定义内部样式表语法说明:– <style>元素是用来说明所要定义的样式,type属性是 指style元素以CSS的语法定义;– <!--…… -->隐藏标记:避免了因浏览器不支持CSS而 导致错误,加上这些标记后,不支持CSS的浏览器,会 自动跳过此段内容,避免一些错误;– 选择符1……选择符n:选择符可以使用HTML标记的名称, 所有的HTML标记都可以作为选择符;– 样式属性主要是关于对选择符格式化显示风格的样式属 性名称;– 属性值设置对应样式属性的值。 定义内部样式表<!--程序10-3--><html><head><title>定义内部STYLE属性</title><style text="text/css"><!--.p1{font-size:18px; color:blue;}--></style></head><body><p class=p1>此行文字被内部的样式定义为蓝色显示</p><p>此行文字没有被内部的样式定义</p></body></html> 定义内部样式表 嵌入外部样式表 l 嵌入外部样式表就是在HTML代码的主体中直接 导入样式表的方法。 基本语法: – <style type="text/css">@import url("/外部样式表的 文件名称");</style>语法说明: – import语句后的“;”号,一定要加上! – 外部样式表的文件名称是的是要嵌入的样式表文件名称, 后缀为.css; – @import应该放在style元素的任何其他样式规则前面。 嵌入外部样式表<!--程序10-4--><html><head><title>嵌入外部样式表</title><style type="text/css">@import url("/style.css");</style></head><body><p class=p1>此行文字被style属性定义为蓝色显示</p><p>此行文字没有被style属性定义</p></body></html> 嵌入外部样式表l 示例代码调用的外部/style.css文件的内容是: – .p1{font-size:18px; color:blue}l 执行结果如图 链接外部样式表 l 除了以嵌入外部样式表的方法达到在HTML文件中引用样 式表的目的外,还可以用链接的方式,使用外部CSS文件。 基本语法: – <link type="text/css" rel=stylesheet href="外部样式表的文 件名称"> 语法说明: – 链接外部样式表时,不需要使用style元素,只需直接用<link>标 记放在<head>标记中就可以了; – 同样外部样式表的文件名称是要嵌入的样式表文件名称,后缀 为.css; – CSS文件一定是纯文本格式; – 在修改外部样式表时,引用它的所有外部页面也会自动地更新; – 外部样式表中的URL相对于样式表文件在服务器上的位置; – 外部样式表优先级低于内部样式表; – 可以同时链接几个样式表,靠后的样式表优先于靠前的样式表。 链接外部样式表<!--程序10-5--><html><head><title>嵌入外部样式表</title><link rel="stylesheet" type="text/css" href="/style.css"></head><body><p class=p1>此行文字被style属性定义为蓝色显示</p><p>此行文字没有被style属性定义</p></body></html> 10.3 定义选择符l 选择符决定了格式化将应用于哪些元素。最简单 的选择符可以对给定类型的所有元素进行格式化, 更复杂的选择符可以根据元素的class或id、上下 文、状态等来应用格式化规则。 按照名称选择元素l 选择要格式化的元素最常用的标准可能是元素的 名称或类型。例如,可以让所有p元素显示为红色、 且大小为16像素。l 下面的示例中除非指定其他情况,指定类型的所 有元素(这里是标记p)都将被格式化。 <style type="text/css"> p{font-size:16px; color:red;} </style> 按照id和class选择元素 l 如果已经在页面元素中标识了id或class属性,那 么就可以在选择器定义中使用,从而对被标识的 元素进行格式化。 按照id和class选择元素基本语法<style type="text/css"><!--#idname{样式属性:属性值;样式属性:属性值;......}.classname{样式属性:属性值;样式属性:属性值;......}--></style>或者<style type="text/css"><!--HTML标记.classname1{样式属性:属性值;样式属性:属性值;......}HTML标记.classname2{样式属性:属性值;样式属性:属性值;......}--></style> l 语法说明 – 可以单独使用classname和idname选择器,也可以与其 他选择器标准一起使用。例如,“.news{colo
关 键 词:
第10章网页设计1 ppt、pptx格式 免费阅读 下载 剑锋文库
 剑锋文库所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
关于本文
本文标题:第10章网页设计1
链接地址: //www.wenku365.com/p-43737663.html
关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服点击这里,给剑锋文库发消息,QQ:1290478887 - 联系我们

本站为“文档C2C交易模式”,即用户上传的文档直接卖给(下载)用户,本站只是中间服务平台,本站所有文档下载所得的收益归上传人(含作者)所有【成交的100%(原创)】。本站是网络服务平台方,若您的权利被侵害,侵权客服QQ:1290478887 欢迎举报。

1290478887@qq.com 2017-2027 //www.wenku365.com 网站版权所有

粤ICP备19057495号 

收起
展开