HTML5+CSS3网页设计基础教程教学课件5.pptx

下载文档降价

110
0
约2.42万字
约 154页
2022-03-01 发布于广东
举报
版权申诉
保障服务

HTML5+CSS3网页设计基础教程教学课件5.pptx

1、本文档共154页，可阅读全部内容。
2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击这里二次下载。
4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。

HTML5+CSS3网页设计基础教程;;单元导读要制作精美的网页离不开CSS样式的使用，本章主要介绍CSS三种样式表的使用方法和多种选择器的使用规则以及CSS3关于文本、背景、列表的常用属性。;学习目标掌握内联样式表的使用规则；掌握内嵌样式表的使用规则；掌握外部样式表的使用规则；掌握CSS3基础选择器的使用方法；掌握CSS3高级选择器的使用方法；掌握CSS3伪类选择器和伪元素选择器的使用方法；掌握CSS不同引用方式的优先级掌握CSS3关于文本、背景、列表的常用属性;思政目标本章学习CSS的多种使用方式，使页面更美化，编辑效率更高，代码更规范，让学生知道“美”的重要性，知道外观上的美能给人更舒适的功能体验与美好的享受，进而培养学生的审美观，发展他们鉴赏美、创造美的能力，培养他们的高尚情操和文明素质。;CSS英文全称为Cascading Style Sheets，叫作层叠样式表，是一种用来表现HTML文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS有多种版本，从CSS1到CSS2，再到CSS3，是CSS2技术的一个升级版本。使用CSS的好处有：;提供的文档样式外观非常丰富，对文本和背景样式的控制能力强大，允许为各种元素做灵活多变的样式设置。使样式的表现和元素内容分离开，设计的样式甚至可以独立的存放在一个文件中，使代码更加易于修改，便于对网页风格的更新与维护。样式可以重复使用，简化了网页的格式代码，使代码结构更清晰，更规范，节约下载流量，提升下载速度，也有利于搜索引擎的搜索。;任务1. 第一个CSS样式实例体验——输入以下HTML5新增的布局标签，观察网页布局效果。;<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>为div标签添加样式</title> <style type="text/css"> div{ width:420px; height:240px; background:#eeeeff; border:3px solid orange; text-align:center; } </style> </head>;<body> <div> <p>北京</p> <p><img src="images/ illime.png"></p> </div> </body> </html> ;效果如图5-1：;任务分析 1. 在本例中CSS样式被写在了头部标签<head>中，样式中的语句要用一对<style>标签括起来。 2. 每一组样式要用一对花括号{}括起来，本例中花括号中共有五条语句，每条语句以分号 “;” 结束。 3. 本例中，花括号前面是div，表示要把这组样式加到标签为div的对象上。 4. width:420px;表示宽度设置为420像素，height:240px表示高度设置为240像素，注意CSS样式中的属性值用冒号 “:” 赋值，而不是等号。;5. background:#eeeeff; 表示背景颜色设置为淡紫色，#eeeeff是这种淡紫色的六位颜色代码。 6. border:3px solid orange; 表示边框粗细为3像素，线型为实线，颜色为桔黄色。 7. text-align:center; 表示<div>内部的内容居中显示。 8. 没有CSS样式的HTML页面苍白杂乱，合理的使用了CSS样式后使网页更加规整，美观，具有了更好的可读性。;CSS样式可以直接写在HTML文档之内，也可以以独立文件的形式存放在文档外部，由文档使用的时候去调取，CSS样式的设置有以下三种方式：内联样式：也叫行内样式，是将样式以标签属性的形式写在所要设置的标签后面。内嵌样式：将样式写在网页文件头部<head>标签内，一个样式可以在页面之内被多次利用。外部样式：将样式以独立的文件存储，文件格式为 .css ，样式表文件可以被各个HTML文件多次调用。;任务2. 内联样式的使用——输入以下代码，制作诗文页面，观察内联样式的使用和页面效果。;<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>春晓</title> </head> <body> <h3 style="color:red;">春晓</h3> <p style="color:green;font-size:16px;">春眠不觉晓，</p> <p style