將CSS樣式導入到HTML中的四種方式-創(chuàng)新互聯(lián)

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

專業(yè)成都網(wǎng)站建設公司，做排名好的好網(wǎng)站，排在同行前面，為您帶來客戶和效益!創(chuàng)新互聯(lián)建站為您提供成都網(wǎng)站建設，五站合一網(wǎng)站設計制作，服務好的網(wǎng)站設計公司，成都做網(wǎng)站、網(wǎng)站建設負責任的成都網(wǎng)站制作公司!

將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文件來實現(xiàn)樣式效果。

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

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

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

分享標題：將CSS樣式導入到HTML中的四種方式-創(chuàng)新互聯(lián)
標題URL：http://www.chinadenli.net/article6/djccog.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供App設計、移動網(wǎng)站建設、網(wǎng)站設計公司、網(wǎng)站收錄、小程序開發(fā)、網(wǎng)站策劃

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

猜你還喜歡下面的內容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

將CSS樣式導入到HTML中的四種方式-創(chuàng)新互聯(lián)