在标签上设置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样式也可以写在单独文件中
三 注释
/* */