《电子商务网页设计与制作》课件项目七_第1页
《电子商务网页设计与制作》课件项目七_第2页
《电子商务网页设计与制作》课件项目七_第3页
《电子商务网页设计与制作》课件项目七_第4页
《电子商务网页设计与制作》课件项目七_第5页
已阅读5页，还剩12页未读， 继续免费阅读

下载本文档

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

文档简介

项目七使用CSS样式进行美化页面能力目标：(1)独立使用Dreamweaver制作CSS层叠样式表(2)Dreamweaver中创建和修改CSS样式表(3)能够进行设置CSS样式表的常用属性和属性值知识目标：(1)CSS样式表的基本格式(2)CSS样式表的常见引用方式(3)掌握使用CSS样式表美化页面的基本技术任务一认识CSS样式表2级标题{

字体：宋体； 大小：15像素； 颜色：红色； 装饰：下划线

}h2{ font-family:宋体; font-size:15px; color:red; text-decoration:underline; }任务一认识CSS样式表CSS标记选择器任务一认识CSS样式表

类别选择器任务一认识CSS样式表在HTML中使用CSS的方法内嵌式内嵌式就是将CSS代码和HTML代码，放在同一个HTML文件当中，具体使用方式我们看下面的代码。<html><head><title>内嵌式</title><styletype="text/css">p{ color:red; font-size:36px;}</style></head><body> <p>CSS代码内嵌式</p></body></html>任务一认识CSS样式表在HTML中使用CSS的方法链接式链接式就是将HTML代码和CSS代码分离开来，并分别存储在两个或者多个文件中。使用的时候使用固定的格式引用就可以了。具体使用方式看下面的代码。HTML代码文件：<html><head><title>链接式</title><linkhref="1.css"type="text/css"rel="stylesheet"></head><body> <p>CSS代码链接式</p></body></html>

CSS代码文件：p{ color:red; font-size:36px;}任务三使用CSS样式美化网页长度和颜色（1）长度在网页中，无论文字、图片还是表格，这些元素都需要设置长度。在CSS中有多种长度单位，这里重点介绍最常用的“像素”长度单位。像素的单位为“px”，一个像素代表显示器上一个像素点的长度，在CSS中设置网页元素的长度时可以用，“数字+px”来表示元素的长度，比如，设置字体大小为24个像素，我们可以写成“font-size:24px;”（2）颜色在CSS中表示网页元素的颜色也有多种方式，这里重点介绍最常用的“6位十六进制数值表示法”。顾名思义“6位十六进制数值表示法”就是使用一个6位的十六进制数来表示某个颜色，比如字体为黑色我们可以写成“color:#000000;”实际上在Dreamweaver中设置元素的颜色时，并不需要记住每种颜色的6位十六进制数值，只要在取色板里选择想要的颜色就可以了，颜色的数值Dreamweaver会自动生成。尺度单位名说明in（英寸）不是国际标准单位，平常极少使用cm（厘米）国际标准单位，较少用mm（毫米）国际标准单位，较少用pt（点数）最基本的显示单位，较少用pc（印刷单位）应用在印刷行业中，1pc

=

12pt任务三使用CSS样式美化网页设置字体在CSS中，使用font-family属性来设置字体的样式。比如，针对页面中所有p标签设置字体为“微软雅黑”，代码如下：p{font-family:"微软雅黑";}设置文字大小在CSS中，使用font-size属性来设置文字的大小。一般使用“数字+像素”的格式来设置文字大小。比如，针对页面中所有p标签的字体设置为“36像素”，代码如下：p{font-size:36px;}/*字体大小36个像素*/任务三使用CSS样式美化网页设置文字行高在CSS中，使用line-height属性来设置行的高度，通过它可以控制行与行之间的距离。一般使用“数字+像素”的格式来设置行高。比如，针对页面中所有p标签设文字行高为“20像素”，代码如下：p{line-height:20px;}/*行高为20个像素*/设置文本的水平位置在CSS中，使用text-align属性来设置文本的水平位置。p{text-align:left;}/*左对齐*/p{text-align:right;}/*右对齐*/p{text-align:center;}/*居中对齐*/p{text-align:justify;}/*两端对齐*/任务三使用CSS样式美化网页设置文字粗细在CSS中，使用font-weight属性来设置文字的粗细设置值说明normal正常粗细bold粗体bolder加粗体lighter比正常粗细要细100-900共有9个层次（100，200…900），数字越大字体越粗

任务三使用CSS样式美化网页设置图片边框基本属性在CSS中，一个边框由以下3个要素组成。（1）border-width（粗细）：可以使用各种CSS中的长度单位，最常用的是像素。（2）border-color（颜色）：可以使用各种合法的颜色来定义方式。（3）border-style（线型）：可以在一些预先定义好的线型中选择。属性值说明none定义无边框dotted定义点状边框dashed定义虚线solid定义实线double定义双线表7-2border-style属性值

为不同的边框分别设置样式在CSS中，可以分别使用border-left，border-right，border-top，border-bottom搭配上面学的内容来分别单独设置上下左右四条边框的样式、颜色和粗细。代码如下：img{ border-left-style:solid;/*左边框样式为实线*/ border-left-color:#F00;/*左边框颜色为红色*/ border-left-width:5px;/*左边框粗细为5个像素*/ border-right-style:dotted;/*右边框样式为点画线*/ border-right-color:#000;/*右边框颜色为黑色*/ border-right-width:2px;/*右边框粗细为2个像素*/ border-top-style:dashed;/*上边框样式为虚线*/ border-top-color:#00F;/*上边框颜色为蓝色*/ border-top-width:10px;/*上边框粗细为10个像素*/ border-bottom-style:double;/*下边框样式为双线*/ border-bottom-color:#FF0;/*下边框颜色为黄色*/ border-bottom-width:20px;/*下边框粗细为20个像素*/}任务三使用CSS样式美化网页

设置图片缩放在CSS中，使用width属性来设置图片的宽度，使用height属性来设置图片的高度。单位同样使用像素。具体书写方式，代码如下：img{ width:500px;/*图片宽500个像素*/ height:300px;/*图片高300个像素*/}img{ width:80%;/*图片宽度为上一级标签宽度的80%*/ height:80%;/*图片高度为上一级标高度的80%*/}任务三使用CSS样式美化网页

设置图文混排文字环绕在CSS中，使用float属性来设置文字的环绕方式，属性值可以设置为“left”和“right”，分别表示左环绕和右环绕img{float:left;/*文字左环绕*/}img{float:right;/*文字右环绕*/}图片与文字的间距在CSS中，使用margin属性来设置图片图片和文字的间距，单位同样使用像素。具体书写方式，代码如下：img{ float:left; margin:20px;/*图片和文字间距为20个像素*/}任务三使用CSS样式美化网页

设置背景图像在CSS中，使用background-image属性来设置背景图片，属性值为图片的相对路径。具体书写方式，代码如下：body{ background-image:url(1.jpg);/*网页背景图片为1.jpg*/}用上述代码设置背景图像后，图像会自动沿着水平和垂直两个方向平铺。设置背景图像平铺在默认情况下，图像会自动向水平和垂直两个方向平铺。具体书写方式，代码如下：body{ background-image:url(1.jpg);/*背景

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

温馨提示

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

最新文档

评论

0/150

提交评论