CSS选择器与盒模型.pptVIP

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