版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
HTML5+CSS3网页设计与制作为网页添加CSS样式表能够叙述CSS的概念。能够使用外部样式法为D清单网页添加CSS样式表。能够使用CSS标签选择符选择目标标签，使用正确的语法格式编写样式代码。能够使用CSS设置文字的大小、颜色和加粗效果。任务目标
为网页添加CSS样式表本次任务要求在上一阶段的D清单网页内容基础上，使用外部样式法为网页添加CSS样式表，并使用CSS样式设置整个页面通用的文字大小样式效果。完成后的效果图如图2-1所示。任务描述图2-1设置页面通用文字大小后的效果图
为网页添加CSS样式表要使用外部样式法为D清单页面添加CSS样式表，并设置整个页面通用的文字大小样式，需要：学习CSS3的基本语法；学习引入CSS样式的方法，正确使用外部样式法引入CSS样式表；分析D清单页面中文字大小样式，正确使用CSS设置D清单页面文字大小样式。D清单页面文字大小分析如图2-1-1所示。任务分析
为网页添加CSS样式表图2-1-1D清单页面文字大小分析图知识与技能准备CSS（CascadingStyleSheet）称为层叠样式表，也可以称为CSS样式表（或样式表），其文件扩展名为.css。CSS是用于增强或控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS3是CSS技术的升级版本，于1999年开始制订，内容涵括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。最终于2001年5月23日W3C完成工作草案并正式公布。1、认识CSS知识与技能准备每个样式包含两部分内容：选择器和声明（或称为规则），如图2-1-2所示：2、CSS3的基础语法图2-1-2CSS样式基本格式知识与技能准备（1）行内样式把CSS样式代码添加到HTML5的标记中，即作为HTML5标记的属性标记存在。例如：<pstyle=”color:red”>红色字体</p>（2）内嵌样式将CSS样式代码添加到<head>与</head>标签之间，并且用<style>和</style>标记进行声明。例如：这种用法也称为网页内部样式，适合为单页面定义CSS样式，不适合为一个网站或多个页面定义样式。其中/*字体为红色*/为CSS的注释格式。3、引入CSS样式12345678<head> <metacharset="utf-8"><title>使用CSS3样式</title><style>p{color:red;/*字体为红色*/font:16px;/*字体大小为16px*/
}</style></head>打开VisualStudioCode软件，输入如下标签：课堂练习2-1-1使用CSS样式设置文字12345678910111213141516<!doctypehtml><html><head>
<metacharset="utf-8"><title>使用CSS3样式</title>
<!--CSS样式--><style>h1{text-align:center;/*字体居中*/
}p{color:blue;/*字体为蓝色*/}</style></head>17181920212223<body><h1>CSS样式</h1><p>内嵌样式</p><p>适合为单页面定义CSS样式，不适合为一个网站或多个页面定义样式。</p></body></html>课堂练习2-1-1使用CSS样式设置文字效果图如下：图2-1-3使用内嵌样式效果图知识与技能准备（3）外部样式把样式放在独立的文件中，然后使用<link>标签或者@import关键字导入，一般网站都采用这种方法来设计样式，真正实现HTML结构和CSS样式的分离，以便统筹规划、设计、编辑和管理CSS样式。使用<link>标签使用<link>标签导入外部样式表文件的代码如下：rel：用于定义文档关联，这里表示关联样式表。type：定义导入文件类型，同style元素一样。href：指定CSS样式表所在的位置，此处表示当前路径下名称为001.css的文件。这里使用的是相对路径，如果HTML文档和CSS样式表没有在同一路径下，则需要指定样式表的绝对路径或引用位置。3、引入CSS样式<linkrel=”stylesheet”type=”text/css”herf=”001.css”>知识与技能准备使用@import命令在<style>标签内使用@import关键字导入外部样式表文件的方法如下：使用@import命令导入样式表，在HTML5文件初始化时，会被导入HTML5文件内，作为文件的一部分，类似于内嵌效果。而使用<link>标签导入样式表是在HTML5标记需要样式风格时才以链接方式引入。3、引入CSS样式<styletype=”text/css”>@importurl(“001.css”);</style>（1）打开VisualStudioCode软件，输入如下标签：课堂练习2-1-2使用链接样式12345678910111213<!doctypehtml><html><head> <metacharset="utf-8"><title>使用CSS3样式</title><linkrel="stylesheet"type="text/css"href="a1.css"></head><body><h1>CSS样式</h1><p>内嵌样式</p><p>适合为单页面定义CSS样式，不适合为一个网站或多个页面定义样式。</p></body></html>（2）在HTML同一路径下，新建HTML对应的CSS文件（命名为a1.css），输入如下代码：12p{color:blue;}/*字体蓝色*/h1{text-align:center;}/*字体居中*/知识与技能准备CSS3选择器用于指定样式设置对应的目标，CSS3选择器写法多样，可针对同种标签进行统一设置，也可针对指定标签进行设置。这里先介绍标签选择器，标签选择器也称为类型选择器，它直接引用HTML标签名称，用来匹配同名的所有标签。例如上一任务中的p选择器，就是用于声明页面中所有<p>标记的样式风格。其中tagName表示标记名称，例如p、h1等HTML标记；property表示CSS3的属性；value表示CSS3的属性值。4、CSS3选择器语法：tagName{property:value}知识与技能准备CSS样式效果用于设置不同的标签样式效果，格式为“属性名：值1值2…；”。5、CSS样式效果知识与技能准备font-size属性用来控制字体的大小。在设置字体大小时，可以使用绝对单位，也可以使用相对单位。px（pixel，像素），根据屏幕像素点的尺寸变化而变化。em，相对于父辈字体即包含其元素的页面标签（如没有包含元素则按<body>标签）所设定的大小来定义字体大小。ex，相对于父辈字体的x高度来定义字体的大小。%，以百分比的形式定义字体大小，它与em效果相同，相对于父辈字体的大小来定义字体大小。larger和smaller这两个关键字将以父元素的字体大小为参考进行换算。5.1文字大小：font-size语法：font-size：字体大小；知识与技能准备CSS使用color属性来定义字体颜色。5.2文字颜色：color语法：color：颜色值；属性值说明color_name规定颜色值为颜色名称的颜色（如red）hex_number规定颜色值为十六进制值的颜色（如#ff0000）rgb_number规定颜色值为RGB代码的颜色（如rgb(255,0,0)）inherit规定应该从父元素继承颜色hsl_number规定颜色值为HSL代码的颜色（如hsl(0,75%,50%)）hsla_number规定颜色值为HSLA代码的颜色（如hsla(120,50%,50%,1)）rgba_number规定颜色值为RGBA代码的颜色（如rgba(125,10,45,0.5)）表2-1-1color属性知识与技能准备font-weight属性定义字体的粗细程度。normal：正常的字体。相当于数字值400。bold：粗体。相当于数字值700。bolder：定义相对于父标签更重的值。lighter：定义相对于父标签更轻的值。粗度数值：用数字表示文本字体粗细。可选用100|200|300|400|500|600|700|800|900数值。5.3文字加粗：font-weight语法：font-weight：100-900|bold|bolder|lighter|normal；（1）打开VisualStudioCode软件，输入如下标签：课堂练习2-1-3使用CSS设置文字样式1234567<div><p>HTML5</p><span>HTML5</span>是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。</div>（2）设置<div>内的字体大小为20像素，<p>字体大小为父标签的1.5倍，字体加粗，<span>字体颜色为红色。CSS样式设置如下：12345678<style>div{font-size:20px;}p{font-size:1.5em;font-weight:bold;}span{color:red;}</style>课堂练习2-1-3使用CSS设置文字样式效果图如下：图2-1-4使用CSS设置文字样式任务实施1、在D清单网页文件相同的目录下新建一个文件夹，命名为css。2、创建index.css文件，并将其保存在css文件夹，便于管理，如图2-1-5所示。3、在阶段1完成的index.html网页头部<head>中添加<link>标签，引入CSS文件。至此完成了使用外部样式添加D清单网页的CSS样式。参考代码如下：图2-1-5保存CSS文件123456<head> <metacharset="utf-8"> <metaname="viewport"content="width=device-width,initial-scale=1"> <title>D清单</title><linkrel="stylesheet"href="css/index.css"/></head>任务实施4、CSS文件一般可分为两个部分。第一部分是通用样式，主要设置网页标签的通用样式效果，将对整个网页生效，以减少网页各模块相同效果的重复设置，并且可以在其它页面中实现复用，提高开发效率，此任务要求完成这一设置。第二部分是对各具体内容独立设置效果，个性化强但复用性差，我们在后面的任务中进行的样式设置主要是此种类型。在移动端添加文本格式设置
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
评论
0/150
提交评论