网页制作（HTML5+CSS3） 课件ch03CSS基本选择器美化页面_第1页
网页制作（HTML5+CSS3） 课件ch03CSS基本选择器美化页面_第2页
网页制作（HTML5+CSS3） 课件ch03CSS基本选择器美化页面_第3页
网页制作（HTML5+CSS3） 课件ch03CSS基本选择器美化页面_第4页
网页制作（HTML5+CSS3） 课件ch03CSS基本选择器美化页面_第5页
已阅读5页，还剩33页未读， 继续免费阅读

下载本文档

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

文档简介

CSS选择器美化页面网页制作（HTML5+CSS3）2本章大纲理解什么是CSS?为何要使用CSS!掌握CSS样式规则定义格式掌握文字相关的CSS样式规则CSS什么是CSSCSS控制一个页面的外观，语言和语法复杂，功能强大，无尽地自适应，一个现代的网页设计者必须花时间去认真掌握CSS历史HTML从未承担起设计的角色，例如字体加粗，倾斜.因此，在HTML3中提出了添加相应标签以实现格式化文本的功能，但这远远不够。人们还使用很多技巧来实现页面的布局以达到最终的效果，例如用表格进行复杂的布局；用图片代替特殊的文字效果，使得HTML无法表达正确的语义。使用CSS避免了HTML格式化的问题，也节省了时间和金钱HTML&CSSHTML中的每个元素都有一个默认的CSS样式/TR/CSS21/sample.html3HTML默认样式4CSS样式定义语法5样式定义语法由三个部分组成选择器Selector指定要应用样式的对象，可以是单个，也可以是复合元素属性Property指定要设置什么样式值Value自定义样式值文字相关样式HTML嵌入CSS的三种方法嵌入样式的三种方法嵌入式(embedded也叫internal)内联式(inline)外部式(external)7嵌入式样式表<html><head><title>Stylin’!</title><styletype=“text/css”> h1{color:purple;} p{font-size:10pt;color:gray;}</style></head>…</html>HTML嵌入CSS的三种方法嵌入样式的三种方法嵌入式(embedded也叫internal)内联式(inline)外部式(external)8内联式样式表<h1style=“color:blue;font-size:20pt;”>AlargepurpleHeading</h1>HTML嵌入CSS的三种方法嵌入样式的三种方法嵌入式(embedded也叫internal)内联式(inline)外部式(external)9外部式样式表<head><linkrel=“stylesheet”type=“text/css”href=“styles/mystyles.css”/></head>实验场盒子模型盒子模型内容（Content）盒子模型内容（Content）内边距(Padding)盒子模型内容（Content）内边距(Padding)边框线(Border)盒子模型内容（Content）内边距(Padding)边框线(Border)外边距(Margin)外边距(Margin)盒子模型内容（Content）内边距(Padding)边框线(Border)盒子相关属性元素类型元素盒的类型block块状元素独占一行不设置宽度时，占满父容器的一整行与相邻块级元素垂直排列可设置width,height，padding属性指定宽高和内边距inline行内元素不独占一行不可设置宽度和高度不可设置上下方向的外边距高度由元素高度决定，宽度有内容决定，即宽高由内容来撑开inline-block行内块元素具有行内元素特性，不独占一行可以设置宽度，高度可以指定内边距，外边距改变元素类型使用display改变元素类型CSS选择器CSS样式选择器选择器类型元素标签选择器（ElementSelector）上下文选择器（ContextSelector）ID选择器类选择器复合选择器（CompoundSelector）21选择器Selectors标签选择器ElementSelectors–(refertoHTMLtags)22Howtodoit?如何实现？ID选择器ID24#disclaimer{…}#contact_info{…}ID选择器25id为box2使用id选择器进行样式指定Howtodoit?如何实现？并集选择器（群组选择器）27并集选择器使用逗号分隔#box1,#box2{…}Howtodoit?如果20个呢？怎么实现？类（class）选择器class29.intro{…}.copyright{…}注意class选择器的名称需要符合标识符的定义Howtodoit?已知现有代码如图所示，在不给html添加id和class的限制下，如何实现效果图中二级标题titleindiv为红色后代选择器（上下文选择器）31父子之间使用空格隔开divh2{…}子选择器（父子关系选择器）32子选择器使用>号div>h2{…}后代选择器可以选择某元素的所有后代，而子选择器仅选择具有指定父子关系的元素选择某个元素后的元素，并且他们具有共同的父元素相邻兄弟选择器33相邻兄弟选择器使用+号div+p{…}属性选择器根据元素的属性及属性值来选择元素34属性选择器属性选择器描述[属性]用于选择带有指定属性的元素[属性=值]用于选择带有指定属性和值的元素[属性~=值]用于选择属性值中包含指定值的元素，该值必须是一个完整单词[属性|=值]用于选择属性值以指定值开头的元素，必须是一个完整单词或带有“-”作为连接符连接后续内容的字符串。如“en-”[属性^=值]用于选择属性值以指定值开头的元素[属性$=值]用于选择属性值以指定值结尾的元素[属性*=值]用于选择属性值中包含指定值的元素根据属性名选择根据属性名=值来选择一个属性名可以包含多个属性值，例如class=“hdtitle”,这里的值必须是hd或者是title才能选中对属性值进行子串的模式匹配交集选择器（标签指定式选择器）35交集选择器没有空格div#hd{…}h2.title{…}复合选择器由下列选择器复合而成标签选择器后代选择器类选择器id选择器思考：哪些字体显示红色？哪些盒子会显示边框？思考：如果去掉第八行的.red，效果又会如何？小结:样式的四种特性Cascade（层叠性）：cascade理论描述为样式表中的规则的顺序和位置如何影响样式的应用。也就是说，如果两条样式规则冲突了，最终显示的是哪个？

它描述为样式表中的规则的顺序和位置如何影响样式的应用。根据层叠理论，样式声明在最后，或者最靠近HTML代码的取胜。也就是，这种情况下，文本显示为蓝色。小结:样式的四种特性Inheritance（继承性）：cascade理论描述为样式表中的规则的顺序和位置如何影响样式的应用。也就是说，如果两条样式规则冲突了，最终显示的是哪个？

描述了一个元素如何被一个或者多个样式规则影响的。继承能影响相同名字的样式规则，也能受父元素的样式规则影响。继承可以简化你的样式代码。但是，它是一个双刃剑，使用样式定义元素的时候，还需要关注它受到父元素的影响小结:样式的四种特性Descendant（后代性）：cascade理论描述为样式表中的规则的顺序和位置如何影响样式的应用。也就是说，如果两条样式规则冲突了，最终显示的是哪个？

后代性描述如何基于元素之间的相对位置对特定元素目标进行样式化。它利用多个标签创建一个特定元素的选择器名称我们将多个标签组成一个选择器可以缩小样式

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

温馨提示

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

最新文档

评论

0/150

提交评论