第 12 章层叠样式表 css

《网站设计与建设》

普通高等教育“十一五”国家级规划教材重点大学计算机专业系列教材

山东大学计算机科学与技术学院

第 12 章层叠样式表 CSS




2

介绍样式表的基本概念CSS1CSS2介绍5 种使用 CSS的方法

概述概述




3

1.1. 样式表样式表

是放置在网页 HEAD部分的格式指令的集合

使用样式可以改变 HTML多个元素外观允许改变单一文件能改变整个网站的外观通过改变样式表可以改变网站的外观样式表最重要的目标是将文件的内容与它

的显示分隔开来 CSS可以有效地对页面的布局、字体、颜

色、背景和其它效果实现更加精确的控制 W3C Recommendation for HTML 3.2开始支持样式表




4

2.2. 层叠样式表层叠样式表 CSSCSS 在一个单一文件中使用多个样式定义，用

来为结构化文档 ( 如 HTML文档或 XML应用 ) 添加样式 ( 字体、间距和颜色等 ) 的标记语言。

Cascading（层叠）指的是继承或者在链接的、导入的、内嵌的以及内联样式之间的等级关系。

在同一个文档中，区域样式 (SPAN)格式定义优于样式表定义。

CSS可用在<p><td><font><body><span>等标签里

5

3.CSS3.CSS 的一个简单实例的一个简单实例<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> 一个简单 CSS 示例演示 </title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css">  </style> </head> <body> <h1><a href="http://www.sdu.edu.cn"> 这是标题 1</a></h1> <h2> 这是标题 2</h2> <h3 style="display:none"> 这是标题 3</h3> <h4> 这是标题 4</h4> </body> </html>




6

4.CSS4.CSS 基本语法基本语法

7

5.CSS5.CSS 的的 classclass 和和 idid 示例示例<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS 的 class 和 id 示例演示 </title> <style type="text/css">  </style> </head> <body> <h1 class="title"> 这是页面最上端的标题 </h1> <h1 id="navi"> 这是页面左侧标题，用来导航 </h1> <h1 class="news"> 这是页面新闻的标题 </h1> <p class="news"> 这是引用未定义的 CSS 样式：新闻的内容 </p> <p class="MyNews"> 这是引用自定义的 CSS 样式：新闻的内容 </p> </body> </html>




8

6.6. 链接外部样式表链接外部样式表<html><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>CSS 的链入外部样式表示例 </title> <link rel="stylesheet" type="text/css" href="sample-1203.css"> </head><body>CSS 的链入外部样式表示例 (body 背景图 )<h2>CSS h2 ：网站规划与网页设计 </h2><p>CSS P ：网站设计与建设 </p><p class="myh2">myh2 网站规划与网页设计 </p></body></html>

一个一个 CSSCSS 文文件件

9

6.6. 链接外部样式表链接外部样式表 ------ 续续 sample-sample-1203.css1203.css<style type="text/css"></style>




10

7.7. 导入样式信息：仅适于导入样式信息：仅适于 IEIE<html><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>CSS 的链入外部样式表示例 </title> <style type="text/css"> @import url("sample-1203.css"); </style></head><body>CSS 的链入外部样式表示例 (body 背景图 )<h2>CSS h2 ：网站规划与网页设计 </h2><p>CSS P ：网站设计与建设 </p><p class="myh2">myh2 网站规划与网页设计 </p></body></html>

11

8.8. 内部样式：内部样式： <head> 内部定义，只对所在的网页有效<html>

<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>CSS 内部样式示例 </title> <style type="text/css">  </style></head><body>CSS 的链入外部样式表示例 (body 背景图 )<h2>CSS h2 ：网站规划与网页设计 </h2><p>CSS P ：网站设计与建设 </p><p class="myh2">myh2 网站规划与网页设计 </p></body></html>

12

9.9. 内嵌样式：内嵌样式：混合在 HTML 标记里，只对所在的标记有效<html>

<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>CSS 内嵌样式表示例 </title> <style type="text/css">  </style></head><body>CSS 的链入外部样式表示例 (body 背景图 )<h2>CSS h2 ：网站规划与网页设计 </h2><p style="color:blue;font-size:16">CSS P ：网站设计与建设 </p><p class="myh2">myh2 网站规划与网页设计 </p></body></html>

13

<html><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>CSS 区域样式示例 </title> <style type="text/css">  </style></head><body>CSS 的链入外部样式表示例 (body 背景图 )<h2>CSS h2 ：网站规划与网页设计 </h2><p style="color:blue;font-size:16"> <span style="background-color:#ff0000;color:yellow;"> CSS P ：网站设计与建设 </span></p><p class="myh2"> myh2 网站规划与网页设计 </p></body></html>

10.CSS10.CSS 的区域样式优于的区域样式优于 CSSCSS 示例示例




14

11.11. 样式继承样式继承继承是将样式定义从父元素传递给其他

元素的原则所有在元素中嵌套的元素都会继承外层

元素指定的属性值，有时会把很多层嵌套的样式“叠加”在一起，当样式表继承遇到冲突时，总是以最后定义的样式为准。

样式的优先级依次是区域样式、内嵌样式、内部样式、外部样式、浏览器缺省。




15

12.12. CSSCSS 框模型框模型 #box { width: 70px; margin: 10px; padding: 5px;}




16

13.13. CSSCSS 定位定位相对定位和绝对定位相对定位是指允许元素在相对于文档布局的原始

位置上进行偏移；而绝对定位允许元素与原始的文档布局分离且任意定位。

定位属性有 position、 left、 top、 width、height、 overflow、 z-index和visibility等

CSS定义： .left20 {position:relative;left:20px;}

HTML： <p>左侧顶格内容 </p><p class="left20" >相对坐标，离左侧正常位置 20像素 </p>

17

14.14. CSSCSS 定位示例定位示例<html><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>CSS定位示例 </title> <style type="text/css">  </style></head><body> <div id="logo"> <a href="http://www.sdu.edu.cn" id="logoLink"></a> </div> </body></html>




18

第 12 章小结

介绍样式表的基本概念介绍样式表的基本概念CSS1CSS1CSS2CSS2介绍介绍 55 种使用种使用 CSSCSS 的的

方法方法




19

第 12 章思考问题

结束

12.1 什么是层叠样式表 CSS?

12.2 为什么在网页设计中引入 CSS技术？12.5 层叠样式表中的“层叠”含义是什么？12.7 CSS定义中 class和 id两种方式有什么

区别？12.9 样式表的叠加规则是什么？

第 12 章 层叠样式表 css

Documents

第 12 章层叠样式表 css