6.1 CSS基础 课件 -2022-2023学年高一下学期（中职）《网页设计与制作》（机械工业出版社）

网页设计与制作 第六章 CSS样式表 样式表的应用非常广泛，通过定义样式表，可以对页面中的元素进行美化，是美化网页的重要手段之一。Dreamweaver CS5.5支持强大的样式表定义，通过样式表的编辑功能，可以方便快捷地为网页定义各种各样的样式。 6.1 CSS基础 6.1.1 CSS简介 CSS的全称是“Cascading Styles Sheets”，中文称层叠样式表，简称样式表。用于控制网页样式并允许将样式与网页内容分离的一种标记性语言。CSS是1996年由W3C审核通过，并推荐使用的。CSS可将网页的内容与表现形式分开，使网页的外观设计从网页内容中独立开来。若要改变网页的外观，只需更改CSS样式。 6.1 CSS基础 6.1.1 CSS简介 CSS可谓是网页设计的一个突破，它解决了网页界面排版的难题。CSS作为当前网页设计中的热门技术，具有以下优势： 将格式和内容分离； 增强控制页面布局的能力； 精简网页，提高下载速度； 维护和更新网页更加容易； 代码兼容性好； 更有利于搜索引擎的搜索。 6.1 CSS基础 6.1.2在HTML页面中引入CSS的方法 CSS提供了四种在HTML页面中插入样式表的方法：链入外部样式表、内部样式表、导入外表样式表和内嵌样式。 1．链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用<link>标签链接到这个样式表文件，这个<link>标签必须放到页面的<head>区内: <head> …… <link rel="stylesheet“ type="text/css“ href="mystyle.css"> …… </head> 6.1 CSS基础 6.1.2在HTML页面中引入CSS的方法 上面这段代码表示浏览器从mystyle.css文件中以文档格式读出定义的样式表。rel=“stylesheet”是指在页面中使用这个外部的样式表。type=“text/css”是指文件的类型是样式表文本。href=“mystyle.css”是文件所在的位置，一般使用相对路径来引用外部CSS文件。 6.1 CSS基础 6.1.2在HTML页面中引入CSS的方法 一个外部样式表文件可以应用于多个页面。当改变这个样式表文件时，所有引用该样式表的HTML页面都将受到影响。在制作大量相同样式页面的网站时，使用链入外部样式表的方式控制多个页面非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑，浏览这些网页时也减少了重复代码的下载。 6.1 CSS基础 6.1.2在HTML页面中引入CSS的方法 样式表文件可以用任何文本编辑器（如记事本）打开并编辑，一般样式表文件的扩展名为“.css”。样式表文件中不包含HTML标记，mystyle.css这个文件的内容如下： hr {color:red} p {margin-left:20px} body{background-image:url("images/bg_01.jpg")} （定义水平线的颜色为红色；段落左边的空白边距为20象素；页面的背景图片为images目录下的bg_01.jpg文件。） 6.1 CSS基础 6.1.2在HTML页面中引入CSS的方法 2．内部样式表 内部样式表是把样式表放到页面的<head>区里，这些定义的样式就应用到页面中了，样式表是用<style>标记插入的: <head> …… <style type="text/css"> hr {color:red} p {margin-left:20px} body {background-image:url("images/bg_01.jpg")} </style> …… </head> 6.1 CSS基础 6.1.2在HTML页面中引入CSS的方法 3．导入外部样式表 导入外部样式表是指在内部样式表的<style>里试用@import导入一个外部样式表: <head> …… <style type=”text/css”> <!-- @import “mystyle.css” 其他样式表的声明 --> </style> …… </head> 6.1 CSS基础 6.1.2在HTML页面中引入CSS的方法 3．导入外部样式表 其中@import “mystyle.css”表示导入mystyle.css样式表，注意外部样式表的路径。方法和链入样式表的方法很相似，但导入外部样式表方式更有优势。实质上它相当于存在内部样式表中的。 6.1 CSS基础 6.1.2在HTML