CSS的三種使用方法

Tech In Pieces發表於2020-12-31
CSS

CSS使用方法1：行內樣式，只對當前標籤生效。
比如像這樣

<h1 style="height:20px;color:red">

CSS使用方法2—內聯樣式+選擇器
行內樣式雖然直觀易懂，但是有個問題：不便於維護和修改，而且佔記憶體。但是 如果批量修改，文字中的< p >標籤，想讓文字變為紅色。
所以 我們使用CSS選擇器。

<html>
<head>
    <title>Evan Sun</title>
    <style type="text/css"> p {color: red;} </style>
</head>
<body>
<h1>標題</h1>
<p>段落1</p>
<p>段落2</p>
</body>
</html>

當然也不止有這樣一種選擇器。
有四種：#id選擇器 .class選擇器 以及這裡面的元素選擇器。
下面是幾種選擇器：
在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述
CSS使用方法3—外聯樣式+選擇器：
外聯樣式 就是通過在HTML引入一個CSS檔案，來改變當前文件的樣式。你只需要在< html >文件< head>標籤中 只需要加入下面這樣一行程式碼即可。

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

其中href的屬性值 就是當前css樣式檔案的檔案路徑
把這個link放在head tag裡面。

最後一個問題：
CSS樣式聽誰的？
在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述

相關文章