第 12 章层叠样式表 CSS

第12章层叠样式表CSS

概述 • 介绍样式表的基本概念 • CSS1 • CSS2 • 介绍5种使用CSS的方法

1.样式表 • 是放置在网页HEAD部分的格式指令的集合 • 使用样式可以改变HTML多个元素外观 • 允许改变单一文件能改变整个网站的外观 • 通过改变样式表可以改变网站的外观 • 样式表最重要的目标是将文件的内容与它的显示分隔开来 • CSS可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制 • W3C Recommendation for HTML 3.2开始支持样式表 3

2.层叠样式表 CSS • 在一个单一文件中使用多个样式定义，用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的标记语言。 • Cascading（层叠）指的是继承或者在链接的、导入的、内嵌的以及内联样式之间的等级关系。 • 在同一个文档中，区域样式(SPAN)格式定义优于样式表定义。 • CSS可用在<p><td><font><body><span>等标签里 4

3.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> 5

4.CSS基本语法 6

5.CSS的class和id示例 <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> 7

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> 一个CSS文件 8

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

7.导入样式信息：仅适于IE <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> 10

8.内部样式：<head>内部定义，只对所在的网页有效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> 11

9.内嵌样式：混合在HTML标记里，只对所在的标记有效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> 12

10.CSS的区域样式优于CSS示例 <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> 13

11.样式继承 • 继承是将样式定义从父元素传递给其他元素的原则 • 所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式“叠加”在一起，当样式表继承遇到冲突时，总是以最后定义的样式为准。 • 样式的优先级依次是区域样式、内嵌样式、内部样式、外部样式、浏览器缺省。 14

12.CSS框模型 • #box { width: 70px; margin: 10px; padding: 5px;} 15

13.CSS定位 • 相对定位和绝对定位 • 相对定位是指允许元素在相对于文档布局的原始位置上进行偏移；而绝对定位允许元素与原始的文档布局分离且任意定位。 • 定位属性有position、left、top、width、height、overflow、z-index和visibility等 • CSS定义：.left20 {position:relative;left:20px;} • HTML：<p>左侧顶格内容</p><p class="left20" >相对坐标，离左侧正常位置20像素</p> 16

14.CSS定位示例 <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> 17

第12章小结 • 介绍样式表的基本概念 • CSS1 • CSS2 • 介绍5种使用CSS的方法

第12章思考问题 结束 12.1 什么是层叠样式表CSS? 12.2 为什么在网页设计中引入CSS技术？ 12.5 层叠样式表中的“层叠”含义是什么？ 12.7 CSS定义中class和id两种方式有什么区别？ 12.9 样式表的叠加规则是什么？

第 12 章 层叠样式表 CSS