CSS选择器与盒模型.ppt

《CSS选择器与盒模型.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、CSS选择器与盒模型演示人：张锋CSS与标准网页设计CSS全称是：CascadingStyleSheet，是用于控制（增强）网页样式并允许将样式信息与网页内容分离的标记性语言。什么叫标准网页设计？每个页面都是由“内容”（html）与“表现”（CSS）组织起来的，html只负责显示内容，具体显示形式是CSS排版的任务。题目：CSS常用选择器一、ID选择器。唯一性，与js调用动态对象不能冲突。二、Class选择器。可重复利用。三、标签选择器。如，p标签。四、通用选择器。如：*{margin:0;pad

2、ding:0;}五、其他非常用选择器。如：属性选择器，img[alt]{border:solid1px#00f;}；子选择器，#div>h1；相邻选择器，#div+p。题目：CSS优先级一、内联样式。值：0+1000二、ID选择器。值：0+100三、Class选择器。值：0+10四、标签选择器。值：0+1以上四种属性可以叠加，计算结果大的优先级靠前。N个class叠加时，CSS代码中靠下的最终生效。题目：块元素与内联元素一、块元素(block)的特点：1、总是在新行上显示。2、高度行高及边距补白可

3、控。3、宽度默认是它低级元素的100%。4、可容纳内联元素和其他块元素。二、内联元素(inline)的特点：1、和其他元素在同一行显示。2、高度行高及边距补白不可变。3、宽度就是它里面文字或图片的宽度。4、只能容纳文本或其他内联元素。题目：盒模型图示一题目：盒模型图示二题目：盒模型的三个属性一、margin属性。共五个，margin，margin-top，margin-right，margin-bottom，margin-left，属性值可以是长度，百分比或auto，且可以取负。简写方法：marg

4、in:10px；margin:10pxauto；margin:10px10pxauto；题目：盒模型的三个属性二、padding属性。与margin用法一样，区别是一内一外，不能取负。题目：盒模型的三个属性三、border属性。Box默认是有边框的，只是不显示出来。有三个属性，border-width；border-color；border-style；例如：border-width:5px；border-color:red；border-style:solid；可简写为：border:solid

5、5pxred；这是四条边的效果，单边为：border-top:solid5pxred；演示完毕谢谢大家下次再见