首頁 >web前端 >css教學 >分享四種方式將CSS樣式匯入到HTML中

分享四種方式將CSS樣式匯入到HTML中

yulia原創: 2018-09-17 10:46:165304瀏覽

在進行頁面佈局時，必然會用到CSS和HTML，因為HTML是頁面的主體內容部分，CSS是頁面的表現，通俗的講，CSS是給HTML進行化妝的。那CSS的樣式怎麼在HTML中實現呢？這時候就需要在HTML中引入CSS檔案，今天就和大家聊聊如何將CSS導入HTML中，有需要的可以參考一下。

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

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

例如：將div中的字體設定為40px，顏色設為紅色。程式碼如下：

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

效果圖：

分享四種方式將CSS樣式匯入到HTML中

#二、嵌入式，即將CSS樣式寫在中，然後將style放在

之間。

例如：在

<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導入式，即在中用@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連結式，即在

> ;中新增調用外部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的優勢，因此不建議使用。

2、嵌入式對於大的頁面不建議使用，對於小的樣式少的網頁可以使用。
3、同樣是外部樣式，
import導入式和link連結式的差別在哪裡？使用link連結式，會在載入頁面主體內容之前載入CSS樣式文件，這樣使用者看到的網頁一開始就是帶有樣式效果的。如果使用import導入式，會在整個頁面載入完成後再載入CSS樣式文件，所以有時候會出現顯示無樣式狀況，閃爍一下後再出現設定樣式後的效果。因此從使用者體驗來說，還是建議使用link連結式來引入CSS樣式。

以上介紹了4種方式將CSS導入到HTML中，具體用什麼方式，還需要看情況決定，但是用的最多的還是link鏈接式，正在學習的小伙伴可以多去練習嘗試，希望對你有幫助！

以上是分享四種方式將CSS樣式匯入到HTML中的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：分享7種實現CSS垂直居中的技巧（附代碼）下一篇：分享7種實現CSS垂直居中的技巧（附代碼）

看更多

樣式匯入方式有哪些？