整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML 中引入 CSS 的方式

          4 種方式可以在 HTML 中引入 CSS。其中有 2 種方式是在 HTML 文件中直接添加 CSS 代碼,另外兩種是引入 外部 CSS 文件。下面我們就來看看這些方式和它們的優缺點。

          內聯方式

          內聯方式指的是直接在 HTML 標簽中的 style 屬性中添加 CSS。

          示例:

          <div style="background: red"></div>
          

          這通常是個很糟糕的書寫方式,它只能改變當前標簽的樣式,如果想要多個 <div> 擁有相同的樣式,你不得不重復地為每個 <div> 添加相同的樣式,如果想要修改一種樣式,又不得不修改所有的 style 中的代碼。很顯然,內聯方式引入 CSS 代碼會導致 HTML 代碼變得冗長,且使得網頁難以維護。

          嵌入方式

          嵌入方式指的是在 HTML 頭部中的 <style> 標簽下書寫 CSS 代碼。

          示例:

          <head>
           <style>
           .content {
           background: red;
           }
           </style>
          </head>
          

          嵌入方式的 CSS 只對當前的網頁有效。因為 CSS 代碼是在 HTML 文件中,所以會使得代碼比較集中,當我們寫模板網頁時這通常比較有利。因為查看模板代碼的人可以一目了然地查看 HTML 結構和 CSS 樣式。因為嵌入的 CSS 只對當前頁面有效,所以當多個頁面需要引入相同的 CSS 代碼時,這樣寫會導致代碼冗余,也不利于維護。

          鏈接方式

          鏈接方式指的是使用 HTML 頭部的 <head> 標簽引入外部的 CSS 文件。

          示例:

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

          這是最常見的也是最推薦的引入 CSS 的方式。使用這種方式,所有的 CSS 代碼只存在于單獨的 CSS 文件中,所以具有良好的可維護性。并且所有的 CSS 代碼只存在于 CSS 文件中,CSS 文件會在第一次加載時引入,以后切換頁面時只需加載 HTML 文件即可。

          導入方式

          導入方式指的是使用 CSS 規則引入外部 CSS 文件。

          示例:

          <style>
           @import url(style.css);
          </style>
          

          比較鏈接方式和導入方式

          鏈接方式(下面用 link 代替)和導入方式(下面用 @import 代替)都是引入外部的 CSS 文件的方式,下面我們來比較這兩種方式,并且說明為什么不推薦使用 @import

          • link 屬于 HTML,通過 <link> 標簽中的 href 屬性來引入外部文件,而 @import 屬于 CSS,所以導入語句應寫在 CSS 中,要注意的是導入語句應寫在樣式表的開頭,否則無法正確導入外部文件;
          • @import 是 CSS2.1 才出現的概念,所以如果瀏覽器版本較低,無法正確導入外部樣式文件;
          • 當 HTML 文件被加載時,link 引用的文件會同時被加載,而 @import 引用的文件則會等頁面全部下載完畢再被加載;

          小結:我們應盡量使用 <link> 標簽導入外部 CSS 文件,避免或者少用使用其他三種方式。

          午學習了HTML語言CSS樣式的內部樣式表,現在我們來學習下外部樣式表。這是CSS樣式表的一個重點。

          實際開發都是外部樣式表,適合于樣式比較多的情況,核心是: 樣式單獨寫到CSS文件中,之后把CSS文件引入到HTML頁面中使用。

          引入外部樣式表,分為兩步:

          1.新建一個后綴名為.css的樣式文件,把所有CSS代碼都放到這個樣式文件中。

          2.在HTML頁面中,使用<link>標簽引入.css這個文件

          看下語法規范:

          <link rel="stylesheet" href="css文件路徑">

          對于css文件路徑,如果在同一個文件夾下,可以直接引用。如果不在同一個文件夾下,可以再引用下文件路徑。


          來看下最終的樣式效果:

          最開始沒有效果的展示:

          對應代碼為:

          <!DOCTYPE html>

          <html lang="en">

          <head>

          <meta charset="UTF-8">

          <meta http-equiv="X-UA-Compatible" content="IE=edge">

          <meta name="viewport" content="width=device-width, initial-scale=1.0">

          <title>CSS之外部樣式表</title>

          <!-- <link rel="stylesheet" href="style.css"> -->

          </head>

          <body>

          <div>天生我材必有用,千金散盡還復來。</div>

          </body>

          </html>


          修改后的顯示效果為:

          對應的代碼為:

          <!DOCTYPE html>

          <html lang="en">

          <head>

          <meta charset="UTF-8">

          <meta http-equiv="X-UA-Compatible" content="IE=edge">

          <meta name="viewport" content="width=device-width, initial-scale=1.0">

          <title>CSS之外部樣式表</title>

          <link rel="stylesheet" href="style.css">

          </head>

          <body>

          <div>天生我材必有用,千金散盡還復來。</div>

          </body>

          </html>


          這里加入了<link>標簽,<link rel="stylesheet" href="style.css"> 也引入了CSS的樣式文件。具體文件內容為:

          對應文件內的代碼為:


          /* 這個css文件里沒有標簽,只有樣式 */

          div {

          color: pink;

          }


          先在外部新建一個 .css文件,然后通過link將css文件引入


          接下來對CSS引入樣式進行一個總結:

          行內樣式表: 優點是書寫方便,權重高,缺點是結構樣式混寫,使用情況較少,控制范圍是控制一個標簽。

          內部樣式表: 優點是部分結構和樣式相分離,缺點是沒有徹底分離,使用情況較多,控制范圍是控制一個頁面。

          外部樣式表: 優點是完全實現樣式和結構相分離,缺點是需要引入,使用情況最多,吐血推薦,控制范圍是能夠控制多個頁面。


          今天就先到這里了,明天進行綜合案例分析。謝謝大家~

          SS樣式

          CSS全稱Cascading Style Sheets(層疊樣式表),用于描述網頁上的信息格式化和顯示的方式。CSS能夠對網頁中元素進行精準控制并提供了豐富的樣式屬性,擁有對網頁對象和模型樣式編輯的能力。通過CSS對HTML標簽元素進行樣式描述可以定義其元素的顯示方式,最終在瀏覽器中顯示成為我們設置的樣式效果。

          CSS樣式形式

          根據項目的需求不同我們可以將CSS樣式分為3種類型,分別是:外聯css樣式、內聯css樣式和嵌入css樣式。外聯css樣式是引用外部的css文件,借用別人封裝好的樣式文件來達到我們想要的樣式效果,比如Bootstrap就提供了大量現成的樣式,引用Bootstrap可以幫助我們快速得到豐富的頁面效果內聯css樣式是將樣式聲明在一個專門的CSS文件中,當HTML頁面需要使用時直接引用該樣式即可,這樣也可以提供樣式的復用性,讓多個頁面風格的保持統一。嵌入css樣式則是在HTML標簽元素創建時通過style直接定義當前標簽元素的樣式,或者在HTML文檔中的<head>中使用<style>標簽標記。

          外聯樣式引用

          這個只要在Vue項目的public目錄中找到index.html模板,在head標簽中通過link來引入外部的樣式文件。href可以連接在線的樣式文件,當然也可以引用本地的樣式文件。這種方式引入的樣式編譯在生成的html文件中,該樣式在整個項目都能夠公用。

          內聯樣式引用

          這個在Vue中可以全局引用也可以局部模板引用,全局引用的話需要在main.js入口文件中引入。當項目啟動時就會對css文件進行解析,將對應的css代碼插入生成html文件的style標簽中。這里可以將一些全局的或者公共的樣式文件引入,提高代碼的復用性。

          Vue模塊中引用

          除了在main.js中引入我們還可以在局部模板中引用 樣式文件,在對應的模板.vue文件中通過@import ‘樣式文件路徑’。但是這樣引入發現一個問題:該模板標簽元素以上的樣式不生效,改用@import url(樣式文件路徑)后樣式生效了但是在index.html的head上會多出一個空的<style></style>樣式標簽。

          嵌入css樣式使用

          這個就不存在引入了,直接在當前的模板中編寫樣式即可。vue模板提供了一個style標簽專門用來描述HTML樣式,在style中申明scoped則該樣式只影響到當前頁面。也可以直接在標簽元素中通過style屬性來描述當前元素的樣式,通過屬性綁定的形式,將樣式對象應用到元素中,樣式對象也可以定義在data中,如果需要data上的多個樣式對象則可以在:style中通過數組引用。

          總結:

          CSS樣式在前端中是必不可少的成員之一,合理的利用樣式可以讓你的項目更加的簡單、快捷、高效。充分利用CSS樣式表的復用可以更大程度的縮減了頁面的體積,減少下載的時間,提升用戶體驗。以上內容是小編給大家分享的【Vue實戰079:常見的幾種CSS樣式文件引入方式詳解】,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。更多Vue實戰技巧可以參考以下專欄:


          主站蜘蛛池模板: 无码精品视频一区二区三区 | 高清一区二区三区免费视频| 久久综合精品不卡一区二区| 日韩视频一区二区在线观看 | 久久精品无码一区二区三区免费 | 精品国产一区二区三区久久蜜臀| 国产怡春院无码一区二区| 免费视频一区二区| 亚洲一区二区三区无码影院| 国产人妖视频一区二区破除| 伊人久久精品一区二区三区| 精品无码一区二区三区爱欲 | 精品一区二区三区免费毛片爱| 中文无码AV一区二区三区| 日韩少妇无码一区二区三区| 国产一区二区三区在线免费| 国模极品一区二区三区| 91午夜精品亚洲一区二区三区| 久久4k岛国高清一区二区| 久久一区二区三区精品| 国产精品高清一区二区三区| 国产精品伦一区二区三级视频| 亚洲综合色自拍一区| 亚洲人成人一区二区三区| 国产亚洲一区二区三区在线不卡| 精品人妻少妇一区二区| 肥臀熟女一区二区三区| 精品国产香蕉伊思人在线在线亚洲一区二区| 精品无码国产AV一区二区三区| 精品国产日韩亚洲一区在线| 精品一区二区三区无码免费直播| 卡通动漫中文字幕第一区| 无码精品前田一区二区| 久久精品无码一区二区三区日韩 | 亚洲午夜一区二区电影院| 91精品乱码一区二区三区| 亚洲日韩AV无码一区二区三区人 | 无码AV一区二区三区无码| 人妻少妇精品一区二区三区| 久久精品一区二区三区四区| 国产高清在线精品一区|