HTML5-CSS3网站设计基础完整版全套ppt课件教程-高职高专.pptx

《HTML5-CSS3网站设计基础完整版全套ppt课件教程-高职高专.pptx》由会员分享，可在线阅读，更多相关《HTML5-CSS3网站设计基础完整版全套ppt课件教程-高职高专.pptx（421页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、,认识HTML5,项目要点,HTML5文档声明,01.,02.,HTML5废弃以及新增的标签和属性,技能目标,掌握HTML5的文档声明和语法规范,01.,02.,了解HTML5的新标签,任务1新的文档声明和语法规范,任务1 新的文档声明和语法规范,HTML5万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。,HTML（Hyper Text Markup Language，超文本标记语言或叫超文本标签语言）是用来描述网页的一种语言，是创建Web页的基础。HTML不是一种编程语言，而是一种标记语言（Markup Language），标记语言是一套标记标签，H

2、TML使用标记标签来描述网页。,HTML5的设计目的是为了在移动设备上支持多媒体，如video、audio和canvas 标记。 HTML5提供了一些新的元素和属性，例如（网站导航块）和。这种标签有利于搜索引擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用。,任务1 新的文档声明和语法规范,任务1 新的文档声明和语法规范,大小写不敏感。而且它没有结束标签。 meta的属性，没有相应的结束标签，该标签不包含任何内容，标签描述的内容并不显示，其目的是方便浏览器解析或利于搜索引擎搜索，使用该标签描述网页的具体摘要信息，包括文档内容类型、字符编码信息、搜索关键字、网站提供的功能和服务的详细描述等。

3、,任务1 新的文档声明和语法规范,标签的属性定义了与文档相关联的名称/值对。 其中属性“http-equiv”提供“名称/值”中的名称，“content”提供“名称/值”中的值，所以上述HTML代码的含义如下：名称Content-Type（文档内容类型），值text/htm；charest=gb2312（文本类型的HTML类型，字符编码为简体中文）中charest表示字符编码，常用字符编码有如下4种： gb2312：简体中文，一般用于包含中文和英文的页面。 ISO-885901：纯英文一般用于只包含英文的页面。 big5：繁体，一般用于带有繁体字的页面。 utf-8：国际通用字符编码，同样适用

4、于中文和英文的页面。与gb2312编码相比，utf-8的国际通用性更好，utf-8（8-bit Unicode Trasformation Fomat)是一种针对Unicode的可变长度字符编码，又称万国码,任务1 新的文档声明和语法规范,任务2 HTML5废弃的标签和属性,实践SQL*Plus格式命令,任务3 HTML5新标签,实践SQL*Plus格式命令,任务3 HTML5新标签,命令行方式创建用户,任务3 HTML5新标签,命令行方式创建用户,任务3 HTML5新标签,命令行方式创建用户,任务3 HTML5新标签,命令行方式创建用户,感谢聆听,初识 HTML|“李清照宋词赏析”页面制作|

5、“商品信息”页面制作|“相宜本草促销”页面制作|注释和特殊符号|W3C标准,使用HTML5的基本标签,知识目标,掌握静态页面的开发环境,01.,02.,掌握HTML5基本标签的使用,能力目标,能使用Dreamweaver编写HTML代码,01.,02.,能使用各种基本标签建立简单网页,任务1 初识HTML,任务1初识HTML -01HTML文件的基本结构,任务1初识HTML -02编辑工具,任务2 “李清照宋词赏析”页面制作,实践SQL*Plus格式命令,任务2 李清照宋词赏析”页面制作-01标题标签,标题标签,一级标题 二级标题 三级标题 四级标题 五级标题 六级标题,任务2 李清照宋词赏析

6、”页面制作-02段落标签,命令行方式创建用户,我和我的祖国 填 词：张藜 谱 曲：秦咏诚 歌曲原唱：李谷一 我和我的祖国，一刻也不能分割 无论我走到哪里，都流出一首赞歌 我歌唱每一座高山，我歌唱每一条河 袅袅炊烟，小小村落，路上一道辙 我最亲爱的祖国，我永远紧贴着你的心窝 你用你那母亲的脉搏和我诉说,任务2 李清照宋词赏析”页面制作-03水平线标签,命令行方式创建用户,我和我的祖国 填 词：张藜 谱 曲：秦咏诚 歌曲原唱：李谷一 我和我的祖国，一刻也不能分割 无论我走到哪里，都流出一首赞歌 我歌唱每一座高山，我歌唱每一条河 袅袅炊烟，小小村落，路上一道辙 我最亲爱的祖国，我永远紧贴着你的心窝

7、你用你那母亲的脉搏和我诉说 我的祖国和我，像海和浪花一朵 浪是海的赤子，海是那浪的依托 每当大海在微笑，我就是笑的旋涡 我分担着海的忧愁，分享海的欢乐 我最亲爱的祖国，你是大海永不干涸 永远给我，碧浪清波，心中的歌,任务3 “商品信息”页面制作,表格标签,04,表单标签,05,分区标签,06,任务3 “商品信息”页面制作-01有序列表标签,命令行方式创建用户, CSS+DIV页面布局技术所学知识： 项目一 HTML的基本标签 项目二 表单应用 项目三 表格应用和布局 项目四 CSS样式表 ,任务3 “商品信息”页面制作-02无序列表标签,命令行方式创建用户,一个无序列表： 咖啡 茶 牛奶 ,任

8、务3 “商品信息”页面制作-03定义列表标签,命它使用、表示定义列表，、表示术语，、表示术语的具体描述，其中dl是definition lists的缩写，是definition term的缩写，是definition description的缩写。令行方式创建用户, 海阔天空 比喻象大海一样辽阔，象天空一样无边无际。形容大自然的广阔。出自：唐刘氏瑶暗离别诗：“青鸾脉脉西飞去，海阔天高不知处。” ,任务3 “商品信息”页面制作-04表格标签,命令行方式创建用户,任务3 “商品信息”页面制作-05表单标签,命令行方式创建用户,任务3 “商品信息”页面制作-06分区标签,命令行方式创建用户, 放置在

9、DIV中的段落，div简单而言是一个区块容器标记，即div相当于一个容器，一个“装东西的盒子”，可以容纳段落、标题、表单、图片、乃至单元等各种HTML元素。 放置在DIV中的标题标签 放置在DIV中的无序列表标签 放置在DIV中的无序列表标签 放置在DIV中的无序列表标签 放置在DIV中的无序列表标签 div标签中的普通文字. ,任务4 “商品信息”页面制作,超链接标签,04,任务4 “商品信息”页面制作-01图像标签,命令行方式创建用户, 春节指汉字文化圈传统上的农历新年，传统名称为新年、大年。 农历正月初一开始为新年，一般认为至少要到正月十五（上元节）新年才结束。 ,任务4 “商品信息”页

10、面制作-02范围标签,命令行方式创建用户, 春节指汉字文化圈传统上的农历新年，传统名称为新年、大年。 农历正月初一开始为新年，一般认为至少要到正月十五（上元节）新年才结束。 ,任务4 “商品信息”页面制作-03换行标签,命令行方式创建用户,阳光，不只来自太阳，也来自我们的心 阳光，不只来自太阳，也来自我们的心。心里有阳光，能看到到世界美好的一面；心里有阳光，能与有缘的人心心相映；心里有阳光，即使在有遗憾的日子，也会保留温暖与热情；心里有阳光，才能提升生命品质。自信、宽容、给予、爱、感恩吧，让心里的阳光，照亮生活中的点点滴滴，阳光的心，造就阳光的命运。 ,任务4 “商品信息”页面制作-04超链接

11、标签,任务4 “商品信息”页面制作-04超链接标签,免费注册 登录,任务5 注释和特殊符号,任务5 注释和特殊符号-01HTML注释,命令行方式创建用户,我们经常要在一些代码旁做一些HTML注释，这样做的好处很多，比如方便查找，方便比对，方便项目组里的其他程序员了解你的代码，而且可以方便以后你对自己代码的理解与修改等，当服务器遇到注释时会自动忽略注释内容。HTML注释的开始使用。 搜狗首页 ,任务5 注释和特殊符号-02特殊符号,命令行方式创建用户,在HTML中不能使用小于号（），这是因为浏览器会误认为它们是标签，如需显示小于号，我们必须这样写：”结束。,任务6 W3C标准,任务6 W3C标准

12、-01什么是W3C标准,命令行方式创建用户,W3C标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。W3C万维网联盟主要职责是负责Web标准的制定和维护。Web开发方面常设计的W3C标准如下： （1）HTML内容方面XHTML （2）样式美化方面CSS （3）行为标准方面DOM （4）页面交互方面ECMAScript,任务6 W3C标准-02W3C提倡的W

13、eb页结构,内容XHTML只负责页面的内容结构，CSS（Cascading Style Sheet，简称CSS，通常又称为“样式表”）负责表现样式（例如字体颜色、大小、背景图、显示位置等），方便网站的修改和维护。,HTML是一种对文本内容进行结构和意义（或者说“语义”）进行补充的方法。,任务6 W3C标准-03HTML5代码规范,命令行方式创建用户,1使用正确的文档类型 2使用小写元素名 3关闭所有 HTML 元素 4关闭空的 HTML 元素 5使用小写属性名 6属性值 7空行和缩进 8不推荐省略 、 和 标签。,感谢聆听,“会员注册”页面制作|HTML5 新的 input 类型|HTML5

14、新的表单元素,表单应用,知识目标,掌握表单的基本语法,01.,02.,掌握各种表单元素的使用和语法,能力目标,能使用各种基本表单元素标签建立含有表单的网页,01.,02.,能使用HTML5新增的元素,任务1 “会员注册”页面制作,任务1“会员注册”页面制作-01表单的基本语法,表单是一个集合概念，它是一个能够包含表单元素的区域。表单是一个集合概念，它是一个能够包含表单元素的区域。, ,任务1“会员注册”页面制作-02表单基本元素的介绍,在表单中，文本框用来让用户输入字母、数字等单行文本信息的。size=“8”，value=“输入你的名字”，在设计状态看到如右上图效果，长度为8，可以显示4个汉字

15、，浏览时不同浏览器略有不同，如右下图。一般不建议使用size设置长度，而是通过css的width属性进行相应设置。,任务1“会员注册”页面制作-02表单基本元素的介绍,type属性设置成password，就可以创建一个密码框，输入的字符以“ ”显示，已达到加密的作用放置别人偷看。 密码: ,任务1“会员注册”页面制作-02表单基本元素的介绍,type=submit和type=reset分别是“提交”和“重置”两按钮。“提交”按钮用于提交表单数据，将form中所有内容进行提交action页处理，“重置”按钮用于清空现有表单数据。 姓名: 密码: ,任务1“会员注册”页面制作-02表单基本元素的介

16、绍,type=button是标准Windows风格的按钮，也就是普通按钮，当然要让按钮跳转到某个页面上还需要加入写JavaScript代码。 ,任务1“会员注册”页面制作-02表单基本元素的介绍,type=image是比较另类的一个，代表图片按钮，虽然type没有设置为“submit”，但它有提交功能。 ,任务1“会员注册”页面制作-02表单基本元素的介绍,type=checkbox表示多选框，常见于注册时选择爱好、性格等信息。参数有name、value及特别参数checked（表示默认选择），其实最重要的还是value值，提交到处理页的也就是value（附：name值可以不一样，但不推荐，建

17、议name值相同）。, 爱好: 运动 玩游戏 ,任务1“会员注册”页面制作-02表单基本元素的介绍,type=radio即单选框，出现在多选一的页面中，如性别选择。参数同样有name、value及特别参数checked。不同于checkbox的是，name值一定要相同，否则就不能多选一。当然提交到处理页的也是value值。, 性别： 男 女 ,任务1“会员注册”页面制作-02表单基本元素的介绍,type=file可以将本地网络上的某个文件以二进制数据流的形式传递到服务器，是当你在BBS上传图片，或者在Email中上传附件时一定少不了的东西，提供了一个文件目录输入的平台，会创建一个不能输入内容的

18、地址文本框和一个“浏览”按钮，单击“浏览.”按钮，将会弹出“选择要加载的文件”窗口，选择文件后，路径将显示在地址文本框中。参数有name、size。使用这个元素时form元素的method属性必须设置为post。, ,任务1“会员注册”页面制作-02表单基本元素的介绍,基本语法如下： 一般使用表单下拉列表选择数据，如省、市、县、年、月等数据，我们即可使用下拉菜单表单进行设置，select是下拉列表菜单标签，option为下拉列表数据标签，value为option的数据值（用于数据的传值），selected默认被选中的项。, 苹果 桔子 芒果 ,任务1“会员注册”页面制作-02表单基本元素的介绍

19、,文本域，也就是多行输入框（textarea），主要用于输入两行或两行以上的较长文本信息，主要应用于用户留言或者聊天窗口以及协议。 基本语法如下： 初始文本 name为传值命名，cols为文本域的可见字符宽度，也就是字符列数，表示每行可以输入多少列文字，跟具体数字，如cols=1表示一行最多可以输入一个汉字，两个字符。rows为文本域的可见字符行数，默认输入框区域显示高度，跟具体数字。, 请阅读服务协议 服务协议的具体内容 ,任务1“会员注册”页面制作-02表单基本元素的介绍,基本语法如下： 作用：隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的

20、程序所使用。浏览者单击“发送”按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。,任务1“会员注册”页面制作-02表单基本元素的介绍,只读和禁用效果分别通过readonly和disabled属性，例如要实现协议只读和注册按钮禁用的效果，对应的部分HTML代码： 服务协议的具体内容 ,任务2 HTML5 新的 input 类型,此类型要求键入格式正确的email地址，否则浏览器是不允许提交的,并会有一个错误信息提示。此类型必须指定name值，否则无效果。 格式：,此类型要求输入格式正确的url地址，否则浏览器是不允许提交的,并会有一个错误信息提示。此类型必须指定name值，否则无效果。 格式

21、：,时间日期相关输入类型这一系列表单控件给我们提供了丰富的用于日期选择的表单样式，包括年、月、周、日等。只需要一行代码就可以实现交互性非常强的效果，然而遗憾的是目前在Windows下仅有Chrome和Opera支持。 格式： 格式：,说明：用于输入一个数值，可以通过属性设置最小值、最大值、数字间隔、默认值(IE不支持)。 格式： max：规定允许的最大值； min：规定允许的最小值； step：规定合法的数字间隔； value：规定默认值；,说明：和前面的number类似,只不过这里是用滑块展示,如果是在移动端展示的话,给用户的体验会比较好。 格式： max：规定允许的最大值； min：规定允

22、许的最小值； step：规定合法的数字间隔； value：规定默认值；,说明：此类型表示输入的将是一个搜索关键字,通过设置results=s可显示一个搜索小图标。 格式： ,说明：此类型要求输入一个电话号码，换行符会从输入值中去掉。 格式：,说明：一个非常炫酷的效果,并且在最新的火狐、谷歌、欧朋浏览器中都支持，可让用户通过颜色选择器选择一个颜色值，以十六进制保存，可以通过value访问到，并且可以自定义颜色组。 格式：,任务3 HTML5 新的表单元素,说明：datalist 元素规定输入域的选项列表。 列表是通过 datalist 内的 option 元素创建的。 如需把datalist绑定

23、到输入域，用输入域的list属性引用 datalist的id.列表当中的value属性是必须，新版本的Chrome和Opera支持该属性。 ,说明：keygen 元素的作用是提供一种验证用户的可靠方法。 keygen 元素是密钥对生成器。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥存储于客户端，公钥则被发送到服务器。公钥可用于之后验证用户的客户端证书。 格式:用户名: 加密:,说明：output用于计算结果的输出. /页面加载完成后执行 window.onload=function() /通过id获取表单元素 var number= document.getElementById(n

24、umber); var total=document.getElementById(total); /添加失去焦点事件 number.onblur=function() /计算总价 利用单价乘以数目 var totalprice=parseInt(document.getElementById(price).value)*parseInt(this.value) /将结果输出 total.value=totalprice; , 单价: 数目: 总价: ,感谢聆听,表格基础知识|跨行和跨列实现“商品分类”|表格布局化妆品页面|表格布局注册页面|“华人女歌手歌曲周排行榜”页面制作| iframe框

25、架,表格应用和布局,知识目标,掌握跨行列的表格的制作,01.,02.,掌握表格布局页面方法,03.,掌握表格实现报表方法,能力目标,能灵活运用跨行跨列实现表格显示数据,01.,02.,能运用表格结构进行图文布局和表单布局,任务1表格基础知识,任务1表格基础知识-01表格的基本结构,不单独使用，它通常与tr和td一起使用。tr是table row的缩写，td是table data cell的缩写。标签表示开启表格的一行（row）。标签表示表格的一个数据单元（data）即单元格。标签的数量可多可少，但一个表格至少要包含一个行。每一行的单元格的个数必须相同（后面学了跨行跨列后，情况将会不同）。,任务

26、1表格基础知识-02表格的基本语法, 第1行第1个单元格的内容 第1行第2个单元格的内容 . 第2行第1个单元格的内容 第2行第2个单元格的内容 . ,任务2 跨行和跨列实现“商品分类”,任务2 跨行和跨列实现“商品分类”-01跨列,有的单元格在水平方向上是跨多个单元格的，这就需要使用跨列属性colspan。 基本语法：, 我的成绩 SQL Server数据库技术 98 CSS+DIV页面布局技术 95 ,任务2 跨行和跨列实现“商品分类”-02跨行,有的单元格在垂直方向上是跨多个单元格的，这就需要使用跨行属性rowspan。 基本语法：, 张雯雯 SQL Server数据库技术 98 CSS

27、+DIV页面布局技术 95 李青青 SQL Server数据库技术 88 CSS+DIV页面布局技术 91 ,任务2 跨行和跨列实现“商品分类”-03跨行和跨列, CSS+DIV页面布局技术 91 , 学生成绩 张雯雯 SQL Server数据库技术 98 CSS+DIV页面布局技术 95 李青青 SQL Server数据库技术 88 ,任务3表格布局化妆品页面,命令行方式创建用户, 化妆品网上大比拼 如何辨别化妆品真伪 自然堂化妆品怎么样 聚美优品网上购物 ,任务3表格布局化妆品页面,命令行方式创建用户, 商品图片 商品名称/卖家价格 膜法世家樱桃睡眠免洗面膜100g 补水去黄保湿美白提亮

28、卖家：lingture , 收藏 一口价 283.30 ,任务4表格布局注册页面,命令行方式创建用户, 会员名：（可包含 a-z、0-9 和下划线） ,密 name=Button src=images/login.gif / ,任务4表格布局注册页面,命令行方式创建用户, 阅读芙蓉网服务协议 欢迎阅读服务条款协议 , 头像： ,任务5“华人女歌手歌曲周排行榜”页面制作,命令行方式创建用户,表示表头，是对数据列进行的分类。可以用单独的样式定义表头，并且在打印时可以在分页的上部打印表头。标签表示表格的主体，标签表示表格的表尾，其中的内容类似word的页脚属性，打印时在页面底部显示。因此、三个标记分

29、别对应表格的表头、表主体也就是表身、表尾，从而实现常见的报表等表格。如图4.13所示为一张使用了、三个标签的表格。,任务5“华人女歌手歌曲周排行榜”页面制作,命令行方式创建用户, 华人女歌手歌曲周排行榜 歌曲名 演唱者 飘洋过海来看你 丁当 一个像夏天一个像秋天 范玮琪 最好的未来 刘若英 , 蝴蝶 王菲 我在的地方 郑秀文 更多 ,任务6 iframe框架,命令行方式创建用户,内嵌框架基本语法如下： HTML不再推荐页面中使用框架集，因此HTML5删除了、和这三个元素。不过HTML5还保留了元素，该元素可以在普通的HTML页面中使用，生成一个行内框架，可以直接放在HTML页面的任意位置。除了

30、指定id、class和style之外，还可以指定如下属性： src：指定一个URL，指定该iframe将装载哪个页面。 name：设置iframe的名字。 scrolling：设置iframe中显示滚动条：yes、no、auto（大小不够时显示）。 height：设置iframe的高度。 width：设置该iframe的宽度高度、宽度可以为百分比，可以为具体高宽数值，不需要跟单位。通常需要设置高度、宽度具体数值。 frameborder：设置是否显示该iframe的边框。 marginheight：设置该iframe的顶部和底部的页边距。 marginwidth：设置iframe的左侧和右侧的

31、页边距。,任务6 iframe框架,命令行方式创建用户,在此网页中嵌入360网站的首页 上面就是利用iframe标签将360网站的首页嵌入到我们的网页中 ,感谢聆听,video视频元素|video音频元素,HTML5中的音频和视频的应用,知识目标,HTML中的视频应用,01.,02.,HTML中的音频应用,能力目标,了解HTML5中的视频的应用格式,01.,02.,了解HTML5中的音频的应用格式,任务1video视频元素,01,嵌入一个WebM 视频,05,兼容多个浏览器,任务1video视频元素-01嵌入一个WebM 视频, 解释：插入一个视频，主流的视频为.webm，.mp4，.ogg

32、等。 src 表示资源，width 表示宽度；height 表示高度。,任务1video视频元素- 02附加一些属性, 解释：autoplay 表示自动开始播放；controls 表示显示播放控件； loop 表示循环播放；muted 表示静音。,任务1video视频元素- 03预加载设置, 解释：preload 属性有三个值：none 表示播放器什么都不加载； metadata 表示播放之前只能加载元数据（宽高、第一帧画面等信息）； auto 表示请求浏览器尽快下载整个视频。,任务1video视频元素- 04使用预览图, 解释：poster 属性表示在视频的第一帧，做一张预览图。,任务1vi

33、deo视频元素- 05兼容多个浏览器, 解释：通过元素引入多种格式的视频，让更多的浏览器保持兼容。 source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。 ,任务2audio 音频元素,任务2audio 音频元素-01嵌入一个音频, 解释：和嵌入视频一个道理,任务2audio 音频元素-02兼容多个浏览器, ,感谢聆听,CSS基本语法|CSS的应用方式|选择器的分类|CSS继承性、层叠性、特殊性|CSS3新增选择器,CSS3基础应用,知识目标,掌握CSS的基本语法,01.,02.,掌握CSS的选择器,能力目标,会使用CSS设置样式,01.,02.,能用CSS的选择器进行样式

34、设置,任务1 CSS基本语法,创建与使用分组查询,为什么使用CSS,CSS的基本语法,书写CSS注意事项,任务1 CSS基本语法,CSS是Cascading Style Sheets的缩写，一般翻译为层叠样式表。 CSS3是CSS（层叠样式表）技术的升级版本。 在网页设计中我们把HTML、CSS、JavaScript并列为网页前端设计的三种基本语言。其中HTML负责构建网页的基本结构，CSS负责设计网页的显示效果，JavaScript负责开发网页的交互效果。 有人称HTML是网页的骨头是框架，CSS是网页的皮用来制作页面的外观效果，JavaScript是网页的筋用来进行客户端动态的交互，不无道

35、理。,为什么使用CSS,为什么使用CSS,W3C的构想是HTML标签只表示内容结构，即只表示“这是一个段落”、“这是一个标题”、“这是一个项目列表”等含义，而不具备任何样式，而这些“段落”、“标题”等内容的字体类型、字号大小、演示、显示位置等样式完全由CSS指定，也就是用CSS控制网页的外观，从而实现内容结构和样式的分离。,为什么使用CSS,CSS具有如下突出优势： （1）实现内容和样式的分离，利于团队开发。 （2）代码简洁，提高页面浏览速度，并且更利于搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，减少了Web页的代码量，搜索引擎将更有效地搜索到网页内容，并可能给一个较高的评价。

36、 （3）样式的调整更加方便，便于维护。只要简单的修改几个CSS文件就可以重新设计整个网站的页面。同一网站的多个页面可以共用同一个样式表，提高网站的开发效率，实现样式复用，如果需要更新网站外观，则更新网站的样式表文件即可。,CSS的基本语法,CSS规则由两个主要的部分构成：选择器和一条或多条声明。 选择器通常是需要改变样式的HTML元素，可以是某个标签、网页对象、class、id等。选择器也被称为选择符。 每条声明由一个属性和一个值组成，用分号来标识一个声明的结束。 使用花括号来包围声明。,CSS的基本语法,属性是希望设置的样式属性，每个属性有一个值，属性值是设置属性显示效果的参数，它包括数值和

37、单位，或者关键字。属性和值被冒号分开。一个元素可以有多个属性。,（1）值的不同写法和单位。 设置颜色值可以选用颜色名、十六进制数、RGB值、RGB值百分比。 设置段落文本为红色 使用颜色名称设置： p red ; 使用十六进制颜色值： p color: #ff0000; 或者十六进制颜色值： p color: #f00; 还可以使用RGB值: p color: rgb(255,0,0); 还可以使用RGB百分比: p color: rgb(100%,0%,0%);,书写CSS注意事项,（2）记得写引号，如果值为若干单词，则要给值加引号： p font-family: sans serif;。

38、（3）如果要定义不止一个声明，则需要用分号将每个声明分开。 最后一条规则可以不加分号，然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么做的好处是当从现有的规则中增减声明时，会尽可能地减少出错的可能性。就像这样：ptext-align: center; color:red;。应该在每行只描述一个属性，增强样式的可读性。 p text-align: center; color: black; font-family: arial; ,书写CSS注意事项,（4）空格和大小写：是否包含空格不会影响CSS在浏览器的工作效果，也就是CSS语言忽略空格（除了选择器内部的空格外），因此可以利用空格

39、来美化CSS代码，使其变得整齐，易看。 CSS对大小写不敏感，但推荐全用小写。不过存在一个例外：如果涉及与HTML文档一起工作的话，class和id名称对大小写是敏感的。 body color: #000; background: #fff; margin: 0; padding: 0; font-family: Georgia, Palatino, serif; ,书写CSS注意事项,（5）任何语言都需要注释，CSS使用“/*注释语句*/来进行注释，比如上面的样式代码加上注释后如下，帮助理解。 body /*页面属性设置*/ color: #000; background: #fff; ma

40、rgin: 0; padding: 0; font-family: Georgia, Palatino, serif; ,书写CSS注意事项,任务2 CSS的应用方式,（1）内嵌样式（也叫行内样式） （2）内部样式表：在标记中给出 （3）外部样式表：保存在扩展名为.css的外部文件中，,选择器的分类 （1）标签选择器，就是HTML标签，如、标签等 （2）类选择器 （3）id选择器,任务3选择器的分类,标签选择器应用： 将页面中所有p标签的背景都是#900（一种红色），文字大小均是12px，颜色为#090（一种绿色），,任务3选择器的分类,标签选择器的使用： 如希望页面中所有项目列表的样式为：字

41、体大小为28px、红色、隶书，利用内部样式表，在标签中给出样式代码，,任务3选择器的分类,类选择器的使用：,任务3选择器的分类,id选择器的使用：,任务3选择器的分类,要求： 字体大小为28px、红色、隶书， 希望列表项“护肤品”和“营养健康”显示为蓝色 块的宽度200px，背景颜色#CCCCCC,场景 制作如工作场景图1所示的页面效果。说明： 整个总宽度200px，背景：#cccccc颜色。 列表项护肤品和饰品字体宋体、加粗、14px，颜色：#ff7300。 其余列表项的字体大小为12px，颜色：#636362。,制作如工作场景图1所示的页面效果。说明： 整个总宽度200px，背景：#ccc

42、ccc颜色。 列表项护肤品和饰品字体宋体、加粗、14px，颜色：#ff7300。 其余列表项的字体大小为12px，颜色：#636362。,任务4 CSS继承性、层叠性、特殊性,所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式性质，简单讲继承就是父元素的规则也适用于子元素。,任务4 CSS继承性、层叠性、特殊性,在CSS中，继承是一种非常自然的行为，我们甚至不需要考虑是否能够这样去做，但是继承也有其局限性。 首先，有些属性是不能继承的。这没有任何原因，只是因为它就是这么设置的。举个例子来说：border属性，它就没有继承性。多数边框类属性，比如像border(边框)、padding(补白

43、)、margin(边界)、背景、定位、布局、元素宽高的属性都是不能继承的。,任务4 CSS继承性、层叠性、特殊性,CSS层叠性是指当有多个选择器都作用于同一元素，即多个选择器的作用范围发生了重叠。例如可以创建一个样式来应用颜色，还可以创建一个样式来应用边框，然后将这两个样式都应用于同一个元素，这样CSS就能够通过样式层叠设计出各种页面效果。 CSS层叠分两种情况： 一是如果多个选择器定义的样式不发生冲突，那么元素将应用所有选择器定义的样式。 二是如果选择器定义的规则发生了冲突，那么CSS将按照选择器的优先级的规定让元素应用优先级高的样式。一般来说，行内样式表内部样式表外部样式表，ID选择器类选

44、择器标签选择器。下面我们讲解发生规则冲突的情况。,任务4 CSS继承性、层叠性、特殊性,CSS特殊性指的是不同类型的选择器，他们的权重不同,选择器权重比值如下： 标签选择器：权重值为1。 伪元素选择器：权重值为1。 类选择器：权重值为10。 属性选择器：权重值为10。 ID选择器：权重值为100。 内联样式选择器：权重值为1000。 其他选择器：权重值为0，像通配选择器。,任务4 CSS继承性、层叠性、特殊性,CSS特殊性指的是不同类型的选择器，他们的权重不同,权重计算规则 第一等：代表内联样式，如: style=”，权值为1000。 第二等：代表ID选择器，如：#content，权值为010

45、0。 第三等：代表类，伪类和属性选择器，如.content，权值为0010。 第四等：代表元素选择器和伪元素选择器，如div p，权值为0001。 通配符、子选择器、相邻选择器等的。如*、+,权值为0000。 继承的样式没有权值。,任务4 CSS3新增选择器,属性选择器，其特点是通过属性来选择元素,任务4 CSS3新增选择器,以某元素（E）相对于其父元素或兄弟元素的位置来获取无素。,任务4 CSS3新增选择器,伪类选择器是一个单冒号:，伪元素选择器是一个双冒号:。 主要有:first-letter、:first-line以及:selection、:before、:after。,1E:first

46、-letter第一个字符 2E:first-line第一行 3E:selection 可改变选中文本的样式，但是只能改变选中的背景颜色和字体颜色。 4E:before和E:after：在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。,感谢聆听,用CSS设置字体样式以及文本样式|用CSS设置网页背景图片|CSS3新增背景样式|JavaScript对象|用CSS设置列表样式|用CSS设置超链接伪类样式|导航菜单制作,CSS3美化网页,知识目标,使用文本样式、字体样式美化网页,01.,02.,使用列表样式、背景样式美化网页,能力目标,能灵活运用CSS

47、美化网页技术,01.,任务1 用CSS设置字体样式 以及文本样式,任务1 用CSS设置字体样式以及文本样式-01用CSS设置字体样式,（1）字体类型属性（font-family），CSS使用这个属性设定字体类型 （2）字体大小属性（font-size），这个属性可以设置字体的大小 （3）字体风格属性（font-style），这个属性有三个值可选：normal、italic、oblique （4）字体浓淡（粗细）属性（font-weight），这个属性常用值是normal和bold （5）字体颜色属性（color） （6）字体大小写属性（font-variant） （7）字体属性（font），这

48、个属性是各种字体属性的一种快捷的综合写法。,任务1 用CSS设置字体样式以及文本样式-02用CSS设置页面的文本样式,（1）文本对齐属性（text-align），这个属性用来设定文本的对齐方式 （2）文本修饰属性（text-decoration），这个属性主要设定文本划线的属性 （3）文本缩进属性（text-indent），这个属性设定文本首行缩进 （4）行高属性（line-height），这个属性设定段落中文本行与文本行之间的距离 （5）字间距属性（letter-spacing），这个属性用来设定字符之间的距离 （6）定义垂直对齐属性（vertical-align）,文本属性2-1,文本属性,文本属性2-1,文本属性,文本属性2-1,文本属性,文本属性2-1,文本属性,文本属性2-1,文本属性,任务2用CSS设置网页背景图片,任务2用CSS设置网页背景图片,（1）背景颜色属性（background-color），这个属性为HTML元素设定背景颜色 （2）背景图片属性（background-image），这个属性为HTML元素设定背景图片 （3）背景重复属性（background-repeat），这个属性和background-image属性一起使用 （4）背景附着属性（backgro