前言
前面学完了CSS的简介和使用。我有学习了CSS的基础选择器,下面分享一下我的学习笔记。
选择器
选择器写法
选择器{
属性名称:属性值;
属性名称2:属性值2;
...
}
基础选择器
1.id选择器
id选择器是通过在html标签中设置id属性,在style标签里面用#id名称
找到id用css代码设置样式。
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
color: red;
}
</style>
</head>
<body>
<div id="box">这是一个盒子</div>
</body>
</html>
效果图:
2.类选择器
类选择器是通过在html标签中设置class属性,在style标签里面用class名称.
找到class名称用css代码设置样式。
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
color: green;
}
</style>
</head>
<body>
<div class="box">这是一个盒子</div>
</body>
</html>
效果图:
3.标签选择器
标签选择器是通过在html页面中,在style标签里面用标签名称.
找到标签用css代码设置样式。
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
color: blue;
}
</style>
</head>
<body>
<p>这是一个盒子</p>
<p>这是一个盒子</p>
<p>这是一个盒子</p>
<p>这是一个盒子</p>
</body>
</html>
效果图: