/注釋/
一、基本選擇器
1. 標(biāo)簽選擇器 span{}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
font-size:20px;
color:red;
}
</style>
</head>
<body>
<span>文本內(nèi)容</span>
</body>
</html>
2.ID選擇器 #sp1{}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#sp1{
font-size:20px;
color:red;
}
#sp2{
font-size: 20px;
color: blue;
}
</style>
</head>
<body>
<span id="sp1">文本內(nèi)容</span>
</br>
<span id="sp2">好好學(xué)習(xí)</span>
</body>
</html>
3.類選擇器 .sp1{}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.sp1{
font-size:20px;
color:red;
}
.sp2{
font-size: 20px;
color: blue;
}
</style>
</head>
<body>
<span class="sp1">文本內(nèi)容</span>
</br>
<span class="sp2">好好學(xué)習(xí)</span>
</body>
</html>
4.通配選擇器
*{}
注：通配選擇器<標(biāo)簽選擇器<類選擇器<ID選擇器<行內(nèi)式
!importan提示優(yōu)先級(jí)
div：塊級(jí)元素，獨(dú)占一行，可以設(shè)置寬高
span：行內(nèi)元素，一行可以顯示多個(gè)，設(shè)置寬高無(wú)效
二、復(fù)合選擇器
1.后代選擇器
選擇器1 選擇器2
2.子代選擇器
選擇器1>選擇器2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.div1>span{
font-size: :20px;
color:red;
}
</style>
</head>
<body>
<div class="div1">
<span>文本內(nèi)容</span>
<div class="div2">
<span>這是嵌套內(nèi)容</span>
</div>
</div>
</body>
</html>
3.交集選擇器 選擇器1.選擇器2{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
span.cls1{
font-size: :20px;
color:red;
}
</style>
</head>
<body>
<div >
<span class="cls1">文本內(nèi)容</span>
</div>
<div class="cls1">
<span class="sp2">這是嵌套內(nèi)容</span>
<p class="cls1">ccccc</p>
</div>
</body>
</html>
4.并集選擇器 選擇器1，選擇器2{}
div span轉(zhuǎn)化
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.sp1{
font-size:20px;
background-color: black;
color:red;
display: inline-block;
height: 100px;
}
.sp2{
font-size: 20px;
color: blue;
display: inline-block;
background-color: black;
}
</style>
</head>
<body>
<span class="sp1">文w本內(nèi)容</span>
<span class="sp2">好好學(xué)習(xí)</div>
</body>
</html>
三、超鏈接
a:link {color:#FF0000;} /* 未訪問(wèn)的鏈接 /
a:visited {color:#00FF00;} / 已訪問(wèn)的鏈接 /
a:hover {color:#FF00FF;} / 鼠標(biāo)劃過(guò)鏈接 /
a:active {color:#0000FF;} / 已選中的鏈接 */
四、盒子
border padding會(huì)改變盒子大小
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{
width: 90px;
border-bottom-color:black ;
border-bottom-style: solid;
height: 100px;
background-color:red ;
margin-bottom:5px ;
padding-top: 10px;
padding-left: 10px;
}
.div2{
width: 100px;
height: 100px;
background-color: blue;
}
span{
background-color: blue;
}
</style>
</head>
<body>
<div class="div1">
<span>內(nèi)容</span>
</div>
<div class="div2">
</div>
</body>
</html>
overflow: hidden; - 設(shè)置邊框
設(shè)置行高，水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
line-height: 250px;
text-align: center;
}
</style>
</head>
<body>
</body>
</html>
