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

發(fā)布時間：2020-07-11 10:21:30 來源：億速云閱讀：322 作者：Leah 欄目：web開發(fā)

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

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

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

向AI問一下細節(jié)

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

猜你喜歡

最新資訊

相關推薦

相關標簽