css樣式遵循什么原則

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

成都創(chuàng)新互聯(lián)公司是一家集成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、網(wǎng)站頁面設(shè)計(jì)、網(wǎng)站優(yōu)化SEO優(yōu)化為一體的專業(yè)的建站公司，已為成都等多地近百家企業(yè)提供網(wǎng)站建設(shè)服務(wù)。追求良好的瀏覽體驗(yàn),以探求精品塑造與理念升華,設(shè)計(jì)最適合用戶的網(wǎng)站頁面。 合作只是第一步，服務(wù)才是根本,我們始終堅(jiān)持講誠信，負(fù)責(zé)任的原則，為您進(jìn)行細(xì)心、貼心、認(rèn)真的服務(wù),與眾多客戶在蓬勃發(fā)展的市場環(huán)境中,互促共生。

CSS規(guī)則有哪四種類型，各有什么特點(diǎn)

1. 標(biāo)簽名選擇器 div { color：Red;} 即頁面中的各個(gè)標(biāo)簽名的css樣式

2.類選擇器 .divClass {color:Red;} 即定義的每個(gè)標(biāo)簽的class 中的css樣式

3.ID選擇器 #myDiv {color:Red;} 即頁面中的標(biāo)簽的id

4.后代選擇器（類選擇器的后代選擇器） .divClass span { color:Red;} 即多個(gè)選擇器以逗號(hào)的格式分隔 命名找到準(zhǔn)確的標(biāo)簽

詳解CSS樣式選擇器有哪些?

CSS選擇器就是指定CSS要作用的標(biāo)簽，那個(gè)標(biāo)簽的名稱就是選擇器。意為：選擇哪個(gè)容器。

CSS選擇器分類：

標(biāo)簽選擇器、類選擇器、ID選擇器、全局選擇器、群組選擇器、后代選擇器、偽類選擇器

1、html標(biāo)簽選擇器：

定義：以html標(biāo)簽作為選擇器

2、class類選擇器：

定義：為HTML標(biāo)簽添加class屬性，通過類選擇器來為具有此class屬性的元素設(shè)置css樣式。

類選擇器也可以對不同類型元素的同一個(gè)名稱的類選擇器設(shè)置不同的樣式規(guī)則：

同一個(gè)元素可以設(shè)置多個(gè)類，之間用空格隔開：

3、ID選擇器

定義：為HTML標(biāo)簽添加ID屬性，通過ID選擇器來為具有此ID的元素設(shè)置CSS規(guī)則

4、群組選擇器

定義：集體統(tǒng)一設(shè)置樣式

5、全局選擇器

定義：所有標(biāo)簽設(shè)置樣式

HTML文檔結(jié)構(gòu)圖

6、后代選擇器

定義：使用后代選擇器設(shè)置，之間用空格隔開，后代選擇器可以多層。

7、偽類選擇器

鏈接的四種狀態(tài)：激活狀態(tài)，已訪問狀態(tài)，未訪問狀態(tài)，鼠標(biāo)懸停狀態(tài)。

偽類

說明

:link

未訪問的鏈接

:visited

已訪問的鏈接

:hover

鼠標(biāo)懸停狀態(tài)

:active

激活的鏈接

:hover 用于訪問的鼠標(biāo)經(jīng)過某個(gè)元素時(shí)；

:active 用于一個(gè)元素被激活時(shí)（即按下鼠標(biāo)之后放開鼠標(biāo)之前的狀態(tài)）

偽類選擇器的屬性：link visited hover active

說明：

1)?a:hover 必須置于?a:link和a:visited之后，才有效

2) a:active 必須置于 a:hover之后才有效

3) 偽類名稱對大小寫不敏感

8、CSS其它選擇器

css繼承特性，從父元素那繼承部分css屬性

選擇器的優(yōu)先級(jí)

ID選擇優(yōu)先級(jí)最高（id選擇器定義具有唯一性）

class選擇器次之（class選擇器可以多個(gè)）

元素選擇器再次之

其它選擇器優(yōu)先級(jí)主要根據(jù)定義的先后順序，最后定義的優(yōu)先級(jí)高

!important 加重選擇器的優(yōu)先級(jí)，添加在樣式規(guī)則之后，中間用空格隔開。

CSS選擇器命名規(guī)則

1：采用英文字母，數(shù)字以及"-" 和 "_" 命名

2：以小寫字母開頭，不能以數(shù)字和"-"?和 "_" 開頭

3：使用有意義的命名規(guī)范

常用CSS命名

header

頁頭

main

主體

footer

頁尾

nav

導(dǎo)航

sidebar

側(cè)欄

container

容器

column

欄目

title

標(biāo)簽

menu

菜單

submenu

子菜單

*列舉常用命名，大家根據(jù)自身項(xiàng)目及團(tuán)隊(duì)的規(guī)則命名

耐心學(xué)習(xí)基礎(chǔ)知識(shí)，基礎(chǔ)是蓋房的根基，必須打結(jié)實(shí)。

如果您覺得有用，記得在下方點(diǎn)贊、關(guān)注、留言，我會(huì)定期奉 上更多的驚喜哦，您的打賞支持才是我繼續(xù)努力的動(dòng)力，么么噠。

每日分享在學(xué)習(xí)過程中總結(jié)的學(xué)習(xí)經(jīng)驗(yàn)，學(xué)習(xí)筆記，筆試題，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以學(xué)習(xí)為目的，每天閱讀一篇文章，了解身邊的技術(shù)。陪有夢想的人一起成長！

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

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

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

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

標(biāo)記名稱 style="樣式屬性:屬性值;樣式屬性:屬性值"

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

2、 嵌入樣式表

style type="text/css"

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

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的語法定義。有些低版本的瀏覽器不能識(shí)別style標(biāo)記，這意味著低版本的瀏覽器會(huì)忽略style標(biāo)記里的內(nèi)容，并把style標(biāo)記里的內(nèi)容以文本直接顯示到頁面上。為了避免這樣的情況發(fā)生，我們用加HTML注釋的方式!-- 注釋 --隱藏內(nèi)容而不讓它顯示。

3、外部樣式表

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

4、輸入樣式表

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

style

@import url(http://……)

/stypel

說一下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語法：

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

為了代碼的易讀性，在每個(gè)聲明塊的左花括號(hào)前添加一個(gè)空格。

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

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

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

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

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

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

Css常用的一些命名：

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

三、Css的引入：

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

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

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

命名約定如下：

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

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

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

優(yōu)點(diǎn)：

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

缺點(diǎn)：

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

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

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

OOCSS的優(yōu)點(diǎn)：

減少CSS代碼。

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

語義標(biāo)記，有助于SEO。

更好的頁面優(yōu)化，更快的加載時(shí)間（因?yàn)橛泻芏嘟M件重用）。

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

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

OOCSS的缺點(diǎn)：

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

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

新聞標(biāo)題：css規(guī)則樣式,css樣式規(guī)則具體格式
網(wǎng)站網(wǎng)址：http://chinadenli.net/article42/dsgdhec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、手機(jī)網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、動(dòng)態(tài)網(wǎng)站、網(wǎng)站策劃、自適應(yīng)網(wǎng)站

廣告

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