CSSDIV使用技巧有哪些

本篇內(nèi)容主要講解“CSS DIV使用技巧有哪些”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“CSS DIV使用技巧有哪些”吧!

創(chuàng)新互聯(lián)主要從事成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)廣陽(yáng),10余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):18982081108

1.css font的簡(jiǎn)寫(xiě)規(guī)則    

當(dāng)我們寫(xiě)字體樣式的時(shí)候，我們也許會(huì)這樣子寫(xiě)

font-size: 1em; line-height: 1.5em; font-weight: bold; font-style: italic; font-variant: small-caps; font-family: verdana,serif

      其實(shí)，這樣寫(xiě)是完全多余的，我可以只用font 來(lái)寫(xiě)就OK了。

比如：

font: 1em/1.5em bold italic small-caps verdana,serif

2.把幾個(gè)class屬性寫(xiě)在一起。  

通常情況寫(xiě)，屬性里面的class只有一個(gè)值，但這并不是意外著你只能給它

賦一個(gè)class名，我們可以賦2個(gè)以上。比如

<p class="text side">...</p>

不過(guò)，需要注意的是，class里面是用空格把他們分開(kāi)來(lái)的，而不是“，”，這點(diǎn)需要注意一下。這樣運(yùn)用了，那么text和side的class 就會(huì)運(yùn)用到p元素中。

3.CSS的 border的默認(rèn)值    

border也就是邊框的值，我在做項(xiàng)目開(kāi)發(fā)的時(shí)候，很習(xí)慣的做法是：

border:1px solid red;

       第一個(gè)指的是框的大小，第二個(gè)是指樣式，第三個(gè)是指顏色。不過(guò)，這里3個(gè)并非都是必須要的，必須要用的是border的樣式。其余2個(gè)有默認(rèn)值。

比如，你這樣寫(xiě)：

border: solid

如果你這樣寫(xiě)了，那么默認(rèn)值第一個(gè)大小的默認(rèn)值是：medium(相對(duì)于3px或4px左右)以及顏色指的是文本里面的顏色。

4.!important 在IE中會(huì)被忽視   

因?yàn)闉g覽器之間的不兼容性，我們?cè)趯?xiě)css的時(shí)候，為了保證網(wǎng)站能在各個(gè)

瀏覽器之間保持兼容性，所以 我們需要使用!important這個(gè)屬性。

如果你在css使用了這個(gè)，那么它的優(yōu)先級(jí)會(huì)比和它同名屬性的優(yōu)先級(jí)高。

這個(gè)是給除了給IE以外的瀏覽器用的。

比如

margin-top: 3.5em !important; margin-top: 2em

上面指的是，除IE之外的瀏覽器是3.5em，而IE是2em。這個(gè)很有用。

5.Image的alt屬性   

我們?cè)诰W(wǎng)站開(kāi)發(fā)的時(shí)候，我們常常被建議使用HTML標(biāo)簽來(lái)顯示文本，而不是圖像。這樣可以使得網(wǎng)站具有更快的加載速度以及可訪問(wèn)性。舉個(gè)例子說(shuō)，你開(kāi)發(fā)了一個(gè)網(wǎng)站，你想在你網(wǎng)站的每一個(gè)頁(yè)面的頁(yè)面頂端放一個(gè)"購(gòu)買物品"?，F(xiàn)在加入你是一個(gè)賣家，那么你很期望你的物品能被搜索引擎找到，也許你會(huì)這么做：

<h2><img src="widget-image.gif" alt="購(gòu)買物品" /></h2>

實(shí)現(xiàn)了，但是這里需要注意的是，搜索引擎并不會(huì)關(guān)注img標(biāo)簽alt里的關(guān)鍵字因?yàn)楝F(xiàn)在很多的賣家都是這樣子)，所以白搭。所以，我們可以用css來(lái)代替

如下：

<h2><span>購(gòu)買物品</span></h2>

然后定義css：

h2  {  background: url(widget-image.gif) no-repeat;  }  h2 span  {  position: absolute;  left:-2000px  }

這樣子就OK了，迎合了搜索引擎的口味。所以呀，搜索引擎真的傷不起呀。

6.盒模型hack問(wèn)題   

這個(gè)問(wèn)題比較難，不過(guò)說(shuō)實(shí)在話的現(xiàn)在用的機(jī)會(huì)也比較少。因?yàn)樗婕暗絀E5問(wèn)題，現(xiàn)在誰(shuí)敢說(shuō)還在用IE5?拉出去斃了。

不管如何，我們還了解一下 總沒(méi)有壞處。

IE5和其他瀏覽器(IE 6+ 以及chrome等等)對(duì)邊框的計(jì)算是不一樣的呢，怎么說(shuō)呢?請(qǐng)看下圖

CSS盒子模型

DIVCSS盒子

圖1是我們現(xiàn)在正確的理解，就是說(shuō)整個(gè)box盒子的width的值是：內(nèi)容的width+padding+boder 3個(gè)值的相加。

然而，在IE5中不是這樣子的哦，請(qǐng)看上圖，它的內(nèi)容只有170px。所以這就出現(xiàn)了問(wèn)題了。

比如 代碼說(shuō)明：

#sidebar {  width: 200px;  padding: 10px;  border: 5px solid black;  }

把寬度設(shè)定為200像素,但是側(cè)邊欄實(shí)際需要230像素的空間,除了IE5 for Windows以外. IE5 for Windows 里側(cè)邊欄總共會(huì)占用200像素,把內(nèi)補(bǔ)丁和邊框都算在里面.圖2 顯示的是當(dāng)width屬性指定為200像素時(shí),邊框和內(nèi)補(bǔ)丁會(huì)占用內(nèi)容空間,而不是內(nèi)容空間之外.

對(duì)IE5 for Windows來(lái)說(shuō),則需要把寬度指定為230像素(加上兩側(cè)內(nèi)補(bǔ)丁和邊框的寬度),接著再以200像素覆蓋回來(lái),讓符合標(biāo)準(zhǔn)的瀏覽器得到正確的寬度.

#sidebar {  padding: 10px;  border: 5px solid black;  width: 230px; /* for IE5/Win */  voice-family: "\"}\"";  voice-family: inherit;  width: 200px; /* actual value */  }

留意IE5 for Windows的值先出現(xiàn),接著幾條讓IE5 for Windows認(rèn)為聲明已經(jīng)結(jié)束的規(guī)則,在此我們使用voice-family屬性,原因單純只是瀏覽器認(rèn)得它的話也不會(huì)改變視覺(jué)效果,最后指定實(shí)際的寬度,覆蓋最初的width規(guī)則,第二個(gè)width規(guī)則會(huì)被IE5 for Windows忽略.

結(jié)果在IE5 for Windows以及其他所有兼容CSS2的瀏覽器上看起來(lái)應(yīng)該完全相同.沒(méi)有使用這個(gè)hack的話,IE5 for Windows的使用者就會(huì)看到比設(shè)計(jì)還瘦的欄寬。

7.塊級(jí)元素的居中效果  

塊級(jí)元素?你不會(huì)這個(gè)都不懂了。不懂，我就羅嗦一下，就是指div、h2、table這類元素。相對(duì)應(yīng)的就是inline元素了，比如label等等。

通俗點(diǎn)就是，一個(gè)會(huì)占一行(當(dāng)然在沒(méi)有其他屬性的支持下)，另一個(gè)不會(huì)。OK。

一般來(lái)說(shuō)，對(duì)div居中，我都會(huì)寫(xiě)下面的寫(xiě)法：

#content  {  width: 700px;  margin: 0 auto;  }

然后，我們很高興的 就能在正常的瀏覽器到效果，請(qǐng)注意，我說(shuō)了正常2個(gè)子，那這也說(shuō)明，有不正常的情況下?什么情況呢?和上面的第六點(diǎn)一樣，也是IE5的問(wèn)題，在IE5下面，它根本就不懂這個(gè)，你說(shuō)它能解決問(wèn)題嘛?。

所以，我們只好按照下面的來(lái)實(shí)現(xiàn)：

body  {  text-align: center;  }  #content  {  text-align: left;  width: 700px;  margin: 0 auto;  }

OK，就樣就能很好的兼容了。

8.垂直調(diào)整(vertical aligning)  

當(dāng)我們?cè)谑褂胻able的時(shí)候，如果我們需要把一列的內(nèi)容居中排列怎么做?不用問(wèn)，我們理所當(dāng)然的是，用下面的這行句話：

vertical-align: middle

很多時(shí)候，這樣可以工作，可總有例外。比方說(shuō)，你現(xiàn)在有一個(gè)導(dǎo)航菜單，它的高度是2em，如果你插入這個(gè)命令的話，sorry，它不會(huì)進(jìn)行執(zhí)行，并且會(huì)把文字放到頂端。

那怎么解決呢?很簡(jiǎn)單。

你只需要把box模型的的高度的line-height指定成一樣就可以了。如下：

line-height: 2em

9.絕對(duì)定位和相對(duì)定位   

這個(gè)應(yīng)該是在css教程里比較難的部分吧，一下子也真的很難說(shuō)清楚，有興趣的可以找找資料看。給個(gè)例子：

<style>
#container { position: relative } 
</style> 
<div id="container"><div id="navigation">...</div></div> 

接著我設(shè)定里面navigation的樣式

#navigation  {  position: absolute;  left: 30px;  top: 5px  }

這個(gè)說(shuō)明了里面的navigationo相對(duì)于外面的來(lái)說(shuō) 進(jìn)行CSS定位。

10.不需要給背景圖片路徑加引號(hào)   

比如：

background:url("images/***.gif") #333;

你應(yīng)該把CSS background屬性引號(hào)去掉

background:url(images/***.gif) #333;

如果你加了引號(hào)，反而會(huì)引起一些瀏覽器的錯(cuò)誤。

到此，相信大家對(duì)“CSS DIV使用技巧有哪些”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

本文標(biāo)題：CSSDIV使用技巧有哪些
鏈接地址：http://muchs.cn/article8/jcpiip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、用戶體驗(yàn)、網(wǎng)站策劃、企業(yè)建站、商城網(wǎng)站、App開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)