CSS 知识技巧经验分享

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2012-4-18 Wednesday,#,目录,CSS,简介,CSS,布局,CSS,语法,CSS,编写,技巧与经验,CSS,简介,CSS:Cascading Style Sheets.,层叠（级联）样式表,.,是控制网页布局样式的基础，真正做到网页表现与内容分离的一种样式设计语言。精确到像素级控制。,1.,浏览器支持完善（有兼容性问题）,2.,表现与结构分离（,HTML,也有部分默认样式）,3.,样式控制功能强大（样式也混乱）,4.,继承性能优越 （继承重叠混乱）,CSS,在当前,WEB,应用上面确实强大，可应用在,HTML,、,XML,，甚至,FLEX,、,SilverLight,中。事物的两面性导致需要人去更好的操纵它。,CSS,是什么？,CSS,简介,控制布局（几列几列）,控制全局（字体、颜色、链接、边框、背景）,控制个体（,br,、,hr,、,H1,、,H2,、,div,、,table,）,自定义样式（,class,、,id,、,style,、,link,）,CSS,具体作用,HTML,HTML CSS,CSS,简介,早期表格布局,TD,TD,TD,TD,TD,TD,TD,优点：,1,、布局控制很严谨,2,、标签少，编写简单,3,、兼容性好,缺点：,1,、扩展性较差,2,、可读性较差,3,、代码重用性差,CSS,简介,Div,搭建基本框架,优点：,1,、页面代码的重用性高,2,、可读性高,3,、拓展性高,4,、框架布局较灵活,缺点：,1,、开发难度高,2,、兼容性没有,table,框架好,CSS,简介,CSS,链接方式,1,、外部样式表,3,、直接写,css,2,、内部样式表,#guidefont-size:12px;border:1px solid#ff7300,4,、指定,css,效果类,行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常需要混合使用：,有关整个网站统一风格的样式代码，放置在独立的样式文件*,.css,某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式,某张网页内，部分内容”与众不同“，采用行内样式,目录,CSS,简介,CSS,布局,CSS,语法,CSS,编写,技巧与经验,CSS,语法,CSS,基本语法结构,选择符,属性：值,body,margin:0px;border:0px;font-size:12px;font-family:,宋体,;background-color:#fff;,td,margin:0px;font-family:,宋体,.img_b,border:1px solid#bbb;,.bd,border:1px solid#f00,.,guide,background:#f00,CSS,语法,优先级,*,font:8px,body,font:10px,div,font:12px,.the_div,font:14px,#,the_div,font:16px,我是？像素,标签指定、,id/class,、,类型、群组、伪类,18px,CSS,语法,body,margin:0px;padding:0px;font-size:12px,h1,font-size:16px;font-weight:bold,类型选择符,h1,h2,h3,h4,color:#ff7300,.title .copyright .list,font-family:”,黑体”,群组选择器,:active,被击活的元素,:foucs,被选中的元素,:hover,鼠标悬浮的元素,:link,添加特殊的样式,伪类,HTML,获取,CSS,：,通过选择符，结合优先级。,目录,CSS,简介,CSS,布局,CSS,语法,CSS,编写,技巧与经验,CSS,编写,快速实现,CSS,（编辑器）,DreamWeaver,里的,CSS,编辑器：,了解,CSS,的基础前提,设置好页面布局,不用,DW,属性编辑区域,用链接外部,CSS,的方式,应用时，自行命名选择符，不要过多的继承,使用,cssTidy,工具清理代码,想要进步，慢慢脱离它,CSS,编写,设计字体,/,段落,color:red/blue/yellow.#ff7300;,font-family:”,字体”,;,font-size:,字号,(,px,em,ex);,font-weight:bold;,text-decoration:underline/none;,text-align:center/left/right;,line-height:26px/200%;,文字颜色还有：,白色（,white,），橙色（,orange,），棕色（,brown,），橄榄绿（,green,），蓝紫色（,blue,），深棕色（,darkbrown,），宝蓝（,sapphire,），紫色（,purple,），黑色（,blank,），灰色（,gray,），红色（,red,）,CSS,编写,设计边框效果,border-width:1px;,border-color:#ff7300;,border-style:solid/dashed/dotted;,缩写,border:1px solid#ff7300,建议：适时适地使用,table,，例如表格、数据等,CSS,编写,背景设计,background-color:#ff7300;,background-image:url(“,图片路径,”);,background-repeat:no-repeat/repeat-x/repeat-y;,缩写,background:#99FF00 url(./images/css_tutorials/background.jpg)no-repeat fixed 40px 100px,CSS,编写,内外边距,padding,、,margin,margin-top/right/bottom/left:8px;,padding-top/right/bottom/left:8px;,缩写,:,上右下左同样,margin:10px;,上下一样、左右一样,margin:10px 5px;,上、左右一样、下,margin:10px 5px 10px;,上、右、下、左,margin:10px 5px 10px 5px;,每个元素都被看作一个矩形框（盒子），由内容、,padding,（填充）、边框（,border,）和空白边（,margin,）组成,CSS,编写,浮动,float:left/right;,兼容性问题的引出,clear:both,属性,3,2,1,CSS,编写,display,显示方式属性,display:none/block/in-line;,块元素,(block),：,内联元素,(in-line),：,总是在新行上开始；,高度，行高以及顶和底边距都可控制；,宽度缺省是它的容器的,100%,，除非设定一个宽度。,和其它元素在一行上；,高度，行高及顶和底边距不可改变；,宽度就是它的文字或图片的宽度，不可改变。,CSS,编写,常用标签,a,-,锚点,b,-,粗体,(,不推荐,),br,-,换行,em,-,强调,font,-,字体设定,(,不推荐,),i,-,斜体,img,-,图片,input,-,输入框,label,-,表格标签,select,-,项目选择,span,-,常用内联容器，定义文本内区块,strong,-,粗体强调,textarea,-,多行文本输入框,center,-,举中对齐块,div,-,常用块级容器，也是,css layout,的主要标签,dl,-,定义列表,fieldset,-form,控制组,form,-,交互表单,h1,-,大标题,h2,-,副标题,h3,-3,级标题,h4,-4,级标题,h5,-5,级标题,h6,-6,级标题,hr,-,水平分隔线,ol,-,排序表单,p,-,段落,table,-,表格,ul,-,非排序列表,CSS,编写,定位,position:absolute/relative;,absolute:,绝对定位,第一个父元素,position:relative;,的原点进行定位。,如果设定,TRBL,并且父级没有设定,position,属性，那么当前的,absolute,则以浏览器左上角为原始点进行定位，位置将由,TRBL,决定,relative:,相对定位,此设置 正常是用在使其子级按照其原点进行定位。,z-index:,层级,来设定容器的上下关系，数值越大越在最上面，数值范围是自然数,子元素,CSS,编写,列表,ul/li,、,dl/dt.dd,、,ol/li,list-style,list-style-image,list-style-position,list-style-type,表单,form/input/select,border-color border-style border-width,目录,CSS,简介,CSS,布局,CSS,语法,CSS,编写,技巧与经验,技巧与经验,标签初始化,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,margin:0;padding:0;,table,border-collapse:collapse;border-spacing:0;,fieldset,img,border:0;,address,caption,cite,code,dfn,em,strong,th,var,font-style:normal;font-weight:normal;,ol,ul,list-style:none;,caption,th,text-align:left;,h1,h2,h3,h4,h5,h6,font-size:100%;font-weight:normal;,q:before,q:after,content:;,abbr,acronym,border:0;,clear,clear:both,技巧与经验,常见兼容性问题,布局居中,问题：,IE,与,firefox,的居中解析不一样,解决：,body text-align:center;,#center margin-right:auto;margin-left:auto;,不过要注意的是，,text-align,尽量不要用，因为会导致所有的字符都居中显示。所以统一使用,margin:0 auto;,即可,著名的,IE6,双倍边距,问题：,浮动元素会有一个著名的,IE6,双边距,marginbug,。假如你设置了左边距,5px,但实际上得到了,10px,左边距。,解决：,display:inline,可以解决这个问题，尽管它不是必需的，但是,CSS,仍然有效。,技巧与经验,常见兼容性问题,Png,透明背景图片处理,问题：,FF,和,IE7,已经直接支持透明的,png,图，,IE6,下的,png,透明会显示为黑色,解决：,.png_background:url(http:/ divposition:relative;,技巧与经验,常见兼容性问题,页面最小高度,问题：,ie6,不支持,min-height,，,ie7,和,firefox,可以,解决：,min-height:600px;,_height:600px;,页面最小宽度,问题：,宽度以百分比设定的时候，可能随着浏览器的变小，内容被挤压。,解决：,min-width:1000px;,技巧与经验,常见兼容性问题,CSS Hack,区别,IE6,与,FF,：,background:orange;,*background:blue;,区别,IE6,与,IE7,：,background:green!important;,background:blue;,区别,IE7,与,FF,：,back