本文主要介紹一下CSS的基本操作，四中引入方式和選擇器、屬性選擇器的使用
一、CSS簡介
1、介紹：
也叫層疊樣式表，用來控制網頁數據的表現，可以使網頁的表現與數據內容分離。簡單來說就是控制網頁樣式的。
2、CSS的學習方向
- 怎麼找標籤（選擇器）
- 如何操作標籤對象（element）
二、四種引入方式
1、style屬性
<div style="color:red; background:yellowgreen">第一種引入方式</div>
缺點：耦合性太強了，導致獨立性變弱，代碼都雜糅到一起了
2、style標籤
<style>
p{
color:red;
font-size:40px;
}
a{
text-decoration:none;
}
</style>
以上代碼就是對p標籤和a標籤進行樣式設置
3、鏈接式引入
即使用link自閉和標籤引入CSS文件
首先創建一個CSS文件：
在裏面寫入Style標籤裏同樣的內容，即設置樣式，請參照下文的選擇器部分。
然後就是將文件鏈接進到需要操作的html文件：
<link href="test1.css" rel="stylesheet">
4、導入式引入
<style>
@import "test1.css";
</style>
顯然以上幾種方式中，鏈接式引入是最好用的，它不限制渲染文件的個數，修改起來也方便，獨立性強不冗餘
三、CSS選擇器
1、選中所有標籤
*{
color:red;
}
2、選中所有div標籤
div{
color:red;
}
3、選中某個id下的標籤
#first_p{
font-size:40px;
}
4、選中某個class下的標籤
.class_name{
background:aqua;
}
5、只有class也可以精確定位
div.class_name2{
font-size:60px;
}
6、組合選擇
#first_div,div.class_name3{
background:darkgray;
}
7、嵌套裏的定位
.class_name4 div p{
background:rebeccapurple;
}
此段代碼表示在類名爲class_name4裏的div標籤裏的p標籤
嵌套規則：
塊級元素可以包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。
有幾個特殊的塊級元素只能包含內聯元素，不能包含塊級元素。如h1,h2,h3,h4,h5,h6,p,dt
塊級元素與塊級元素並列、內聯元素與內聯元素並列。
特殊：<p>標籤內加<div>標籤不會有效果
span標籤：
<span>標籤與<div>標籤非常類似，是初始狀態沒有任何效果的一類標籤
8、屬性選擇器（以下都可以省略E）
即通過自定義屬性來查找和定位的選擇器
- E[att] 匹配所有具有att屬性的E元素，不考慮它的值，此處E可以省略
- E[att=val] 匹配所有att屬性等於“val”的E元素
- E[att~=val] 匹配所有att屬性具有多個空格分隔的值、其中一個值等於“val”的E元素
- E[attr^=val] 匹配屬性值以指定值開頭的每個元素
- E[attr$=val] 匹配屬性值以指定值結尾的每個元素
- E[attr*=val] 匹配屬性值中包含指定值的每個元素
四、練習代碼
1、CSS選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/**{
color:red;
}*/
#first_p{
font-size:40px;
}
.class_name{
background:aqua;
}
div.class_name2{
font-size:60px;
}
#first_div,div.class_name3{
background:darkgray;
}
.class_name4 div p{
background:rebeccapurple;
}
.class_name4 + div{
background:yellow;
}
</style>
</head>
<body>
I am in body label
<p>I just in p label</p>
<div class="class_name">I am in div label</div>
<p id="first_p" class="class_name">I have id number and class name</p>
<div class="class_name2">竟然用class精確定位到我了</div>
<div class="class_name3">組合選擇1</div>
<div id="first_div">組合選擇2</div>
<div>before div</div>
<div class="class_name4">
<div>
<a href="">打我呀</a>
<p>I am insert p label</p>
</div>
</div>
<div>after div</div>
</body>
</html>
2、屬性選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[viewin]{
color:red;
}
[viewin="ok2"]{
font-size:30px;
}
[viewin~="duo2"]{
color:blue;
}
[viewin^="sao"]{
background:pink;
}
[viewin$="a"]{
background:burlywood;
}
[viewin*="j"]{
background:yellow;
}
</style>
</head>
<body>
<!--屬性選擇器-->
<div viewin="ok">雞排飯</div>
<div viewin="ok2">培根炒飯</div>
<div viewin="duo duo2 duo3">多多多</div>
<div viewin="sao1 sao2 sao3">掃掃掃</div>
<div viewin="hahaha">哈哈哈</div>
<div viewin="ghijklmn">啥值我都能匹配</div>
</body>
</html>
