第二讲 CSS编程技术.pptVIP

下载本文档

1
0
约7.18千字
约 24页
2018-04-11 发布于江苏
举报
版权申诉

第二讲 CSS编程技术.ppt

1、本文档共24页，可阅读全部内容。
2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击这里二次下载。
4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
5、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
6、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
7、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
8、VIP文档为合作方或网友上传，每下载1次，网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档

第二讲 CSS编程技术

第二讲 CSS编程技术第3章 CSS编程技术 *** 温故 *** HTML标记概述图像标记是什么？超级链接标记是什么？分行、分段、字体标记是什么？有序列表、无序列表、标题是什么？表格中常用标记是什么？表单标记是什么？常用属性有哪些？常用输入标记有哪些？框架窗口标记如何使用？作业中的问题用于标记的符号不能是全角或汉字符号，如“<h1>”不能写成“＜h1＞” *** 知新 *** CSS样式简介 HTML中使用样式的方法行内样式：style属性的使用内嵌样式：样式块外部样式：独立样式文件样式选择符组选择符 CLASS选择符 ID选择符常用的CSS属性定位相关属性 3.1 什么是CSS样式？ CSS－Cascading Style Sheet，一种样式定义语言，为HTML中的标记定义样式。 CSS 的优点页面内容和显示样式分离，便于网站风格的统一，方便网站维护可以重用样式表 3.3.1行内样式－Style属性的使用如果希望某段文字和其他段落的文字显示风格不一样，可采用“行内样式”。行内样式使用标记的 style 属性定义。行内样式格式 3.3.3内嵌样式－style样式块行内样式局限于某个标签，若希望本网页内的所有同类标签都采用统一样式，应采用内嵌样式。内嵌样式一般在<head>标记内嵌入<style>标记。 3.3.2 外部样式-独立样式文件不管是行内样式还是内嵌样式都只能为一个Html页面服务，若要使样式控制多个HTML文件，则采用外部样式。外部样式是将样式放在独立的文件中，即样式表文件，通常以css作为类型名。在使用该样式的HTML中通过<link>标记来链接外部样式表文件链接外部样式表的步骤使用LINK（链接）标签，语法： <HEAD> <LINK rel = "stylesheet" type = "text/css" href = "样式表文件.css" > </HEAD> 3.2 CSS样式选择符（样式选择器） CSS样式选择符浏览器在解析标记时，会根据标记名或标记中的class属性或id属性到样式表中选择样式，因此样式表中的这些标记或属性名又称为CSS的样式选择符。样式选择符的种类标记选择符，如以前使用的div、span、p等组选择符 CLASS 类选择符 ID 选择符组选择符将样式规则同时应用于多个标记，则可以将多个选择符用逗号(,)隔开再定义样式规则。伪类示例 3.4常用的CSS属性文字相关属性 color：颜色(十六进制RGB颜色，或颜色名) font-family：字体 font-size：字大小(pt-点，px-像素) font-weight：字体的粗细(bold、light、extra-bold…) font-style:normal正常，italic斜体 text-align：字体对齐方式(center、left、right) text-decoration：字体装饰(underline-下划线，line-through中间线) 显示属性display none：不显示信息 block：将内容作为一段显示(对象之后添加新行，div默认) inline：将内容作为一行显示(对象显示完后不换行，span默认) 3.4常用的属性设置背景属性设置－background background-image background-repeat background-position 定位相关属性－position absolute:绝对定位，以上一级元素左上角为原点 relative:以自己默认位置为原点，给定偏移量背景与定位应用实例 CSS样式混和使用规则合并样式文件使用@import语句合并样式文件行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常需要混合使用：有关整个网站统一风格的样式代码，放置在独立的样式文件*.css 某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式某张网页内，部分内容“与众不同”，采用行内样式对于某个HTML标签： 1）如果有多种样式，如果规定的样式没有冲突，则叠加； 2）如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示，如果还没有，最后采用外面样式表显示，否则就按HTML的默认样式显示；小结 HTML中使用样式的方法行内样式：style属性的使用内嵌样式：样式块外部样式：独立样式文件样式选择符单标记选择符组选择符 CLASS选择符 ID选择符作业1 查阅几种CSS样式属性，并举例说明其功能作业2 使用外部独立样式表的形式，设计两个风格一致的调查表，一个用于调查手机游戏阅历，另一个用于调查手机使用情况，内容如图所示，表头、题目、备选答案