网站设计与网页制作立体化项目教程（第4版） 课件 1-3 课件：样式设计-人物介绍页面美化_第1页
网站设计与网页制作立体化项目教程（第4版） 课件 1-3 课件：样式设计-人物介绍页面美化_第2页
网站设计与网页制作立体化项目教程（第4版） 课件 1-3 课件：样式设计-人物介绍页面美化_第3页
网站设计与网页制作立体化项目教程（第4版） 课件 1-3 课件：样式设计-人物介绍页面美化_第4页
网站设计与网页制作立体化项目教程（第4版） 课件 1-3 课件：样式设计-人物介绍页面美化_第5页
已阅读5页，还剩27页未读， 继续免费阅读

下载本文档

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

文档简介

1-3任务3：样式设计-人物介绍页面美化单元一：基本技能篇1-3任务3：样式设计-人物介绍页面美化（1）掌握CSS样式的分类。（2）掌握CSS语法规则。（3）掌握CSS选择器。（4）掌握CSS字体、文本、背景常用样式属性。（5）能对页面进行基本样式的设计。能力要求学习导览任务概述为钱学森先生的人物介绍页面设计基本样式，包括引入外部样式表，设置页面中字体、文本、背景样式。1-3任务3：样式设计-人物介绍页面美化任务思考（1）为什么称CSS是层叠样式表？

（2）ID选择器与类选择器有何区别，两者的应用场景是怎样的？

（3）对多个选择器设置相同的样式，如何写CSS规则？1-3任务3：样式设计-人物介绍页面美化回顾1-3任务3：样式设计-人物介绍页面美化CSS简介CSS全称为“层叠样式表(CascadingStyleSheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如字体、文本、背景等。1.内容与表现分离

2.网页的表现统一，容易修改

3.丰富的样式，使得页面布局更加灵活

4.减少网页的代码量，增加网页的浏览速度，节省网络带宽

5.运用独立于页面的CSS，有利于网页被搜索引擎收录CSS优势：1-3任务3：样式设计-人物介绍页面美化CSS优势<span>标签定义及使用说明<span>用于对文档中的行内元素进行组合。<span>标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对<span>应用样式，那么<span>元素中的文本与其他文本不会任何视觉上的差异。<span>标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。1-3任务3：样式设计-人物介绍页面美化CSS语法CSS由三个部分构成：选择器（selector），属性（properties）和属性的取值（value）。基本格式如下：selector{property:value}（选择符{属性：值}）1-3任务3：样式设计-人物介绍页面美化样式表种类（1）内联式CSS样式

<pstyle="font-size:12px;color:red;">字体是12像素的红色字</p>。（2）嵌入式CSS样式

<head><styletype="text/css"> p{font-family:"宋体";font-size:12px;color:red;}</style></head>（3）外部式CSS样式把所有的样式存放在一个以.css为扩展名的文件里，然后链接到各个网页中：

<linkhref=“css/style.css"rel="stylesheet"type="text/css">记住他们的优先级：内联式>嵌入式>外部式1-3任务3：样式设计-人物介绍页面美化任务一打开“1-3-1.html”，学习样式表种类，比较三者的优先级。1-3任务3：样式设计-人物介绍页面美化CSS选择器每一条css样式声明（定义）由两部分组成，形式如下：元素选择器类选择器ID选择器子选择器后代选择器通用选择器伪类选择器分组选择器1-3任务3：样式设计-人物介绍页面美化任务二打开“qianxshtml及style.css”，学习css选择器。1-3任务3：样式设计-人物介绍页面美化元素选择器元素选择器其实就是html代码中的标签。如编辑器中的<html>、<body>、<h1>、<p>、<img>语法如下：h1{font-size:36px;color:#1a2857;text-align:center;}1-3任务3：样式设计-人物介绍页面美化类选择器类选择器在css样式编码中是最常用到的，如为文字段落添加类名indent，设置字符缩进2em。语法如下：注意：1、英文圆点开头2、类选择器名称一般以英文字母开头，有一定的语义.类选择器{text-indent:2em;}1-3任务3：样式设计-人物介绍页面美化ID选择器ID选择器用法类似于类选择符，语法如下：注意：1、为标签设置id="ID名称"，而不是class="类名称"。2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。#ID选择器{font-size:14px;color:#ff0000;}1-3任务3：样式设计-人物介绍页面美化区别1、ID选择器只能在文档中使用一次。下面代码是正确的：下面代码是错误的：<p>之后，他通过类型电影<spanclass="redTxt">《战狼》</span>系列找到了具有个人独特风格的电影之路，并在战争类型片领域里取得了巨大的成功。吴京在<spanclass="redTxt">《战狼2》</span>中的搏命演出没有白费，他使得冷门的国产军事片引发了观影热潮。</p><p>之后，他通过类型电影<spanid="redTxt">《战狼》</span>系列找到了具有个人独特风格的电影之路，并在战争类型片领域里取得了巨大的成功。吴京在<spanid="redTxt">《战狼2》</span>中的搏命演出没有白费，他使得冷门的国产军事片引发了观影热潮。</p>1-3任务3：样式设计-人物介绍页面美化区别2、可以使用类选择器词列表方法为一个元素同时设置多个样式。下面的代码是正确的下面的代码是不正确的<p>之后，他通过类型电影<spanclass="redTxtbigsize">《战狼》</span>系列找到了具有个人独特风格的电影之路，并在战争类型片领域里取得了巨大的成功。吴京在《战狼2》中的搏命演出没有白费，他使得冷门的国产军事片引发了观影热潮。</p><p>之后，他通过类型电影<spanid="redTxtbigsize">《战狼》</span>系列找到了具有个人独特风格的电影之路，并在战争类型片领域里取得了巨大的成功。吴京在《战狼2》中的搏命演出没有白费，他使得冷门的国产军事片引发了观影热潮。</p>1-3任务3：样式设计-人物介绍页面美化子选择器用于选择指定标签元素的第一代子元素，语法如下：.works>li{border:1pxsolid#ff0000;}1-3任务3：样式设计-人物介绍页面美化后代选择器用于选择指定标签元素下的后辈元素，语法如下：.worksli{border:1pxsolid#ff0000;}1-3任务3：样式设计-人物介绍页面美化后代选择器如为文本“两弹一星”添加strong标签，并设置为红色，可以用后代选择器。.indentstrong{color:#ff0000;}1-3任务3：样式设计-人物介绍页面美化伪类选择器

我们最常用的是4种a（锚）元素的伪类，它表示动态链接在4种不同的状态：link、visited、active、hover。我们把它们分别定义不同的效果：a:link{color:#ff0000;text-decoration:none}/*未访问的链接*/a:visited{color:#00ff00;text-decoration:none}/*已访问的链接*/a:hover{color:#ff00ff;text-decoration:underline}/*鼠标在链接上*/a:active{color:#0000ff;text-decoration:underline}/*激活链接*/1-3任务3：样式设计-人物介绍页面美化其他选择器通用选择器：使用一个（*）号指定，它的作用是匹配html中所有标签元素语法如下：分组选择器：当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（,）*{color:#ff0000;}p,span{color:#ff0000;}1-3任务3：样式设计-人物介绍页面美化CSS基础样式css样式包含背景、文本、列表、表格、边框、定位等：参考文档：css2.0中文手册.chm1-3任务3：样式设计-人物介绍页面美化CSS字体属性1-3任务3：样式设计-人物介绍页面美化CSS文本属性1-3任务3：样式设计-人物介绍页面美化CSS背景属性1-3任务3：样式设计-人物介绍页面美化CSS背景属性1-3任务3：样式设计-人物介绍页面美化属性描述length设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为auto(自动)percentage将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

background-size属性值CSS背景属性1-3任务3：样式设计-人物介绍页面美化【示例代码】1-3-2.html,background-size取值为：cover、100%和contain的区别。background-size取值为100%background-size取值为coverbackground-s

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

温馨提示

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

最新文档

评论

0/150

提交评论