电话
13363039260
Css有哪些用法？小白轻松入门
2024-01-17 10:52 小编
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>
Css有哪些用法？小白轻松入门
(6) 子选择器
语法：
E1 > E2
<style type="text/css">
/*子选择器*/
body>div{
border: solid 1px gray;
margin: 5px;
</style>
<div>
这是第一个的段落
<div>
这是第一个段落中嵌套的段落
</div>
</div>
<div>
这是第二个段落
猜你喜欢
联络方式：
13363039260
微信二维码 