CSS的幾種引入方式
行內樣式
行內式是在標記的style屬性中設定CSS樣式。不推薦大規模使用。
<p style="color: red">Hello world.</p>內部樣式
嵌入式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中。格式如下：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>外部樣式
外部樣式就是將css寫在一個單獨的文件中，然後在頁面進行引入即可。推薦使用此方式。
<link href="mystyle.css" rel="stylesheet" type="text/css"/>CSS選擇器
基本選擇器
- 元素選擇器
p {color: "red";} - ID選擇器
#i1 { background-color: red; } - 類選擇器
.c1 { font-size: 14px; } p.c1 { color: red; }標籤中的class屬性如果有多個，要用空格分隔
- 通用選擇器
* { color: white; }
組合選擇器
- 後代選擇器
/*li內部的a標籤設置字體顏色*/ li a { color: green; } - 兒子選擇器
/*選擇所有父級是 <div> 元素的 <p> 元素*/ div>p { font-family: "Arial Black", arial-black, cursive; } - 毗鄰選擇器
/*選擇所有緊接着<div>元素之後的<p>元素*/ div+p { margin: 5px; } - 弟弟選擇器
/*i1後面所有的兄弟p標籤*/ #i1~p { border: 2px solid royalblue; }
屬性選擇器
/*用於選取帶有指定屬性的元素。*/
p[title] {
color: red;
}
/*用於選取帶有指定屬性和值的元素。*/
p[title="213"] {
color: green;
}分組和嵌套
-
分組
當多個元素的樣式相同的時候，我們沒有必要重複地爲每個元素都設置樣式，我們可以通過在多個選擇器之間使用逗號分隔的分組選擇器來統一設置元素樣式。
例如：div, p { color: red; } - 嵌套
多種選擇器可以混合起來使用，比如：.c1類內部所有p標籤設置字體顏色爲紅色。.c1 p { color: red; }