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