css樣式遵循什么原則

“css的樣式規(guī)則是:由選擇器和聲明塊兩個基本部分組成的。選擇器決定為哪些元素應(yīng)用樣式;聲明塊定義相應(yīng)的樣式,它包含在一對花括號內(nèi),有一條或多條聲明組成,而每一條聲明則由一個屬性和一個值組成,中間用冒號隔開

目前創(chuàng)新互聯(lián)已為近千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、綿陽服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計、屯溪網(wǎng)站維護等服務(wù)，公司將堅持客戶導向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

說一下css規(guī)范？

一、Css書寫順序：

1.位置屬性(position, top, right, z-index, display, float等)　

2.大小(width, height, padding, margin)

3.文字系列(font, line-height, letter-spacing, color- text-align等)　

4.背景(background, border等)

5.其他(animation, transition等)

二、Css語法：

命名一般為小寫英文字母。

為了代碼的易讀性，在每個聲明塊的左花括號前添加一個空格。

每條聲明語句的?:?后應(yīng)該插入一個空格。

所有聲明語句都應(yīng)當以分號結(jié)尾。最后一條聲明語句后面的分號是可選的，但是，如果省略這個分號，你的代碼可能更易出錯。

對于屬性值或顏色參數(shù)，省略小于 1 的小數(shù)前面的 0 （例如，.5?代替?0.5；-.5px?代替?-0.5px）。

十六進制值應(yīng)該全部小寫，例如，#fff。

盡量使用簡寫形式的十六進制值，例如，用?#fff?代替?#ffffff。

避免為 0 值指定單位，例如，用?margin: 0;?代替?margin: 0px;。

Css常用的一些命名：

可參考：CSS 常用命名 - 彼岸時光 - 博客園。

三、Css的引入：

Css的引入一般有兩種，link和@import,一般建議使用link引入。這樣可以避免考慮@import的語法規(guī)則和注意事項，避免產(chǎn)生資源文件下載順序混亂和http請求過多的煩惱。

四、Css的命名規(guī)范(BEM,OOCSS)：

什么是BEM：BEM的意思就是塊（block）、元素（element）、修飾符（modifier）,是由Yandex團隊提出的一種前端命名方法論。這種巧妙的命名方法讓你的CSS類對其他開發(fā)者來說更加透明而且更有意義。

命名約定如下：

.block{} // 塊即是通常所說的 Web 應(yīng)用開發(fā)中的組件或模塊。每個塊在邏輯上和功能上都是相互獨立的。

.block__element{} // 元素是塊中的組成部分。元素不能離開塊來使用。BEM 不推薦在元素中嵌套其他元素。

.block--modifier{} // 修飾符用來定義塊或元素的外觀和行為。同樣的塊在應(yīng)用不同的修飾符之后，會有不同的外觀。

優(yōu)點：

BEM 的優(yōu)點在于所產(chǎn)生的 CSS 類名都只使用一個類別選擇器，可以避免傳統(tǒng)做法中由于多個類別選擇器嵌套帶來的復(fù)雜的屬性級聯(lián)問題。在 BEM 命名規(guī)則中，所有的 CSS 樣式規(guī)則都只用一個類別選擇器。因此所有樣式規(guī)則的特異性（specificity）都是相同的，也就不存在復(fù)雜的優(yōu)先級問題。這可以簡化屬性值的層疊規(guī)則。代碼清單中的命名規(guī)則的好處在于每個 CSS 類名都很簡單明了，而且類名的層次關(guān)系可以與 DOM 節(jié)點的樹型結(jié)構(gòu)相對應(yīng)。

缺點：

這樣類名過于長，且復(fù)雜。

什么是OOCSS（面向?qū)ο驝SS）：

OOCSS 表示的是面向?qū)ο?CSS（Object Oriented CSS），是一種把面向?qū)ο蠓椒▽W應(yīng)用到 CSS 代碼組織和管理中的實踐。 OOCSS最關(guān)鍵的一點就是：提高他的靈活性和可重用性。這個也是OOCSS最重要的一點。OOCSS主張是通過在基礎(chǔ)組件中添加更多的類，從而擴展基礎(chǔ)組件的CSS規(guī)則，從而使CSS有更好的擴展性。

OOCSS的優(yōu)點：

減少CSS代碼。

具有清潔的HTML標記，有語義的類名，邏輯性強的層次關(guān)系。

語義標記，有助于SEO。

更好的頁面優(yōu)化，更快的加載時間（因為有很多組件重用）。

可擴展的標記和CSS樣式，有更多的組件可以放到庫中，而不影響其他的組件。

能輕松構(gòu)造新的頁面布局，或制作新的頁面風格。

OOCSS的缺點：

OOCSS適合真正的大型網(wǎng)站開發(fā)，因為大型網(wǎng)站用到的可重用性組件特別的多，如果運用在小型項目中可能見不到什么成效。所以用不用OOCSS應(yīng)該根據(jù)你的項目來決定。如果沒用巧妙的使用，創(chuàng)建組件可能對于你來說是一堆沒用的東西，成為一爛攤子，給你的維護帶來意想不到的杯具，說不定還是個維護的噩夢。

歡迎到優(yōu)就業(yè)來了解

CSS樣式表有哪幾類規(guī)則?

1、內(nèi)聯(lián)樣式表

直接在HTML標記內(nèi)，插入sytle屬性，再定義要顯示的樣式，這是最簡單的樣式定

義方法。不過，利用這種方法定義樣式時，效果只可以控制該標記，其語法如下：

標記名稱 style="樣式屬性:屬性值;樣式屬性:屬性值"

如：body style=" color:#FF0000;font-family:"宋體";cursor:url(3151.ani);"

2、 嵌入樣式表

style type="text/css"

內(nèi)部樣式表是把樣式表放到頁面的head區(qū)里，這些定義的樣式就應(yīng)用到頁面中了，樣式表是用style標記插入的

head

……

style type="text/css"

!--

hr {color: sienna}

p {margin-left: 20px}

body {background-image: url("images/back40.gif")}

--

/style

……

/head

style元素是用來說明所要定義的樣式。TYPE屬性是指定style元素以css的語法定義。有些低版本的瀏覽器不能識別style標記，這意味著低版本的瀏覽器會忽略style標記里的內(nèi)容，并把style標記里的內(nèi)容以文本直接顯示到頁面上。為了避免這樣的情況發(fā)生，我們用加HTML注釋的方式!-- 注釋 --隱藏內(nèi)容而不讓它顯示。

3、外部樣式表

link href="樣式表地址" rel="stylesheet" type="text/css" /

4、輸入樣式表

可以使用css的@import聲明將一個外部樣式表文件輸入到另外一個css文件中，被輸入的css文件中的樣式規(guī)則定義語句就成為了輸入到的css文件的一部分，也可以使用@import聲明將一個css文件輸入到網(wǎng)頁文件的style/style標簽對中，被輸入的css文件中的樣式規(guī)則定義語句就成了style/style標簽對中的語句。

style

@import url(http://……)

/stypel

文章題目：css中樣式規(guī)則,css樣式的三種方式
本文路徑：http://chinadenli.net/article25/dsgooci.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、微信小程序、網(wǎng)站排名、標簽優(yōu)化、服務(wù)器托管、虛擬主機

廣告

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