溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“CSS的三大樣式是什么”，在日常操作中，相信很多人在CSS的三大樣式是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS的三大樣式是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
又叫：內聯樣式、行內樣式、嵌入式樣式
<!-- style作為屬性直接寫在標簽后面, style屬性可以包含任何 CSS屬性 --> <div >我是div</div> <div >我是div2號</div> <p >我是段落</p>
當樣式僅需要在一個元素上應用一次時，要使用內聯樣式
缺點
將表現和內容混雜在一起，結構樣式沒有分離，不利于后期維護
樣式不能重復使用 ( 推薦不使用 )
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>內部樣式表</title>
<!-- 2、在head中間創建一個style標簽 -->
<style type="text/css">
/* 3、在style標簽中，就可以直接書寫css代碼，進行修飾 */
p {
color: red;
font-size: 30px;
/*
在書寫css的時候，如果沒有特殊規定，
數值必須帶單位(html不必)，px:像素
*/
}
div{
color: blue;
font-size: 80px;
}
</style>
</head>
<body>
<!-- 1、先創建想要修飾的對象 -->
<div>CSS基礎學習</div>
<p>我是段落</p>
</body>
</html>當單個文檔需要特殊的樣式時，使用內部樣式表
適合案例、短小的頁面開發
使用 <style> 標簽在文檔頭部定義內部樣式表
<style> 標簽放在哪里都可以，不一定要放在 <head> 里面。之所以放在 <head> 里面，是為了讓瀏覽器在加載的時候先加載CSS，這樣的話瀏覽器就會先心里有數，知道誰要修飾成什么樣式，等加載到html之后就可以直接把樣式給到相關對象上。
優點：結構樣式分離，好維護
缺點：只能在一個頁面中使用CSS樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>外部樣式表</title>
<!-- 3、利用<link>標簽或者import引入css文件 -->
<!-- css外部引入方式1(推薦使用) -->
<!--
rel: relationship;
rel屬性是必須的, 規定當前文檔與被鏈接文檔/資源之間的關系
stylesheet:樣式表
-->
<link rel="stylesheet" type="text/css" href="外部樣式.css" />
<!-- link的另一種用法，鏈接標題<title>前面的小圖標 -->
<link rel="icon" href="images/icon.jpg" />
<!-- css外部引入方式2 -->
<style type="text/css">
@import url("demo.css"); /* @import：導入，引入； */
</style>
</head>
<body>
<!-- 1、先創建想要修飾的對象 -->
<div>CSS基礎學習外部樣式</div>
<div>CSS基礎學習外部樣式</div>
<p>我是段落</p>
<p>我是段落</p>
<!-- 2、新建一個css文件 -->
</body>
</html>當樣式需要應用于很多頁面時，外部樣式表將是理想的選擇
適合整站開發、比較長的頁面開發
在使用外部樣式表的情況下，你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用 <link> 標簽鏈接到樣式表，瀏覽器會從CSS文件中讀到樣式聲明，并根據它來格式文檔
優點
結構化樣式分離，好維護
樣式重用，可以多個頁面使用
<link> 和 import 的區別
當使用JavaScript控制DOM去改變樣式的時候，只能用 <link> 標簽
因為@import 不是DOM可以控制的
@import 是CSS2.1提供的，所以老的瀏覽器不支持，@import 只有在IE5以上的才能識別
<link> 標簽無此問題
<link> 是當頁面 ( body里面的內容 ) 被加載的時候 ( 也就是被瀏覽者瀏覽的時候 )，<link> 引入的CSS會同時被加載
import 引入的CSS會先等頁面加載完畢之后再加載，如果用這種加載方式，會在網速比較慢的時候，出現閃爍的效果，影響用戶體驗
本質上來看，<link> 是HTML的標簽，而 import 是CSS提供的一種方式
加載順序上
兼容性上的區別
使用DOM
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多重樣式優先級</title>
<link rel="stylesheet" type="text/css" href="demo.css"/>
<style type="text/css">
div{
color: blue;
}
p{
color: blue;
}
</style>
<!--
demo.css里面p標簽設置的是紅色
這里<style>距離<p>標簽比<link>近，所以顯示的是藍色字體
-->
</head>
<body>
<div >
解析規則第一條測試
</div>
<p>
解析規則第二條測試：外部和內部樣式表同時使用
</p>
</body>
</html>多重樣式優先級
同時使用內部、外部、行內樣式表修飾同一個標簽的時候，優先級最高的是行內樣式表，即顯示結果是行內樣式
當外部和內部樣式表同時使用的時候，哪個css樣式距離標簽近就最終顯示哪個樣式
到此，關于“CSS的三大樣式是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
