第5章 CSS基础-【好程序员成长】HTML5从入门到精通
2023-02-16
|
35页
|
91人阅读
|
1人下载
教辅
资源信息
| 学段 | 中职 |
|---|---|
| 学科 | 职教专业课 |
| 课程 | 程序设计基础 |
| 教材版本 | - |
| 年级 | 高二 |
| 章节 | - |
| 类型 | 课件 |
| 知识点 | - |
| 使用场景 | 同步教学 |
| 学年 | 2023-2024 |
| 地区（省份） | 全国 |
| 地区（市） | - |
| 地区（区县） | - |
| 文件格式 | PPTX |
| 文件大小 | 942 KB |
| 发布时间 | 2023-02-16 |
| 更新时间 | 2023-07-10 |
| 作者 | 北京千锋互联科技有限公司 |
| 品牌系列 | - |
| 审核时间 | 2023-02-16 |
| 下载链接 | https://m.zxxk.com/soft/37543671.html |
| 价格 | 4.00储值（1储值=1元） |
| 来源 | 学科网 |
内容正文：
第5章 CSS基础
CSS引入方式 样式的继承
选择符详解 样式的优先级
CSS引入方式
样式的继承
选择符详解
样式的优先级
目 录
CATALOUGUE
01
02
04
03
初心至善 匠心育人
锋云智慧官网 www.fengyunedu.cn
了解CSS引入的三种方式
理解样式的继承
掌握CSS选择符
掌握CSS的优先级
学 习 目 标
LEARNING OBJECTIVES
初心至善 匠心育人
锋云智慧官网 www.fengyunedu.cn
5.1 CSS引入方式
5.1.1
内部引入方式
5.1.2
外部引入方式
5.1.3
三种方式的对比
初心至善 匠心育人
锋云智慧官网 www.fengyunedu.cn
5.1 CSS引入方式
内部引入方式是通过<style>标签添加CSS样式，它与行间样式引入方式的区别是内部引入是通过<style>标签而不是style属性。<style>标签一般情况下都会添加到<head>标签当中。具体示例如下：
5.1.1 内部引入方式
CSS中通过/**/ 的形式添加注释，与HTML中添加注释的方式不一样。 /* 作为注释的起始， */ 作为注释的结束。 和HTML中添加注释一样，在Dreamweaver中也可以通过按钮选择添加CSS注释。
初心至善 匠心育人
锋云智慧官网 www.fengyunedu.cn
5.1 CSS引入方式
内部引入CSS样式，要遵从一定的CSS样式规范，其语法格式如下：
5.1.1 内部引入方式
选择符是选择指定标签的方法，通过这种方法，可以选择到指定的HTML标签，并且给其添加CSS样式。例如页面中有三个<p>标签，具体示例如下。
如果想让中间的<p>标签添加文字颜色，而其他两个<p>标签不作任何处理，就需要用到选择符，下面先来简单讲解一下id选择符和class选择符。
初心至善 匠心育人
锋云智慧官网 www.fengyunedu.cn
5.1 CSS引入方式
1.id选择符
id选择符是可以给指定的标签设置一个id属性和一个id值，然后通过id选择符（即“# + id值”）找到对应的标签为其设置id值，即添加CSS样式。
图5.2 id选择符展示效果
id选择符的特点是，在同一个页面中，不允许出现两个相同的id值，就像每个人的身份证号都是唯一的，id选择符也具有唯一性。
id选择符的错误使用方式，具体示例如下。
5.1.1 内部引入方式
示例中将三个<p>标签的id选择符都设置为elem显然是CSS不允许的，编译会出错。
初心至善 匠心育人
锋云智慧官网 www.fengyunedu.cn
5.1 CSS引入方式
2.class选择符
class选择符也叫“类”选择符，可以给指定的标签设置一个class属性和class值，然后通过class选择符（即“. + class值”）找到对应的标签，为其设置class值，即添加CSS样式。
5.1.1 内部引入方式
class选择符的特点跟id选择符不同，在同一个页面中，class值可以重复出现，即可以重复利用CSS样式。
初心至善 匠心育人
锋云智慧官网 www.fengyunedu.cn
5.1 CSS引入方式
外部样式的写法与内部样式的写法完全一样，只是外部引入方式将CSS代码保存在扩展名为.css的样式表中，在HTML文件中引用扩展名为.css的样式表。引入的方式用链接式和导入式两种方式。下面将详细讲解这两种外部引入CSS的方式。
1. 链接式
链接式是将所有的样式放在一个或多个“.css” 为扩展名的外部样式表中，通过网页的<head></head>标签对中使用<link>标记将外部样式表文件链接到HTML文档中。其语法格式如下：
5.1.2 外部引入方式
语法中必须指定<link>标记的三个属性，href是定义链接外部样式表文件的url，可以是相对路径和绝对路径；rel是定义当前文档与被链接文档之间的关系，这里指定为stylesheet，表示被链接的文档是样式表文件；type是定义链接文档的类型，这里类型指定为text/css，表示链接的外部文件为CSS样式表。
初心至善 匠心育人
锋云智慧官网 www.fengyunedu.cn
5.1 CSS引入方式
这里面涉及到三个属性，rel=“stylesheet” 规定当前文档与被链接文档之间的关系。type=“text/css” 规定被链接文档的 MIME 类型。href=“mystyle.css” 规定被链接文档的位置。只需要记住这个固定写法即可。
（1） 首先打开DW软件，创建一个HTML文档，并在该文档中添加标题和段落文本。将HTML文档命名为5-4.html，保存。
（2） 创建CSS样式表，在DW选择菜单栏
资源预览图
1
2
3
4
5
6
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。