![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：
Collection
Collection
代码：
html:
<body><a href="//m.sbmmt.com">PHP中文网</a></body>
标签的四种状态：
css：样式
1、默认状态：没有访问、点击a:link{ color:blue; }
2、已访问过的状态a:visited{ color:green; }
3、悬停状态a:hover{ color:red; }
4、激活，当鼠标点击压下去的时候a:active{ color:yellow; }
html:
<form action=""><p>用户名：<input type="text" readonly autofocus></p></form>
css:input:read-only{ background-color:linghtgreen; }
html:
<form action=""><h2 class="on" id="foo">选择器优先级</h2></form>
1、当选择器相同时，与书写顺序有关，后面的样式覆盖前面的
css：h2{ color:gold; }h2{ color:blue; }
显示：蓝色
2、当选择器不同时与优先级相关，级别高的覆盖级别低的。如果仍想提升选择器的优先级，此时到了 class 我们应该用 Id 级
css:#foo{ color:gold; }.on{ color:blue; }
结论： ID > class 类 > tag 标签
选择器的类型对优先级的影响
css:.on{ color:gold; }h2{ color:blue; }
显示： 金色
原因：ID > class 类 > tag 标签
实际工作中，应该用一系列的选择器组合来灵活的设置优先级
大家都是标签级，为什么写到后面的无效，一定有一个规则
css:body h2{ color:gold; }h2{ color:blue; }
显示： 金色
原因：有一个计算公式：[id 选择器的数量，class 选择器的数量，tag 选择器的数量]
body h2 的权重[0,0,2]
h2 的权重[0,0,1] 这个的标签权重少（低）
具体标准：
[1,0,0]>[0,1,1]>[0,1,0]>[0,0,3]
注意：如果想继续提权，选择一个比 body h2 权重级别高的组合就可以。
书写顺序 tag/class/id {…}
1、字体属性
h2{font-style: italic;font-variant: small-caps;font-weight: bold;font-size: 12px;font-weight: bold;line-height: 140%;font-family: arial;}
简写：h2{font:italic small-caps bold 12px/140% arial }
h2{background-color: #FFF0000;background-image: url(../img/1.png);background-repeat: no-repeat;background-attachment: fixed;background-position: 0 0;}
简写：h2{background:#FFF0000 url(../img/1.png) no-repeat fixed }
.box{width:200pxheight:200pxbackground-color:violet;box-sizing:border-box;}
.box{边框\每个可以设置三个属性：宽度，样式，颜色border-top-width:5px;border-top-color:red;border-top-style:solid;}
简写:.box{border-top:5px red solid}
内边距 padding：上 右 下 左；顺时针方向
简写:{padding: 5px 10px 15px 20px;}
{padding:10px 20px 15px} (上 左右 下)
{padding:10px 20px} （上下 左右）
{padding:10px } （上下左右）
外边距 margin: 上 右 下 左；顺时针方向
简写:{margin: 5px 10px 15px 20px}
{margin: 5px 10px 15px} （上 左右 下）
{margin: 5px 10px} （上下 左右）
{margin：5px} （上下左右）
