css小总结案例

原创2019-02-19 15:18:1295
摘要:<html><head>  <meta charset="utf-8">  <title>css练习</title>  <link rel="stylesheet" type="text/css" href="2.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="//m.sbmmt.com/">属性选择器</a>

  <a href="https://www.baidu.com/">百度</a>

  <div class="box1">盒子:内部元素、内边距、边框、外边距</div>

  <div class="box2">左右边框</div>

</body>

</html>


批改老师:灭绝师太批改时间:2019-02-19 15:23:12
老师总结:前面的知识点比较书面,后面带有案例会精彩很多,继续加油!

发布手记

热门词条