一、
Emment是直接在编辑器上输入HTML和CSS代码的缩写,然后按下tab键
1. div*3 新建三个div标签
<div></div>
<div></div>
<div></div>
2. div#content 新建一个div并且其id为content
<div id="content"></div>
3. ul>li.item$*5
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
4.ul>li.item$$$*5
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>
5. .header
<div class="header"> </div>
6. p[title="Hello world"]
<p title="Hello world"> </p>
7. a:link
<a href="http://"></a>
8. link:css
<link rel="stylesheet" href="style.css" />
9. form
<form action=""></form>
10. input:psaaword
<input type="password" name="" id="">```
11. inout:s
<input type="submit" value="">
12. btn:b
<button type="button"></button>
13. border```
border-top: 1px solid #000;```
14. bd+
bdt+
15. m: a
mt:a
16. c
c:r
17. color: rgb(0, 0, 0);```
color: rgba(0, 0, 0,.5);```
18. c:ra
bgc
19. background-conlor:'''
font-style:'''
20. fs
table+
二、Display属性
none | 此元素不会被显示。 |
block | 此元素将显示为块级元素,此元素前后会带有换行符。 |
inline | 默认。此元素会被显示为内联元素,元素前后没有换行符。 |
inline-block | 行内块元素。(CSS2.1 新增的值) |
list-item | 此元素会作为列表显示。 |
run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
compact | CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
marker | CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
table | 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 |
inline-table | 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 |
table-row-group | 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 |
table-header-group | 此元素会作为一个或多个行的分组来显示(类似 <thead>)。 |
table-footer-group | 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 |
table-row | 此元素会作为一个表格行显示(类似 <tr>)。 |
table-column-group | 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 |
table-column | 此元素会作为一个单元格列显示(类似 <col>) |
table-cell | 此元素会作为一个表格单元格显示(类似 <td> 和 <th>) |
table-caption | 此元素会作为一个表格标题显示(类似 <caption>) |
inherit | 规定应该从父元素继承 display 属性的值。 |
三、CSS里面的属性 样式
border-color: 设置边框颜色
position: absolute 绝对定位
position:relative 相对定位
border-bottom: 1px dotted #CCCCCC:下划线 dotted 虚线
font-weight: bolder:定义字体粗细的属性
bold 定义粗体字符。 bolder 定义更粗的字符 normal 字体的粗细: 中等
text-align: center; 设置居中
:first-child: 伪类向元素的第一个子元素添加样式。
marign: 设置top bottom
font-size:设置字体大小
font-weight:属性设置文本的粗细
text-indent: 2em: /*text-indent 属性规定文本块中首行文本的缩进*/
line-height: 2em: /* line-height 属性设置行间的距离(行高)*/
display: inline-block: /*相当于浮动 块级元素能够在同一行显示*/
background-image:url() :设置背景图片 记得添加高度(不然不显示图片)
background-repeat: no-repeat; 属性设置是否重复背景图像 不重复
background-position:定位背景图像
hover: 选择器用于选择鼠标指针浮动在上面的元素
display: block:让对象成为块级元素(块级元素可以显示,行元素不能显示)
text-decoration: none:消除文本下划线
border-radius: 10px; 边框弧度
padding:设置宽高