1.标签选择器 |
|
div{} |
|
2.类选择器 |
|
.one class="one" |
|
3.id选择器(定义+调用) |
|
#one{} id="one" |
|
4.通配符选择器 |
|
*{} |
|
5.后代选择器 |
|
.one a {} |
|
6.子代选择器 |
|
.one>a{} |
|
7.交集选择器 |
|
p.one {} |
|
8.并集选择器 |
|
.one,.two {} |
|
9.伪类选择器(1个经常使用的) |
|
a:hover{} |
|
|
|
10.宽度100 |
|
width:100px; |
|
11.高度150 |
|
height:150px; |
|
12.字体大小20 |
|
font-size:20px; |
|
13.字体不加粗 |
|
font-weight:normal 400 bold 700 |
|
14.字体倾斜 |
|
font-style:normal; italic; |
|
15.字体微软雅黑 |
|
font-family:"微软雅黑"; |
|
16.背景颜色红色 |
|
background-color:red; |
|
17.背景颜色黑色,透明度0.5 |
|
background-color:rgba(0,0,0,0.5); |
|
18.背景不平铺 |
|
background-repeat:no-repeat; |
|
19.背景位置 |
|
background-positio:center center; |
|
20.文本方向水平居中 |
|
text-align:center; |
|
21.文本方向垂直居中(高30) |
|
line-height:30px; |
|
22.首行缩进2格 |
|
text-indent:2em; |
|
23.取消下划线 |
|
text-decoration:underline; none; |
|
24.圆角矩形为圆形 |
|
border-radius:50%; |
|
25.右浮动 |
|
float:right; |
|
26.左外边距20 |
|
margin-left:20px; |
|
27.右内边距10 |
|
padding-right:10px; |
|
28.绝对定位 |
|
position:absolute; |
|
29.相对定位 |
|
position:relative; |
|
30.过渡属性 |
|
transition:all 0.4s; |
|
31.背景复合属性 |
|
background:url() no-repeat 0 0 center; |
|
32.边框 |
|
border:1px soild(deshed) pink; |
|
|
|
|
|
33.div标签 |
|
<div></div> |
|
34.span标签 |
|
<span></span> |
|
35.单选按钮 |
|
<input type="radio" name="" id=""> |
|
36.文件上传 |
|
<input type="file" name="" id=""> |
|
37.提交按钮 |
|
<input type="submit" name="" id=""> |
|
38.文本域 |
|
<textarea name="" id="" cols="30" rows="10"></textarea> |
|
39.密码框 |
|
<input type="password" name="" id=""> |
|
40.下拉菜单 |
|
<select name="" id=""> |
|
<option value=""></option> |
|
</select> |
|
41.无序列表 |
|
<ul> |
|
<li></li> |
|
</ul> |
|
42.自定义列表 |
|
<dl> |
|
<dt> |
|
<dd></dd> |
|
</dt> |
|
</dl> |
|
43.标题5 |
|
<h5></h5> |
|
44.段落标签 |
|
<p></p> |
|
45.表单域 |
|
<form action=""></form> |
|
46.普通文本框 |
|
<input type="text" name="" id=""> |
|
47.表单普通按钮 |
|
<input type="button" name="" id="" value="普通按钮"> |
|
<button>普通按钮</button> |
|
48.加粗 |
|
<b></b> <strong></strong> |
|
49.倾斜 |
|
<i></i> <em></em> |