day02、day03笔记

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 设置文字方向

1. ltr 从左往右
2. rtl 从右往左

text-indent 首行缩进

值是具体的值

word-spacing

设置两个单词之间的距离

letter-spacing

设置两个字符之间的距离

css样式-a标签
a:hover{
	color:#f00;
}
设置鼠标经过a标签，元素变色