第03章:CSS.ppt
《第03章:CSS.ppt》由会员分享,可在线阅读,更多相关《第03章:CSS.ppt(31页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、1CSS第3章 CSS1.CSS简介2.CSS选择器3.框模型4.常见样式5.注意事项6.浮动7.定位23.1 CSS简介oCSSnCascading Style Sheetsn层叠样式表n定义如何显示HTML元素n表现与内容分离oHTMLn定义文档的内容n样式表可以应用到多个HTML文件中33.1 CSS简介4HTMLheadbodytitleh1ppemtablecaptiontrtd页面3.1 CSS简介oCSS规则selector declaration1;declaration2;.declarationN nSelector:需要改变样式的HTML元素nDeclaration=属性
2、:值5页面3.1 CSS简介o创建样式表n内联样式:表现和内容结合n内部样式表n外部样式表6 hr color:sienna;p margin-left:20px;body background-image:url(images/back40.gif);This is a paragraph 第3章 CSS1.CSS简介2.CSS选择器3.框模型4.常见样式5.注意事项6.浮动7.定位73.2 CSS选择器o继承n子元素继承父元素的特性n根据在HTML中的位置层次关系决定o选择器n上下文选择器o依据元素在其位置的上下文关系来定义样式n类选择器o类选择器以“.”号定义。如.centero几个内容
3、属于同一类,给这一类施加规则o派生选择器 :ntd.center:类名为center 的单元格将按照所定义的规则显示n.center td:类名为center的更大元素内的单元格将按照所定义的规则8页面3.2 CSS选择器nid选择器oid选择器以“#”号定义。如#redo对id为red施加规则o派生选择器 :ntd#red:id名为red 的单元格将按照所定义的规则显示n#red td:id名为red的更大元素内的单元格将按照所定义的规则显示n群选择器oh1,p color:green;n基础选择符的优先级o类型 class id style(行间)js9第3章 CSS1.CSS简介2.CS
4、S选择器3.框模型4.常见样式5.注意事项6.浮动7.定位103.3 框模型o框模型:一切皆为框!113.3 框模型o大小=border+padding+width/heighto宽度=左border+左padding+width+右padding+右bordero高度=上border+上padding+height+下padding+下border123.3 框模型oborder 边框nborder-width 边框宽度nborder-style 边框样式nborder-color 边框颜色o边框样式:nsolid 实线ndashed 虚线ndotted 点线(IE6不兼容)133.3 框模
5、型omargin 外边距o外边距的问题:n1、上下外边距会叠压;n2、父子级包含的时候子级的margin-top会传递给父级;(内边距替代外边距)o外边距复合:margin:top right bottom left;143.3 框模型opadding 内边距npadding-top 上边内边距npadding-right 右边内边距npadding-bottom 下边内边距npadding-left 左边内边距npadding:top right bottom left;o注意:内边距相当于给一个盒子加了填充厚度会影响盒子大小。15第3章 CSS1.CSS简介2.CSS选择器3.框模型4.常
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 03 CSS
限制150内