工信版（中职）Web前端设计基础 项目六电子课件
2022-10-25
|
48页
|
77人阅读
|
0人下载
普通
资源信息
| 学段 | 中职 |
|---|---|
| 学科 | 职教专业课 |
| 课程 | 程序设计基础 |
| 教材版本 | - |
| 年级 | 高一 |
| 章节 | - |
| 类型 | 课件 |
| 知识点 | - |
| 使用场景 | 同步教学 |
| 学年 | 2022-2023 |
| 地区（省份） | 全国 |
| 地区（市） | - |
| 地区（区县） | - |
| 文件格式 | PPTX |
| 文件大小 | 1.45 MB |
| 发布时间 | 2022-10-25 |
| 更新时间 | 2023-04-09 |
| 作者 | 匿名 |
| 品牌系列 | - |
| 审核时间 | 2022-10-25 |
| 下载链接 | https://m.zxxk.com/soft/35574058.html |
| 价格 | 1.50储值（1储值=1元） |
| 来源 | 学科网 |
内容正文：
YCF
（中职）Web前端设计基础 项目六电子课件
1
单击此处编辑母版文本样式
第二级
第三级
第四级
第五级
CSS 3的选择器
项目六
授课教师：姓名
WEB前端设计基础
学习情境一
授课教师：姓名
单击此处编辑母版标题样式
Contents
1.项目描述
2.知识准备
3.项目实施
4.项目拓展
5.项目小结
6.技能训练
Contents
1.项目描述
2.知识准备
3.项目实施
4.项目拓展
5.项目小结
6.技能训练
一 项目描述
本项目学习要点
CSS的常用选择器；
CSS 3新增选择器；
伪类选择器。
CSS的引用方法；
二 知识准备
CSS 3基本语法；
CSS 3引用方法；
CSS 3新增选择器。
CSS 3常用选择器；
二 知识准备
CSS（Cascading Style Sheet）称为层叠样式表，也称为CSS样式表（或样式表），文件扩展名为.css。CSS发展到今天的最新版本是CSS 3.0，CSS 3具有强大的功能。
CSS 3是对页面布局、字体、颜色、背景和其他图文效果的实现提供更加精确控制的一种技术。以前需要使用图片或者JavaScript来实现的效果，现在只需要几句CSS代码就能完成。
CSS 3基本语法
CSS 3样式表是由若干条规则组成的，这些规则可以应用到 的元素或文档，来定义它们显示的外观。
每一条样式规则由三部分组成：选择器（selector）、属性（properties）和属性值（value），格式如下：
选择器{ 样式属性: 属性值;}
选择器，可以采用多种形式，可以为文档中的HTML标签，如<body>、<p>等，也可以是class、id标签。
样式属性，是选择器指定的标签所包含的属性。
属性值，如果定义选择器的多个属性，则属性和属性值为一组，组与组之间用分号（;）隔开。格式如下：
CSS 3基本语法
选择器
{
样式属性1:取值1;
样式属性2:取值2;
……
}
例如下面的一条样式规则：
p{font-size:12px;color:red;}
该样式规则表示：
选择器是p，即为段落标签<p>提供样式，
font-size为文本设置字体大小，12px为属性值；
color为文字设置颜色，red为属性值。
CSS 3引用方法
1.行内样式
使用行内样式的具体方法是直接在HTML 5标签中使用style属性，该属性的内容是CSS的属性和值。尽管行内样式简单，但是不常使用，因为这样添加无法完全发挥样式文件的“内容结构与样式控制代码”分离的优势，而且这种方式也不利于样式的重用，后期维护成本高，故不推荐使用。格式如下：
<p style="color: red;">段落文字</p>
CSS 3引用方法
2.内嵌样式
内嵌样式是将CSS样式代码添加到<head>与</head>之间，并且用<style>和</style>标签进行声明。这种写法虽然没有完全实现页面内容和样式控制代码完全分离，但可以设置一些比较简单的样式，并统一页面样式。格式如下：
<head>
<style type="text/css">
p{
color: red;
font-size: 12px;
}
</style>
</head>
CSS 3引用方法
3.链接样式
链接样式是CSS中使用频率最高，也是最实用的方法，它能很好地将“页面内容”和“样式风格代码”分离成两个文件或多个文件，实现了页面框架HTML 5代码和CSS 3代码的完全分离，使前期制作和后期维护都非常方便。
<link rel="stylesheet" type="text/css" href="style.css">
链接样式是指在外部定义CSS样式表并形成以.css为扩展名的文件，然后在页面中通过<link>链接标签链接到页面中，而且该链接语句必须放在页面的<head>标签中，格式如下：
其中rel指链接到样式表，其值为stylesheet；type表示样式类型为CSS样式表；href指定CSS样式表所在的位置。
CSS 3引用方法
3.链接样式
【例6-1】CSS引用方法实例，代码如下所示（示例文件6-1.html）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在HTML5中使用CSS的方法</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<style type="text/css">
p{
color: red;
font-size: 14px;
}
</style>
</head>
<bo
资源预览图
1
2
3
4
5
6
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。