高二下北京理工大学出版社移动Web前端开发课件第3章 学习CSS样式
2023-01-09
|
77页
|
62人阅读
|
0人下载
普通
内容正文：
本章简介：
CSS层叠样式表用来美化网页元素、格式化页面。CSS样式的使用，不但可以使页面整齐，网站风格协调划一，而且可以大大减少网站的后期维护工作量。本章将对CSS样式、选择器、继承性、层叠性、CSS引入方式及优先级等知识进行详细介绍。
第3章 学习CSS样式
课堂学习目标
掌握CSS语法规则
掌握CSS选择器
熟悉CSS的文本、列表、图像、超链接的控制方法
理解CSS的继承性和层叠性
掌握CSS四种引入方式
理解CSS优先级
3.1 【案例5】美化“西游人物”页面
案例分析——“西游人物”页面
实现步骤
知识点讲解——整体感知CSS
案例练习
3.1.1案例分析——“西游人物”页面
CSS（层叠样式表单）是一种用来表现HTML或XML等文件样式的计算机语言。本案例中，将会制作“西游人物”页面，以此为例，来整体感知CSS。效果如图3.1所示。
1．需求分析
图3.1 西游人物页面
根据最终效果，对案例进行分析，通过以下几个方面实现：
（1）HTML部分。应用页面标签设计页面。
（2）CSS部分。为HTML用到的元素进行样式设置。
2．设计思路
（1）构思页面结构。
（2）准备素材。
（3）HTML部分。为页面编写HTML内容。
（4）利用CSS美化页面。
3.1.2 实现步骤
1．构思页面结构
制作页面，首先我们仍然是设计其结构，在本案例中采用<div>标签将页面分隔为5个部分，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>西游人物</title>
</head>
<body>
<div class="banner"></div>
<div class="nav"></div>
<div class="content"></div>
<div class="link"></div>
<div class="footer"></div>
</body>
</html>
其中，banner部分设计该页面的LOGO，放置在页面最上端；nav部分设计该页面的导航；content部分设计该页面的详细内容；link部分设计该页面的友情链接；footer部分设计该页面的说明信息，放置在页面最底端。
2．准备素材
制作或查找页面所需图片和文字等资料。
3．HTML部分
编辑xyrw.html文件。
4．CSS部分
美化页面，继续编辑xyrw.html文件，在本案例中，我们将CSS代码嵌套在<head></head>中。
保存文件，在浏览器中浏览，可以得到图3.1的最终效果，实现美化页面的目的。
3.1.3 知识点讲解——整体感知CSS
相对于传统HTML的表现而言，CSS能够对网页中对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法。
1．感知CSS
请看下边的代码：
<style type="text/css">
</style>
这里用到了<style>标签，<style>标签就是“样式”的意思，嵌套在<head></head>里面。CSS也可以写在单独的文件里面，type表示“类型”，text就是“纯文本”。CSS也是纯文本的。主要是通过定义选择器定义页面元素的样式，在定义选择器的时候语法格式如下所示：
选择器{属性:属性值1；属性2:属性值2；…;属性n:属性值n；}
2．CSS控制页面方法
1）行内样式
行内样式是最为简单的CSS使用方法，只需要在页面元素中加入一个style属性，同时输入style规则作为属性值。例如：
<p style="font-size: 5px; color: red;">段落内容1</p>
<p style="font-size: 15px; border:solid 1px;">段落内容2</p>
其中，2个<p>标签分别用各自的style属性设计了不同的CSS样式值，互不影响。
使用行内样式，需要为每一个待设置样式的标签编写style属性，容易使得文件偏大，维护工作量变多，也不利于样式效果的统一，因此并不推荐经常使用该样式。
2）内嵌式
内嵌式CSS样式需要用<style></style>标签进行声明，嵌套在<head></head>里面。例如：
资源预览图
1
2
3
4
5
6
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。