CSS选择器与盒模型.ppt_第1页
CSS选择器与盒模型.ppt_第2页
CSS选择器与盒模型.ppt_第3页
CSS选择器与盒模型.ppt_第4页
CSS选择器与盒模型.ppt_第5页
已阅读5页，还剩6页未读， 继续免费阅读

下载本文档

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

文档简介

CSS选择器与盒模型 演示人：张锋,CSS与标准网页设计,CSS全称是：Cascading Style Sheet，是用于控制（增强）网页样式并允许将样式信息与网页内容分离的标记性语言。 什么叫标准网页设计？每个页面都是由“内容”（html）与“表现”（CSS）组织起来的，html只负责显示内容，具体显示形式是CSS排版的任务。,题目：CSS常用选择器,一、ID选择器。,唯一性，与js调用动态对象不能冲突。,二、Class选择器。,可重复利用。,三、标签选择器。,如，p标签。,四、通用选择器。,如：*margin:0; padding:0;,五、其他非常用选择器。,如：属性选择器，imgaltborder: solid 1px #00f;；子选择器， #div h1；相邻选择器，#div + p。,题目：CSS优先级,一、内联样式。,值：0+1000,二、ID选择器。,值：0+100,三、Class选择器。,值：0+10,四、标签选择器。,值：0+1,以上四种属性可以叠加，计算结果大的优先级靠前。N个class叠加时，CSS代码中靠下的最终生效。,题目：块元素与内联元素,一、块元素(block)的特点：,1、总是在新行上显示。 2、高度行高及边距补白可控。 3、宽度默认是它低级元素的100%。 4、可容纳内联元素和其他块元素。,二、内联元素(inline)的特点：,1、和其他元素在同一行显示。 2、高度行高及边距补白不可变。 3、宽度就是它里面文字或图片的宽度。 4、只能容纳文本或其他内联元素。,题目：盒模型图示一,题目：盒模型图示二,题目：盒模型的三个属性,一、margin属性。,共五个，margin，margin-top，margin-right，margin-bottom，margin-left，属性值可以是长度，百分比或auto，且可以取负。简写方法：margin:10px；margin:10px auto；margin:10px 10px auto；,题目：盒模型的三个属性,二、padding属性。,与margin用法一样，区别是一内一外，不能取负。,题目：盒模型的三个属性,三、border属性。,Box默认是有边框的，只是不显示出来。 有三个属性，border-width；border-color；border-style； 例如：border-width:5px；border-color:red；border-style:solid；可简写为：border:solid 5px re
人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论