您好,登錄后才能下訂單哦!
本文小編為大家詳細介紹“CSS引入樣式的方法有哪些”,內容詳細,步驟清晰,細節處理妥當,希望這篇“CSS引入樣式的方法有哪些”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學習新知識吧。
CSS中可以通過三種方法引入樣式表:
(1)內聯樣式
(2)嵌入式樣式
(3)外部樣式
這些CSS樣式中的每一種形式都有它們的優點和缺點接下來將詳細的為大家介紹
內聯樣式
特點:(1)內聯樣式放在代碼中的HTML元素中。
(2)使用內聯樣式時,樣式只會影響你選擇的元素。
(3)內聯樣式沒有選擇器
示例:
<divstyle="width:100px;height:100px;border:1pxsolid#ccc"><div>
此CSS內聯樣式只能改變這個div的寬和高,它不會更改頁面上的任何div或者屬性的樣式。這是內聯樣式的限制之一。由于它們只對特定元素進行更改,因此這不是最佳做法,內聯樣式也具有非常高的特異性。這使得很難用其他非內聯樣式覆蓋它們,事實上,我們很少在網頁上使用內聯樣式。
嵌入樣式
特點:(1)被放置在樣式標簽<styletype="text/css"></style>編寫的網頁的頭部部分中。
(2)編寫的樣式將僅用于您使用它的網頁。
(3)嵌入樣式也稱為“內部樣式”
示例
<!DOCTYPEhtml>
<html>
<head>
<metacontent=“text/html;charset=utf-8”/>
<title>Document</title>
<style>
div{
width:100px;
height:100px;
border:1pxsolid#ccc;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
嵌入式樣式是嵌入在文檔頭部的樣式。嵌入式樣式僅影響它們嵌入的頁面上的標記。再次,這種方法否定了CSS的優勢之一。由于每個頁面都有樣式,如果你想進行全站點更改,比如將鏈接顏色從紅色更改為綠色,則需要在每個頁面上進行此更改,因為每個頁面都使用嵌入式樣式表。這比內聯樣式更好,但在許多情況下仍然存在問題。
外部樣式表
特點:(1)在單獨的文檔中編寫然后附加到各種Web文檔中
(2)修改它可以影響所有你所調用的頁面
(3)便于修改操作
示例
<linkhref=“demo.css”rel=“stylesheet”type=“text/css>
在demo文件下寫css樣式
如今大多數網站使用外部樣式表,外部樣式是在單獨的文檔中編寫然后附加到各種Web文檔的樣式。外部樣式表會影響它們所連接的任何文件,這意味著如果你有一個20頁的網站,每個頁面使用相同的樣式表,當需要改變的話只需編輯該樣式表即可完成這些頁面,這使得長期站點管理變得更加容易。外部樣式表的缺點是它們需要頁面來獲取和加載這些外部文件。并非每個頁面都會使用CSS表格中的每個樣式,因此許多頁面將加載比實際需要的頁面大得多的CSS頁面。
讀到這里,這篇“CSS引入樣式的方法有哪些”文章已經介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會,如果想了解更多相關內容的文章,歡迎關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。