编写高质量代码_Web前端开发修炼之道_CSS

人人网fed css编码前端开发规范|最新css前端开发pdf|前端css开发实例

高质量的 css
标准模式和怪异模式以及 DTD
1:标准模式中,浏览器根据规范表现页面,而怪异模式浏览器通常模拟老式浏览器
2:在标准浏览器中,网页元素的页面宽度是由 padding,border,width三者宽度相加决定的
而在怪异模式, width本身就包括了padding和 border的宽度。
3:在标准模式下经典的居中方法:设定 width,然后margin :0 auto;在怪异模式下是无法正常工作的。
DTD全称是document type definition 即文档类型定义。 DTD是一种保证html文档格式正确使用的有效方法。
html 的最开始的声明文件的 DTD类型,如果落写DTD声明, firebox 仍然会按照标注模式来解析网页,但在 IE中会触发怪异模式。
css 布局时代 DTD声明就变得非常的重要了。
如何组织 css:
1:css 是由两部分组成:一是 css的API ,重点是控制样式,另一个部分是 CSS的框架
2:组织CSS 可以有多种角度,笔者建议:按照功能可以分为 base,common,page。
三者不是并列结构,而是层叠结构
Base:最底层,任何风格的页面都可以引用它。 Base层力求精简和通用。Base要求有高度的移植性。 Base相对稳定,不需要维护。
在浏览器默认的样式里, p标签有上下边距,strong标签里有字体加粗样式, em标签里字体倾斜样式。不同浏览器的默认值也是不一样的,例如 ul默认有缩进的样式,在IE下是通过 margin实现的,在firebox缩进是通过 padding实现的。解决的方法就是将浏览器的默认值删去。
特别说明:
.fl{float:left;display:inline;}
在IE浏览器下如果对元素设置了浮动,同时又设置了 margin-left,margin 值会加倍,解决 bug的方法是设置display:inline;
.clearfix类:用于在父容器直接清除子元素浮动。让浮动的父容器能够根据浮动元素的高度而适应高度。
1 :<div class=”fl”><div class=”fl”></div></div> 让父元素同时浮动起来
2 :浮动元素的后面紧跟一个用于清空浮动的空标签:
<div><div class=”fl”></div><div class=”cb”></div></div>
3: 最好的方法:
<div class=”clearfix”> <div class=”fl”></div></div>
.clearfix{display:inline-block;}
*{margin:0;padding:0;} 应该避免使用,而是应该把常用的标签显示的罗列出来

    Common:这一层位于中间,提供组件级的 CSS类。
         1 :模块化:
         模块化可以让代码重复使用,显著提高代码的利用率。
         模块应该保证数量尽可能的少的原则下,做到尽可能的简单,以提高利用率。
         一个功能超复杂的拥有多个职责的大类,重用性远不如一群职责简单的简单小类。
         2 :CSS命名:
           骆驼法:从第二个单词开始,将每个单词的首字母大写例如 subNavMenu。用于区分不同的单词
          划线命名法:每个单词 -或者_ 分隔,例如 sub-nav-menu.用于表示从属关系。

滥用子选择器:
<li class=”last”></li>
.timelist .last{…..} 不推荐使用子选择器,推荐使用 <li class=”timelist-last”></li>
.timelist-last{…..}
page:位于最高层,提供页面级样式
如果模块多次反复出现,就应该归为 common层,如果出现次数少,归为 page层
通常情况下是由多个工程师完成。
过长的命名带来很强的可读性,它带来的坏处是在可以接受的范围,它的好处却是非常明显的。笔者推荐增加前缀。
多用组成,少用继承。通过类的组合,很容易实现类的扩展,避免产生类的爆炸。
id只能挂一个,而class可以挂很多个。
例如 <div class=”f12 red box”><div>
一:减少类的数量,增加类的重用性。
二:是使类的职责更单一,弹性更强,增加类的重用性。
组合的方法是:组相同,分不同。
组合的好处:
实例一:
.mt20{margin-top:20px;}
.mt60{margin-top:60px;}
.title{border-bottom:1px solid #FFFFFF;}
<h2 class=”title mt20”>……</h2>
<h2 class=”title mt60”>……</h2>
不需要再写一个 class
如何处理上下 margin:
Margin:是一个有点特殊性的样式,相邻的 margin-right,margin-left是不会重合的,但相邻的 margin-top;margin-bottom是发生重合的。为了避免重合带来的不必要的麻烦, margin-top,margin-bottom,不要混合使用,要统一使用 margin-top,或者margin-bottom 。
低权重原则-避免滥用子选择器
html 标签的权重是 1,class 的权重是 10,id 的权重是 100。当选择符的样式设置有冲突的时候,会选择权重高的选择符设置的样式。
为了保证样式容易被覆盖,提高可维护性, CSS选择器需保证权重尽可能的低。少使用子选择器,需要多添加 class。
CSS sprite
.nav a;hover{url(image2)} .nav a{url(image1)}
Img2的图片只有在鼠标滑过的时候才会加载,在图片完成加载的时候背景为空白。解决的方法是将默认状态和滑过状态图片合在一起,然后利用 background-position属性来展示需要的部分。
例如:
.nav a{height:31px;width:139px;background:url(img);}
.nav a:hover{background-position:0 -31px;}
CSS sprite:它的合并只能用于背景图片
对于横向和纵向平铺的图片也不能使用 css sprite
Css的编码风格:一行式的编码风格在可读性方面稍微差一点,但可以有效的减少 css文件的行数,有利于提高开发的速度,同时可以减少 css文件的大小。
Id和class :在同一个页面里,相同的 id只能出现一次,不可以重复,而 class却可以出现任意多次。Id的权重是 100,class 的权重是 10。一般情况下建议使用class,少用 id。
CSS 的hack:
因为IE 浏览器在 css的解析上存在很多问题, css的hack 都是针对 IE进行的,IE 推出了官方版的 hack方法。
<!—[if IE]>
<link type=”text/css ” href=”test.css” rel=”stylesheet”>
<![endif–]>
CSS文件就会加载到IE浏览器了,对于非 IE浏览器就会忽略这条语句。
想针对某个范围的 IE进行hack,可以结合 Ite,It,gte,gt,!,
Ite:小于等于
It:小于
gte:大于
gt:大于
!:不等于
只对IE6 以上版本生效
<!—[if gt IE 6]>
<link type=”text/css ” href=”test.css” rel=”stylesheet”>
<![endif–]>
从兼容性,这是最安全的 hack方式,但需要写多个css,增加开发成本和维护成本。
选择符前置:
html .test{} 加html 前缀只对 IE6 生效
+html .text{} 加+html 前缀只对 IE7生效
样式属性前缀法:
_只在IE6 下生效, 在IE6 和7下生效
.text{ width:80px;
width:70px; _width:60px;}
最流行的 hack方式是选择符前缀法和样式属性前缀法。
a:hover样式不在出现的问题:
正确的伪类顺序:
a:visted{color:green;}
a:hover{color:red;}
不管 a标签是否被点击过,鼠标滑过的时候都会显示红色。
A的正确顺序为:a:link a:visited a:hover a:active
HasLayout:

块级元素和行内元素:
块级元素: div,p ,form, ul,ol , l
行内元素: span,strong ,em
块级元素会独占一行,默认状态下,其宽度自动填满父元素宽度,行元素不会独占一行,相邻的行元素会排在同一行,直到其父元素排不下,才会换行,其宽度随元素内容而改变。
块级元素可以设置 width,height ,行内元素设置 width,height 属性设置无效。
块级元素可以设置 margin,padding,行内元素margin和 padding属性很奇怪,水平方向padding-left, padding-right<margin>同样产生边距效果,但竖直方向的 padding-top,padding-bottom不会产生边距效果。
块级元素display:block;
行内元素display:inline;
display:inline-block; 集行内元素和块元素于一身,它拥有块级元素的特点,可以设置长宽,却不是独占一行。 img button:标签都具有display:inline-block;的特性,可以设置长宽却不占一行。
IE6和IE7 模拟display:inline-block;的效果
<span>…..</span>
Span{display:inline-block; *vertical-align:-10px;} 注意只能对行内元素实现,如果是块级元素不能实现。
Relative absolute float:
Position:relative;position:absolute; 都可以改变元素在文档流的位置,设置 position:relative;或position:absolute; 都可以让元素激活 left,top ,right, bottom和z-index 属性。网页虽然是二维结构,但它是有 Z轴的,默认下,z-index: 0这一层。元素根据自己的 display类型,长宽,内外边距等属性排列在 z-index:0这一层。这就是文档流。设置: position:relative;会让元素浮动起来,但position:relative会保留自己在 z-index:0层的占位,尽管它设置了 left,right,top,bottom而偏离原来的文档的位置。 Position:absolute;会完全脱离文档流,不在 z-index:0层,其left ,right, top,bottom 值是相对于自己最近的一个设置的祖先元素。
Float:属性不会使元素上浮到另一个 z-index层,它依然让元素在z-index:0层排列。
Float与position:absolute; 会隐式的改变 display,让元素以display:inline-block;的方式显示。
Position:relative 不会隐式改变 display的类型。
网格布局:
Main的内容比起sidebar更重要,无论 sidebar还是main 在样式上谁左谁右,在 html标签上要保证main的标签在 sidebar之前被加载。
水平居中:
1 :水平居中:文本图片等行内元素的水平居中
2 : 给父元素设置 text-align:center;可以实现文本,图片等行内元素的水平居中。
宽度为块级元素的水平居中:
3 :宽度为块级元素的水平居中通过设置 margin-left:auto;margin-right:auto; 来实现的。
不确定元素的水平居中:
1 :table有趣的地方在于它本身并不是块级元素,如果不设置宽度,它的宽度是又内部元素宽度支撑起来的,但即不设置它的宽度,仅仅设置 margin-left:auto;margin-right:auto; 就可以实现水平居中。
竖直居中:
1 :父元素高度不确定的文本,图片,块级元素的竖直居中
1: 给父容器设置相同的上下边距而实现:
例如:
.wrapper{margin-bottom:10xp;padding-top:20px;padding-bottom:20px;}
<div class=”wrapper”>hello world</div>
2 :父元素高度确定的单行文本竖直居中:
通过给父级元素设置 line-height;
Line-height 的值与height的值要相同。
3 :父元素高度确定的多行文本,图片,块级元素的竖直居中
Vertical-align: 只有父元素为 td和th 才有效,
网格布局:
代码一最小型网页:
<style type=”text/css”>
.header{}
.footer{clear:both;}
.sidebar{width:25%;float:left;}
.main{width:70%;float:right;}
</style>
<div class=”header”></div>
<div class=”content”>
<div class=”main”></div>
<div class=”sidebar”></div>
</div>
代码二:改进版中级网页:
<style type=”text/css”>
.fl{float:left;}
.fr{float:right;}
.content{clear:both;}
.header{}
.footer{clear:both;}
.sidebar{width:25%;}
.main{width:70%;}
</style>
<div class=”content”>
<div class=”main fl”></div>
<div class=”sidebar fr”></div>
</div>
<div class=”content”>
<div class=”main fr”></div>
<div class=”sidebar fl”></div>
</div>
浮动从 sidebar和main 中抽离出来, main和sidebar 的灵活性就增加了。
如果将 width从sidebar 和main中抽离出来,灵活性又增加了。可是它的不足之处在于如果需要修改, main,sidebar 所挂着fl, fr也要修改。
终极版的代码:
<style type=”text/css”>
.content{clear:both;}
.main{}
.sidebar{}
.content-lr-7025 .main{float:left;width:70%:}
.content-lr-7025 .sidebar{float:right;width:25%;}
.content-rl-6035 .main{float:right; width:60%;}
.content-rl-6035 .sidebar{float:left;width:35%;}
</style>
<div class=”content content-lr-7025”>
<div class=”main”></div>
<div class=”sidebar”></div>
</div>
<div class=”content content-rl-6035”>
<div class=”main”></div>
<div class=”sidebar”></div>
</div>
由于一层分成二层,main和 sidebar的责任消弱了,它们只关心自己的位置 (main要位于padding 前面),和自己内部的样式,不再关心布局,而将布局控制交给它们的父级元素,由 content-xx-xxxx来决定布局,xx代表浮动,前一个是 margin的浮动,后一个是padding的浮动, xxxx代表的宽度,前二位表示 margin的宽度,后者表示sidebar的宽度。如果使用组合的方式,我们需要同时修改 margin和padding 的宽度挂钩,而用子选择器,只需要修改 xxxx值即可。相比较而言子选择器更方便于修改。
组合类的方式比子选择器有更易于扩展,但扩展性太好的不利于维护, content-xx-xxxx限制了类的扩展性,对于布局而言,子选择器的方式更适合。
每个main 和sidebar本身又可以包含 main和sidebar ,只要挂上 content-xx-xxxx就可以控制自己包含的margin和 sidebar,一层套一层,只在最外层的容器给定具体的宽度,所有其他的容器的宽度均用百分比设置,这种方式的布局极有灵活性。又因为由 content-xx-xxxx全站管理,非常的稳定,它称为网格布局。
z-index:
网页是三围结构除了 x,y 还有z轴。 Z在元素里设置position为 absolute,或relative 后被激活,其大小由 z-index控制,数值越大元素越靠上。
z-index:值可以是负数

前端css开发实例|web前端开发 html css 实战|web前端开发和h5哪个好?

» 本文来自:前端开发者 » 《编写高质量代码_Web前端开发修炼之道_CSS》
» 本文链接地址:https://www.rokub.com/3871.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!