电子商务网站建设与网页设计课件 项目三 使用 CSS 美化网页_第1页
电子商务网站建设与网页设计课件 项目三 使用 CSS 美化网页_第2页
电子商务网站建设与网页设计课件 项目三 使用 CSS 美化网页_第3页
电子商务网站建设与网页设计课件 项目三 使用 CSS 美化网页_第4页
电子商务网站建设与网页设计课件 项目三 使用 CSS 美化网页_第5页
已阅读5页，还剩34页未读， 继续免费阅读

下载本文档

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

文档简介

项目三使用CSS美化

网页电子商务网站建设与网页设计

1认识CSS2课堂练习——在Dreamweaver中创建CSS规则和文件3课堂练习——

使用CSS选择器美化文本目录CONTENTS4课堂练习——

CSS特性的应用5课堂练习——

使用CSS美化童装网站通过CSS可以实现网页外观的快速美化，它是网页设计者的利器，既可以对不同类型的网页应用不同的样式表，又可以使用样式表对网站基本样式进行统一，极大地方便了网页设计工作。本任务主要认识CSS。任务一认识CSS一、了解CSS的基本语法CSS的样式规则由两部分组成：选择器和声明。选择器是样式的名称，包括自定义的类（也称“类样式”）、HTML标签、ID和复合内容。自定义的类：可以将样式属性应用到任何文本范围或文本块。所有类样式均以句点“.”开头。HTML标签：可以重定义特定标签（如<p>或<h1>）的格式。ID和复合内容：可以重定义特定元素组合的格式或其他CSS允许的选择器形式的格式。选择器声明用于定义样式元素，由两部分组成：属性和值。在右图所示的示例中，h1是选择器，介于花括号（{}）之间的所有内容都是声明。声明CSS基本语法二、在网页中引用CSS的方式当CSS与网页中的内容建立关系时，即可称为CSS的引用。CSS的引用主要有以下几种方式。这是应用CSS最简单的方式，由于没有和HTML标记分离，因此不推荐使用这种方法，其语法如下。<标记style="CSS属性:值">内容</标记>直接添加在HTML标记中将CSS代码添加到HTML网页<head>标记区域中的<style></style>标签之间。将样式表内嵌到HTML文件中此方式通过<link>标签实现，将<link>标签加入<head>标签之间。外部样式表可以应用到多个网页中。将外部样式表链接到HTML文件中将样式表导入HTML文件中与将样式表链接到HTML文件中相似，也是将外部定义好的CSS文件引入网页进行应用。但是，导入的CSS文件使用@import在内嵌样式表中导入，导入方式可以与其他方式结合。联合使用样式表内嵌样式二、在网页中引用CSS的方式外链样式当CSS与网页中的内容建立关系时，即可称为CSS的引用。CSS的引用主要有以下几种方式。这是应用CSS最简单的方式，由于没有和HTML标记分离，因此不推荐使用这种方法，其语法如下。<标记style="CSS属性:值">内容</标记>直接添加在HTML标记中将CSS代码添加到HTML网页<head>标记区域中的<style></style>标签之间。将样式表内嵌到HTML文件中此方式通过<link>标签实现，将<link>标签加入<head>标签之间。外部样式表可以应用到多个网页中。将外部样式表链接到HTML文件中将样式表导入HTML文件中与将样式表链接到HTML文件中相似，也是将外部定义好的CSS文件引入网页进行应用。但是，导入的CSS文件使用@import在内嵌样式表中导入，导入方式可以与其他方式结合。联合使用样式表二、在网页中引用CSS的方式联合使用样式表当CSS与网页中的内容建立关系时，即可称为CSS的引用。CSS的引用主要有以下几种方式。这是应用CSS最简单的方式，由于没有和HTML标记分离，因此不推荐使用这种方法，其语法如下。<标记style="CSS属性:值">内容</标记>直接添加在HTML标记中将CSS代码添加到HTML网页<head>标记区域中的<style></style>标签之间。将样式表内嵌到HTML文件中此方式通过<link>标签实现，将<link>标签加入<head>标签之间。外部样式表可以应用到多个网页中。将外部样式表链接到HTML文件中将样式表导入HTML文件中与将样式表链接到HTML文件中相似，也是将外部定义好的CSS文件引入网页进行应用。但是，导入的CSS文件使用@import在内嵌样式表中导入，导入方式可以与其他方式结合。联合使用样式表在网页引用CSS的方式中，直接引用样式表文件的方式是值得推荐的。CSS文件可以应用到多个网页中；也可以控制整个网站的样式，做到HTML代码和CSS代码的分离。本任务学习如何在Dreamweaver中创建CSS规则和文件。任务二课堂练习——在Dreamweaver中创建CSS规则和文件一、创建CSS规则下面将通过实例介绍如何在DreamweaverCC2018中创建CSS规则，具体操作方法如下。二、创建CSS文件在Dreamweaver中使用CSS样式时建议创建CSS文件，然后在CSS文件中编写CSS代码，从使用“CSS设计器”面板过渡到专业的代码书写。创建CSS文件的具体操作方法如下。在CSS中，选择器是一种模式，用于选择需要添加样式的元素。要使用CSS对HTML页面中的元素实现“一对一”、“一对多”或“多对一”的控制，就需要用到CSS选择器。本任务将学习应用各类选择器的方法。任务三课堂练习——使用CSS选择器美化文本一、应用元素选择器元素选择器又称标记选择器，是一种常用的CSS选择器，它直接对HTML中的所有标记（如<p><h1><a>等标记）进行样式设置。下面将通过实例介绍如何应用元素选择器，具体操作方法如下。二、应用群组选择器在CSS中，如果希望对多个标记进行相同的样式设置，可以通过群组选择器来实现。下面将通过实例介绍如何应用群组选择器，具体操作方法如下。三、应用类选择器类选择器也可以理解为自定义样式，可以单独对网页的某个部分设置样式，操作非常灵活，是网页设计中常用的一种方法。下面将通过实例介绍如何应用类选择器，具体操作方法如下。四、应用ID选择器ID选择器和类选择器类似，不同的是ID选择器使用“#”符号声明样式，如“#con-p{color:blue;}”。ID选择器与类选择器相似，需要单独应用在标记元素上，其使用方法为“<pid=”con-p“>”。声明ID选择器应用ID选择器五、应用后代选择器后代选择器可以理解为一种嵌套关系，是一种多条件的样式规则。在CSS规则中，声明后代选择器的方法为“pem{font-weight:bold;color:#333;}”。声明后代选择器预览网页效果六、应用通配符选择器通配符选择器是一种特殊的CSS规则，其声明方法为“*{color:red;}”。其中，“*”表示HTML所有的标记元素，该CSS规则的含义是将所有元素的字体设置为红色。下面将举例说明，具体操作方法如下。在有些情况下，CSS规则有一些特性，主要包括继承性、特殊性、层叠性和重要性，本任务将分别对其应用方法进行学习。任务四课堂练习——CSS特性的应用一、应用继承性CSS的某些样式是具有继承性的。继承是一种规则，允许样式不仅应用于某个特定HTML标记元素，还应用于其后代元素。下面将举例说明，具体操作方法如下。二、应用特殊性当为同一个元素设置不同的CSS规则代码时，浏览器会根据权值判断使用哪种CSS样式，权值高的具有优先权。下面将举例说明，具体操作方法如下。三、应用层叠性在HTML网页中，同一个元素如果有多个CSS样式存在，并且这些CSS样式具有相同的权值，其效果会怎样？下面将举例说明，具体操作方法如下。四、应用重要性在某些特殊情况下，当有相同权值的样式存在时，需要为某些样式设置最高权值，此时可以通过“!important”提升其权值为最高。下面将举例说明，具体操作方法如下。在网页设计中，文字和段落排版是非常重要的内容，使用CSS规则可以快速完成格式化排版，并且能将其应用到多个网页中，实现CSS代码和HTML代码分离。本任务主要学习CSS规则在文字和段落排版中的应用。任务五课堂练习——使用CSS美化童装网站一、文字排版文字排版主要是设置字体类型（font-family）、字体大小（font-size）、字体颜色（color）等属性。下表所示为文字排版常用的CSS字体规则相关属性。属性描述值font-family字体类型宋体、黑体font-size字体大小像素，如12像素color字体颜色十六进制颜色表示法font-weight字体加粗boldfont-style字体倾斜italictext-decoration下画线underlinetext-decoration删除线line-throughCSS字体规则相关属性一、文字排版下面将通过实例介绍如何使用CSS规则进行文字排版，具体操作方法如下。二、段落排版除了对网页文字进行设置外，还可以单独对文章的段落进行CSS规则设置，在HTML中p标记元素为段落标记。下表所示为段落排版常用的CSS段落规则相关属性。属性描述值text-indent段落首行缩进2emline-height行高2em或像素值letter-spacing中文字间距或英文中字母与字母的间距像素值word-spacing英文单词之间的间距像素值text-align文本对齐方式left（左对齐）、right（右对齐）、center（居中对齐）CSS段落规则相关属性二、段落排版下面将通过实例介绍如何使用CSS规则进行段落排版，具体操作方法如下。三、CSS背景通过background属性可以设置CSS背景规则。下表所示为CSS背景规则相关属性列表。属性描述background简写属性，作用是将背景属性设置在一个声明中background-color设置元素的背景颜色background-image设置背景图像background-position设置背景图像的起始位置background-repeat设置背景图像是否及如何重复background-attachment设置背景图像是否固定或者随着页面的其余部分滚动CSS背景规则相关属性列表三、CSS背景要为网页设置背景颜色，可以通过background-color属性进行设置。下面将举例说明，具体操作方法如下。背景颜色：background-color三、CSS背景要为网页设置背景图像，可以通过background-image属性进行设置。下面将举例说明，具体操作方法如下。背景图像：background-image三、CSS背景通过background-image属性设置的网页背景图像会铺满网页，还可以通过background-repeat属性设置背景图像的位置，如水平方向平铺、垂直方向平铺或不平铺。下面将举例说明，具体操作方法如下。背景图像重复：background-repeat三、CSS背景除了可以设置背景图像的平铺方向外，还可以使用background-position属性将背景图像设置到指定位置。

下面对素材网页中段落的开头部分设置背景图像，具体操作方法如下。背景图像定位：background-position属性值描述center将背景图像设置到页面中间top将背景图像设置到页面顶部bottom将背景图像设置到页面底部right将背景图像设置到页面右侧left将背景图像设置到页面左侧background-position属性值列表三、CSS背景除了可以设置背景图像的平铺方向外，还可以使用background-position属性将背景图像设置到指定位置。

下面对素材网页中段落的开头部分设置背景图像，具体操作方法如下。背景图像定位：background-position三、CSS背景要想使网页背景图像随着页面滚动或固定背景图像，需要使用background-

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

温馨提示

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

最新文档

评论

0/150

提交评论