层次样式表(CSS)
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
• Cascading Styles Sheet • 1996年提出了第一个版本，也是目前主流支持的规范 • 1998年提出了第二个版本，可以实现XML的转换和样
式化，增加了特定媒体的风格单
• CSS3 • 便于对文档样式进行修改、便于维护多个文档以统一
的样式、使HTML文档更简洁,更易于维护、使文档可 以方便运行于不同媒体设备上等
<title>example for embeded css</title>
<style type="text/css">
<!--
/*This is h1 element's style*/
h1{font-size:12pt; color:red}
-->
</style>
</head>
<body>
<h1>This is H1 element</h1>
2021/2/11
4
XHTML与样式表Fra Baidu bibliotek合的三种方法
• 外部式样式表（External style sheet,又称 链接样式表）
• 内嵌式样式表（Embedded style sheet ) • 行内样式表（Inline style，又称内联样式
表）
2021/2/11
5
外部式样式表
• 外部样式表合适作为文档模板,同时供一 系列XHTML文档共用。
• 使用外部式样式表时，我们将样式表保 存在一个后缀名为.css的单独文本文件中
/* This is the style sheet to be linked */ p {color:red; } h1{color:green;}
2021/2/11
6
XHMTL代码
<html> <head> <title>example for external css</title> <link style="text/css" rel="stylesheet"
• 两个不同元素可能有着相同的样式表
– h1,p{font-size:12pt;fontweight:bold;color:red}
• 有时某个元素的若干样式特性都跟某类 样式如字体有关
– p{font: bold 20pt; }
2021/2/11
13
• <html> • <head> • <title>example for style composition</title> • <style type="text/css"> • <!-• /*This is h1&p element's style*/ • h1,p{font-size:12pt;font-weight:bold;color:red} • --> • </style> • </head> • <body> • <h1>This is H1 element</h1> • <p>Let's see the effective of css</p> • </body> • </html>
应用系统开发导论
层次样式表（CSS）
2021/2/11
1
内容
• CCS基础 • XHTML和CSS结合的方式 • CSS的高级语法 • CSS的特性举例 • 小结
2021/2/11
2
层次样式表的起源和优点
• 在最初版本的HTML中并不提供任何样式控制能力,它 只是标明文档成分的功能，
• 1995年晚期，W3C提出了CSS作为所有这些问题的解 决方案。
element</h1> • <p>Let's see the effective of css</p> • </body> • </html>
2021/2/11
11
层次样式表高级语法
• 样式表的组合 • 带上下文的样式表 • 样式类 • 样式表的继承和覆盖
2021/2/11
12
样式表的组合
• 样式表的组合可以分为针对多个元素组 合样式表和使用某些特性来组合样式表 两类
2021/2/11
3
层次样式表基本语法
Selector
Property list separated by semicolons
p {font-size: 12pt; font-style: italic; color: green}
Colon Property
Property value
• 还可以添加注释文本,注释文本须放置在/* 和*/之间。
• <h1 style="font-size:12pt;color:red">This is H1 element</h1>
2021/2/11
10
• <html> • <head> • <title>example for inline css</title> • </head> • <body> • <h1 style="font-size:12pt;color:red">This is H1
此时需将style元素的type元素设置为 “text/css”
<style type="text/css"> <!-/*This is h1 element's style*/ h1{font-size:12pt; color:red} --> </style>
2021/2/11
8
<html>
<head>
<p>Let's see the effective of css</p>
</body>
</html>
2021/2/11
9
行内样式表
• 行内样式表可用于将某个具体的元素定义为 一个与其他不同的样式,但是由于其损害了样 式表的优点，所以一般不推荐使用。
• 行内样式表将样式表内容作为XHTML元素 的通用属性style的属性值。
href="css/mystyle.css"> </head> <body> <h1>This is H1 element</h1> <p>Let's see the effective of css</p> </body> </html>
2021/2/11
7
内嵌式样式表
• 只是一个页面使用style • 需要将样式表放置与head元素的style子元素中。
2021/2/11
14
• <html> • <head> • <title>example for style composition 2</title> • <style type="text/css"> • <!-• /*This is h1&p element's style*/ • p{font: bold 20pt;color:red} • --> • </style> • </head> • <body> • <h1>This is H1 element</h1> • <p>Let's see the effective of css</p> • </body> • </html>
式化，增加了特定媒体的风格单
• CSS3 • 便于对文档样式进行修改、便于维护多个文档以统一
的样式、使HTML文档更简洁,更易于维护、使文档可 以方便运行于不同媒体设备上等
<title>example for embeded css</title>
<style type="text/css">
<!--
/*This is h1 element's style*/
h1{font-size:12pt; color:red}
-->
</style>
</head>
<body>
<h1>This is H1 element</h1>
2021/2/11
4
XHTML与样式表Fra Baidu bibliotek合的三种方法
• 外部式样式表（External style sheet,又称 链接样式表）
• 内嵌式样式表（Embedded style sheet ) • 行内样式表（Inline style，又称内联样式
表）
2021/2/11
5
外部式样式表
• 外部样式表合适作为文档模板,同时供一 系列XHTML文档共用。
• 使用外部式样式表时，我们将样式表保 存在一个后缀名为.css的单独文本文件中
/* This is the style sheet to be linked */ p {color:red; } h1{color:green;}
2021/2/11
6
XHMTL代码
<html> <head> <title>example for external css</title> <link style="text/css" rel="stylesheet"
• 两个不同元素可能有着相同的样式表
– h1,p{font-size:12pt;fontweight:bold;color:red}
• 有时某个元素的若干样式特性都跟某类 样式如字体有关
– p{font: bold 20pt; }
2021/2/11
13
• <html> • <head> • <title>example for style composition</title> • <style type="text/css"> • <!-• /*This is h1&p element's style*/ • h1,p{font-size:12pt;font-weight:bold;color:red} • --> • </style> • </head> • <body> • <h1>This is H1 element</h1> • <p>Let's see the effective of css</p> • </body> • </html>
应用系统开发导论
层次样式表（CSS）
2021/2/11
1
内容
• CCS基础 • XHTML和CSS结合的方式 • CSS的高级语法 • CSS的特性举例 • 小结
2021/2/11
2
层次样式表的起源和优点
• 在最初版本的HTML中并不提供任何样式控制能力,它 只是标明文档成分的功能，
• 1995年晚期，W3C提出了CSS作为所有这些问题的解 决方案。
element</h1> • <p>Let's see the effective of css</p> • </body> • </html>
2021/2/11
11
层次样式表高级语法
• 样式表的组合 • 带上下文的样式表 • 样式类 • 样式表的继承和覆盖
2021/2/11
12
样式表的组合
• 样式表的组合可以分为针对多个元素组 合样式表和使用某些特性来组合样式表 两类
2021/2/11
3
层次样式表基本语法
Selector
Property list separated by semicolons
p {font-size: 12pt; font-style: italic; color: green}
Colon Property
Property value
• 还可以添加注释文本,注释文本须放置在/* 和*/之间。
• <h1 style="font-size:12pt;color:red">This is H1 element</h1>
2021/2/11
10
• <html> • <head> • <title>example for inline css</title> • </head> • <body> • <h1 style="font-size:12pt;color:red">This is H1
此时需将style元素的type元素设置为 “text/css”
<style type="text/css"> <!-/*This is h1 element's style*/ h1{font-size:12pt; color:red} --> </style>
2021/2/11
8
<html>
<head>
<p>Let's see the effective of css</p>
</body>
</html>
2021/2/11
9
行内样式表
• 行内样式表可用于将某个具体的元素定义为 一个与其他不同的样式,但是由于其损害了样 式表的优点，所以一般不推荐使用。
• 行内样式表将样式表内容作为XHTML元素 的通用属性style的属性值。
href="css/mystyle.css"> </head> <body> <h1>This is H1 element</h1> <p>Let's see the effective of css</p> </body> </html>
2021/2/11
7
内嵌式样式表
• 只是一个页面使用style • 需要将样式表放置与head元素的style子元素中。
2021/2/11
14
• <html> • <head> • <title>example for style composition 2</title> • <style type="text/css"> • <!-• /*This is h1&p element's style*/ • p{font: bold 20pt;color:red} • --> • </style> • </head> • <body> • <h1>This is H1 element</h1> • <p>Let's see the effective of css</p> • </body> • </html>