將CSS樣式導入到HTML中的四種方式

這篇文章將為大家詳細講解有關將CSS樣式導入到HTML中的四種方式，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

成都創(chuàng)新互聯專注于中大型企業(yè)的做網站、成都做網站和網站改版、網站營銷服務，追求商業(yè)策劃與數據分析、創(chuàng)意藝術與技術開發(fā)的融合，累計客戶近1000家，服務滿意度達97%。幫助廣大客戶順利對接上互聯網浪潮，準確優(yōu)選出符合自己需要的互聯網運用，我們將一直專注成都品牌網站建設和互聯網程序開發(fā)，在前進的路上，與客戶一起成長！

將CSS導入HTML的方式有四種，分別是行內式，嵌入式，外部樣式。外部樣式又分為import導入式，link鏈接式。

一、行內式，即在HTML標簽中直接加上css樣式，用style添加。

比如：將div中的字體設置為40px，顏色設為紅色。代碼如下：

<div style="font-size: 40px;color: red;">今天星期一</div>

效果圖：

將CSS樣式導入到HTML中的四種方式

二、嵌入式，即將CSS樣式寫在<style type="text/css"></style>中，然后將style放在<head></head>之間。

比如：在<style>中寫入樣式，將div的顏色設為橙色，字體為40px。代碼如下：

<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   div{font-size: 40px;color: orange;}
  </style>
 </head>
 <body>
  <div>今天星期二</div>
 </body>
</html>

效果圖：

將CSS樣式導入到HTML中的四種方式

三、外部樣式（外部樣式又分為import導入式，link鏈接式）

外部樣式就是把css樣式代碼寫在一個單獨的外部文件中，這個外部文件以“.css”為擴展名，然后將其引入需要的HTML中。import導入式和link鏈接式的引入方法不一樣，接下來一一介紹。

1、import導入式，即在<style type="text/css"></style>中用@import的URL引入。

比如：用import導入式將div的字體設為40px,顏色為黃色。代碼如下：

<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   @import url("css/import.css");
  </style>  
 </head>
 <body>
  <div>今天星期三</div>
 </body>

效果圖：

將CSS樣式導入到HTML中的四種方式

2、link鏈接式，即在<head></head>中添加<link rel="stylesheet" type="text/css" href="css/index.css"/> 調用外部css文件來實現樣式效果。

比如：用外部樣式link將div的顏色設置為綠色，字體為40px。代碼如下：

<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/index.css"/>  
 </head>
 <body>
  <div>今天星期三</div>
 </body>
</html>

效果圖：

將CSS樣式導入到HTML中的四種方式

總結：

1、行內式這種方式麻煩，查找不方便，也沒有體現CSS的優(yōu)勢，因此不推薦使用。
2、嵌入式對于大的頁面不推薦使用，對于小的樣式少的網頁可以使用。
3、同樣是外部樣式，import導入式和link鏈接式的區(qū)別在哪里？使用link鏈接式，會在加載頁面主體內容之前加載CSS樣式文件，這樣用戶看到的網頁一開始就是帶有樣式效果的。如果使用import導入式，會在整個頁面加載完成后再加載CSS樣式文件，所以有時候會出現顯示無樣式情況，閃爍一下后再出現設置樣式后的效果。因此從用戶體驗來說，還是建議使用link鏈接式來引入CSS樣式。

關于將CSS樣式導入到HTML中的四種方式就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

分享名稱：將CSS樣式導入到HTML中的四種方式
網站鏈接：http://jinyejixie.com/article36/pdcppg.html

成都網站建設公司_創(chuàng)新互聯，為您提供外貿網站建設、虛擬主機、商城網站、定制開發(fā)、網站設計、軟件開發(fā)

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

猜你還喜歡下面的內容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

將CSS樣式導入到HTML中的四種方式