1、選擇器用于指定CSS樣式作用的HTML對象,花括號內(nèi)是對該對象設(shè)置的具體樣式。
創(chuàng)新互聯(lián)建站制作網(wǎng)站網(wǎng)頁找三站合一網(wǎng)站制作公司,專注于網(wǎng)頁設(shè)計,成都做網(wǎng)站、網(wǎng)站制作,網(wǎng)站設(shè)計,企業(yè)網(wǎng)站搭建,網(wǎng)站開發(fā),建網(wǎng)站業(yè)務(wù),680元做網(wǎng)站,已為1000+服務(wù),創(chuàng)新互聯(lián)建站網(wǎng)站建設(shè)將一如既往的為我們的客戶提供最優(yōu)質(zhì)的網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷推廣服務(wù)!
2、屬性和屬性值以“鍵值對“?的形式出現(xiàn)。
3、屬性是對指定的對象設(shè)置的樣式屬性,例如字體大小、文本顏色等。
4、屬性和屬性值之間用英文“:“連接。
5、多個“鍵值對”之間用英文“;”進(jìn)行區(qū)分。可以用段落和表格的對齊的演示。
CSS不僅可以靜態(tài)地修飾網(wǎng)頁,還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進(jìn)行格式化。CSS 能夠?qū)W(wǎng)頁中元素位置的排版進(jìn)行像素級精確控制,支持幾乎所有的字體字號樣式,擁有對網(wǎng)頁對象和模型樣式編輯的能力。
擴(kuò)展資料:
CSS作為一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言,被用于描述網(wǎng)頁上的信息格式化和顯示的方式。CSS樣式可以直接存儲于HTML網(wǎng)頁或者單獨的樣式單文件。
無論哪一種方式,樣式單包含將樣式應(yīng)用到指定類型的元素的規(guī)則。外部使用時,樣式單規(guī)則被放置在一個帶有文件擴(kuò)展名_css的外部樣式單文檔中。
樣式規(guī)則是可應(yīng)用于網(wǎng)頁中元素,如文本段落或鏈接的格式化指令。樣式規(guī)則由一個或多個樣式屬性及其值組成。內(nèi)部樣式單直接放在網(wǎng)頁中,外部樣式單保存在獨立的文檔中,網(wǎng)頁通過一個特殊標(biāo)簽鏈接外部樣式單。
css樣式是HTML的一個補(bǔ)充,簡單的css使用樣式如下:
html
body
div?id=div/div
/body
style?type="text/css"
width:300px;//設(shè)置div的寬度300像素
height:500px;//設(shè)置div高度500像素
background-color:red;//設(shè)置div的背景顏色為紅色
/style
/html
css代碼位于style之間,詳細(xì)的css代碼解釋見代碼注釋。
CSS用的是類C#語言的標(biāo)準(zhǔn)。
書寫方法自由靈活,沒有一定的局限。但是常期以來為了閱讀和維護(hù)等方面的經(jīng)驗,一般都是這樣的格式:
標(biāo)名 {
屬性:屬性值;
屬性:屬性值;
}
當(dāng)然這樣大家都能理解,你自己也好維護(hù),沒有什么特殊的要求的!
為了便于閱讀有人建議,CSS分為以下方面的控制:
先寫位置等:
如:position:absolute;
top,left,width,height等,
空一行,再寫布局方面的,如:margin,padding等;
空一行,寫字體格式:如line-height等
再空一行,寫字體相關(guān)!如:font-size,font-color等;
最后是其他的屬性!
但一般情況下,我們還是沒有必要寫那么多的屬性值對的!所以就很少有人去空行做這些東西了!
但是一般內(nèi)容較少時,可以直接寫在一行,并不影響閱讀的!
糾正一點的是:CSS文件進(jìn)行調(diào)用時并不像一樓所說!不換行可以減少代碼的大?。∵@是毫無根據(jù)的臆斷!因其會自動解釋換行和空白的!代碼的大小是因為我們寫了一些沒有必要的東西所形成的時空代價,比如在body中已經(jīng)有font-size:9pt;而在BODY中的一個DIV中,如果要設(shè)置字體為9pt時沒有必要再定義font-size:9pt了,如果再定義就是出現(xiàn)代碼時的增大。還有一些默認(rèn)也沒有必要寫出。
如果真如一樓所說,我想問一下一樓:你知道嗎,在CSS中是可以加注釋的,請問注釋會不會增加代碼量?答案是不會!因為其不運(yùn)行!
sorry,對不起樓上,我說的是運(yùn)行方面的,沒有說下載方面的事。恕我直言,如果有一個人一個不足0。2K的CSS而寫了N個GB的注釋的話,那他一定有病了!注釋不是發(fā)文章,一個CSS文件最多能有多少注釋?不過我經(jīng)常遇到寫好的CSS進(jìn)行壓縮加密的情況,為了防止別人偷看,至于說能有多少,一個回車只是一個字符,占8bits,一個byte,請問一下,連寫與其能有多大分別?再者請問一下為什么還要分開寫呢?這是代碼的維護(hù)時很難讀懂的情況下還要講時間代價嗎?
程序的時空代價是指:運(yùn)行時間與編寫時間的相比,存儲空間與運(yùn)行空間的對比。
對于離散型網(wǎng)頁來說,下載頁面的同時還在下載CSS文件,而且CSS會放在機(jī)器的臨時文件夾中,這樣,整個網(wǎng)站也用不了下載幾個CSS,且下次打開網(wǎng)頁不須再下CSS。這樣你認(rèn)為呢?
1、基本樣式 的寫法
style type="text/css"
h1{
font-family:黑體;
}
/style
直接些標(biāo)簽名進(jìn)行定義屬性,這個也比較常見。但是它的定義通常放在style標(biāo)簽中聲明。
2、類class鏈接樣式
定義也通常在style標(biāo)簽中聲明
style type="text/css"
.style1{
color:red;
font-size:16px;
}
/style
引用時候直接在標(biāo)簽的屬性中使用class="style1" 記住是class屬性
h1 /h1
3、id鏈接樣式
style type="text/css"
#style1{
color:blue;
font-size:16px;
}
/style
引用的時候就用標(biāo)簽屬性中的id屬性 ,要區(qū)別于類屬性
h1 id="style1"/h1
區(qū)別:類class鏈接樣式和id鏈接樣式
類連接樣式可以適用于多個對象設(shè)置同樣的屬性中,
而id鏈接樣式只能用于一個對象標(biāo)簽中,其他標(biāo)簽則會失效
4、html選擇器:
直接用標(biāo)簽進(jìn)行聲明,跟上面的第一個一樣
2)派生選擇器:
style type="text/css"
h1 h2{
color:red;
font-size:1em;
font-family:黑體;
}
/style
h1 h2的寫法意思是代表著該css樣式只能之h1h2 /h2/h1同時出現(xiàn),且是嵌套使用的時候才能生效
3)id選擇器
id選擇器的作用是通過id選擇器將css樣式作用到頁面的對象上。寫法:
style type="text/css"
#text p{
font-size:1em;
}
/style
將該樣式綁定到html上,就要這樣寫
h1 id=#"text"這個是不要p的寫法
要p的寫法
表明該對象只能作用在text對象上的所有p標(biāo)簽中
4)class選擇器
style type="text/css"
.fancy{
color:red;
background:#666;
}
/style
使用的時候也是
h1/h1
也可以像上面的一樣用派生選擇器
style type="text/css"
.fancy td{
color:red;
background:#666;
}
/style
說明生效只能在td中
5)分組選擇器
h1{color:bule;}
#text{color:bule;}
.play{color:bule;}
這種寫法太繁瑣了
我們可以使用
h1,#text,.paly{
color:bule;}
這樣來定義
6)偽類和偽類選擇器
用關(guān)鍵字:lang來定義
html
head
style type="text/css"
q:lang(smile){
quotes:"∞"
}
/style
/head
body
好吧,展示一下
p請看q祝你愉快/q/p
/body
/html
一、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書寫規(guī)范
1.使用CSS縮寫屬性
CSS有些屬性是可以縮寫的,比如padding,margin,font等等,這樣精簡代碼同時又能提高用戶的閱讀體驗。
2.去掉小數(shù)點前的“0”
3.簡寫命名
很多用戶都喜歡簡寫類名,但前提是要讓人看懂你的命名才能簡寫哦!
4.16進(jìn)制顏色代碼縮寫
有些顏色代碼是可以縮寫的,我們就盡量縮寫吧,提高用戶體驗為主。
5連字符CSS選擇器命名規(guī)范
1)長名稱或詞組可以使用中橫線來為選擇器命名。
2)不建議使用“_”下劃線來命名CSS選擇器,為什么呢?
輸入的時候少按一個shift鍵;瀏覽器兼容問題(比如使用_tips的選擇器命名,在IE6是無效的)能良好區(qū)分JavaScript變量命名(JS變量命名是用“_”)
6.不要隨意使用id
id在JS是唯一的,不能多次使用,而使用class類選擇器卻可以重復(fù)使用,另外id的優(yōu)先級優(yōu)先與class,所以id應(yīng)該按需使用,而不能濫用。
7.為選擇器添加狀態(tài)前綴
有時候可以給選擇器添加一個表示狀態(tài)的前綴,讓語義更明了,比如下圖是添加了“.is-”前綴。
三、CSS命名規(guī)范
常用的CSS命名規(guī)則
頭:header
內(nèi)容:content/Container
尾:footer
導(dǎo)航:nav
側(cè)欄:sidebar
欄目:column
頁面外圍控制整體布局寬度:wrapper
左右中:left right center
登錄條:loginbar
標(biāo)志:logo
廣告:banner
頁面主體:main
熱點:hot
新聞:news
下載:download
子導(dǎo)航:subnav
菜單:menu
子菜單:submenu
搜索:search
友情鏈接:friendlink
頁腳:footer
版權(quán):copyright
滾動:scroll
內(nèi)容:content
標(biāo)簽:tags
文章列表:list
提示信息:msg
小技巧:tips
欄目標(biāo)題:title
加入:joinus
指南:guide
服務(wù):service
注冊:regsiter
狀態(tài):status
投票:vote
合作伙伴:partner
ID的命名-頁面結(jié)構(gòu)
容器: container
頁頭:header
內(nèi)容:content/container
頁面主體:main
頁尾:footer
導(dǎo)航:nav
側(cè)欄:sidebar
欄目:column
頁面外圍控制整體布局寬度:wrapper
左右中:left right center
ID的命名-導(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
ID的命名-功能
標(biāo)志:logo
廣告:banner
登陸:login
登錄條:loginbar
注冊:register
搜索:search
功能區(qū):shop
標(biāo)題:title
加入:joinus
狀態(tài):status
按鈕:btn
滾動:scroll
標(biāo)簽頁:tab
文章列表:list
提示信息:msg
當(dāng)前的: current
小技巧:tips
圖標(biāo): icon
注釋:note
指南:guild
服務(wù):service
熱點:hot
新聞:news
下載:download
投票:vote
合作伙伴:partner
友情鏈接:link
版權(quán):copyright
四、注釋規(guī)范
/* Header */
內(nèi)容區(qū)
/* End Header */
五、注意事項
1.一律小寫;
2.盡量用英文;
3.盡量不縮寫,除非一看就明白的單詞。
六、CSS樣式表文件命名
主要的 master.css
模塊 module.css
基本共用 base.css
布局、版面 layout.css
主題 themes.css
專欄 columns.css
文字 font.css
表單 forms.css
補(bǔ)丁 mend.css
打印 print.css