CSS基礎語法和選擇器的使用
css語法
selector{
property:value
}
例：h1{color:red; font-size:14px}
屬性大于1個之后，屬性之間用分號隔開
如果值大于1個單詞，則需要加上引號
p{font-family:"sans serif";}
選擇器分組：
h1,h2,h3,h4,h5,h6{color:red;}
繼承：
body{
color:green;
}
css-派生選擇器
通過依據元素在其位置的上下文關系來定義樣式
css-id選擇器
id選擇器可以為標有id的HTML元素指定特定的樣式
id選擇器以“#”來定義
id選擇器常常用于建立派生選擇器
css-類選擇器
類選擇器以一個點顯示
class也可以用作派生選擇器
css-屬性選擇器
對帶有指定屬性的HTML元素設置樣式
屬性和值選擇器
body{
color:red;
}
h1,h2,p{
color: bisque;
}
/派生選擇器/
li strong{
color: black;
}
strong{
color: blue;
}
/id選擇器/
divId{
color: brown;
}
/id選擇器和派生選擇器一起作用/
pid a{
color: crimson;
}
/類選擇器/
.pclass{
color: chartreuse;
}
/類選擇器派生選擇器一起作用/
.divclass a{
font-size: 100px;
color: black;
}
/屬性選擇器/
[title]{
color: chartreuse;
font-size: 50px;
}
/屬性和值選擇器/
[title=te]{
color: chocolate;
font-size: 10px;
}</pre>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href="myCss.css" type="text/css" rel="stylesheet">
</head>
<body>
<p>aaaaa</p>
<h1>123</h1>
<a>aaaaaaa</a>
<!--派生選擇器-->
<p><strong>p標簽hello css</strong></p>
<ul>
<li><strong>li標簽hello css</strong></li>
</ul>
<!--id選擇器和派生選擇器一起作用-->
<p id="pid">hello css <a href=";
<!--id選擇器的使用-->
<div id="divId">
這是一個div
</div>
<!--類選擇器的使用-->
<p class="pclass">這是一個class效果</p>
<div class="divclass">
Hello Div
<a href=";
</div>
<!--屬性選擇器的使用-->
<p title="t">屬性選擇器的使用</p>
<!--屬性和值選擇器的使用-->
<p title="te">屬性和值選擇器的使用</p>
</body>
</html></pre>