项目3 CSS样式（课件）《网页设计》（劳动保障出版社）

网页设计与制作 项目三 CSS样式 N 1 知识目标 掌握CSS样式的使用方法 掌握CSS语法 掌握CSS选择器的使用 ‹#› 网页设计与制作 2 3.1.1初识CSS样式 任务3.1〓CSS基础知识 实例1 使用CSS修饰段落 CSS可以给网页文字设置不同的字体样式，即建立一个CSS规则。如果想改变整个网页上所有出现的颜色、尺寸、字体，只需要修改一些CSS规则即可。CSS文件是纯文本格式文件。 ‹#› 网页设计与制作 3.1.2HTML和CSS的对比 任务3.1〓CSS基础知识 HTML的缺点 维护困难： 修改某个特殊标签格式耗时较长， 尤其对整个网站而言，后期修改和维护成本较高 标签不足：HTML本身标签非常少，很多标签都是为 网页内容服务的，而关于内容样式标签，如文字间距、 段落缩进，很难在HTML中找到。 网页体积大： 由于没有对各种风格样式进行控制， HTML页面往往体积过大，占用宽度。 定位困难： 在整体布局页面时，HTML对各个模块的 位置调整缺乏灵活，过多的<table>标签将会导致 页面的复杂和后期维护的困难。 ‹#› 网页设计与制作 3.1.2HTML和CSS的对比 任务3.1〓CSS基础知识 CSS样式的优点 丰富的样式定义： CSS提供了丰富的文档样式外观，可以设置 文本和背景属性；允许为任何元素创建边框，设置元素边框与 其他元素间的距离；允许随意改变文本的大写和小写方式、修 饰方式等效果。 易于使用和修改： CSS可以将样式定义在HTML元素的style属性 中，也可以定义在header 部分，还可以写在一个专门的CSS文 件中(即CSS样式表)，将所有的样式声明统一存放，进行统一 管理。如果要修改样式，只需在样式列表中修改。 多页面应用： CSS样式表可以单独存放在一个CSS文件中，这样 可以在多个页面中使用同一个CSS样式表。CSS样式表不属于任 何页面文件，在任何页面文件中都可以引用，这样可以实现多 个页面风格的统一。 层叠： 对一个元素多次设置同一个样式，最后一次设置的属性 值有效。在浏览器中看到的将是最后一次设置的样式效果。 页面压缩： 使用CSS可以减少页面文件体积，加载页面时可提 升速度。 ‹#› 网页设计与制作 3.1.3制作欢迎标题 任务3.1〓CSS基础知识 实例2 制作欢迎标题 ‹#› 网页设计与制作 3.1.4CSS语法和样式表分类 任务3.1〓CSS基础知识 1. CSS语法格式 CSS语法格式由若干样式规则组成，这些样式规则可以应用到不同的元素或文档中来定义它们显示的外观。每一条样式规则都由选择器（selector）、属性（property）和属性值（value）三部分组成。selector有多种形式，既可以是文档中的HTML标签，如<body><table><p>标签等，也可以是XML文档中的标签。property是选择器制定的标签所包含的属性。value是选择器的多个属性，属性和属性值为一组，组与组之间需要用分号隔开。 CSS语法格式为：selector{propertyl：valuel；property2：value2；} ‹#› 网页设计与制作 3.1.4CSS语法和样式表分类 任务3.1〓CSS基础知识 2. CSS样式规则 下面给出一条样式规则，如p{color：red}。该样式规则的选择器为p，为段落标签<p>提供样式，color为段落文字的颜色属性，red为属性值。此样式表示标签<p>指定的段落文字为红色。如果要为段落设置多种样式，则可以使用下列语句： p{font-family： "隶书"；color：red；font-size：40px；font-weight：bold} ‹#› 网页设计与制作 3.1.4CSS语法和样式表分类 任务3.1〓CSS基础知识 3. 样式表分类 行内样式表 当需要对某个特定标签进行单独设置时使用行内样式表，应用到各个页面。在所修饰的标签内加<style>属性，如果后续为多条样式规则，多条样式规则用分号分开。 内部样式表 内部样式表与网页内容位于同一个文件中，在<head>标签中的<style>标签中。这种方式便于在同一页面中修改样式，但是不能彻底实现页面内容与样式的分离，不利于在多页面间共享复用代码。 外部样式表 外部样式表是指CSS代码单独写在一个或多个CSS文件中，需要时在<head>中通过<link/>标签引用，加载页面时没有加载样式表，需要用到样式表时才去寻找相应的样式。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务3.2〓CSS样式代码 3.2.1CSS常用选择器 1. 标签选择器 标签选择器使用简单、明确且通用性强，但针对性较差。 （1）格式 TagName{property：value} 其中，TagName表示标签名称，如<p><h1>等标签；property表示CSS属性；value表示CSS属性值。 （2）用途 通过一个具体标签来命名，可以对文档中每一个出现该标签的地方应用样式定义。这种做法通常用于设置整个网站中都会出现的基本样式。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务3.2〓CSS样式代码 3.2.1CSS常用选择器 1. 标签选择器 实例3 使用标签选择器给段落设置样式 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务3.2〓CSS样式代码 3.2.1CSS常用选择器 2. 类选择器 通过类选择器设置样式，可以将同一种样式定义为一个类，在CSS中，类选择器使用符号“.”开头。类选择器有别于ID选择器，属性值可以重复在多个元素中使用。 （1）格式 .classValue{property：value} 　其中，classValue是选择器的名称，具体名称由CSS制定者命名。如果一个标签具有class属性且class属性值为classValue，那么该标签的呈现样式由该选择器指定。在定义类选择器时，需要在classValue前面加一个句点“.”表示标签名称，如<p><h1>等HTML标签；property表示CSS属性；value表示CSS属性值。 （2）用途 一般情况下，其使用功能及效果的简要缩写语法格式为： .rd{color：red} .se{font-size：3px} ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务3.2〓CSS样式代码 3.2.1 CSS 常用选择器 实例4 使用类选择器设置样式 标题以红色字体显示，大小为22 px；段落1以蓝色字体显示，大小为20 px；段落2以红色字体显示，大小为22 px。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务3.2〓CSS样式代码 3.2.1 CSS 常用选择器 3. ID选择器 ID选择器与类选择器类似，都是针对特定属性的属性值匹配。ID选择器是使用HTML标签的ID属性值作为选择器名，并以“#”开头进行标识。ID属性类似于身份证，是HTML元素的唯一标识，页面内不能有重复的ID标识属性。对应的ID选择器一般用于修饰对应ID标识的HTML标签内容，实际应用中常和<div>标签配合使用，表示修饰对应ID标识的某个<div>区块。 （1）格式 #idValue{property：value} 　其中，c#idValue是选择器的名称，可以由CSS定义者自己命名。如果某标签具有ID属性，并且该属性值为idValue，那么该标签的呈现样式可以由该ID选择器制定。正常情况下，ID属性值在文档中具有唯一性。 （2）用途 在页面中具有ID属性的标签才能够使用ID选择器定义样式，所以与类选择器相比，使用ID选择器具有一定的局限性。类选择器与ID选择器的主要区别有：类选择器可以给任意数量的标签定义样式，而ID选择器在页面的标签中只能使用一次；ID选择器比类选择器具有更高的优先级，即当ID选择器与类选择器发生冲突时，优先使用ID选择器。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务3.2〓CSS样式代码 3.2.1 CSS 常用选择器 实例5 使用ID选择器设置样式 标题以红色字体显示，段落1以红色字体显示，段落2以蓝色字体显示。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务3.2〓CSS样式代码 3.2.2CSS选择器声明 1. 集体声明 在一个页面中，有时不同种类的标签样式要保持一致。例如，<p>标签和<h1>标签要保持一致，此时可以共同使用类选择器，还可以使用集体声明。集体声明就是在声明各种CSS选择器时，风格相同的CSS选择器同时声明。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务3.2〓CSS样式代码 3.2.2CSS选择器声明 实例6 集体声明样式 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务3.2〓CSS样式代码 3.2.2CSS选择器声明 2. 多重嵌套声明 在CSS控制HTML标签样式时，可以使用多重嵌套声明，对指定位置的HTML标签进行修饰，表示嵌套的选择器间用空格隔开。例如，当<p>与</p>之间包含<a>和</a>标签时，可以使用多重嵌套声明。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务3.2〓CSS样式代码 3.2.2 CSS 选择器声明 实例7 多重嵌套声明样式 超链接显示为红色字体，大小为30 px，其原因是使用了多重嵌套声明。 当<p>与</p>之间包含<a>和</a>标签时，就可以使用嵌套标签进行声明，表示<p>标签下面的<a>标签的CSS属性样式。同样的道理，不仅可以嵌套标签本身，类选择器和ID选择器都可以进行嵌套。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务3.2〓CSS样式代码 3.2.3CSS属性单位 1. CSS颜色单位 命名颜色 CSS中可以直接用英文单词命名与之相对应的颜色，这种方法的优点是简单、直接、容易掌握。此处预设了16种颜色及其衍生色，这16种颜色是CSS规范推荐的，主流的浏览器能够识别它们。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务3.2〓CSS样式代码 3.2.3 CSS 属性单位 1. CSS颜色单位 RGB颜色 如果要使用十进制表示颜色，则需要使用RGB颜色。用十进制表示颜色，最大值为255，最小值为0。要使用RGB颜色，必须使用rgb（R，G，B），其中R、G、B分别表示红、绿、蓝的十进制值，通过这3个值的组合便可以形成不同的颜色，例如，rgb（255，0，0）表示红色，rgb（0，255，0）表示绿色，rgb（0，0，0）表示黑色，rgb（255，255，255）表示白色。 RGB设置方法一般分为两种： 百分比设置和直接用数值设置。例如，为<p>标签设置颜色，两种语法格式为： p{color：rgb(123，0，25)} p{color：rgb(45%，0%，25%)} ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务3.2〓CSS样式代码 3.2.3CSS属性单位 1. CSS颜色单位 十六进制颜色 十六进制颜色是常用的定义方式，是由0~9和A~F组成的。十六进制颜色的基本语法格式为： #RRGGBB 其中，R表示红色，G表示绿色，B表示蓝色。而RR、GG、BB最大值为FF，表示十进制中的255；最小值为00，表示十进制中的0，例如，#FF0000表示红色，#00FF00表示绿色，#0000FF表示蓝色，#000000表示黑色，#FFFFFF表示白色。其他颜色是通过红、绿、蓝三种基本颜色组合而成的。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务3.2〓CSS样式代码 3.2.3CSS属性单位 2. CSS长度单位 绝对单位 用于设定绝对位置，主要有英寸(in)、厘米(cm)、毫米(mm)、磅(pt)和pica(pc)。其中，英寸是国外常用的度量单位；厘米用于设定距离比较大的页面元素框；毫米用于设定比较精确的元素距离和大小；磅一般用于设定文字的大小。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务3.2〓CSS样式代码 3.2.3CSS属性单位 2. CSS长度单位 相对单位 指在度量时需要参照其他页面元素的单位值。使用相对单位所度量的实际距离可能会随着这些单位值的改变而改变。CSS提供了三种相对单位：em、ex和px。其中px也叫像素，是目前广泛使用的一种单位。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务3.2〓CSS样式代码 3.2.3CSS属性单位 步骤一 实例8 制作诗词欣赏页面 2. CSS长度单位 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务3.2〓CSS样式代码 3.2.3CSS属性单位 2. CSS长度单位 实例8 制作诗词欣赏页面 步骤二 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务3.2〓CSS样式代码 3.2.3CSS属性单位 2. CSS长度单位 实例8 制作诗词欣赏页面 步骤三 ‹#› 网页设计与制作 3.3.1设置字体属性 1. 字体 任务3.3〓使用CSS样式美化文本 font-family属性用于制定文字字体类型，如宋体、黑体、隶书等，即在网页中展示不同的字体。 格式 {font-family：name} {font-family：cursive|fantasy|monospace|serif|sans-serif} 从语法格式上可以看出，font-family有两种声明方式。第一种方式是使用name字体名称，按优先顺序排列，以逗号隔开，如果字体名称包含空格，则应使用引号括起，这种声明方式比较常用；第二种方式是使用所列出的字体序列名称，如果使用fantasy序列，则将提供默认字体序列。 font-family属性值可以是一组值，即一次定义多个字体，当浏览器读取字体时，会按照字体排列的先后顺序来决定使用哪种字体。若浏览器在计算机上找不到第一种字体，则自动读取第二种字体；若第二种字体也找不到，则自动读取第三种字体，依此类推。当定义的所有字体都找不到时，会选用计算机系统的默认字体。 ‹#› 网页设计与制作 3.3.1设置字体属性 1. 字体 任务3.3〓使用CSS样式美化文本 实例9 字体设置 ‹#› 网页设计与制作 3.3.1设置字体属性 1. 字体 任务3.3〓使用CSS样式美化文本 说明 在字体显示时，如果指定了一种特殊字体类型，而在浏览器或者操作系统中该类型不能正确获取，则可以通过font-family属性预设多种字体类型。font-family属性预设字体类型时，每种字体之间使用逗号隔开。当前面的字体类型不能正确显示时，系统将自动选择后一种字体类型，依此类推。 常用的字体样式 ‹#› 网页设计与制作 3.3.1设置字体属性 2. 字体大小 任务3.3〓使用CSS样式美化文本 格式 {font-size：数值|inherit|xx-small|x-small|small|medium|large|...} 从语法格式上可以看出，font-size可以通过数值来定义字体大小，如font-size：10 px表示定义的字体大小为10 px，还可以通过medium等参数定义字体的大小。 对于font-size的属性值，当使用绝对值时要注意加上单位，当没有单位时浏览器会默认以px为单位。这里的取值除使用px以外，还可以使用in(英寸)、cm(厘米)、mm(毫米)、pt(点)、pc(皮卡)。另外，字号大小的取值还有一些关键字，分别为xx-small(极小)、x-small(较小)、small(小)、medium(标准大小)、large(大)、x-large(较大)、xx-large(极大)。 ‹#› 网页设计与制作 3.3.1设置字体属性 2. 字体大小 任务3.3〓使用CSS样式美化文本 实例10 字体大小属性设置 网页中文字被设置成不同的大小，其设置采用了绝对值、关键字和百分比等形式。 font-size字体大小为200%时，其比较对象是上一级标签中的10 pt。同样，还可以使用inherit值，直接继承上一级标签的字体大小。 ‹#› 网页设计与制作 3.3.1设置字体属性 3. 字体风格 任务3.3〓使用CSS样式美化文本 CSS通常使用font-style定义字体风格，即字体的显示样式，如斜体，其语法格式为： {font-style：normal|italic|oblique|inherit} font-style的属性值及含义 ‹#› 网页设计与制作 3.3.1设置字体属性 3. 字体风格 任务3.3〓使用CSS样式美化文本 实例11 字体风格的设置 ‹#› 网页设计与制作 3.3.1设置字体属性 4. 字体加粗 任务3.3〓使用CSS样式美化文本 通过设置字体粗细，可以使文字显示不同的外观。CSS中通常使用font-weight定义字体的粗细程度，其语法格式为： {font-weight：100-900|bold|bolder|lighter|normal；} font-weight属性有五个有效值，分别是100~900、bold、bolder、lighter、normal。如果没有设置该属性，则使用默认值normal。属性值设置为100~900，值越大，加粗的程度就越高。 font-weight的主要属性值及含义 ‹#› 网页设计与制作 3.3.1设置字体属性 4. 字体加粗 任务3.3〓使用CSS样式美化文本 实例12 font-weight属性设置 ‹#› 网页设计与制作 3.3.1设置字体属性 4. 字体加粗 任务3.3〓使用CSS样式美化文本 实例13 制作文件通知页面 ‹#› 网页设计与制作 3.3.1设置字体属性 4. 字体加粗 任务3.3〓使用CSS样式美化文本 实例13 制作文件通知页面 ‹#› 网页设计与制作 3.3.2设置段落属性 1. 字符间隔 任务3.3〓使用CSS样式美化文本 字符文本之间可以通过letter-spacing进行设置。在一个网页中，会涉及多个字符文本，设置文本之间的各字符间隔一致，进而保持页面的整体性，是网页设计者必须要考虑的。letter-spacing的语法如下： letter-spacing：normal|length letter-spacing的属性值及含义 ‹#› 网页设计与制作 3.3.2设置段落属性 1. 字符间隔 任务3.3〓使用CSS样式美化文本 实例14 字符间距设置 通过letter-spacing属性可定义多个字符间隔。特别注意，当设置的字间距是-5 px时，所有文字会压缩、重叠到一起，无法完整显示。 ‹#› 网页设计与制作 3.3.2设置段落属性 2. 水平对齐 任务3.3〓使用CSS样式美化文本 一般情况下，居中对齐适用于标题类文本，其他对齐方式可以根据页面布局来选择使用。根据需要，可以设置多种对齐方式，如水平方向的居中、左对齐、右对齐和两端对齐等。在CSS中，可以通过text-align属性进行设置，语法格式为： text-align：start|end|left|right|center|justify|match-parent|inherit text-align的属性值及含义 ‹#› 网页设计与制作 3.3.2设置段落属性 2. 水平对齐 任务3.3〓使用CSS样式美化文本 实例15 设置文本对齐方式 text-align属性只能用于文本块，不能直接应用到图像标签<img/>。如果要使图像同文本一样应用对齐方式，那么必须将图像包含在文本块中。CSS只能定义两端对齐方式，并按要求显示。对于具体的两端对齐文本如何分配字体空间以实现文本左右两端均对齐，CSS并没有规定。 ‹#› 网页设计与制作 3.3.2设置段落属性 3. 文本缩进 任务3.3〓使用CSS样式美化文本 在普通段落中，通常首行缩进两个字符，用来表示这是一个段落的开始。同样在网页的文本编辑中可以通过制定属性，来控制文本缩进。CSS中的text-indent属性用于设定文本块首行缩进，语法格式为： text-indent：length 其中，length 属性值表示由百分比数字或由浮点数和单位标识符组成的长度，允许为负值。 ‹#› 网页设计与制作 3.3.2设置段落属性 3. 文本缩进 任务3.3〓使用CSS样式美化文本 实例16 设置文本缩进 text-indent属性可以定义为两种缩进方式，一种是直接定义缩进的长度，另一种是定义缩进百分比。如果上级标签定义了text-indent属性，那么子标签可以继承其上级标签的缩进长度。使用该属性，HTML5任何标签都能以给定的长度或百分比缩进。 ‹#› 网页设计与制作 3.3.2设置段落属性 4. 文本行高 任务3.3〓使用CSS样式美化文本 CSS中通常使用line-height设置行间距，即行高，语法格式为： line-height：normal|length line-height的属性值及含义 ‹#› 网页设计与制作 3.3.2设置段落属性 4. 文本行高 任务3.3〓使用CSS样式美化文本 实例17 设置文本行高 ‹#› 网页设计与制作 3.4.1设置图片样式 在网页中放置一张图片，可以使用<img/>标签。当图片显示之后，其边框是否显示，可以通过<img/>标签中的border属性来设定。通过HTML标签设置图片边框，其边框显示都是黑色，并且风格比较单一，唯一能够设定的就是边框的粗细，而无法对边框样式进行设定。这时可以采用CSS对边框样式进行美化，语法格式为： <img src=“图片位置” border=“值”/> 任务3.4〓使用CSS样式美化页面 ‹#› 网页设计与制作 3.4.1设置图片样式 任务3.4〓使用CSS样式美化页面 实例18 图像边框设置 ‹#› 网页设计与制作 3.4.2设置背景与边框 任务3.4〓使用CSS样式美化页面 1. 背景相关属性 背景颜色 background-color属性用于设定网页背景色，它接受任何有效的颜色值，而对于没有设定背景色的标签，默认背景色为透明，语法格式为： {background-color：transparent|color} ‹#› 网页设计与制作 3.4.2设置背景与边框 任务3.4〓使用CSS样式美化页面 1. 背景相关属性 背景图片 网页背景既可以使用背景色来填充，也可以使用背景图片来填充。通过CSS属性可以对背景图片进行精确定位。background-image属性用于设定标签的背景图片。通常情况下，在<body>标签中应用，将图片用于整个主体中，语法格式为： {background-image：none|url(url)} 常用的背景属性 ‹#› 网页设计与制作 3.4.2设置背景与边框 任务3.4〓使用CSS样式美化页面 2. 边框属性 边框样式 border-style属性用于设定边框的样式，即风格。设定边框样式是边框最重要的部分，语法格式为： {background-style：none|hidden|dotted|solid|…} background-style属性值及含义 ‹#› 网页设计与制作 3.4.2设置背景与边框 任务3.4〓使用CSS样式美化页面 2. 边框属性 边框颜色 border-color属性用于设定与页面元素不同的边框颜色，语法格式为： border-color：color 其中，color表示设定的颜色，其颜色值通过十六进制和RGB等方式获取。与边框样式属性一样，border-color属性可以为边框设定一种颜色，也可以同时设定四个边的颜色。 ‹#› 网页设计与制作 3.4.2设置背景与边框 任务3.4〓使用CSS样式美化页面 2. 边框属性 边框线宽 border-width属性用于设定边框宽度，语法格式为： border-width：medium|thin|thick|length 其中预设属性值有medium、thin和thick。 ‹#› 网页设计与制作 项目小结 　本项目主要介绍了使用CSS样式的一些基础知识，具体内容如下： 　CSS基础知识： 介绍了CSS样式、HTML和CSS的对比、编写CSS样式、CSS语法和样式表分类。 　CSS样式代码： 介绍了CSS常用选择器、CSS选择器声明和CSS属性单位。 　使用CSS样式美化文本： 介绍了设置字体属性和设置段落属性。 　使用CSS美化页面： 介绍了设置图片样式和设置背景与边框。 　通过本项目的学习，了解CSS样式基础知识，使用CSS样式美化文本，如设置字体属性和段落属性。使用CSS样式美化页面，如设置图片样式。为进一步的学习打下坚实的基础。 谢谢 $$