DIV CSS网页页面合理布局的基本专业知识梳理

2021-03-16 13:07 jianzhan
  jb51.net的CSS实例教程栏目中汇聚了很多的CSS专业知识,这些专业知识早已十分全面了,但许多CSSer初学者初来本站,仍然云里雾里,现梳理1些DIVCSS网页页面合理布局常见的1些基本专业知识,供大伙儿学习培训,欢迎填补及提1些提议。
CSS取名标准
1.文档取名标准
全局性款式:global.css;
架构合理布局:layout.css;
字体样式款式:font.css;
连接款式:link.css;
复印款式:print.css;
2.常见类/ID取名标准
页 眉:header
内 容:content
容 器:container
页 脚:footer
版 权:copyright 
导 航:menu
主导航栏:mainMenu
子导航栏:subMenu
标 志:logo
标 语:banner
标 题:title
侧面栏:sidebar
图 标:Icon
注 释:note
搜 索:search
按 钮:btn
登 录:login
链 接:link
信息内容框:manage
……
常见类的取名应尽可能以普遍英文单词为准,保证通俗化易懂,并在适度的地区加以注解。针对2级类/ID取名,则选用组成撰写的方式,后1个单词的首字母应大写:诸如“检索框”则应取名为“searchInput”、“检索标志”取名这“searchIcon”、“检索按钮”取名为“searchBtn
CSS撰写标准及方式
1.基本撰写标准及方式
1.挑选DOCTYPE:
XHTML1.0出示了3种DTD申明可供挑选:
过渡的(Transitional):规定十分宽松的DTD,它容许你再次应用HTML4.01的标志(可是要合乎xhtml的写法)。详细编码以下:
<!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
严苛的(Strict):规定严苛的DTD,你不可以应用任何主要表现层的标志和特性,比如<br>。详细编码以下:
<!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Strict//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
架构的(Frameset):专业对于架构网页页面设计方案应用的DTD,假如你的网页页面中包括有架构,必须选用这类DTD。详细编码以下:
<!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Frameset//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>
理想化状况自然是严苛的DTD,但针对大家大多数数刚触碰web规范的设计方案师来讲,过渡的DTD(XHTML1.0Transitional)是现阶段理想化挑选(包含本站,应用的也是过渡型DTD)。由于这类DTD还容许大家应用主要表现层的标志、元素和特性,也较为非常容易根据W3C的编码校检。
2.特定語言及标识符集:
为文本文档特定語言:
<htmlxmlns=”http://www.w3.org/1999/xhtml”lang=”en”>
以便被访问器正确解释和根据W3C编码校检,全部的XHTML文本文档都务必申明它们所应用的编号語言;如:
常见的語言界定:
<metahttp-equiv=”Content-Type”content=”text/html;charset=utf⑻″/>
规范的XML文本文档語言界定:
<?xmlversion=”1.0″encoding=”utf⑻″?>
对于老版本号的访问器的語言界定:
<metahttp-equiv=”Content-Language”content=”utf⑻″/>
为提升标识符集,提议选用“utf⑻”。
3.启用款式表:
外界款式表启用:
网页页面嵌入法:便是将款式表立即写在网页页面编码的head区。如:
<styletype=”text/css”><!–body{background:white;color:black;}–></style>
外界启用法:将款式表写在1个单独的.css文档中,随后在网页页面head区用相近下列编码启用。
<linkrel=”stylesheet”rev=”stylesheet”href=”css/style.css”type=”text/css”media=”all”/>
在合乎web规范的设计方案中,强烈推荐应用外界启用法,能够不改动网页页面只改动.css文档而更改网页页面的款式。假如全部网页页面都启用同1个款式表文档,那末改1个款式表文档,能够更改全部文档的款式。
4、采用适当的元素:
依据文本文档的构造来挑选HTML元素,而并不是依据HTML元素的款式来挑选。比如,应用P元向来包括文本段落,而并不是以便换行。假如在建立文本文档时找不到适度的元素,则能够考虑到应用通用性的div或是span;
防止过渡应用div和span。小量、适度的应用div和span元素可使文本文档的构造更为清楚有效而且易于应用款式;
尽量少地应用标识和构造嵌套循环,这样不仅可使文本文档构造清楚,另外还可以维持文档的精巧,在提升客户免费下载速率的另外,也易于访问器对文本文档的解释及呈视;
5、派生挑选器:
可使用派生挑选器给1个元素里的子元素界定款式,在简化取名的另外也使构造更为的清楚化,如:
.mainMenuulli{background:url(images/bg.gif;)}
6、輔助照片用背影图解决:
这里的”輔助照片”是指那些并不是做为网页页面要表述的內容的1一部分,而仅仅用于装饰、间距、提示的照片。将其做背影图解决,能够在不修改网页页面的状况下根据CSS款式来开展修改,如:
#logo{background:url(images/logo.jpg)#FEFEFEno-repeatrightbottom;}
7、构造与款式分离出来:
在网页页面里只写入文本文档的构造,而将款式写于css文档中,根据外界启用CSS款式表来完成构造与款式的分离出来。
8、文本文档的构造化撰写:
网页页面CSS文本文档都应选用构造化的撰写方法,逻辑性清楚易于阅读文章。如:
<divid=”mainMenu”>
<ul>
<li><ahref=”#”>主页</a></li>
<li><ahref=”#”>详细介绍</a></li>
<li><ahref=”#”>服务</a></li>
</ul>
</div>
/*=====主导航栏=====*/
#mainMenu{
width:100%;
height:30px;
background:url(images/mainMenu_bg.jpg)repeat-x;
}
#mainMenuulli{
float:left;
line-height:30px;
margin-right:1px;
cursor:pointer;
}
/*=====主导航栏完毕=====*/
9、电脑鼠标手式:
在XHTML规范中,hand只被IE鉴别,当必须将电脑鼠标手式变换为“手形”时,则将“hand”换为“pointer”,即“cursor:pointer;”
2.注解撰写标准
1、行间注解:
立即写于特性值后边,如:
.search{
border:1pxsolid#fff;/*界定检索键入框边框*/
background:url(../images/icon.gif)no-report#333;/*界定检索框的情况*/
}
2、整段注解:
各自在刚开始及完毕地区添加注解,如:
/*=====检索条=====*/
.search{
border:1pxsolid#fff;
background:url(../images/icon.gif)no-repeat#333;
}
/*=====检索条完毕=====*/
3.款式特性编码缩写
1、不一样类有同样特性及特性值的缩写:
针对两个不一样的类,可是在其中有一部分同样乃至是所有同样的特性及特性值时,解决其加以合拼缩写,非常是当有好几个不一样的类而有同样的特性及特性值时,合拼缩写能够降低编码量并易于操纵。如:
#mainMenu{
background:url(../images/bg.gif);
border:1pxsolid#333;
width:100%;
height:30px;
overflow:hidden;
}
#subMenu{
background:url(../images/bg.gif);
border:1pxsolid#333;
width:100%;
height:20px;
overflow:hidden;
}
两个不一样类的特性值有反复的地方,刚能够缩写为:
#mainMenu,#subMenu{
background:url(../images/bg.gif);
border:1pxsolid#333;
width:100%;
overflow:hidden;
}
#mainMenu{height:30px;}
#subMenu{height:20px;}
2、同1特性的缩写:
同1特性依据它的特性值还可以开展简写,如:
.search{
background-color:#333;
background-image:url(../images/icon.gif);
background-repeat:no-repeat;
background-position:50P%;
}
.search{
background:#333url(../images/icon.gif)no-repeat50P%;
}
3、內外侧面框的缩写:
在CSS中有关內外侧面框的间距是依照上、右、下、左的次序来排序的,当这4个特性值不一样时也可立即缩写,如:
.btn{
margin-top:10px;
margin-right:8px;
margin-bottom:12px;
margin-left:5px;
padding-top:10px;
padding-right:8px;
padding-bottom:12px;
padding-left:8px;
}
则可缩写为:
.btn{
Margin:10px8px12px5px;
Padding:10px8px12px5px;
}
而假如当上边与下边、左侧与右侧的边框特性值同样时,则特性值能够立即缩写为两个,如:
.btn{
margin-top:10px;
margin-right:5px;
margin-bottom:10px;
margin-left:5px;
}
缩写为:
.btn{margin:10px5px;}
而当左右上下4个边框的特性值都同样时,则能够立即缩写成1个,如:
.btn{
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
}
缩写为:
.btn{margin:10px;}
4、色调值的缩写:
当RGB3个色调值标值同样时,可缩写色调值编码。如:
.menu{color:#ff3333;}
可缩写为:
.menu{color:#f33;}
4.hack撰写标准
由于不一样访问器对W3C规范的适用不1样,各个访问器针对网页页面的解释呈视也不尽同样,例如IE在许多状况下就与FF存在3px的差别,针对这些差别性,就必须运用css的hack来开展调剂,自然在沒有必要的状况下,最好是不必写hack来开展调剂,防止由于hack而致使网页页面出現难题。
1、IE6、IE7、Firefox之间的适配写法:
写法1:
IE都能鉴别*;规范访问器(如FF)不可以鉴别*;
IE6能鉴别*,但不可以鉴别!important,
IE7能鉴别*,也能鉴别!important;
FF不可以鉴别*,但能鉴别!important;
依据上述表述,同1类/ID下的CSS hack可写为:
.searchInput{
background-color:#333;/*3者皆可*/
*background-color:#666 !important;/*仅IE7*/
*background-color:#999;/*仅IE6及IE6下列*/
}
1般3者的撰写次序为:FF、IE7、IE6.
写法2:
IE6可鉴别“_”,而IE7及FF皆不可以鉴别,因此当只对于IE6与IE7及FF之间的差别时,可这样撰写:
.searchInput{
background-color:#333;/*通用性*/
_background-color:#666;/*仅IE6可鉴别*/
}
写法3:
* html与*html是IE独有的标识,Firefox暂不适用。
.searchInput{background-color:#333;}
*html.searchInput{background-color:#666;}/*仅IE6*/
* html.searchInput{background-color:#555;}/*仅IE7*/
屏蔽IE访问器:
select是挑选符,依据状况拆换。第2句是MAC上safari访问器特有的。
*:lang(zh)select{font:12px!important;}/*FF的专用*/
select:empty{font:12px!important;}/*safari可见*/
IE6可鉴别:
这里关键是根据CSS注解分开1个特性与值,注解在冒号前。
select{display/*IE6不鉴别*/:none;}
IE的if标准hack写法:
全部的IE可鉴别:
<!–[ifIE]>OnlyIE<![endif]–>
仅有IE5.0能够鉴别:
<!–[ifIE5.0]>OnlyIE5.0<![endif]–>
IE5.0包换IE5.5都可以以鉴别:
<!–[ifgtIE5.0]>OnlyIE5.0 <![endif]–>
仅IE6可鉴别:
<!–[ifltIE6]>OnlyIE6-<![endif]–>
IE6和IE6下列的IE5.x都可以鉴别:
<!–[ifgteIE6]>OnlyIE6/ <![endif]–>
仅IE7可鉴别:
<!–[iflteIE7]>OnlyIE7/-<![endif]–>
2、消除波动:
在Firefox中,当子级都为波动时,那末父级的高宽比就没法彻底的包住全部子级,那末这时候用这个消除波动的HACK来对父级做1次界定,那末便可以处理这个难题。
select:after{
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;