CSS是'Cascading Style Sheets'的縮寫。CSS是HTML的姊妹語言,允許您設(shè)置網(wǎng)頁的樣式。風(fēng)格改變的一個例子就是使詞語變得粗體。在標(biāo)準(zhǔn)的HTML中,你可以像這樣使用標(biāo)簽:
< b >讓我大膽< / b >
這工作正常,它本身沒有什么問題,除了現(xiàn)在如果你想要改變你最初做粗體的所有文本加下劃線,你將不得不去每個頁面的每一個地方,改變標(biāo)簽。
在這個例子中還可以找到另外一個缺點:假設(shè)你想讓上面的文字變成粗體,把字體樣式Verdana改成紅色,你需要大量的代碼來包裝文本:
< font color = “#FF0000” face = “Verdana,Arial,Helvetica,sans-serif” >
< b >這是文字< / b > < / font >
這是冗長(羅嗦),并有助于使您的HTML凌亂。使用CSS,您可以在別處創(chuàng)建自定義樣式并設(shè)置其所有屬性,為其指定唯一的名稱,然后“標(biāo)記”HTML以應(yīng)用這些樣式屬性:
< p class = “myNewStyle” >我的CSS風(fēng)格文本< / p >
而在網(wǎng)頁頂部的 標(biāo)簽之間,你可以插入這個CSS代碼來定義我們剛剛應(yīng)用的樣式:
<! -
.myNewStyle 笀
font-family : Verdana , Arial , Helvetica , sans-serif ;
font-weight : bold ;
顏色: #FF0000 ;
}
- >
style >
在上面的例子中,我們將內(nèi)嵌樣式表代碼,換句話說,包含在頁面中。對于較小的項目或在您定義的樣式只能在單個頁面中使用的情況下,這是很好的。
有很多次,當(dāng)你將你的CSS樣式應(yīng)用到很多頁面,并且很難將CSS代碼復(fù)制并粘貼到每個頁面中。除了使用重復(fù)的CSS代碼混淆每個頁面的事實之外,如果要更改樣式,還需要編輯每個頁面。
解決方案:就像使用JavaScript一樣,您可以在一個單獨的文件中定義/創(chuàng)建CSS樣式,然后將其鏈接到要應(yīng)用代碼的頁面:
< link 梔爀攀昀 = “myFirstStyleSheet.css” 爀攀氀 = “stylesheet” 琀礀瀀攀 = “text / css” >
上述代碼行將您的外部樣式表“myFirstStyleSheet.css”鏈接到HTML文檔。您將此代碼放置在網(wǎng)頁中的 head>標(biāo)記之間。
要創(chuàng)建一個外部樣式表,您只需要創(chuàng)建一個簡單的文本文檔(在Windows上,您只需右鍵單擊并選擇new - > text document),然后將其從文件類型.txt更改為.css。您只需更改文件擴(kuò)展名即可更改文件類型。Windows上文件名的擴(kuò)展名告訴計算機(jī)它是什么類型的文件,并允許計算機(jī)確定如何處理該文件,例如,當(dāng)您嘗試打開它。
你可能猜到了; CSS文件只是特別(特別)格式化的文本文件,就像HTML頁面一樣。文件本身并沒有什么特別的或者不同的地方,而是將CSS文件作為CSS文件的文件內(nèi)容。
使用外部CSS文檔時,需要記住幾點:
1.不要像在HTML中嵌入CSS代碼那樣在CSS文檔/頁面中添加這些標(biāo)簽:
< style 琀礀瀀攀 = “text / css” > < / style >
由于連接CSS頁面和HTML頁面的網(wǎng)頁中的鏈接表示您正在鏈接到一個CSS頁面,因此不需要聲明頁面中的代碼是CSS。這就是上面的標(biāo)簽所做的。相反,您只需將您的CSS代碼直接添加到頁面:
.myNewStyle { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #FF0000; } .my2ndNewStyle { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #FF0000; } .my3rdNewStyle { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12pt; color: #FF0000; }
在上面的例子中,我創(chuàng)建了一系列可以應(yīng)用于任何HTML標(biāo)記的CSS類,如下所示:
< p 挀氀愀猀猀 = “myNewStyle” >我的CSS風(fēng)格文本< / p >
要么
< h2 挀氀愀猀猀 = “my3rdNewStyle” >我的CSS風(fēng)格文本< / h2 >
你會注意到,在上面的例子中,我將CSS樣式應(yīng)用于
標(biāo)簽。這個標(biāo)簽將它所包裝文本的大小設(shè)置為瀏覽器中預(yù)設(shè)的大。ɡ纾10像素)。當(dāng)您應(yīng)用CSS類時,CSS代碼會覆蓋您通常使用標(biāo)記獲取的默認(rèn)大小,以支持CSS類中指定的大小。所以現(xiàn)在你可以看到CSS可以覆蓋默認(rèn)的HTML標(biāo)簽行為!
在上面的例子中,我有CSS代碼,我定義了我的CSS類,然后“應(yīng)用”到頁面中的各種元素。應(yīng)用CSS的另一種方法是全局重新定義一個HTML標(biāo)簽以便以某種方式查看:
h1 { 昀漀渀琀-family : Garamond , “Times New Roman” , serif ; 昀漀渀琀-size : 200%; 紀(jì)
這個CSS代碼所做的是一次性設(shè)置所有
標(biāo)簽的字體樣式和大小。現(xiàn)在,您不必像以前那樣對任何標(biāo)簽應(yīng)用CSS類,因為它們自動受到CSS樣式規(guī)則的影響。
這里是我給整個頁面更大利潤的另一個例子:
身體{ 稀絺左邊: 15%; 保證金: 15%; 紀(jì)
正如你所看到的,你可以重新定義任何標(biāo)簽并改變它的樣子!這可能是非常強大的:
div { background: rgb(204,204,255); padding: 0.5em; border: 1px solid #000000; } |
在上面的代碼中,所有的
div>標(biāo)簽現(xiàn)在都有一個背景顏色'rgb(204,204,255)',并有一個0.5em的填充和一個純黑色的薄的1像素邊框。
以上幾點需要解釋:
CSS中的顏色可以用幾種方式表示:
在十六進(jìn)制 - >例如:#000000 - 這是黑色的,這個:#FF0000是紅色的。
在rgb - > rgb(204,204,255)中是淺紫色的藍(lán)色。
與命名的顏色,如:“紅色”或“藍(lán)色”
我通常使用十六進(jìn)制顏色,因為我熟悉它們,或者我只使用命名的顏色。所以最后一個例子可以這樣重寫:
div { background: green; padding: 0.5em; border: 1px solid #FF0000; }
所以我不是'rgb(204,204,255)',而是指定'綠色'。
通過使用RGB(RGB是'Red Green Blue'的縮寫)和Hex顏色,當(dāng)你知道你的代碼時,你可以很容易地得到你想要的確切顏色。幸運的是許多程序(如Dreamweaver)為您提供了易于使用的顏色選擇器,因此您不需要知道代碼的值。
在這最后一個示例中,我將向您展示“超酷”CSS代碼,該代碼允許您創(chuàng)建不帶圖像的鏈接翻轉(zhuǎn)效果:
:link { color: rgb(0, 0, 153) } /* for unvisited links */ :visited { color: rgb(153, 0, 153) } /* for visited links */ :hover { color: rgb(0, 96, 255) } /* when mouse is over link */ :active { color: rgb(255, 0, 102) } /* when link is clicked */ |
上面的CSS會導(dǎo)致你的鏈接改變顏色時,有人把鼠標(biāo)指針懸停在它上面,即時翻轉(zhuǎn)沒有圖像!上述代碼的一個重要注意事項是風(fēng)格聲明的順序是正確的:“l(fā)ink-visited-hover-active”,否則它可能在某些瀏覽器中被破壞。
CSS功能非常強大,可以讓你做一些你不能用標(biāo)準(zhǔn)HTML做的事情。現(xiàn)在在所有的現(xiàn)代瀏覽器中都支持它,并且是網(wǎng)頁設(shè)計人員必須學(xué)習(xí)的工具。
上面的例子只是CSS的一個小例子,但是對于你來說,很好的開始你的頁面樣式應(yīng)該已經(jīng)足夠了。像許多技術(shù)一樣,CSS有很多功能,大多數(shù)人不需要經(jīng)常使用。不要陷入思想陷阱,如果有一些功能/功能可用,你必須使用它。