| 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> |