首頁 >web前端 >html教學 >html中使用css的方法有哪幾種

html中使用css的方法有哪幾種

青灯夜游
青灯夜游原創
2021-05-06 16:01:3535079瀏覽

html中使用css的方法有4種:1.在HTML標籤中使用style屬性來設定css樣式;2、在head標籤中使用style標籤來設定css樣式;3、使用link標籤匯入一個外部css檔;4、使用「@import」規則導入外部css檔。

html中使用css的方法有哪幾種

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

html中使用css的方法有4種:

  • 內聯方式(行內樣式)

  • 內部方式(內嵌樣式)

  • 使用link標籤(連結式)

  • #使用@import(導入式)

1、內聯方式(行內樣式)

在HTML的標籤中使用style屬性來設定css樣式

格式:

<html标签 style="属性:值;属性:值;....">被修饰的内容</html标签>

範例:

<p style="color:orange;font-size:18px">在HTML中如何使用css样式</p>

特點:僅作用於本標籤。

2、內部方式(內嵌樣式)

就是在head標籤中使用style標籤來設定css樣式

格式:

<style type="text/css"> ....css样式代码 </style>

特點:作用於目前整個頁面

3、使用link標籤(連結式)

將css程式碼寫在一個單獨的檔案中,用link標籤直接引入該文件到頁面中。一個頁面可以多次使用LINK標籤引入多個外部css文件,注意這些CSS程式碼的相互影響,通常是後引入的CSS文件會覆蓋前面引入的CSS文件的相同效果。這種引入CSS的方式是目前最受歡迎的,可以在站個網站範圍內進行CSS代碼的規劃,方便復用和維護,但這樣將代碼高度集中,代碼量可能過大,維護不當的話又容易出現混亂。

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

4、使用@import(導入式)

#使用@import引入CSS檔案有兩種方式,一種可以放在頁面中的b31ef5772be812bc66b6db64554b8f2f 中,用法如下:

@import url(index2.css);

另外也可以放在CSS檔案中使用,用法如下:

@import "sub.css";

使用@import引入CSS可以很方便的引入外部文件的CSS程式碼,方便維護和規劃。但每多引進一個CSS文件,就會對伺服器增加一次連線請求,當存取量較大時,需在維護性和效能上進行權衡。

推薦教學:《html影片教學

以上是html中使用css的方法有哪幾種的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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