《网页设计与制作（活页式）》 课件 项目3 CSS样式_第1页
《网页设计与制作（活页式）》 课件 项目3 CSS样式_第2页
《网页设计与制作（活页式）》 课件 项目3 CSS样式_第3页
《网页设计与制作（活页式）》 课件 项目3 CSS样式_第4页
《网页设计与制作（活页式）》 课件 项目3 CSS样式_第5页
已阅读5页，还剩50页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

网页设计与制作项目三

CSS样式N

知识目标掌握CSS样式的使用方法掌握CSS语法掌握CSS选择器的使用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使用类选择器设置样式标题以红色字体显示，大小为22px；段落1以蓝色字体显示，大小为20px；段落2以红色字体显示，大小为22px。任务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多重嵌套声明样式超链接显示为红色字体，大小为30px，其原因是使用了多重嵌套声明。当<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：10px表示定义的字体大小为10px，还可以通过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%时，其比较对象是上一级标签中的10pt。同样，还可以使用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样式美化文本实例12font-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|lengthletter-spacing的属性值及含义3.3.2设置段落属性1.字符间隔任务3.3〓使用CSS样式美化文本实例14字符间距设置通过letter-spacing属性可定义多个字符间隔。特别注意，当设置的字间距是-5px时，所有文字会压缩、重叠到一起，无法完整显示。3.3.2设置段落属性2.水平对齐任务3.3〓使用CSS样式美化文本一般情况下，居中对齐适用于标题类文本，其他对齐方式可以根据页面布局来选择使用。根据需要，可以设置多种对齐方式，如水平方向的居中、左对齐、右对齐和两端对齐等。在CSS中，可以通过text-align属性进行设置，语法格式为：

text-align：start|end|left|right|center|justify|match-parent|inherittext-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|lengthline-height的属性值及含义3.3.2设置段落属性4.文本行高任务3.3〓使用CSS样式美化文本实例17设置文本行高3.4.1设置图片样式在网页中放置一张图片，可以使用<img/>标签。当图片显示之后，其边框是否显示，可以通过<img/>标签中的border属性来设定。通过HTML标签设置图片边框，其边框显示都是黑色，并且风格比较单一，唯一能够设定的就是边框的粗细，而无法对边框样式进行设定。这时可以采用CSS对边框样式进行美化，语法格式为：

<imgsrc=“图片位置”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属性用于设定标签的背景图片。通常情况

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论