首頁 >web前端 >css教學 >CSS引入樣式有哪幾種方法

CSS引入樣式有哪幾種方法

清浅
清浅原創
2018-11-17 16:26:396450瀏覽

這篇文章將分享如何引入CSS樣式表以及他們之間的優缺點,有一定的參考價值,希望對大家有所幫助。

CSS中可以透過三種方法引入樣式表:

(1)內嵌樣式

(2) 內嵌樣式

(3)外部樣式

這些CSS樣式中的每一種形式都有它們的優點與缺點接下來將詳細的為大家介紹

內嵌樣式


#特點:(1)內聯樣式放在程式碼中的HTML元素中。

           (2)使用內嵌樣式時,樣式只會影響你所選擇的元素。

            (3)內嵌樣式沒有選擇器

範例:

<div style="width:100px;height:100px;border:1px solid #ccc"><div>


#此CSS內嵌樣式只能改變這個div的寬和高,它不會更改頁面上的任何div或屬性的樣式。這是內聯樣式的限制之一。由於它們只對特定元素進行更改,因此這不是最佳做法,內聯樣式也具有非常高的特異性。這使得很難用其他非內聯樣式覆蓋它們,事實上,我們很少在網頁上使用內聯樣式。

嵌入樣式

特點: (1)被放置在樣式標籤4581f4542a28f9640f43de9262aa4998 e90442d4aba9b6409c93259f982d1eec寫的網頁的頭部部分中。

            (2)所寫的樣式將只用於您使用它的網頁。

             (3)嵌入樣式也稱為「內部樣式」

範例

<!DOCTYPE html>
<html>
<head>
<meta content =“text / html; charset = utf-8”/>
<title> Document </title>
<style>
div{
width:100px;
height:100px;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

嵌入式樣式是嵌入在文件頭部的樣式。嵌入式樣式僅影響它們嵌入的頁面上的標記。再一次,此方法否定了CSS的優勢之一。由於每個頁面都有樣式,如果你想進行全網站更改,例如將連結顏色從紅色更改為綠色,則需要在每個頁面上進行此更改,因為每個頁面都使用嵌入式樣式表。這比內聯樣式更好,但在許多情況下仍然存在問題。

外部樣式表

特點:(1)在單獨的文件中編寫然後附加到各種Web文件中

           (2)修改它可以影響所有你所調用的頁面

           (3)便於修改操作

<link href=“demo.css”rel=“stylesheet”type=“text/css>
在demo文件下写css样式

如今大多數網站使用外部樣式表,外部樣式是在單獨的文件中編寫然後附加到各種Web文檔的樣式。外部樣式表會影響它們所連接的任何文件,這意味著如果你有一個20頁的網站,每個頁面使用相同的樣式表,當需要改變的話只需編輯該樣式表即可完成這些頁面,這使得長期站點管理變得更加容易。外部樣式表的缺點是它們需要頁面來取得和載入這些外部檔案。並非每個頁面都會使用CSS表格中的每個樣式,因此許多頁面將載入比實際需要的頁面大得多的CSS頁面。 

總結:以上就是這篇文章對於CSS引入樣式表的介紹了,希望透過 這篇文章能讓大家對CSS樣式有所了解。

以上是CSS引入樣式有哪幾種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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