CSS是一門指定文檔該如何呈現(xiàn)給用戶的語(yǔ)言。
主要從事網(wǎng)頁(yè)設(shè)計(jì)、PC網(wǎng)站建設(shè)(電腦版網(wǎng)站建設(shè))、wap網(wǎng)站建設(shè)(手機(jī)版網(wǎng)站建設(shè))、響應(yīng)式網(wǎng)站設(shè)計(jì)、程序開(kāi)發(fā)、微網(wǎng)站、微信小程序等,憑借多年來(lái)在互聯(lián)網(wǎng)的打拼,我們?cè)诨ヂ?lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了豐富的成都網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)絡(luò)營(yíng)銷經(jīng)驗(yàn),集策劃、開(kāi)發(fā)、設(shè)計(jì)、營(yíng)銷、管理等多方位專業(yè)化運(yùn)作于一體,具備承接不同規(guī)模與類型的建設(shè)項(xiàng)目的能力。
一、CSS幫助您將文檔信息的內(nèi)容和如何展現(xiàn)它的細(xì)節(jié)相分離
創(chuàng)建html文檔
創(chuàng)建樣式表
在與前面相同的目錄中,新建另一個(gè)文本文件。該文件將成為您的樣式表。請(qǐng)將它命名為:style1.css
在您的CSS文件中,復(fù)制、粘貼下面的行,并保存該文件:
二、連接您的文檔和樣式表
為將您的文檔和樣式表相連,請(qǐng)編輯您的HTML文件。并添加下面高亮的行:
保存該文件并刷新您的瀏覽器。該樣式表將首字母顯示為紅色,如下所示:
三、rel=“stylesheet”是什么意思呢?
范例中呈現(xiàn)的是標(biāo)準(zhǔn)HTML link標(biāo)簽嵌入css檔案的寫(xiě)法,其中「rel="stylesheet" type="text/css"」所代表的意思,就是告訴瀏覽器要導(dǎo)入一個(gè)在外部的css檔案,透過(guò)href導(dǎo)入名為xxxx.css的樣式檔案。
Vue3對(duì)CSS支持加入了更多的特性支持,這樣的話,我們?cè)陧?xiàng)目當(dāng)中使用CSS就變得更加靈活了,來(lái)吧我們直接上干貨
在style的標(biāo)簽上加一個(gè)module的屬性,這樣style里面的內(nèi)容就會(huì)被編譯成CSS Modules(模塊),默認(rèn)情況下,我們可以在模板代碼里,或者JS里通過(guò)$style拿到所有樣式屬性并使用
我們也可以給CSS Modules自定義一個(gè)名稱,在style的module屬性設(shè)置一個(gè)名稱就可以了,這樣的話在模板和JS里就通過(guò)自定義的名稱來(lái)引入CSS里的屬性
與組合式 API 一同使用,注入的類可以通過(guò) useCssModule API 在 setup() 和 .success { color: #090; }
可以通過(guò) v-bind 這一 CSS 函數(shù)將 CSS 的值關(guān)聯(lián)到動(dòng)態(tài)的組件狀態(tài)上
這個(gè)語(yǔ)法同樣也適用于
[img]CSS樣式的引用方式有三種:
一、行間樣式表
行間樣式表是指將CSS樣式編碼寫(xiě)在HTML標(biāo)簽中,格式如下
h1 style="font-size:12px;color:#000FFF"
我的CSS樣式。
/h1
行間樣式表由HTML元素的HTML元素的style支持,只需將CSS代碼用分號(hào)隔開(kāi)寫(xiě)在style=""之中。這是最基本的形式,但是它沒(méi)有實(shí)現(xiàn)表現(xiàn)與內(nèi)容分離且不能靈活的控制多個(gè)頁(yè)面所以我們只是在調(diào)試CSS代碼的時(shí)候使用。
二、內(nèi)部樣式表
內(nèi)部樣式表與行間樣式表相似都是把CSS代碼寫(xiě)在HTML頁(yè)面中,稍微不同的是前者可以將樣式表放在一個(gè)固定的位置,格式如下
html
head
title內(nèi)部樣式表/title
style type="text/css"
h1{font-size:12px;
color:#000FFF
}
/style
/head
body
h1我的CSS樣式。/h1
/body
/html
內(nèi)部樣式表編碼是初級(jí)的應(yīng)用形式,不能達(dá)到跨頁(yè)面使用所以不適合使用。
三、外部樣式表
外部樣式表是CSS應(yīng)用中最好的一種形式,它將CSS樣式代碼單獨(dú)放在一個(gè)外部文件中,再由網(wǎng)頁(yè)進(jìn)行調(diào)用。多個(gè)網(wǎng)頁(yè)可以調(diào)用一個(gè)樣式文件表,這樣能夠?qū)崿F(xiàn)代碼的最大限度的重用及網(wǎng)站文件的最優(yōu)化配置,格式如下
html
head
title外部樣式表/title
link rel="stylesheet" rev="stylesheet" href="style.css"
/head
body
h1我的CSS樣式。/h1
/body
/html
在style.css中的代碼為
h1{font-size:12px;
color:#000FFF
}
我們?cè)趆ead中使用了link標(biāo)簽來(lái)調(diào)用外部樣式表文件。將link指定為stylesheet方式,并使用了href="style.css"指明樣式表文件的路徑便可將該頁(yè)面應(yīng)用到在style.css中定義的樣式。
似乎如果style在同一個(gè)bundle里,會(huì)全部實(shí)例化為style元素。
如果在另外一個(gè)bundle,按需加載。會(huì)在加載后出現(xiàn)在document中。
所以,用在style里用scoped控制吧。
按需加載,可樣式是寫(xiě)在.vue模板中的,訪問(wèn)另一個(gè)頁(yè)面樣式就會(huì)追加到head標(biāo)簽中,訪問(wèn)的越多head標(biāo)簽的style標(biāo)簽也就越多,即便style標(biāo)簽加入scoped可以避免樣式?jīng)_突:
后來(lái)我查了下有使用extract-text-webpack-plugin將css提取合并的。
這個(gè)代碼:
import 'xx.css' or require('xx.css')