第四篇 CSS

时间:2021-04-18 00:32:18

在标签上设置style属性:

background-color:#2459a2;

height:48px;

。。。

编写CSS样式:

如何注释:/* 或 */

一. 在标签的属性中编写

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="background-color: aqua;height:48px;">12fhjkhjjk44</div>
<div style="background-color: red;height:48px">ff1537ff</div>
<div style="background-color: pink;height: 48px">fhajhjak</div>
</body>
</html>

二. 写在head里面,style标签中写样式

1. id选择区

#i1{

background-color: #2459a2;

height: 48px;

}

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
background-color: aqua;height:48px;
}
#i2{
background-color: aqua;height:48px;
}
</style>
</head>
<body>
<div id="i1">12fhjkhjjk44</div>
<div id="i2">ff1537ff</div>
<div style="background-color: pink;height: 48px">fhajhjak</div>
</body>
</html>

2. class选择器

.名称{

...

}

<标签 class=‘名称’>    </标签>

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
background-color: aqua;height:48px;
}
#i2{
background-color: aqua;height:48px;
}
.c1{
background-color: aqua;height:48px;
}
</style>
</head>
<body>
<div class="c1">12fhjkhjjk44</div>
<span class="c1">ff1537ff</span>
<div class="c1">fhajhjak</div>
</body>
</html>

3. 标签选择器

在head标签内的style标签中div{

......

}

所以div设置上此样式

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> .c1{
background-color: aqua;height:48px;
}
div{
background-color: red;color:black
}
</style>
</head>
<body>
<div>12fhjkhjjk44</div>
<span class="c1">ff1537ff</span>
<div>fhajhjak</div>
</body>
</html>

4. 层级选择器

.c1 .c2 div{

......

}

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> .c1{
background-color: aqua;height:48px;
}
span div{
background-color: red;color:black
}
</style>
</head>
<body>
<div>12fhjkhjjk44</div>
<span class="c1">ff1537ff
<div>shjhjhjjhk</div>
</span>
<div>fhajhjak</div>
</body>
</html>

5. 组合选择器(逗号)

6. 属性选择器

对选择到的标签再通过属性再进行一次筛选

.c1 [n='alex'] { width:100px; height: 200px;}

PS:

优先级,标签上style优先,编写顺序,就近原则

css样式也可以写在单独文件中

三 注释

/*     */