h5引用專案裡css HTML中引入CSS 的方式

2021-10-13 14:15:03 字數 1026 閱讀 1841

有 4 種方式可以在 html 中引入 css。其中有 2 種方式是在 html 檔案中直接新增 css **,另外兩種是引入 外部 css 檔案。下面我們就來看看這些方式和它們的優缺點。

內聯方式

內聯方式指的是直接在 html 標籤中的 style 屬性中新增 css。

示例:這通常是個很糟糕的書寫方式,它只能改變當前標籤的樣式,如果想要多個

擁有相同的樣式,你不得不重複地為每個

新增相同的樣式,如果想要修改一種樣式,又不得不修改所有的 style 中的**。很顯然,內聯方式引入 css **會導致 html **變得冗長,且使得網頁難以維護。

嵌入方式

嵌入方式指的是在 html 頭部中的

示例:嵌入方式的 css 只對當前的網頁有效。因為 css **是在 html 檔案中,所以會使得**比較集中,當我們寫模板網頁時這通常比較有利。因為檢視模板**的人可以一目了然地檢視 html 結構和 css 樣式。因為嵌入的 css 只對當前頁面有效,所以當多個頁面需要引入相同的 css **時,這樣寫會導致**冗餘,也不利於維護。

鏈結方式

鏈結方式指的是使用 html 頭部的

標籤引入外部的 css 檔案。

示例:這是最常見的也是最推薦的引入 css 的方式。使用這種方式,所有的 css **只存在於單獨的 css 檔案中,所以具有良好的可維護性。並且所有的 css **只存在於 css 檔案中,css 檔案會在第一次載入時引入,以後切換頁面時只需載入 html 檔案即可。

匯入方式

匯入方式指的是使用 css 規則引入外部 css 檔案。

示例:比較鏈結方式和匯入方式

link 屬於 html,通過 標籤中的 href 屬性來引入外部檔案,而 @import 屬於 css,所以匯入語句應寫在 css 中,要注意的是匯入語句應寫在樣式表的開頭,否則無法正確匯入外部檔案;

@import 是 css2.1 才出現的概念,所以如果瀏覽器版本較低,無法正確匯入外部樣式檔案;

小結:我們應盡量使用 標籤匯入外部 css 檔案,避免或者少用使用其他三種方式。

H5遊戲專案開發總結

今年5月1日公司立項準備開發一款slg的h5遊戲。經過調研決定使用layaair引擎。目前遊戲第一輪測試已經結束。簡單回顧一下 明確要求趕在暑期檔上線,由於之前一直是用cocos2dx lua版本,所以對於h5零基礎的我來說還是不小的挑戰。引擎確定之後,開始著手熟悉api。開發過程期間遇到的相關問題...

H5專案總結

專案基礎 rn taro框架,實現h5 1.無限載入的實現 1 import taro,from tarojs taro 2 import from tarojs components 3 import from tarojs redux 4 import from actions counter ...

yii2 引用專案外的檔案或類

yii2 引用專案外的檔案或類 以專案 frontend為例,檔案目錄如下 frontend frontend controllers frontend views frontend runtime other other phpexcel 在frontend controllers indexco...