前端技術(shù)之如何網(wǎng)頁(yè)中使用CSS樣式表發(fā)布者：本站 時(shí)間：2020-05-16 09:05:29
CSS英文全稱(chēng)Cascading Style Sheet，中文翻譯為：層疊樣式表單。是用于增強控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內容分離的一種標記性語(yǔ)言。 是網(wǎng)站前端開(kāi)發(fā)必備的技術(shù)。CSS/DIV布局設計已經(jīng)完全替代過(guò)去的table布局，并被納入W3C標準。作為一名前端開(kāi)發(fā)人員或者即將踏入前端開(kāi)發(fā)行業(yè)的你是否熟練掌握這一技能，能夠熟練運用CSS進(jìn)行網(wǎng)頁(yè)設計呢？不管你熟練或者不熟練請先來(lái)看看下文，我將給大家簡(jiǎn)短的介紹如何在前端網(wǎng)頁(yè)開(kāi)發(fā)中使用CSS技術(shù)。
目前，你可以用以下三種方式將樣式表加入您的網(wǎng)頁(yè)。而最接近目標的樣式定義優(yōu)先權越高。高優(yōu)先權樣式將繼承低優(yōu)先權樣式的未重疊定義但覆蓋重疊的定義。
1、外部調用樣式表文件
你可以先建立外部樣式表文件（xxx.css），然后通過(guò)HTML的link方法，將其鏈接到要使用到的網(wǎng)頁(yè)。示例如下：
<head>
<title>the title</title>
<link rel=stylesheet href="xxx.css" type="text/css">
</head>
請記住，使用這種方法一定要注意引用路徑問(wèn)題，引用路徑出錯樣式表文件就不會(huì )作用于當前網(wǎng)頁(yè)。如果外部引入的CSS文件非常大，可能會(huì )影響到網(wǎng)頁(yè)的加載速度，這時(shí)候如果你比較精通CSS的話(huà)，可以對樣式文件進(jìn)行精簡(jiǎn)瘦身，也可以使用壓縮工具來(lái)壓縮CSS文件。壓縮工具網(wǎng)站上有，有興趣的朋友可以上網(wǎng)上去搜一搜。
2、內部定義樣式文件
你也可以在當前網(wǎng)頁(yè)的頭部文件<head></head>之間插入<style>...</style>塊對象。定義方式請參閱樣式表語(yǔ)法。示例如下：
<head>
<style type="text/css">
body {font:14px "Arial"}
h1{size:100%;color:#eee}
a{color:#333;text-decoration:none}
p{font:12px "宋體";color: black}
</style>
</head>
請注意，這里將style對象的type屬性設置為"text/css"，是允許不支持這類(lèi)型的瀏覽器忽略樣式表單。通常是都要寫(xiě)全的，如果不加上可能會(huì )發(fā)生意外錯誤。
3、HTML對象元素內部定義CSS樣式
內部定義即是在對象的標記內使用對象的style屬性定義適用其的樣式表屬性。內部定義樣式表語(yǔ)法：<element style="property: value"></element>。參數說(shuō)明：element——HTML對象；property:value——樣式表定義屬性和屬性值之間用冒號（：）隔開(kāi)、定義之間用分號（；）隔開(kāi)。示例文件如下：
<body>
<p style="font-size:12px "Verdana";color:red">xxxooo</p>
</body>
以上三種樣式表的優(yōu)先級是：內嵌樣式表>內部樣式表>外部樣式表。當然優(yōu)先級高的并不一定代表是最好的，在實(shí)際開(kāi)發(fā)過(guò)程中我們可以靈活來(lái)運用，如果你一定要問(wèn)我哪種方法用得最多，我會(huì )告訴你是前面兩種。
選擇我們，優(yōu)質(zhì)服務(wù)，不容錯過(guò)
1. 優(yōu)秀的網(wǎng)絡(luò )資源，強大的網(wǎng)站優(yōu)化技術(shù)，穩定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設經(jīng)驗，優(yōu)秀的技術(shù)和設計水平，更放心
3. 全程省心服務(wù)，不必擔心自己不懂網(wǎng)絡(luò )，更省心。
------------------------------------------------------------
24小時(shí)聯(lián)系電話(huà)：021-58370032