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