css樣式的基本規(guī)則是什么？

1、選擇器用于指定CSS樣式作用的HTML對(duì)象，花括號(hào)內(nèi)是對(duì)該對(duì)象設(shè)置的具體樣式。

公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。成都創(chuàng)新互聯(lián)公司推出太康免費(fèi)做網(wǎng)站回饋大家。

2、屬性和屬性值以“鍵值對(duì)“?的形式出現(xiàn)。

3、屬性是對(duì)指定的對(duì)象設(shè)置的樣式屬性，例如字體大小、文本顏色等。

4、屬性和屬性值之間用英文“:“連接。

5、多個(gè)“鍵值對(duì)”之間用英文“;”進(jìn)行區(qū)分。可以用段落和表格的對(duì)齊的演示。

CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。CSS 能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力。

擴(kuò)展資料：

CSS作為一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語(yǔ)言，被用于描述網(wǎng)頁(yè)上的信息格式化和顯示的方式。CSS樣式可以直接存儲(chǔ)于HTML網(wǎng)頁(yè)或者單獨(dú)的樣式單文件。

無(wú)論哪一種方式，樣式單包含將樣式應(yīng)用到指定類(lèi)型的元素的規(guī)則。外部使用時(shí)，樣式單規(guī)則被放置在一個(gè)帶有文件擴(kuò)展名_css的外部樣式單文檔中。

樣式規(guī)則是可應(yīng)用于網(wǎng)頁(yè)中元素，如文本段落或鏈接的格式化指令。樣式規(guī)則由一個(gè)或多個(gè)樣式屬性及其值組成。內(nèi)部樣式單直接放在網(wǎng)頁(yè)中，外部樣式單保存在獨(dú)立的文檔中，網(wǎng)頁(yè)通過(guò)一個(gè)特殊標(biāo)簽鏈接外部樣式單。

css命名規(guī)則

CSS書(shū)寫(xiě)順序

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書(shū)寫(xiě)規(guī)范使用CSS縮寫(xiě)屬性

CSS有些屬性是可以縮寫(xiě)的，比如padding,margin,font等等，這樣精簡(jiǎn)代碼同時(shí)又能提高用戶的閱讀體驗(yàn)。

去掉小數(shù)點(diǎn)前的“0”

簡(jiǎn)寫(xiě)命名

很多用戶都喜歡簡(jiǎn)寫(xiě)類(lèi)名，但前提是要讓人看懂你的命名才能簡(jiǎn)寫(xiě)哦!

16進(jìn)制顏色代碼縮寫(xiě)

有些顏色代碼是可以縮寫(xiě)的，我們就盡量縮寫(xiě)吧，提高用戶體驗(yàn)為主。

連字符CSS選擇器命名規(guī)范

1.長(zhǎng)名稱(chēng)或詞組可以使用中橫線來(lái)為選擇器命名。

2.不建議使用“_”下劃線來(lái)命名CSS選擇器，為什么呢?

輸入的時(shí)候少按一個(gè)shift鍵;

瀏覽器兼容問(wèn)題 (比如使用_tips的選擇器命名，在IE6是無(wú)效的)

能良好區(qū)分JavaScript變量命名(JS變量命名是用“_”)

不要隨意使用Id

id在JS是唯一的，不能多次使用，而使用class類(lèi)選擇器卻可以重復(fù)使用，另外id的優(yōu)先級(jí)優(yōu)先與class，所以id應(yīng)該按需使用，而不能濫用。　

為選擇器添加狀態(tài)前綴

有時(shí)候可以給選擇器添加一個(gè)表示狀態(tài)的前綴，讓語(yǔ)義更明了，比如下圖是添加了“.is-”前綴。

CSS命名規(guī)范(規(guī)則)常用的CSS命名規(guī)則

頭：header

內(nèi)容：content/container

尾：footer

導(dǎo)航：nav

側(cè)欄：sidebar

欄目：column

頁(yè)面外圍控制整體布局寬度：wrapper

左右中：left right center

登錄條：loginbar

標(biāo)志：logo

廣告：banner

頁(yè)面主體：main

熱點(diǎn)：hot

新聞：news

下載：download

子導(dǎo)航：subnav

菜單：menu

子菜單：submenu

搜索：search

友情鏈接：friendlink

頁(yè)腳：footer

版權(quán)：copyright

滾動(dòng)：scroll

內(nèi)容：content

標(biāo)簽：tags

文章列表：list

提示信息：msg

小技巧：tips

欄目標(biāo)題：title

加入：joinus

指南：guide

服務(wù)：service

注冊(cè)：regsiter

狀態(tài)：status

投票：vote

合作伙伴：partner

注釋的寫(xiě)法:

/* Header */

內(nèi)容區(qū)

/* End Header */

Id的命名:

1)頁(yè)面結(jié)構(gòu)

容器: container

頁(yè)頭：header

內(nèi)容：content/container

頁(yè)面主體：main

頁(yè)尾：footer

導(dǎo)航：nav

側(cè)欄：sidebar

欄目：column

頁(yè)面外圍控制整體布局寬度：wrapper

左右中：left right center

(2)導(dǎo)航

導(dǎo)航：nav

主導(dǎo)航：mainnav

子導(dǎo)航：subnav

頂導(dǎo)航：topnav

邊導(dǎo)航：sidebar

左導(dǎo)航：leftsidebar

右導(dǎo)航：rightsidebar

菜單：menu

子菜單：submenu

標(biāo)題: title

摘要: summary

(3)功能

標(biāo)志：logo

廣告：banner

登陸：login

登錄條：loginbar

注冊(cè)：register

搜索：search

功能區(qū)：shop

標(biāo)題：title

加入：joinus

狀態(tài)：status

按鈕：btn

滾動(dòng)：scroll

標(biāo)簽頁(yè)：tab

文章列表：list

提示信息：msg

當(dāng)前的: current

小技巧：tips

圖標(biāo): icon

注釋?zhuān)簄ote

指南：guild

服務(wù)：service

熱點(diǎn)：hot

新聞：news

下載：download

投票：vote

合作伙伴：partner

友情鏈接：link

版權(quán)：copyright

注意事項(xiàng)::

1.一律小寫(xiě);

2.盡量用英文;

3.不加中槓和下劃線;

4.盡量不縮寫(xiě)，除非一看就明白的單詞。

CSS樣式表文件命名

主要的 master.css

模塊 module.css

基本共用 base.css

布局、版面 layout.css

主題 themes.css

專(zhuān)欄 columns.css

文字 font.css

表單 forms.css

補(bǔ)丁 mend.css

打印 print.css

css命名規(guī)范

把id留給后臺(tái)開(kāi)發(fā)和JS使用，除此之外頁(yè)面的page id(如首頁(yè)的外層需要一個(gè)ID id="pageIndex")，頁(yè)面結(jié)構(gòu)（header main footer）允許用id命名(ID命名建議使用駝峰命名)。其他禁止id使用在樣式表CSS命名中，一律使用class命名。

在編碼思想上，我們可以將頁(yè)面拆分成不同的層級(jí)（布局、模塊、元件）。

什么是CSS命名空間？

通過(guò)統(tǒng)一的命名規(guī)范定義命名的范圍，成為CSS class id命名空間。

布局: 以語(yǔ)義化的單詞layout作為命名空間，例如主欄布局命名 layout-main，只改變layout-命名空間后面的命名，layout始終保留。布局的命名空間為layout-xxx。

模塊：頁(yè)面是由一個(gè)或多個(gè)模塊組成，模塊的英文單詞是module，規(guī)范簡(jiǎn)寫(xiě)成mod，如新聞模塊mod-news，照片展示模塊mod-photo-show。模塊的命名空間為mod-xxx 。

元件：元件是屬于模塊內(nèi)部的，也可以說(shuō)模塊是由元件和它內(nèi)部的自有元素組成。如用戶照片信息元件cell-user-photo。元件的命名空間為cell-xxx 。

文字顏色(命名空間text-xxx)

text-c1, text-c2,text-c3……

背景顏色(命名空間bg -xxx)

bg-c1,bg-c2,bg-c3……

邊框顏色(命名空間border-xxx)

border-c1,border-c2,border-c3……

參考自文章 CSS命名規(guī)則

怎么給div+css樣式表命名的規(guī)則

常用的CSS命名規(guī)則:頭：header 內(nèi)容：content/container 尾：footer 導(dǎo)航：nav 側(cè)欄：sidebar欄目：column 頁(yè)面外圍控制整體布局寬度：wrapper 左右中：left right center登錄條：loginbar 標(biāo)志：logo 廣告：banner 頁(yè)面主體：main 熱點(diǎn)：hot新聞：news 下載：download 子導(dǎo)航：subnav 菜單：menu子菜單：submenu 搜索：search 友情鏈接：friendlink 頁(yè)腳：footer版權(quán)：copyright 滾動(dòng)：scroll 內(nèi)容：content 標(biāo)簽頁(yè)：tab文章列表：list 提示信息：msg 小技巧：tips 欄目標(biāo)題：title加入：joinus 指南：guild 服務(wù)：service 注冊(cè)：regsiter狀態(tài)：status 投票：vote 合作伙伴：partner(二)注釋的寫(xiě)法: /* Footer */ 內(nèi)容區(qū) /* End Footer */(三)id的命名:(1)頁(yè)面結(jié)構(gòu) 容器: container 頁(yè)頭：header 內(nèi)容：content/container 頁(yè)面主體：main 頁(yè)尾：footer 導(dǎo)航：nav 側(cè)欄：sidebar 欄目：column 頁(yè)面外圍控制整體布局寬度：wrapper 左右中：left right center(2)導(dǎo)航 導(dǎo)航：nav 主導(dǎo)航：mainbav 子導(dǎo)航：subnav 頂導(dǎo)航：topnav 邊導(dǎo)航：sidebar 左導(dǎo)航：leftsidebar 右導(dǎo)航：rightsidebar 菜單：menu 子菜單：submenu 標(biāo)題: title 摘要: summary(3)功能 標(biāo)志：logo 廣告：banner 登陸：login 登錄條：loginbar 注冊(cè)：regsiter 搜索：search 功能區(qū)：shop 標(biāo)題：title 加入：joinus 狀態(tài)：status 按鈕：btn 滾動(dòng)：scroll 標(biāo)簽頁(yè)：tab 文章列表：list 提示信息：msg 當(dāng)前的: current 小技巧：tips 圖標(biāo): icon 注釋?zhuān)簄ote 指南：guild 服務(wù)：service 熱點(diǎn)：hot 新聞：news 下載：download 投票：vote 合作伙伴：partner 友情鏈接：link 版權(quán)：copyright(四)class的命名:(1)顏色:使用顏色的名稱(chēng)或者16進(jìn)制代碼,如 .red { color: red; } .f60 { color: #f60; } .ff8600 { color: #ff8600; }(2)字體大小,直接使用’font+字體大小’作為名稱(chēng),如 .font12px { font-size: 12px; } .font9pt {font-size: 9pt; }(3)對(duì)齊樣式,使用對(duì)齊目標(biāo)的英文名稱(chēng),如 .left { float:left; } .bottom { float:bottom; }(4)標(biāo)題欄樣式,使用’類(lèi)別+功能’的方式命名,如 .barnews { } .barproduct { }

本文名稱(chēng)：css樣式名稱(chēng)規(guī)則,css樣式規(guī)則由什么組成
網(wǎng)站地址：http://chinadenli.net/article2/dsiojic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開(kāi)發(fā)、微信公眾號(hào)、云服務(wù)器、服務(wù)器托管、網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(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)