1、選擇器用于指定CSS樣式作用的HTML對象,花括號內是對該對象設置的具體樣式。
公司主營業務:成都網站制作、成都網站建設、移動網站開發等業務。幫助企業客戶真正實現互聯網宣傳,提高企業的競爭能力。成都創新互聯公司是一支青春激揚、勤奮敬業、活力青春激揚、勤奮敬業、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業文化,感謝他們對我們的高要求,感謝他們從不同領域給我們帶來的挑戰,讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創新互聯公司推出太康免費做網站回饋大家。
2、屬性和屬性值以“鍵值對“?的形式出現。
3、屬性是對指定的對象設置的樣式屬性,例如字體大小、文本顏色等。
4、屬性和屬性值之間用英文“:“連接。
5、多個“鍵值對”之間用英文“;”進行區分。可以用段落和表格的對齊的演示。
CSS不僅可以靜態地修飾網頁,還可以配合各種腳本語言動態地對網頁各元素進行格式化。CSS 能夠對網頁中元素位置的排版進行像素級精確控制,支持幾乎所有的字體字號樣式,擁有對網頁對象和模型樣式編輯的能力。
擴展資料:
CSS作為一種定義樣式結構如字體、顏色、位置等的語言,被用于描述網頁上的信息格式化和顯示的方式。CSS樣式可以直接存儲于HTML網頁或者單獨的樣式單文件。
無論哪一種方式,樣式單包含將樣式應用到指定類型的元素的規則。外部使用時,樣式單規則被放置在一個帶有文件擴展名_css的外部樣式單文檔中。
樣式規則是可應用于網頁中元素,如文本段落或鏈接的格式化指令。樣式規則由一個或多個樣式屬性及其值組成。內部樣式單直接放在網頁中,外部樣式單保存在獨立的文檔中,網頁通過一個特殊標簽鏈接外部樣式單。
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書寫規范使用CSS縮寫屬性
CSS有些屬性是可以縮寫的,比如padding,margin,font等等,這樣精簡代碼同時又能提高用戶的閱讀體驗。
去掉小數點前的“0”
簡寫命名
很多用戶都喜歡簡寫類名,但前提是要讓人看懂你的命名才能簡寫哦!
16進制顏色代碼縮寫
有些顏色代碼是可以縮寫的,我們就盡量縮寫吧,提高用戶體驗為主。
連字符CSS選擇器命名規范
1.長名稱或詞組可以使用中橫線來為選擇器命名。
2.不建議使用“_”下劃線來命名CSS選擇器,為什么呢?
輸入的時候少按一個shift鍵;
瀏覽器兼容問題 (比如使用_tips的選擇器命名,在IE6是無效的)
能良好區分JavaScript變量命名(JS變量命名是用“_”)
不要隨意使用Id
id在JS是唯一的,不能多次使用,而使用class類選擇器卻可以重復使用,另外id的優先級優先與class,所以id應該按需使用,而不能濫用。
為選擇器添加狀態前綴
有時候可以給選擇器添加一個表示狀態的前綴,讓語義更明了,比如下圖是添加了“.is-”前綴。
CSS命名規范(規則)常用的CSS命名規則
頭:header
內容:content/container
尾:footer
導航:nav
側欄:sidebar
欄目:column
頁面外圍控制整體布局寬度:wrapper
左右中:left right center
登錄條:loginbar
標志:logo
廣告:banner
頁面主體:main
熱點:hot
新聞:news
下載:download
子導航:subnav
菜單:menu
子菜單:submenu
搜索:search
友情鏈接:friendlink
頁腳:footer
版權:copyright
滾動:scroll
內容:content
標簽:tags
文章列表:list
提示信息:msg
小技巧:tips
欄目標題:title
加入:joinus
指南:guide
服務:service
注冊:regsiter
狀態:status
投票:vote
合作伙伴:partner
注釋的寫法:
/* Header */
內容區
/* End Header */
Id的命名:
1)頁面結構
容器: container
頁頭:header
內容:content/container
頁面主體:main
頁尾:footer
導航:nav
側欄:sidebar
欄目:column
頁面外圍控制整體布局寬度:wrapper
左右中:left right center
(2)導航
導航:nav
主導航:mainnav
子導航:subnav
頂導航:topnav
邊導航:sidebar
左導航:leftsidebar
右導航:rightsidebar
菜單:menu
子菜單:submenu
標題: title
摘要: summary
(3)功能
標志:logo
廣告:banner
登陸:login
登錄條:loginbar
注冊:register
搜索:search
功能區:shop
標題:title
加入:joinus
狀態:status
按鈕:btn
滾動:scroll
標簽頁:tab
文章列表:list
提示信息:msg
當前的: current
小技巧:tips
圖標: icon
注釋:note
指南:guild
服務:service
熱點:hot
新聞:news
下載:download
投票:vote
合作伙伴:partner
友情鏈接:link
版權:copyright
注意事項::
1.一律小寫;
2.盡量用英文;
3.不加中槓和下劃線;
4.盡量不縮寫,除非一看就明白的單詞。
CSS樣式表文件命名
主要的 master.css
模塊 module.css
基本共用 base.css
布局、版面 layout.css
主題 themes.css
專欄 columns.css
文字 font.css
表單 forms.css
補丁 mend.css
打印 print.css
把id留給后臺開發和JS使用,除此之外頁面的page id(如首頁的外層需要一個ID id="pageIndex"),頁面結構(header main footer)允許用id命名(ID命名建議使用駝峰命名)。其他禁止id使用在樣式表CSS命名中,一律使用class命名。
在編碼思想上,我們可以將頁面拆分成不同的層級(布局、模塊、元件)。
什么是CSS命名空間?
通過統一的命名規范定義命名的范圍,成為CSS class id命名空間。
布局: 以語義化的單詞layout作為命名空間,例如主欄布局命名 layout-main,只改變layout-命名空間后面的命名,layout始終保留。布局的命名空間為layout-xxx。
模塊:頁面是由一個或多個模塊組成,模塊的英文單詞是module,規范簡寫成mod,如新聞模塊mod-news,照片展示模塊mod-photo-show。模塊的命名空間為mod-xxx 。
元件:元件是屬于模塊內部的,也可以說模塊是由元件和它內部的自有元素組成。如用戶照片信息元件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命名規則
常用的CSS命名規則:頭:header 內容:content/container 尾:footer 導航:nav 側欄:sidebar欄目:column 頁面外圍控制整體布局寬度:wrapper 左右中:left right center登錄條:loginbar 標志:logo 廣告:banner 頁面主體:main 熱點:hot新聞:news 下載:download 子導航:subnav 菜單:menu子菜單:submenu 搜索:search 友情鏈接:friendlink 頁腳:footer版權:copyright 滾動:scroll 內容:content 標簽頁:tab文章列表:list 提示信息:msg 小技巧:tips 欄目標題:title加入:joinus 指南:guild 服務:service 注冊:regsiter狀態:status 投票:vote 合作伙伴:partner(二)注釋的寫法: /* Footer */ 內容區 /* End Footer */(三)id的命名:(1)頁面結構 容器: container 頁頭:header 內容:content/container 頁面主體:main 頁尾:footer 導航:nav 側欄:sidebar 欄目:column 頁面外圍控制整體布局寬度:wrapper 左右中:left right center(2)導航 導航:nav 主導航:mainbav 子導航:subnav 頂導航:topnav 邊導航:sidebar 左導航:leftsidebar 右導航:rightsidebar 菜單:menu 子菜單:submenu 標題: title 摘要: summary(3)功能 標志:logo 廣告:banner 登陸:login 登錄條:loginbar 注冊:regsiter 搜索:search 功能區:shop 標題:title 加入:joinus 狀態:status 按鈕:btn 滾動:scroll 標簽頁:tab 文章列表:list 提示信息:msg 當前的: current 小技巧:tips 圖標: icon 注釋:note 指南:guild 服務:service 熱點:hot 新聞:news 下載:download 投票:vote 合作伙伴:partner 友情鏈接:link 版權:copyright(四)class的命名:(1)顏色:使用顏色的名稱或者16進制代碼,如 .red { color: red; } .f60 { color: #f60; } .ff8600 { color: #ff8600; }(2)字體大小,直接使用’font+字體大小’作為名稱,如 .font12px { font-size: 12px; } .font9pt {font-size: 9pt; }(3)對齊樣式,使用對齊目標的英文名稱,如 .left { float:left; } .bottom { float:bottom; }(4)標題欄樣式,使用’類別+功能’的方式命名,如 .barnews { } .barproduct { }
本文名稱:css樣式名稱規則,css樣式規則由什么組成
網站地址:http://www.yijiale78.com/article2/dsiojic.html
成都網站建設公司_創新互聯,為您提供小程序開發、微信公眾號、云服務器、服務器托管、網站制作、網頁設計公司
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯