如何在CSS中調(diào)用公用css

在所有需要該公用css的html頁面的head/head中的任意位置加入link href="CSS文件的相對(duì)路徑或絕對(duì)路徑" rel="stylesheet" type="text/css" /，注意css的路徑。

創(chuàng)新互聯(lián)是一家集網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì)、網(wǎng)站頁面設(shè)計(jì)、網(wǎng)站優(yōu)化SEO優(yōu)化為一體的專業(yè)網(wǎng)站設(shè)計(jì)公司，已為成都等多地近百家企業(yè)提供網(wǎng)站建設(shè)服務(wù)。追求良好的瀏覽體驗(yàn),以探求精品塑造與理念升華,設(shè)計(jì)最適合用戶的網(wǎng)站頁面。 合作只是第一步，服務(wù)才是根本,我們始終堅(jiān)持講誠信，負(fù)責(zé)任的原則，為您進(jìn)行細(xì)心、貼心、認(rèn)真的服務(wù),與眾多客戶在蓬勃發(fā)展的市場(chǎng)環(huán)境中,互促共生。

例如：

style.css 在 css文件夾里，html文件和css文件夾在同一目錄下

link href="./style.css" rel="stylesheet" type="text/css" /

使用CSS樣式表有什么好處

使用css樣式表的好處有：

1、使用較少的代碼，來實(shí)現(xiàn)更多的功能；

2、使用屬性繼承方法，可以輕松地維護(hù)相同標(biāo)記的不同樣式；

3、代碼比率更高的內(nèi)容；

4、頁面加載變得很快；

5、定義風(fēng)格的靈活性。

知識(shí)補(bǔ)充：

CSS全稱Cascading Style Sheet，表示層疊樣式表。CSS用于改進(jìn)HTML標(biāo)記內(nèi)容的呈現(xiàn)。使用CSS我們可以基于媒體定義不同的內(nèi)容顯示方式。

CSS的優(yōu)點(diǎn)：

一、CSS的代碼更少

在公共樣式類中可以定義具有值的屬性，并且能在不同位置使用相同的類，因此可以使用較少的代碼，來實(shí)現(xiàn)更多的功能。更少的代碼意味著更少的帶寬消耗并且易于維護(hù)內(nèi)容。

二、易于維護(hù)

當(dāng)在全局或共同的地方定義樣式時(shí)，任何變化都變得容易操作。例如，在網(wǎng)站中，使用特定的樣式屬性顯示產(chǎn)品的所有名稱?，F(xiàn)在，可以通過在外部樣式表中更改產(chǎn)品名稱的樣式類，可以在整個(gè)站點(diǎn)中更改樣式?？梢员Ａ舳鄠€(gè)樣式表并根據(jù)需要使用它們。使用屬性繼承方法，可以輕松地維護(hù)相同標(biāo)記的不同樣式。

三、代碼（標(biāo)簽）比率更高的內(nèi)容

可以通過使用CSS在頁面中實(shí)現(xiàn)更高的代碼比例內(nèi)容，因?yàn)榭梢詫邮铰暶鬓D(zhuǎn)換為外部文件。這對(duì)搜索引擎的觀點(diǎn)很重要?？梢韵蛑┲胩峁┹^少的標(biāo)簽（樣式標(biāo)簽）和更多內(nèi)容以進(jìn)行索引。

四、下載頁面

當(dāng)瀏覽器緩存樣式表頁面時(shí)，頁面加載變得很快。每次使用相同CSS的同一站點(diǎn)的不同頁面時(shí)，都不會(huì)從服務(wù)器加載樣式類。

五、定義風(fēng)格的靈活性

名稱級(jí)聯(lián)表示可以使用多種樣式，并且優(yōu)先考慮本地樣式?？梢愿采w聲明的全局樣式，并將樣式本地分配給標(biāo)記。

DIV+CSS頁面公共區(qū)域樣式問題？

在一個(gè)web程序中，我們往往希望頁面中的一些最基本的樣式是統(tǒng)一的，這樣可以給人整齊劃一的感覺，同時(shí)也可以省去很多重復(fù)冗余的css代碼，下面是我經(jīng)常用到的頁面默認(rèn)樣式，也就是程序的每個(gè)頁面都會(huì)首先載入這個(gè)樣式，然后再依據(jù)其自身的特點(diǎn)載入自己特有的樣式，可以參考一下

body{line-height:1.4;background:#fff}

body,input,textarea,select{font-size:13px;color:#333;font-family:arial}

body,h1,h3,h4,p,ul,ol{margin:0}

ul,ol{padding-left:0;list-style-type:none}a img{border:0}

a:link,a:active,a:visited{color:#003;text-decoration:none}

a:hover{color:blue;text-decoration:underline}

.biaoti1{height:25px;background:#e7e7e7}

.biaoti1 .tit{background:#3672ae;width:80px;height:25px;text-align:center;line-height:25px;color:#fff;font-size:14px;font-weight:700}.biaoti1 .more{float:right;font-size:12px;color:#06c;font-weight:700;line-height:25px;margin-right:5px}#clubsjihua_div_clubs .biaoti{width:389px;height:246px;float:left;margin-left:3px;border-right:0 solid #ccc}

#clubsjihua_div_clubs .biaoti h1{font-size:14px;color:#c00;height:30px;line-height:30px;border-bottom:1px solid #ccc;width:95%}

#clubsjihua_div_clubs .biaoti h1 span{color:#ccc;font-weight:400}

#clubsjihua_div_clubs .biaoti em{float:right;font-style:normal;font-weight:400}

#clubsjihua_div_clubs .biaoti em a{font-size:12px;color:#005a98;text-decoration:none;background:url(/images/arrow.jpg) no-repeat;padding-left:18px}#clubsjihua_div_clubs .biaoti em a:hover{color:red;text-decoration:underline}

css公共樣式能更高效，為什么不抽公共樣式呢？

這個(gè)要看具體情況的，需要看場(chǎng)景來抽公共的。

比如：常見的抽公共是以模塊為單位的集合，比如按鈕、布局類的（如柵格布局flex）等，能經(jīng)常用到的模塊。

那如果所有屬性都抽公共的話，會(huì)導(dǎo)致html頁面里class的值太多，比如color屬性抽一個(gè)，font抽一個(gè)，padding抽一個(gè)等。會(huì)使得class值太長(zhǎng)，從而導(dǎo)致html頁面的大小變大，同樣會(huì)不利于頁面的加載。

所以最好適中，把常用的抽公共，比較獨(dú)立的就單獨(dú)寫樣式。

CSS公共樣式

如果你擔(dān)心你的顏色值經(jīng)常變動(dòng)

建議，你用SCSS來寫CSS代碼

把經(jīng)常，或者 可能 變動(dòng)的值 寫成變量。

具體，你可以查看scss的官網(wǎng)。

名稱欄目：css公用樣式,有幾種css樣式表及其作用
本文來源：http://www.rwnh.cn/article36/dsiggsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、搜索引擎優(yōu)化、網(wǎng)站維護(hù)、企業(yè)建站、定制網(wǎng)站、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)