第2讲-网页样式.pptx

能够使用CSS美化网页元素;练习;使用CSS的意义;使用CSS的意义;CSS的优势;CSS的基本语法结构;CSS的基本语法结构;CSS基本选择器;CSS基本选择器;CSS基本选择器;CSS复合选择器;后代选择器;交集选择器;并集选择器;全局选择器;行内样式(内联样式) 内部样式表（嵌入样式） 外部样式表;行内样式 使用style属性引入CSS样式;内部样式表 CSS代码写在head的style标签中 优点 方便在同页面中修改样式 缺点 不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底;外部样式表 CSS代码保存在扩展名为.css的样式表中 HTML文件引用扩展名为.css的样式表，有两种方式 链接式 导入式;HTML中引入CSS样式7-5;HTML中引入CSS样式7-6;HTML中引入CSS样式7-7;样式的优先级;css优先级计算规则;css计算举例;CSS的继承性;CSS的继承性;小结;字体样式;字体类型;font-size属性 单位：px（像素） in、cm、mm???pt、pc 1in = 2.54cm = 25.4 mm = 72pt = 6pc 百分比 % 或者em。2em和200%前者表示2个字符的大小，后者表示默认字体大小的两倍;字体风格;字体的粗细;文本样式;文本颜色;排版文本段落;文本修饰和垂直对齐;超链接伪类;使用CSS设置超链接;设置鼠标形状;背景样式;div标签;网页背景;设置背景图像;设置背景;列表样式2-1;列表样式2-2;练习4—家用电器商品分类页面;练习5—畅销书排行榜页面2-1;小结;盒子模型;盒子模型;盒子模型;盒子模型;边框;边框粗细;边框样式;border简写;外边距;外边距的妙用;内边距 ;标准文档流组成 块级元素（block level） h1…h6、p、div、列表 内联元素（inline） span、a、img/、strong...; display属性;小结;常见网页布局;讲解：float属性;浮动;设置左浮动;设置右浮动;清除浮动;清除左右浮动;清除两测浮动;溢出处理;小结;position属性;定位;static定位;相对定位;相对定位元素的规律;浮动元素设置相对定位;相对定位小结;绝对定位;绝对定位小结;z-index属性;网页元素透明度;小结;网站制作流程;选择器扩展;选择器的用途