css基礎知識+css選擇符(元素選擇符、關係選擇符)
阿新 • • 發佈:2018-12-26
首先介紹在HTML檔案中匯入CSS檔案的幾種方式:
1、行內樣式:<p style="color:red">
行內樣式使用css</p>
2、頁內樣式:在head標籤裡設定
<span style="font-size:18px;"><head>
<style>
p{
color:red
}
</style>
</head>
<body>
<p>頁內使用css樣式</p>
</body></span>
3、外部連結方式:首先你要先在外部準備好做好的css樣式表
<span style="font-size:18px;"><head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<p>外部連結css樣式表設定樣式,要注意heaf="這裡就是要匯入css樣式表的地址"</p>
</body></span>
接下來我就像大家介紹css層疊樣式
元素選擇符:類選擇符、id選擇符、類選擇符、通配選擇符
型別選擇符:以元素的類標籤進行選擇
<span style="font-size:18px;"><style>
h1{
color:blue;
}
</style></span>
id選擇符:
<span style="font-size:18px;"><head>
<style>
#s{
color:hsl(0,0,50);
}
</style>
</head>
</span>
類選擇符:
<span style="font-size:18px;"> <head>
<style>
.title{
color:red;
}
</style>
</head></span>
通配選擇符:
<span style="font-size:18px;"><head>
<style>
*{
color:red;
}
</style>
</head></span>
通配選擇符選擇的型別較為抽象,慎用!
接下來為大家哦介紹關係選擇符:包含選擇符、子選擇符、相鄰選擇符、兄弟選擇符
包含選擇符:
<span style="font-size:18px;">ul li{
color:red;
}</span>
ul標籤以下的所有li標籤都被設定了樣式
子選擇符:
<span style="font-size:18px;"><head>
<style>
ol>li{
color:red;
}
</style>
</head></span>
ol下面的子一級元素被選中
相鄰選擇符:
<span style="font-size:18px;"><head>
<style>
li+li{
text-indent:2em;
color:red;
}
</style>
</head></span>
選中li標籤後面緊挨著的兄弟級別li元素
兄弟選擇符
<span style="font-size:18px;"><head>
<style>
li~li{
color:red;
text-indent:2em;
}
</style>
</head></span>
選擇li標籤後面所有的兄弟級別元素
以上就是我要介紹的。
另外再補充幾點:
首行縮排:text-indent:4em;
居中顯示:teext-align:center;
關於優先順序:
行內css>頁內css>外部css
id>.class
後面設定的樣式若是重複了前面的,則前面設定的樣式
具體的要覆蓋抽象的
比如當用同時設定通配選擇符合元素選擇符,使用元素選擇符的那部分將不被通配選擇符那一部分覆蓋。