css的用法有哪些？小白轻松入门
1.1 选择器语法
选择器{ 样式1;样式2;样式3;……}
1.2 CSS基本选择器
（1）标签选择器
语法:
标签{样式1;样式2;}
p{
font-weight: bolder;
color:darkslategray;
font-family: "微软雅黑";
}
(2) 类选择器
.box2{
border:dotted 2px blue;
}
Html使用类
<div class="box2">box2</div>
<div class="box2">box3</div>
(3) id选择器
/*Id选择器*/
#top{
height: 120px;
}
#middle{
height: 500px;
}
#bottom{
height: 200px;
background: #ccc;
}
html中使用：
<div id="top">
<a href="#">首页</a><a href="#">首页</a><a href="#">首页</a><a href="#">首页</a>
box1
</div>
<div id="middle">
<a href="#">产品1</a>
<a href="#">产品2</a>
<a href="#">产品3</a>
<a href="#">产品4</a>
box2
</div>
<div id="bottom">
<a href="#">友情链接</a>
box3
</div>
(4)通配符选择器
*{
样式1;
样式2;
}
*{
padding: 0;
margin: 0;
}
(5)包含选择器
语法：
E1 E2
table td { font-size:14px; }
.prolist{
width: 200px;
border: solid 1px gray;
}
.prolist h3{
height: 40px;
line-height: 40px;
text-indent: 20px;
}
.prolist ul li{
text-indent: 20px;
border-bottom: dotted 1px gray;
}
Html部分:
<div class="prolist">
<h3>产品导航</h3>
<ul>
<li><a href="">热卖产品</a></li>
<li><a href="">打折产品</a></li>
<li><a href="">特价产品</a></li>
<li><a href="">电子数码</a></li>
<li><a href="">游戏</a></li>
</ul>
</div>
(6) 子选择器
语法：
E1 > E2
<style type="text/css">
/*子选择器*/
body>div{
border: solid 1px gray;
margin: 5px;
}
</style>
<div>
这是第一个的段落
<div>
这是第一个段落中嵌套的段落
</div>
</div>
<div>
这是第二个段落
</div>
(7) 分组选择器
作用：将同样的样式，应用于不同的选择器
语法：
E1,E2,E3,E4{
样式;
}
/*分组*/
/*span,p,a{
color:goldenrod;
}*/
.aa,.bb,#p1{
color:red;
}
<div>
这是第一个的段落
<div>
这是第一个段落中嵌套的段落
</div>
<span class="aa">
这是span标签
</span>
<a href="#" class="bb">这是超链接标签</a>
</div>
<div>
这是第二个段落
<p id="p1">
这是p标签
</p>
</div>
(8) 属性选择器
1. E1[attr]
2. E1[attr=value]
3. E1[attr~=value]
4. E1[attr|=value]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
input{
width: 80px;
height: 40px;
border: solid 1px red;
}
input[type="submit"]{
color: blue;
}
input[name="button"]{
color: red;
}
</style>
</head>
<body>
<form action="1.demo.html" method="post">
<input type="button" name="button" id="" value="普通按钮" />
<input type="submit" name="" id="" value="普通按钮" />
<input type="reset" name="button" id="" value="普通按钮" />
</form>
</body>
</html>
