层次样式表(CSS)演示教学
层次样式表(CSS)
层次样式表的起源和优点
• 在最初版本的HTML中并不提供任何样式控制能力， 它只是标明文档成分的功能，
• 1995年晚期，W3C提出了CSS作为所有这些问题的解 决方案。
• Cascading Styles Sheet • 1996年提出了第一个版本，也是目前主流支持的规范 • 1998年提出了第二个版本，可以实现XML的转换和样
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>
8
行内样式表
• 行内样式表可用于将某个具体的元素定义为 一个与其他不同的样式，但是由于其损害了 样式表的优点，所以一般不推荐使用。
• 行内样式表将样式表内容作为XHTML元素 的通用属性style的属性值。
• <h1 style="font-size:12pt;color:red">This is H1 element</h1>
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>
Colon Property
Property value
• 还可以添加注释文本，注释文本须放置在 /*和*/之间。
3Leabharlann XHTML与样式表结合的三种方法
• 外部式样式表（External style sheet，又 称链接样式表）
• 内嵌式样式表（Embedded style sheet ) • 行内样式表（Inline style，又称内联样式
表）
4
外部式样式表
• 外部样式表合适作为文档模板，同时供 一系列XHTML文档共用。
• 使用外部式样式表时，我们将样式表保 存在一个后缀名为.css的单独文本文件中
/* This is the style sheet to be linked */ p {color:red; } h1{color:green;}
10
层次样式表高级语法
• 样式表的组合 • 带上下文的样式表 • 样式类 • 样式表的继承和覆盖
11
样式表的组合
• 样式表的组合可以分为针对多个元素组 合样式表和使用某些特性来组合样式表 两类
• 两个不同元素可能有着相同的样式表
– h1,p{font-size:12pt;fontweight:bold;color:red}
式化，增加了特定媒体的风格单 • CSS3 • 便于对文档样式进行修改、便于维护多个文档以统一
的样式、使HTML文档更简洁,更易于维护、使文档可 以方便运行于不同媒体设备上等
2
层次样式表基本语法
Selector
Property list separated by semicolons
p {font-size: 12pt; font-style: italic; color: green}
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>
13
• <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>
层次样式表的起源和优点
• 在最初版本的HTML中并不提供任何样式控制能力， 它只是标明文档成分的功能，
• 1995年晚期，W3C提出了CSS作为所有这些问题的解 决方案。
• Cascading Styles Sheet • 1996年提出了第一个版本，也是目前主流支持的规范 • 1998年提出了第二个版本，可以实现XML的转换和样
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>
8
行内样式表
• 行内样式表可用于将某个具体的元素定义为 一个与其他不同的样式，但是由于其损害了 样式表的优点，所以一般不推荐使用。
• 行内样式表将样式表内容作为XHTML元素 的通用属性style的属性值。
• <h1 style="font-size:12pt;color:red">This is H1 element</h1>
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>
Colon Property
Property value
• 还可以添加注释文本，注释文本须放置在 /*和*/之间。
3Leabharlann XHTML与样式表结合的三种方法
• 外部式样式表（External style sheet，又 称链接样式表）
• 内嵌式样式表（Embedded style sheet ) • 行内样式表（Inline style，又称内联样式
表）
4
外部式样式表
• 外部样式表合适作为文档模板，同时供 一系列XHTML文档共用。
• 使用外部式样式表时，我们将样式表保 存在一个后缀名为.css的单独文本文件中
/* This is the style sheet to be linked */ p {color:red; } h1{color:green;}
10
层次样式表高级语法
• 样式表的组合 • 带上下文的样式表 • 样式类 • 样式表的继承和覆盖
11
样式表的组合
• 样式表的组合可以分为针对多个元素组 合样式表和使用某些特性来组合样式表 两类
• 两个不同元素可能有着相同的样式表
– h1,p{font-size:12pt;fontweight:bold;color:red}
式化，增加了特定媒体的风格单 • CSS3 • 便于对文档样式进行修改、便于维护多个文档以统一
的样式、使HTML文档更简洁,更易于维护、使文档可 以方便运行于不同媒体设备上等
2
层次样式表基本语法
Selector
Property list separated by semicolons
p {font-size: 12pt; font-style: italic; color: green}
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>
13
• <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>
合集下载
CSS的样式PPT课件
知识点精讲
知识点分析 CSS文字样式的常用属性 设置字体： 基本语法为font-family:字体1，字体2，字体3。 例如：h1{font-family:宋体，楷体，隶书;}。 设置文字大小 基本语法为font-size:尺寸|百分比|关键字。 设置斜体 基本语法为font-style:normal|italic|oblique。 设置文字粗细 基本语法为font-weight:normal|bold|bolder|lighter|number。 设置变体 基本语法为font-variant:normal|small-caps。
网站建设与管理
CSS的样式
考纲解读
1 掌握CSS的基础知识。 2 掌握CSS的属性。
考点解读
重难点分析：CSS样式表、样式选择器及CSS的属性。
知识点精讲
知识点1 CSS的基础知识 例题精讲 请输入正确的代码
【解析】外部链接样式表的声明方法为<link rel=″stylesheet″ type=″text/css″ href=″样式 表文件的地址″>
知识点精讲
巩固提高
在Dreamweaver软件中，给网站首页设置“页面属性”的具体要求如下:
网站首页中文字大小设置为12 px，文字颜色设置为“#000”。
设置网页背景颜色为“#CCC”。 设置“链接（CSS） ”中“下划线样式”为“始终无下划线”。 设置“链接（CSS）”中“链接颜色”为“#000”。 下面是网站首页的部分源代码，请从选项A~N中将正确的内容填入相应位置。
知识点精讲
CSS段落和其他文字样式属性 修饰文字 基本语法为text-decoration:underline|overline|line-through|blink|none。 设置段落的水平对齐方式 基本语法为text-align:left|right|left|justify。 颜色及背景 设置文字颜色 基本语法为color：颜色的名称|RGB值|十六进制数。 设置背景 基本语法为background:背景颜色|背景图像|背景重复|背景附件|背景位置。 设置背景颜色属性 基本语法为background-color:颜色|transparent（透明）。 设置背景图像属性 基本语法为background-image:url（背景图片的路径和名称）。
Adobe_Dreamweaver教程课件_第6章_CSS样式表.pptx
6.3.5 利用有关链接的样式表修改链接的格式
a:link——定义了链接文字的样式。 a:visited——浏览者已经访问过的链接样式。 a:hover ——定义了鼠标悬浮在链接文字上时的样式。 a:active ——定义链接被激活时的样式，即鼠标已经单击 了链接，但页面还没有跳转时 。
6.3.6 控制页面背景图像的样式
（1）【类（可应用于任何标签）】 （2）【标签（重新定义特定标签的外观）】 （3）【高级（ID、伪类选择器等）】
在这个文本框中输入CSS规则名称。根据所选择的“选择器类型”的不同， 这里可以输入或者选择 不同的名称。
6.2.2 在网页中应用样式
1．在【属性】面板选择应用样式 2．利用【标签选择器】选择样式
网页中经常会有一些特殊段落，比如程序代码等，为了让这些特 殊段落和其他段落区分开来，本小节再定义一个特殊段落的样式。
6.1 CSS样式表基础
6.1.1 认识CSS
CSS是Cascading Style Sheets（层叠样式表）
的简称
1．CSS样式的类型(选择器的类型)
➢ 类样式：（可应用于页面任何标签）。
➢ HTML标签样式：重定义HTML标签样式。 ➢ 高级样式：（重新定义特定元素组合的格式，
➢ 内联样式表 ➢ 外部样式表
类别视图
样式表文件名 CSS规则列表
属性和属性值 列表
工具按钮栏
6.2 新建CSS规则和应用CSS样式
6.2.1 定义样式表选项
在【CSS样式】面板 上，单击【新建CSS
规则】按钮，打开 【新建CSS规则】对
话框。
1．【定义在】选项
（1）【新建样式表文件】 （2）【仅对该文档】
2．【选择器类型】选项 3． 【名称】文本框
第一讲CSS层叠样式表ppt课件
•语法解释： • dropshadow：用于设置对象的
阴影效果。它是经过以下参数来实 现阴影效果的设置：
• 1〕color：设置阴影颜色 • 2〕offx：阴影相对于原始对象的
程度位置
• 3〕offy：阴影相对于原始对象的
• dropshadow滤镜例如
img{ filter:dropshadow
• 语法解释：
• alpha：用于把一个目的元素与背景
混合，即设置元素的透明度。它是经 过以下参数来实现透明度的设置：
• 1〕opacity：设置透明度的程度。取
值范围为 0~100，0代表完全透明， 100代表完全不透明
• 2〕finishopacity：用于设置渐变终
了时的透明度
•Alpha滤镜例如
浮动与清除属性
区块定位之浮动与去除属性例如
• 6. CSS层
– 在使用元素定位时，从可视角度讲，不可避免地 会发生两个元素试图同时出现于同一位置的情况。 显示其中一个就会覆盖另外一个。
– 如果将网页的二维空间延伸到三维空间，就会解 决上述元素覆盖问题。
–在坐标系中，通过增加z-轴，可使用二维空间的变 为三维空间。
true
• direction：用于设置模糊的方向。
其中0度代表垂直向上，然后每45 度为一个单位，默许值是向左的 270度
•Blur滤镜例如
img{ filter:blur(strength=10); }
FlipH、FlipV滤镜
•根本语法： • {Filter:filph} • {Filter:filpv} •语法解释： • filph：设置程度翻转 • filpv：设置垂直翻转
方式
1.1 CSS概述
CSS教学课件PPT
20
CSS Float(浮动)
什么是 CSS Float（浮动）？
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。 Float（浮动），往往是用于图像，但它在布局时一样非常有用。 元素怎样浮动 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动元素之后的元素将围绕它。 浮动元素之前的元素将不会受到影响。 彼此相邻的浮动元素 如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。 清除浮动 - 使用 clear 元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。 clear 属性指定元素两侧不能出现浮动元素。
padding-top:25px;
padding:25px 50px 75px 100px;
padding-bottom:25px;
padding:25px 50px 75px;
padding-right:50px;
padding:25px 50px;
padding-left:50px;
padding:25px;
CSS 图像透明/不透明 使用CSS很容易创建透明的图像。 CSS3中属性的透明度是 opacity。 首先，我们将向您展示如何用CSS创建一个透明图像。
img { opacity:0.4; filter:alpha(opacity=40); /* IE8 及其更早版本 */ }
img { opacity:0.4; filter:alpha(opacity=40); /* IE8 及其更早版本 */ } img:hover { opacity:1.0; filter:alpha(opacity=100); /* IE8 及其更早版本 */ }
CSS Float(浮动)
什么是 CSS Float（浮动）？
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。 Float（浮动），往往是用于图像，但它在布局时一样非常有用。 元素怎样浮动 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动元素之后的元素将围绕它。 浮动元素之前的元素将不会受到影响。 彼此相邻的浮动元素 如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。 清除浮动 - 使用 clear 元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。 clear 属性指定元素两侧不能出现浮动元素。
padding-top:25px;
padding:25px 50px 75px 100px;
padding-bottom:25px;
padding:25px 50px 75px;
padding-right:50px;
padding:25px 50px;
padding-left:50px;
padding:25px;
CSS 图像透明/不透明 使用CSS很容易创建透明的图像。 CSS3中属性的透明度是 opacity。 首先，我们将向您展示如何用CSS创建一个透明图像。
img { opacity:0.4; filter:alpha(opacity=40); /* IE8 及其更早版本 */ }
img { opacity:0.4; filter:alpha(opacity=40); /* IE8 及其更早版本 */ } img:hover { opacity:1.0; filter:alpha(opacity=100); /* IE8 及其更早版本 */ }
网页设计基础教程与上机指导使用CSS样式表PPT课件
• 在【CSS样式】面板的底部排列有几 个按钮，分别如下。
• 【附加样式表】：在HTML文档中链接 一个外部CSS文件。
• 【新建CSS样式】：创建新的CSS样式 文件。
• 【编辑样式表】：编辑原有的CSS规则。
• 【删除CSS样式】：删除选中已有的 CSS规则
第4页/共18页
8.1.3 创建新的CSS样式 • 在Dreamweaver中，可以创建自己的CSS样式来自动格式化HTML标签
第10页/共18页
8.2.2 设置CSS样式的背景 • 在【分类】列表框中选择【背景】选项，背景属性的功能主要是在网页的
元素后面加入固定的背景颜色或图像。 • 在CSS【背景】选项中可以进行如下设置。
• 【背景颜色】：设置元素的背景颜色。 • 【背景图像】：设置元素的背景图像。 • 【重复】：确定是否以及如何重复背景图像，包含四个选项。【不重复】表示在元
素开始处显示一次图像；【重复】表示在元素的后面水平和垂直平铺图像；【横向 重复】和【纵向重复】分别表示显示图像的水平带区和垂直带区，图像被剪辑以适 合元素的边界。 • 【附件】：设置背景图像是固定在它的原始位置还是随内容一起滚动。 • 【水平位置】和【垂直位置】：指定背景图像相对于元素的初始位置，这可以用于 将背景图像与页面中心垂直和水平对齐，如果附件属性为【固定】，则位置相对于 【文档】窗口而不是元素。
• 2. 链接外部样式表 • 外部样式表是包含了样式格式信息的一个单独的文件，编辑外部CSS样式表时，链接到
该CSS样式表的所有文档会全部更新以反映所做的样式编辑，链接外部样式表的具体操 作步骤如下。
• (1) 在【CSS样式】面板中单击【附加样式表】按钮，弹出【链接外部样式表】对话框。 • (2) 单击对话框中的【文件URL】文本框后面的【浏览】按钮，弹出【选择样式表文件】对
• 【附加样式表】：在HTML文档中链接 一个外部CSS文件。
• 【新建CSS样式】：创建新的CSS样式 文件。
• 【编辑样式表】：编辑原有的CSS规则。
• 【删除CSS样式】：删除选中已有的 CSS规则
第4页/共18页
8.1.3 创建新的CSS样式 • 在Dreamweaver中，可以创建自己的CSS样式来自动格式化HTML标签
第10页/共18页
8.2.2 设置CSS样式的背景 • 在【分类】列表框中选择【背景】选项，背景属性的功能主要是在网页的
元素后面加入固定的背景颜色或图像。 • 在CSS【背景】选项中可以进行如下设置。
• 【背景颜色】：设置元素的背景颜色。 • 【背景图像】：设置元素的背景图像。 • 【重复】：确定是否以及如何重复背景图像，包含四个选项。【不重复】表示在元
素开始处显示一次图像；【重复】表示在元素的后面水平和垂直平铺图像；【横向 重复】和【纵向重复】分别表示显示图像的水平带区和垂直带区，图像被剪辑以适 合元素的边界。 • 【附件】：设置背景图像是固定在它的原始位置还是随内容一起滚动。 • 【水平位置】和【垂直位置】：指定背景图像相对于元素的初始位置，这可以用于 将背景图像与页面中心垂直和水平对齐，如果附件属性为【固定】，则位置相对于 【文档】窗口而不是元素。
• 2. 链接外部样式表 • 外部样式表是包含了样式格式信息的一个单独的文件，编辑外部CSS样式表时，链接到
该CSS样式表的所有文档会全部更新以反映所做的样式编辑，链接外部样式表的具体操 作步骤如下。
• (1) 在【CSS样式】面板中单击【附加样式表】按钮，弹出【链接外部样式表】对话框。 • (2) 单击对话框中的【文件URL】文本框后面的【浏览】按钮，弹出【选择样式表文件】对
《CSS样式表》课件
Flex布局的应用
可以轻松实现一维布局，如水平或垂直排列元素。
Flex布局的注意事项
需了解弹性容器的属性如flex-direction、 flex-wrap和justify-content、align-items 等。
ห้องสมุดไป่ตู้rid布局
Grid布局原理
通过设置元素的display属性为grid或inline-grid，使元素成为一 个网格容器，子元素成为网格项目。
Grid布局的应用
可以轻松实现二维布局，如创建复杂的网页布局和响应式设计。
Grid布局的注意事项
需了解网格容器的属性如grid-template-columns、gridtemplate-rows和grid-auto-rows、grid-auto-columns等。
05
CSS动画与过渡
动画
动画定义
过渡
过渡定义
CSS过渡是一种在元素状态改变时实现平滑的动画效果的 方式，如鼠标悬停时元素颜色的渐变。
01
过渡属性
过渡具有多种属性，如过渡名称、持续 时间、延迟时间、过渡函数等，可以用 来控制过渡的表现形式。
02
03
过渡效果
CSS过渡可以实现多种效果，如颜色渐 变、位置移动、大小缩放等，可以用 来增强用户与网页的交互体验。
布局属性
如`margin`、`padding`、`border`等，用于设 置元素的外边距、内边距和边框。
ABCD
颜色属性
如`color`、`background-color`等，用于设置 元素的文本颜色和背景颜色。
动画属性
如`animation`、`transition`等，用于创建元素 的动画效果。
css教程ppt课件
字体选择
选择合适的颜色搭配可以使网页更加美观 和易于阅读，可以通过使用主题色、渐变 色、对比色等方法来增强视觉效果。
字体的选择对于网页的美观程度也有很大 影响，可以选择易读性强、美观大方的字 体，同时注意字体的跨平台兼容性。
图标和按钮
动画和过渡效果
使用简洁明了的图标和按钮可以增强页面 的交互性和美观度，可以通过使用矢量图 标库、自定义按钮样式等方法实现。
边框样式
使用`border-style`属性设置边框样式 ，如`border-style: solid;`。
列表样式
列表符号
使用`list-style-type`属性设置列表符 号类型，如`list-style-type: square;`
。
列表位置
使用`list-style-position`属性设置列 表符号位置，如`list-style-position:
适当的动画和过渡效果可以使网页更加生 动和有趣，可以通过使用CSS动画、 JavaScript库等方法实现。
THANK YOU
感谢各位观看
使用`background-position`属性设置 背景图片位置，如`backgroundposition: center;`。
边框样式
边框宽度
边框颜色
使用`border-width`属性设置边框宽 度，如`border-width: 2px;`。
使用`border-color`属性设置边框颜 色，如`border-color: #000000;`。
栅格系统
栅格系统是一种将网页布局划分为若干列的方法，根据屏 幕尺寸的不同，可以将内容区域分配到不同的列中，实现 自适应布局。
媒体查询
媒体查询是实现响应式布局的关键技术，通过使用CSS3 的媒体查询，可以根据设备的特性（如宽度、高度、方向 等）来应用不同的样式。
CSS样式表应用PPT教学课件
在网站建设中，往往希望网站的整体风格能够 一致，这就是外部样式表的主要应用目的
外部样式表并不是它们所适用的文档的一部分。 外部样式表单独存储，并且在所有使用它们的 文档中都要进行说明。
2020/12/10
12
外部样式表
可以用MIME类型text/css将外部样式表编写成一些文 本文件，它们可以存储在因特网上的任何一台计算机 中，浏览器获取外部样式表就如同获取文档一样。
2020/12/10
17
样式说明格式
<style>元素中的type属性向浏览器指明了在 <style>元素中样式说明的类型。
在上面这个例子中，type属性被设置成 “text/css‘’，即层叠样式表。
由于还有许多其他类型的样式表，因此样式说 明的类型还是必要的。
2020/12/10
18
样式说明格式
与元素属性的属性/值不同(在元素符属性的每 一对属性/值中，两个部分之间使用等号相分 隔，而所形成的列表使用双引号进行界定)；
在一个样式规则中，样式属性一值的各部分使 用冒号相分隔，而所形成的列表则出现在大括 弧之间。
2020/12/10
15
样式说明格式
内置样式说明的作用范围只限于所处元素中的 内容部分。
文档层样式说明在文档头部以一个<style>元 素内容的形式出现，该说明的格式与内置样式 表的格式有很大的区别。
2020/12/10
16
样式说明格式
在<style>元素中内容的一般形式如下：
<style type=”text/css”> <!-rule_list --> </style>
注意，<style>元素中的规则列表是出现在 HTML注释中的。
外部样式表并不是它们所适用的文档的一部分。 外部样式表单独存储，并且在所有使用它们的 文档中都要进行说明。
2020/12/10
12
外部样式表
可以用MIME类型text/css将外部样式表编写成一些文 本文件，它们可以存储在因特网上的任何一台计算机 中，浏览器获取外部样式表就如同获取文档一样。
2020/12/10
17
样式说明格式
<style>元素中的type属性向浏览器指明了在 <style>元素中样式说明的类型。
在上面这个例子中，type属性被设置成 “text/css‘’，即层叠样式表。
由于还有许多其他类型的样式表，因此样式说 明的类型还是必要的。
2020/12/10
18
样式说明格式
与元素属性的属性/值不同(在元素符属性的每 一对属性/值中，两个部分之间使用等号相分 隔，而所形成的列表使用双引号进行界定)；
在一个样式规则中，样式属性一值的各部分使 用冒号相分隔，而所形成的列表则出现在大括 弧之间。
2020/12/10
15
样式说明格式
内置样式说明的作用范围只限于所处元素中的 内容部分。
文档层样式说明在文档头部以一个<style>元 素内容的形式出现，该说明的格式与内置样式 表的格式有很大的区别。
2020/12/10
16
样式说明格式
在<style>元素中内容的一般形式如下：
<style type=”text/css”> <!-rule_list --> </style>
注意，<style>元素中的规则列表是出现在 HTML注释中的。
第6章 CSS层叠样式表2 标签选择器CSS和锚伪类CSS 课件
6.10
第6章 使用CSS层叠样式表
6.2 标签选择器规则和锚伪类规则的创建与应用
6.2.1 利用标签选择器规则与锚伪类规则美化“采蒲台的苇”网页
（6）创建锚伪类CSS规则 2）在“选择器”窗格中选择“a:link”选择器，选中导航中的文字“首页”，将“属性” 面板切换至CSS属性状态，可以看到“目标规则”中显示“a:link”规则。
（4）创建<td>标签选择器规则 1）添加选择器。点击菜单“窗口”→“CSS设计器”命令，打开“CSS设计器”面板。 选择“源”窗格中的源“css_file.css”，在“选择器”窗格中点击添加选择器图标 ，输入 选择器名称“td”。
6.5
第6章 使用CSS层叠样式表
6.2 标签选择器规则和锚伪类规则的创建与应用
6.7
第6章 使用CSS层叠样式表
6.2 标签选择器规则和锚伪类规则的创建与应用
6.2.1 利用标签选择器规则与锚伪类规则美化“采蒲台的苇”网页
（5）创建<body>标签选择器规则 2）在“选择器”窗格中选择“body”选择器，在“属性”窗格中点击布局图标 ，切换 到“布局”属性。设置“margin”为0px。 3）在“属性”窗格中点击背景图标 ，切换到“背景”属性，设置“background-image” 中的“url”为“../images/t1.gif”，即设置背景图片为“t1.gif”,也可以点击其后的文件夹 图标 ，选择“t1.gif”图片；设置“background-repeat”为 ，即设置背景重复。
6.2.1 利用标签选择器规则与锚伪类规则美化“采蒲台的苇”网页
（4）创建<td>标签选择器规则 2）在“选择器”窗格中选择“td”选择器，在“属性”窗格中点击文本图标 ，切换到 “文本”属性，将“font-family”设置为“宋体”、将“font-size”设置为“12px”、 “color”设置为“#333333”、“line-height”设置为“140%”。保存网页，预览，可以看 到原来没有应用CSS规则的文字发生的变化。
第6章 使用CSS层叠样式表
6.2 标签选择器规则和锚伪类规则的创建与应用
6.2.1 利用标签选择器规则与锚伪类规则美化“采蒲台的苇”网页
（6）创建锚伪类CSS规则 2）在“选择器”窗格中选择“a:link”选择器，选中导航中的文字“首页”，将“属性” 面板切换至CSS属性状态，可以看到“目标规则”中显示“a:link”规则。
（4）创建<td>标签选择器规则 1）添加选择器。点击菜单“窗口”→“CSS设计器”命令，打开“CSS设计器”面板。 选择“源”窗格中的源“css_file.css”，在“选择器”窗格中点击添加选择器图标 ，输入 选择器名称“td”。
6.5
第6章 使用CSS层叠样式表
6.2 标签选择器规则和锚伪类规则的创建与应用
6.7
第6章 使用CSS层叠样式表
6.2 标签选择器规则和锚伪类规则的创建与应用
6.2.1 利用标签选择器规则与锚伪类规则美化“采蒲台的苇”网页
（5）创建<body>标签选择器规则 2）在“选择器”窗格中选择“body”选择器，在“属性”窗格中点击布局图标 ，切换 到“布局”属性。设置“margin”为0px。 3）在“属性”窗格中点击背景图标 ，切换到“背景”属性，设置“background-image” 中的“url”为“../images/t1.gif”，即设置背景图片为“t1.gif”,也可以点击其后的文件夹 图标 ，选择“t1.gif”图片；设置“background-repeat”为 ，即设置背景重复。
6.2.1 利用标签选择器规则与锚伪类规则美化“采蒲台的苇”网页
（4）创建<td>标签选择器规则 2）在“选择器”窗格中选择“td”选择器，在“属性”窗格中点击文本图标 ，切换到 “文本”属性，将“font-family”设置为“宋体”、将“font-size”设置为“12px”、 “color”设置为“#333333”、“line-height”设置为“140%”。保存网页，预览，可以看 到原来没有应用CSS规则的文字发生的变化。