css小总结案例
<html>
<head>
<meta charset="utf-8">
<title>css练习</title>
<link rel="stylesheet" type="text/css" href="2.css" />
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.ph1{color:blue;}
span{background:#ccc;}
#ph3{font-size:20px;}
p i {color:red;}
a[href="https://www.baidu.com/"] {font-family:楷体;}
.box1{
width:200px;
height:150px;
background:#ccc;
margin:20px;
padding:30px;
text-align:center;
border:1px solid blue;
}
.box2{
width:200px;
height:150px;
background:#ccc;
margin:20px;
padding:30px;
border-left:1px solid red;
border-right:2px dashed blue;
}
</style>
</head>
<body>
<p style="color:red">内联样式</p>
<p class="ph1">内部样式</p>
<p class="ph2">外部样式</p>
<span>标签选择器</span>
<p id="ph3">id选择器</p>
<p class="ph1">类选择器</p>
<p><i>派生</i>选择器</p>
<a href="http://www.php.cn/">属性选择器</a>
<a href="https://www.baidu.com/">百度</a>
<div class="box1">盒子:内部元素、内边距、边框、外边距</div>
<div class="box2">左右边框</div>
</body>
</html>