首先是关于html中如何引入CSS
我选择简单点,分为行内式以及内嵌式:
行内式
`<div style="color:red; border: 1px solid red;"> 我是div </div>` ,简单粗暴有效;
内嵌式
在head标签内,使用`<style>`标签
<style type="text/css">
div{
/*
* 设置div中的文字的颜色
*/
color:red;
/*
* 设置div的边框的属性
*/
border:1px solid red;
}
</style>
重点是关于CSS选择器的作用处处理:
语法格式为:
选择器{
样式名:样式值;
}
具体分为三种CSS基本选择器
首先是id选择器的写法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
**#div2**{
color: yellow;
font-size: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--
【需求】选中第二个div,给其添加以下样式
1.字体为黄色;
2.字号为100px;
3.边框 1px solid red;
-->
<div>我是你哥哥</div>
<div **id="div2"**>我是你弟弟</div>
<div >我是我</div>
</body>
</html>
关键是通过 div的id号来选择 并在style中进行引用#id号即可
其次是class选择器的写法:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.myDiv{
color: yellow;
font-size: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--
【需求】选中第二个和第三个div,给其添加以下样式
1.字体为黄色;
2.字号为100px;
3.边框 1px solid red;
-->
<div >我是弟弟</div>
<div class="myDiv">我是哥哥</div>
<div class="myDiv">我是我</div>
</body>
</html>
关键是通过class引入,注意上面style中是通过 .class方式引入