当前位置：
文档之家› 网页设计与制作项目教程项目3 “网上花店”专题页制作
网页设计与制作项目教程项目3 “网上花店”专题页制作
【任务3-1】CSS核心基础
2.
引入CSS样式表
引入CSS样式表的方式有哪些？
【任务3-1】CSS核心基础
2.
行内式
引入CSS样式表
内嵌式 链入式
行内式也称为内联样式，是通过标记的style属性来设置元素的样式。 语法格式
<标记名 style="属性1:属性值1; 属性2:属性值2; 属性3:属
【任务3-1】CSS核心基础
3.
CSS基础选择器
什么是CSS基础选择器？
【任务3-1】CSS核心基础
3.
CSS基础选择器
要 想 将 CSS 样 式 应 用 于 特 定 的
HTML 元素，首先需要找到该目 标元素。在 CSS 中，执行这一任 务的样式规则部分被称为选择器。
【任务3-1】CSS核心基础
CSS基础选择器
知识架构
【任务3-2】CSS控
制文本样式
CSS字体样式属性 CSS文本外观属性
1 2
知识架构
【任务3-3】CSS
高级特性
1 2 3 CSS复合选择器 CSS层叠性与继承性
CSS优先级
【任务3-1】CSS核心基础
如果希望网页美观、大方，并且升级轻松、维护方便，就需要使用 CSS，实现结构与表现的分离。
font-variant属性用于设置变体（字 体变化）。
5
6
font-style属性用于定义字体风格 。
font属性用于对字体样式进行综 合设置。
【任务3-2】CSS控制文本样式
1.
CSS字体样式属性
为了更方便的控制网页中各种各样的字体，CSS提供了一系列的字体样式属性。 font-size属性用于设置字号。
下面将对常用的文本样式属性进行详细讲解。
【任务3-2】CSS控制文本样式
1.
样式属性。
CSS字体样式属性
为了更方便的控制网页中各种各样的字体，CSS提供了一系列的字体 font-size属性用于设置字号。
1
font-family属性用于设置字体。
2
3
4
font-weight属性用于定义字体的 粗细。
1
font-size属性用于 设置字号，该属性 的值可以使用相对 长度单位，也可以 使用绝对长度单位。
相对长度单位 em px
说明 相对于当前对象内文本的字体尺寸 像素，最常用，推荐使用
绝对长度单位
in cm mm pt
说明
英寸 厘米 毫米 点
【任务3-2】CSS控制文本样式
性值3;"> 内容 </标记名>
【任务3-1】CSS核心基础
2.
行内式
引入CSS样式表
内嵌式 链入式
内嵌式是将CSS代码集中写在HTML文档的<head>头部标记中，并且用
<style>标记定义。
语法格式 <head> <style type="text/css"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} </style> </head>
3.
标记选择器
CSS基础选择器
类选择器 id选择器 通配符选择器
标记选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类 标记指定统一的CSS样式。
语法格式
标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
【任务3-1】CSS核心基础
3.
标记选择器
CSS基础选择器
项目3 “网上花店”专题页制作
HTML
· CSS样式规则 · CSS文本相关样式
· CSS选择器 · CSS优先级
学习目标
掌握CSS样式规则，能 够书写规范的CSS样式 代码。 掌握CSS字体样式及文 本外观属性，能够控制 页面中的文本样式。
1
2
理解CSS层叠性、继
掌握CSS复合选择器，
可以快捷选择页面中 的元素。
【任务3-1】CSS核心基础
2.
行内式
引入CSS样式表
内嵌式 链入式
链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件 中，通过<link />标记将外部样式表文件链接到HTML文档中。 语法格式 <head> <link href="CSS文件的路径" type="text/css" rel="stylesheet" /> </head>
类选择器 id选择器 通配符选择器
类选择器使用“.”（英文点号）进行标识，后面紧跟类名。 语法格式 .类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
【任务3-1】CSS核心基础
3.
标记选择器
CSS基础选择器
类选择器 id选择器 通配符选择器
id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下： 语法格式 #id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
【任务3-1】CSS核心基础
3.
标记选择器
CSS基础选择器
类选择器 id选择器 通配符选择器
通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中 所有的元素。 语法格式 *{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
【任务3-2】CSS控制文本样式
学习HTML时，可以使用文本样式标记及其属性控制文本的显示样式， 但是这种方式繁琐且不利于代码的共享和移植。为此，CSS提供了相应 的文本样式属性。
1.
CSS样式规则
CSS样式规则
选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
在上面的样式规则中，选择器用于指定CSS样式作
用的HTML对象，花括号内是对该对象设置的具体
样式。其中，属性和属性值以“键值对”的形式 出现，用英文“:”连接，多个“键值对”之间用
英文“;”进行区分。
4
承性与优先级，学会
3
高效控制网页元素。
目录
CSS核心基础
☞点击查看本小节知识架构
பைடு நூலகம்
CSS控制文本样式
☞点击查看本小节知识架构
CSS高级特性
☞点击查看本小节知识架构
布局及定义基础样式
目录
制作标题模块
制作商品分类模块
制作热卖模块
制作页脚模块
知识架构
【任务3-1】CSS
核心基础
1 2 3 CSS样式规则 引入CSS样式表
下面将对CSS样式规则、引入CSS样式表、CSS基础选择 器进行详细讲解。
【任务3-1】CSS核心基础
1.
CSS样式规则
什么是CSS样式规则？
【任务3-1】CSS核心基础
1.
CSS样式规则
热点新闻
网上购物
CSS样式 修饰的
网页大家随处可见
热门游戏
CSS样式的书写规则是什么？
【任务3-1】CSS核心基础
