css怎么寫才是最快的？

在開發(fā)項(xiàng)目的過程中，速度并不是效率的唯一的標(biāo)準(zhǔn)，不管是什么項(xiàng)目，在開發(fā)之前對(duì)整個(gè)項(xiàng)目或者想要達(dá)到的效果需要定位，在以那個(gè)角度上分析整個(gè)項(xiàng)目中要應(yīng)用的地方，之后就可以寫出你所說的共用CSS代碼，CSSName.css格式的文件，CSS代碼的管理也是具有挑戰(zhàn)的，如果代碼量非常大就不適合都放在一個(gè)文件里，比如關(guān)于內(nèi)容的都封裝到一個(gè)文件夾，關(guān)于按鈕，標(biāo)簽等等具有提示效果的又可以放在一個(gè)文件夾里，這跟開發(fā)者的習(xí)慣以及經(jīng)驗(yàn)有很大關(guān)系，或者團(tuán)隊(duì)中會(huì)決定一個(gè)標(biāo)準(zhǔn)來怎么做，除此之外還需要應(yīng)用相關(guān)CSS知識(shí)，比如類命名，ID命名，一開始不要去追求所謂的專業(yè)水準(zhǔn)，第一你暫時(shí)可能達(dá)不到那個(gè)要求，第二對(duì)整個(gè)項(xiàng)目的分析能力不夠到位，所以要達(dá)到這個(gè)水準(zhǔn)，需要不斷的練習(xí)積累你的經(jīng)驗(yàn)以及更豐富你所知道的內(nèi)容，最后想說一句，作為開發(fā)人員，我認(rèn)為比起速度應(yīng)該更要求自己的代碼具有高質(zhì)量，質(zhì)量跟速度并行才是一個(gè)合格的開發(fā)人員，光注重速度你會(huì)在過程中忽略掉很多致命的錯(cuò)誤發(fā)生。

在華安等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作 網(wǎng)站設(shè)計(jì)制作按需策劃,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站建設(shè),營(yíng)銷型網(wǎng)站建設(shè),外貿(mào)網(wǎng)站制作,華安網(wǎng)站建設(shè)費(fèi)用合理。

什么是CSS CSS如何提高工作效率

CSS是Cascading style Sheets的簡(jiǎn)稱，中文譯作“層疊樣式表單”，我把它叫作“層疊樣式表”，我感到這樣順口一

點(diǎn)，沒別的意思。實(shí)際上它是一組樣式。你可能對(duì)CSS這個(gè)名詞比較陌生，實(shí)際上無論你用Internet Explorer還是

Netscape Navigator在網(wǎng)上沖浪，幾乎隨時(shí)都在與CSS打交道，在網(wǎng)上沒有使用過CSS的網(wǎng)頁(yè)可能不好找。不管你用什么工

具軟件制作網(wǎng)頁(yè)，都有在有意無意地使用CSS。用好CSS能使你的網(wǎng)頁(yè)更加簡(jiǎn)煉，為什么同樣內(nèi)容的網(wǎng)頁(yè)，有的人做出來有

幾十KB，而高手做出來只有十幾KB，CSS在其中的作用是不言而喻的.

1、CSS在網(wǎng)頁(yè)制作中一般有三種方式的用法，那么具體在使用時(shí)該采用哪種用法?

當(dāng)有多個(gè)網(wǎng)頁(yè)要用到的CSS，采用外連CSS文件的方式，這樣網(wǎng)頁(yè)的代碼大大減少，修改起來非常方便;只在單個(gè)網(wǎng)頁(yè)

中使用的CSS，采用文檔頭部方式;只有在一個(gè)網(wǎng)頁(yè)一、兩個(gè)地方才用到的CSS，采用行內(nèi)插入方式。

2、CSS的三種用法在一個(gè)網(wǎng)頁(yè)中要以混用嗎?

三種用法可以混用，且不會(huì)造成混亂。這就是它為什么稱之為“層疊樣式表”的原因，瀏覽器在顯示網(wǎng)頁(yè)時(shí)是這樣處

理的:先檢查有沒有行內(nèi)插入式CSS，有就執(zhí)行了，針對(duì)本句的其它CSS就不去管它了;其次檢查頭部方式的CSS，有就執(zhí)行

了;在前兩者都沒有的情況下再檢查外連文件方式的CSS。因此可看出，三種CSS的執(zhí)行優(yōu)先級(jí)是:行內(nèi)插入式、頭部方

式、外連文件方式。

3、在Dreamweaver3中如何使外部文件式CSS?

在Dreamweaver3中使用外連文件式CSS并沒有特殊要求，同樣是用記事本創(chuàng)建一個(gè)*.css文件，在網(wǎng)頁(yè)的head與

/head之間加上一句這樣的代碼:link rel="stylesheet" href="在這里填上你的CSS文件地址(相對(duì)路徑+文件

名)" type="text/css" 就行了。

4、如何用Dreamweaver3快速創(chuàng)建CSS外連式文件?

對(duì)于一個(gè)初接觸CSS的網(wǎng)頁(yè)設(shè)計(jì)人員來講，要用記事之類的編輯器，去創(chuàng)建一個(gè)CSS外連式文件是相當(dāng)困難的。由于

Dreamweaver3對(duì)CSS支持的很好，用它來幫助就輕松多了。具體可以這樣操作:

1)先在紙上寫好在網(wǎng)站的網(wǎng)頁(yè)中可能要用到的格名稱，然后在Dreamweaver3的編輯窗中調(diào)出CSS面板，一個(gè)一個(gè)地定

義，并在一個(gè)空白頁(yè)上適當(dāng)?shù)貙懸稽c(diǎn)相關(guān)內(nèi)容，邊定義邊試用，效果不滿意，立即修改;

2)全部定義好后，再用記事本創(chuàng)建一個(gè)空的CSS外連式文件，把在head與/head之間的那段定義好的CSS復(fù)制

到CSS文件中去，就大功告成了。整個(gè)過程就是點(diǎn)鼠標(biāo)，方便吧?

5、在Dreamweaver3中采用行內(nèi)插入式CSS要手動(dòng)寫代碼嗎?

不用!先用CSS面板定義好要用的CSS，然后，在要插入CSS的標(biāo)記插入:style=""，再把你剛才定義的CSS從head

后面拖到這個(gè)雙引號(hào)中來，把花括號(hào)以外的部分刪去就行了。

6、在方檔頭部方式和外連文件方式的CSS中都有“!--”和“--”，好象沒什么用，不要可以嗎?

這一對(duì)東東的作用是為了不引起低版本瀏覽器的錯(cuò)誤。如果某個(gè)執(zhí)行此頁(yè)面的瀏覽器不支持CSS，它將忽略其中的內(nèi)

容。雖然現(xiàn)在使用不支持CSS瀏覽器的人已很少了，由于互聯(lián)網(wǎng)上幾乎什么可能都會(huì)發(fā)生，所以還是留著為妙。

7、如何給一部分文字加背景色?

給文字加上不同顏色，在DW3中只要在屬性面板上選取文字的顏色就行了，非常方便，但要給部分文字加不同的背景色

卻沒有相應(yīng)的功能，我們可以先做一個(gè)定義背景色的CSS(如:bgstyle)，在DW3中點(diǎn)幾下鼠就完成了。如一個(gè)定義淡黃色

背景的CSS是這樣的:

style type="text/css"

!--

.bgstyle { background: #FFFFCC}

--

/style

在要用時(shí)選取那段文字，再在CSS面板上點(diǎn)一下“bgstyle”就行了。

8、如何給部分文字加背景圖像?

與加背景色操作類似，中是在背景在選擇加載圖象就是了，一個(gè)定義好的加背景圖象的CSS例子的代碼是這樣的:

style type="text/css"

!--

.imgbgstyle { background-image: url(/logo.gif)}

--

/style

在要用時(shí)選取那段文字，再在CSS面板上點(diǎn)一下“imgbgstyle”就行了。

9、如何使頁(yè)面的背景在文字“滾動(dòng)”時(shí)背景圖案靜止不動(dòng)?

要使背景圖案不隨文字“滾動(dòng)”的CSS是這樣的:

style type="text/css"

!--

BODY { background: purple url(/bg.jpg);

background-repeat:repeat-y;

background-attachment:fixed

}

--

/style

10、如何定義字間距?

在DW3中CSS的屬性定義對(duì)話框(style Definition for .style1)的“Block”上的“l(fā)etter spaceing”屬性定義的就

是字間距，它指的是每一個(gè)字符之間的額外間距，經(jīng)長(zhǎng)度為單位，正負(fù)值均可，當(dāng)取負(fù)值時(shí)產(chǎn)生字符擠在一起的效果。下

面代碼是一個(gè)定義好的字間距CSS例子:

style type="text/css"

!--

.style1 { letter-spacing: 3px}

--

/style

11、如何給文字加上劃線、下劃線、刪除線和閃爍?

在DW3中CSS的屬性定義對(duì)話框(style Definition for .style1)的“Type”上的“decoration”屬性定義的就是這些

內(nèi)容，要注意的是閃爍屬性有些版本的瀏覽器不支持，少用為好。下面是一個(gè)定義好上述效果的CSS例子:

style type="text/css"

!--

.style1 { text-decoration: underline overline line-through blink}

--

/style

其中: “underline”是定義下劃線;“overline ”是定義上劃線;“ line-through”定義的是刪除線;“blink”

定義的是文字閃爍。

12、如何使網(wǎng)頁(yè)具有“首行縮進(jìn)”功能?

由于DW3輸入空格不方便，利用“首行縮進(jìn)”將彌補(bǔ)這個(gè)不足。在DW3中CSS的屬性定義對(duì)話框(style Definition

for .style1)的“Block”上的“text-indent”屬性定義的就是“首行縮進(jìn)”，所謂“首行”是指每段內(nèi)容的第一行，也

就是直接按回車鍵就形成了一個(gè)新的段落。縮進(jìn)最好以“em”(字符)為單位，比如:漢字編排要求每段開始縮進(jìn)兩個(gè)漢

字，設(shè)置好的CSS如下所示:

style type="text/css"

!--

.style1 { text-indent: 2em}

--

/style

在DW3要注意:在DW3中CSS的屬性定義對(duì)話框(style Definition for .style1)的“Block”上的“text-indent”右

面的縮進(jìn)單位選擇框中“ems”指的就是“em”。

13、在用表格進(jìn)行排版時(shí)，能使某一方向上的內(nèi)容離開表格線一點(diǎn)嗎?

可以!在DW3中CSS的屬性定義對(duì)話框(style Definition for .style1)的“Box”上的“margin”定義的就是內(nèi)容離

開邊緣的距離，分別可定義四個(gè)方向:“top”“bottom”“l(fā)eft”“right”。下面就是定義在左邊離開“10px”的CSS例

子代碼:

style type="text/css"

!--

.style1 { margin: 0px 0px 0px 10px}

--

/style

14、能給某部分內(nèi)容加邊框嗎?

用CSS可以給某部分內(nèi)容加邊框，在DW3中CSS的屬性定義對(duì)話框(style Definition for .style1)的“Border”定義

的就是邊框線，“top”“bottom”“l(fā)eft”“right”四邊可分別定義線的粗細(xì)和顏色，這些定義好后不要忘記在下面的

“style”中定義線型，否則將看不邊框線，因?yàn)槟J(rèn)的線型是“none”。下面是一個(gè)定義了上邊框?yàn)?藍(lán)色細(xì)線;左邊框

為:綠色中粗線的CSS例子:

style type="text/css"

!--

.style1 { border: solid; border-width: thin 0px 0px medium; border-color: #0000FF black black #00FF00}

--

如何用CSS編寫高效率的CSS代碼

一：如果你僅是指可以高效率的寫出相應(yīng)的css代碼，那么你只需要一個(gè)css插件，Emmet（原名：Zen Coding）是前端開發(fā)快速輸入代碼一種方式，作為文本編輯器的插件存在，可以幫助您快速編寫HTML和CSS代碼。

二：如果你想要用更少量的代碼量來達(dá)到更多的功能和效果，那么

Less , CSS 預(yù)處理語言，可以達(dá)到目的。

怎樣提高寫css的效率

首先我們需要清楚，瀏覽器是如何讀取選擇器，以識(shí)別樣式，并將相應(yīng)的樣式附于對(duì)應(yīng)的HTML元素，達(dá)到美化頁(yè)面的效果。Chris

Coyier曾在《Efficiently Rendering

CSS》一文中說過“瀏覽器讀取你的選擇器，遵循的原則是從選擇器的右邊到左邊讀取。換句話說，瀏覽器讀取選擇器的順序是由右到左進(jìn)行”。比如說：

div.nav ul li a

上面的實(shí)例來說，瀏覽器首先會(huì)嘗試在你的HTML標(biāo)簽中尋找“a”元素，接著在匹配“l(fā)i和ul”，最后在去匹配“div.nav”。這就是前成所主的“選擇器從右到左的原則”。

選擇器的最后一部分，也就是選擇器的最右邊（在這個(gè)例子中就是a[title]部分）部分被稱為“關(guān)鍵選擇器”，它將決定你的選擇器的效率如何？是高還是低。

老版本的瀏覽器可以過濾掉不匹配的選擇器，而直接匹配更高效的選擇器。記得David Hyatt在《Writing efficient

CSS for use in the Mozilla

UI》說過：“這個(gè)關(guān)鍵選擇器可以大大提高選擇器的性能，少檢查一個(gè)給定的元素規(guī)則，就可以更有效的將樣式匹配給對(duì)應(yīng)的HTML元素。”那么如何讓關(guān)鍵選

擇器更有效，性能化更高呢？其實(shí)很簡(jiǎn)單，主要把握一點(diǎn)“越具體的關(guān)鍵選擇器，其性能越高”

那么什么樣類型的選擇器，其性能高？什么樣的類型的選擇器性能低呢？下面我們就針對(duì)兩個(gè)問題來展開具體的學(xué)習(xí)。

CSS選擇器的效率

如果你閱讀了本站的有關(guān)于選擇器類型的介紹的話，你對(duì)選擇器并不會(huì)感到陌生。就算你沒讀過，我想CSS選擇器不會(huì)讓我們覺得是新東西，比如我們

常用的基本選擇器“元素標(biāo)簽選擇器div”、“id選擇器#header”、“類選擇器.class”，或者說我們很少見的偽類選擇器“:focus”以

及更復(fù)雜的css3選擇器“:nth-child”等等。

選擇器有一個(gè)固有的效率，我們來看Steve Souders給排的一個(gè)順序：

id選擇器（#myid）

類選擇器（.myclassname）

標(biāo)簽選擇器（div,h1,p）

相鄰選擇器（h1+p）

子選擇器（ul li）

后代選擇器（li a）

通配符選擇器（*）

屬性選擇器（a[rel="external"]）

偽類選擇器（a:hover,li:nth-child）

上面九種選擇器的效率是從高到低排下來的，基中ID選擇器的效率是最高，而偽類選擇器的效率則是最底。詳細(xì)的介紹大家還可以點(diǎn)擊Writing efficient CSS selectors。

綜合上面的順序，我們清楚的知道，id和類名用于關(guān)鍵選擇器上效率是最高的，而CSS3的仿偽類和屬性選擇器，雖然使用方便，但其效率卻是最低的。我們下面一起來看幾個(gè)實(shí)例的對(duì)比：

div #myid

效率要比下面的高：

#myid div

第一種選擇器比第二種選擇器效率高，大家或許會(huì)問為什么？其實(shí)根據(jù)前面所介紹的我們就不難理解了，因?yàn)榈谝粋€(gè)選擇器的“關(guān)鍵選擇器”使用了

“ID選擇器”，而第二個(gè)選擇器的“關(guān)鍵選擇器”使用的是“標(biāo)簽選擇器”，對(duì)比下來，“ID選擇器”效率高過“標(biāo)簽選擇器”，所以說第一個(gè)選擇器的效率要

高于第二個(gè)選擇器。

在類名或ID名前面加上標(biāo)簽也會(huì)致使選擇器效率變低的，比如說：

div

#myid

上面兩個(gè)選擇的效率要高于下面的選擇器：

p#mydiv

p.myclassname

來自Mozilla的幾點(diǎn)建議

David在《Use efficient CSS selectors》中介紹了幾種書寫高效率的CSS選擇器的方法，下面我將他們移到這里來讓大家參考：

寫道

1 避免普遍規(guī)則

2 不要在ID選擇器前加標(biāo)簽名或類名

3 不要在類名選擇器前加標(biāo)簽名

4 盡可能使用具體的類別

5 避免使用后代選擇器

6 標(biāo)簽分類規(guī)則中不應(yīng)該包含一個(gè)子選擇器

7 子選擇器的問題

8 借助相關(guān)繼承關(guān)系

9 使用范圍內(nèi)的樣式表

如果你不夠清楚上面所講的是什么，你可以點(diǎn)擊這里，他會(huì)讓你更容易了解這些規(guī)則。

我們應(yīng)該怎么做

前面說“ID選擇器”的效率是最高的，那么今天我們寫樣式，為了提高選擇器的效率，是不是我們要在每一個(gè)文檔的HTML元素中都加入ID名呢？

我想這樣的做法是沒有的。對(duì)于一個(gè)有語義的代碼編寫和如何提高性能，以前他們之間如何的平衡？其實(shí)這個(gè)選擇器的效率低一點(diǎn)，對(duì)于大多數(shù)網(wǎng)站來說并不會(huì)有太

大的影響，但對(duì)于一個(gè)大型的網(wǎng)站，產(chǎn)生大量的流量這就會(huì)有差別了，也就很值得我們?nèi)?duì)他進(jìn)行優(yōu)化。那么我們就很有必要的去了解他們是如何工作，比如說，一

般情況下哪些選擇器的使用效率更高。來看兩個(gè)簡(jiǎn)單的例子：

#myid

上面的選擇器高于下面的：

p#myid

后者的寫法我發(fā)現(xiàn)還是有很多朋友這樣寫，但我不知道你為什么需要在ID前面加一個(gè)標(biāo)簽？難道你同一個(gè)頁(yè)面會(huì)有多個(gè)相同的ID不成？

我們接下來在來看一個(gè)實(shí)例，用于列表上的，比如說我們制作導(dǎo)航菜單的：

#nav a

高效于：

#nav li a

上面只是介紹了兩個(gè)常碰到的實(shí)例，在這里說這兩個(gè)實(shí)例，主要目的是讓你在今后的編寫樣式時(shí)，能注意這方面的的細(xì)節(jié)，從而加快你的代碼效率。

分享文章：提高css樣式編寫的效率,提高css樣式編寫的效率
文章路徑：http://chinadenli.net/article6/dsshjig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、品牌網(wǎng)站建設(shè)、微信小程序、App設(shè)計(jì)、網(wǎng)站收錄、網(wǎng)站營(yíng)銷

廣告

聲明：本網(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í)需注明來源： 創(chuàng)新互聯(lián)