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