Web前端开发案例教程——HTML+CSS+JavaScript (5).pptVIP

5.3应用样式 3、行内样式 某些情况下，我们需要对特定某个标签进行单独设置，最直观的方法就是在标签的属性内直接设置。其用法是在所需修饰的标签内加style属性，后续为多条样式规则，多条样式规则用分号区分开：style=color:red;font-size:10px; …… p style=”color:red;font-size:10px;”行内样式，单独定义某个元素的样式，灵活方便/p …… 实例5-12：行内样式 样式优先级 CSS中规定的优先级规则为： ?行内样式表内部样式表外部样式表 ?ID选择器类选择器标签选择器 style .nav ul li a:link{color:blue;} /style link rel=stylesheet href=css/layout.css type=text/css / …… div class=nav ul lia href=#家用电器/a/li lia href=#手机数码/a/li lia href=# style=color:red;font-size:10px;日用百货/a/li /ul /div …… 实例5-13：样式优先级 CSS样式表布局 第五章 学习目标 ?掌握盒子模型相关属性并实现页面布局 ?掌握样式表的引用方式及优先级 ?掌握常用的DIV+CSS布局方式 5.1盒子模型及应用 ?边框：对应包装盒的纸壳，它一般具有一定的厚度。 ?内边距：位于边框内部，是内容与边框的距离，对应包装盒的填充部分，有的教材也称其为“填充”。 ?外边距：位于边框外部，是边框外面周围的间隙，有的教材也称其为“边界”。 5.1.2盒子属性 1.margin外边距设置 外边距位于盒子边框外，指与其他盒子之间的距离。 .margin { width:500px; margin:30px 10px 40px 60px } .automargin { width:300px; margin:0px auto } 实例5-1：margin属性 2.border边框的设置 边框的CSS样式设置不但影响到盒子的尺寸，还影响到盒子的外观。边框又分为边框颜色、边框宽度和边框样式三方面的属性。 #all{width:420px; height:240px; margin:0px auto;background-color:#ccc;} #a,#b,#c,#d,#e{width:160px; height:50px; text-align:center; line-height:50px; background-color:#eee;} #a{width:380px; margin:5px; border:1px solid #333;} …… 实例5-2：border属性 padding内边距的设置 边框确定后，一般需设置边框与内容直接的距离，以便精确控制内容在盒子中的位置。内边距是不可见的盒子组成部分。 …… #all{width:360px; height:260px; margin:0px auto; padding:25px; background-color:#ccc;} #a,#b,#c,#d{width:160px; height:50px; border:1px solid #000; background-color:#eee;} p{width:80px; height:30px; padding-top:15px; background-color:red;} #a{padding-left:30px;} …… 实例5-3：padding属性 5.2 DIV+CSS布局 div元素的样式设置 #first { background-color: #eee; border:1px solid #000; width:300px; height:200px; } #second { background-color: #eee; border:1px solid #000; width:50%; height:25%; } 实例5-4：div样式设置 布局页面设置 * { margin: 0px;padding: 0px;} *{margin:0px; padding:0px; } #all{width:75%; height:200px; background-color:#eee; border:1px solid #000; margin:0px auto;