3 CSS样表.ppt

CSS样式表;回顾与作业点评;预习检查;本章目标;样式表能实现内容与样式的分离，方便团队开发 css garden /;样式复用、方便网站的后期维护 ;页面的精确控制，实现精美、复杂页面 ;CSS的用途;head style type=text/css 选择器（即修饰对象）{ 对象的属性1: 属性值1; 对象的属性2: 属性值2; } /style /head;标签选择器;style type=text/css .blue{color:blue;} …… /style …… ul li class=blue家用电器/li li各类书籍/li li class=blue手机数码/li li日用百货/li /ul ……;style #menu{ width:200px; background:#ccc; font:bold 14px 宋体; } /style … … div id=menu ul li家用电器/li …… /ul /div;练习——CSS选择器 ;行距、对齐等： line-height （行高） text-align （对齐） letter-spacing （字符间距） text-decoration （文本修饰 ） white-space （空白处理 ） ;;;;图标截取--背景偏移量技术 ; ;;列表属性2-1;;练习——修饰贵美商品分类 ;练习——制作圆角矩形 ;总结 ;回顾与作业点评;预习检查;本章任务;本章目标;如何控制CSS样式2-1;如何控制CSS样式2-2;盒子模型是网页布局的基础 盒子属性是盒子模型的关键属性 ;盒子属性： margin（外边距/边界） border（边框） padding（内边距/填充 ） 各属性又分为 四个方向;可统一设置或四边分开设置 margin属性 margin margin-top margin-right margin-bottom margin-left ;border属性 border-color border-width border-style ;style type=text/css .textBorder { border-width:1px; border-style:solid; } /style /head body form action= method=post p名字： input name=fname type=text class=textBorder //p p密码： input name=pass type=password class=textBorder size=21 /p;padding属性 padding padding-top padding-right padding-bottom padding-left ;元素的实际占位（实际宽、高） 盒子高度 = height属性 + 上下填充高度 + 上下边框高度 盒子宽度 = width属性 + 左右填充宽度 + 左右边框宽度 ;使用盒子属性布局元素2-1 ;style type=text/css body { margin:0px;padding:0px; background:#ccc; } #logo { width:380px; border:5px solid #666; padding:10px 20px 40px 80px; background:#ff7300; margin:30px auto; //水平居中 } /style body div id=logoimg src=images/logo.jpg alt=logo/ /div /body;如何实现注册页面的布局？;实现步骤 1、分析页面的分块结构，形成HTML组织结构;实现步骤 2、编写每个DIV块的CSS控制定位;练习——DIV+CSS布局 ;练习——修饰表单 ;;;;;;;;练习——实现中间布局 ;练习——头部局部布局 ;总结 ;回顾与作业点评;预习检查;本章任务;本章目标;超链接样式的特殊性 文本或图像加上链接，将失去原样式而继承链接的样式 ;超链接伪类样式;如何设置超链接的样式;三类应用样式的方式 内部样式表 外部样式表 行内样式;三类应用样式的方式 内部样式表 外部样式表 行内样式;三类应用样式的方式 内部样式表 外部样式表 行内样式表;各类样式有继承 各