更新時間:2023年03月28日15時44分 來源:傳智教育 瀏覽次數(shù):
使用HTML標(biāo)簽屬性對網(wǎng)頁進(jìn)行修飾的方式存在很大的局限和不足,因為將所有的樣式都寫在標(biāo)簽中,這樣既不利于代碼閱讀,又使將來的代碼維護非常困難。如果希望頁面美觀、大方、維護方便,就需要使用CSS實現(xiàn)結(jié)構(gòu)與表現(xiàn)的分離。結(jié)構(gòu)與表現(xiàn)相分離是指在頁面設(shè)計中,HTML.標(biāo)簽只用于搭建網(wǎng)頁的基礎(chǔ)結(jié)構(gòu),不使用標(biāo)簽屬性設(shè)置顯示樣式,所有的樣式交由CSS來設(shè)置。
CSS(Caseading Style Sheets,層疊樣式表)是一種用于(增強)控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的標(biāo)簽性語言。在實際開發(fā)中,CSS主要用于設(shè)置HTML.頁面中的文本格式(字體、大小、對齊方式等)、圖片的外形(寬高、邊框樣式、邊距等)和版面的布局等外觀顯示樣式。
CSS定義的規(guī)則具體如下:
選擇器屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;……
在上述樣式規(guī)則中,選擇器用于指定CSS樣式作用的HTML.對象,大括號內(nèi)的屬性是對該對象設(shè)置的具體樣式。其中,屬性和屬性值以鍵值對“屬性:屬性值”形式出現(xiàn),例如字體大小、文本顏色等。屬性和屬性值之間用“”(英文冒號)連接,多個鍵值對之間用“:”(英文分號)進(jìn)行分隔。
下面通過CSS樣式對標(biāo)簽進(jìn)行設(shè)置,具體示例如下:
div| border:lpx solid red: width:600px: height:400px:
在上述代碼中,div為選擇器,表示CSS樣式作用的HTML對象;bonder、width和height為CSS屬性.分別表示邊框、寬度和高度,其中barder屬性有3個值,分別表示該邊框為1像素、實心邊框線、紅色。在CSS中,通常使用像素(px)作為計量文本、邊框等元素的標(biāo)準(zhǔn)量,px是相對于 顯示器屏幕分辨率而言的,而百分比(%)是相對于父對象而言的。例如,一個元素呈現(xiàn)的寬度是400pwx.子元素設(shè)置為50%.那么子元素所呈現(xiàn)的寬度為200qpx。
在CSS中顏色的取值方式有以下3種。
• 預(yù)定義的顏色值,例如 red、green、blue等。
• 十六進(jìn)制形式的值,例如FF0000、#FF6600、#29D794等。實際工作中,十六進(jìn)制形式的值是常用的定義顏色的方式。
• RGB代碼,例如紅色可以用ngb(255,0,0)或rgb(100%,0%,0%)來表示。如果使用RGB代碼百分比方式取顏色值,即使值為0.也不能省略百分號,必須寫為0%。