CSS樣式表
樣式表的基本結(jié)構(gòu)
<style>:樣式風(fēng)格標(biāo)簽料睛;放在head頭部,是一個(gè)雙標(biāo)簽
屬性:type="text/css"
A:標(biāo)簽選擇器:標(biāo)簽名{屬性名:屬性值}
文本屬性:color,font-family,font-size
<style type="text/css">
p{color:red}
<html>
<head>
<title></title>
<style type="text/css">
p{color: red}
</style>
</head>
<body>
<p>段落1</p>
床前明月光
<p>段落2</p>
疑是地上霜
</body>
</html>
B:類(lèi)選擇器: .類(lèi)名{屬性名:屬性值}
.blue{color:blue}
.red{color:red}
<html>
<head>
<title></title>
<style type="text/css">
.blue{color: blue}
.red{color: red}
</style>
</head>
<body>
<p class="blue">段落1</p>
床前明月光
<p class="red">段落2</p>
疑是地上霜
</body>
</html>
A和B同時(shí)設(shè)定時(shí)類(lèi)>標(biāo)簽
另一種可以設(shè)置CSS樣式表運(yùn)用到HTML中架谎,在頭部head中輸入
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="abc.css">
</head>
<body>
<p class="blue">段落1</p>
床前明月光
<p class="red">段落2</p>
疑是地上霜
</body>
</html>
<link reel="stylesheet" href="abc.css " type="text/css">
C:id選擇器:#id
屬性:position:absolute讲冠,left,top,width,height,z-index:1(第一層)
<div>:屬性:id=''層數(shù)''
<html>
<head>
<title></title>
<style type="text/css">
#id1{
position: absolute;
left: 50px;
top: 50px;
width: 200px;
height: 300px;
z-index: 1;
background-color: blue
}
#id2{
position: absolute;
left: 50px;
top: 150px;
width: 200px;
height: 200px;
z-index: 2;
background-color: red
}
#id3{
position: absolute;
left: 50px;
top: 250px;
width: 200px;
height: 100px;
z-index: 3;
background-color: pink
}
</style>
</head>
<body>
<div id="id1"></div>
<div id="id2"></div>
<div id="id3"></div>
</body>
</html>