emmet语法
E代表标签名
E*n 创建n个E标签
E{内容.0}*n 创建n个有内容的 E标签
E{内容$}*n 创建n个带序号内容的 E标签,$表示序号,从1开始
> 表示的是下一个层级元素
E> a 在E标签中添加子元素 a 标签
+ 表示同级
E+p 同时创建兄弟元素E和p
^ 表示上一级
E>p^div 创建 div 标签和 E 标签同级,也就是创建 p 标签的上一级
使用[ ] 设置属性
<!-- a[href="###"]{百度}*5 -->
<a href="###">百度</a>
<a href="###">百度</a>
<a href="###">百度</a>
<a href="###">百度</a>
<a href="###">百度</a>
嵌套练习
标签嵌套规则
1.块标签可以作为一个布局标签,嵌套所有的标签
2.行标签不能嵌套块标签
以下标签不能相互嵌套
1.p 标签,h1-h6都不能相互嵌套,并且他们也不能嵌套块标签
2.a 标签不能相互嵌套
css样式表
<style type="text/css">
.类名{
样式内容
}
</style>
text-align:文本排布,一般放在块元素上,用来控制块标签中 行标签 和 文本的对齐位置
left:左对齐(默认)
right:右对齐
center:居中对齐
css 层叠式样式表
css 引入方式
1.行间引入
2.内部样式表
3.外部样式表(开发时候常用)
<style type="text/css">
@import url('路径') /使用 @import 导入css
</style>
border 属性
border-width 设置border 的 宽度
border-style 设置border 的 样式
合写:
border:width color style
可以单独设置某一个边:
boredr-top
border-bottom
border-right
border-left
常用的border-style 值
1.solid 实线
2.dotted 圆点虚线
3.dashed 短线虚线
4.none 隐藏border
5.double 双实线 (不常用)
color 属性
设置文本颜色
1.英文单词
2.16进制颜色 0-F #aabbcc
3.rgb() rgba() 设置颜色
0-255 0表示黑色,255表示白色
rgba中的a表示 透明度,0-1, 0表示完全透明, 1 表示完全不透明
text-decoration 文本修饰
1.underline 下划线
2.overline 上划线
3.line-through 中划线(删除线)
4.none 去掉线
text-transform 文本转化
1.lowercase 全部小写
2.uppercase 全部大写
3.capitalize 单词的首字母大写
line-height 行高
1.单行文本 设置与标签height高度相同,可以做垂直居中效果
2.多行文本 行间距
direction 设置文字方向
- ltr 从左往右
- rtl 从右往左
text-indent 首行缩进
值是具体的值
word-spacing
设置两个单词之间的距离
letter-spacing
设置两个字符之间的距离
css样式-a标签
a:hover{
color:#f00;
}
设置鼠标经过a标签,元素变色