html

样式

1.样式分为内联样式和外联样式:
	内联样式:样式代码直接写在当前html页面中
	外联样式:样式写在XXX.css文件中,并且在需要的页面中,使用Link标签引入
2.样式:
样式代码是写在head标签中的style标签里的代码,主要是给html(网页)内容进行排版和颜色字体设置的
	id选择器
	类选择器
	标签选择器
	迭代选择器
注意:
	样式是可以通过先后执行的顺序被覆盖的
	执行的先后顺序:标签选择器>类选择器>id选择器

id选择器

id选择器:根据标签中的id属性值,查找对应的标签(查找到一个标签)
注意:每个标签中的id都是唯一的(可以设置相同的,但是不建议)
html中每一个标签都相当于是一个盒子,用来存放内容

id选择器:#id名

类选择器

类选择器:根据标签中的class属性值,查找对应的标签(查找到多个标签)

.class

标签选择器

标签选择器:根据标签的名字查找到对应的标签(查找多个标签)

idv

迭代选择器

迭代选择器:查找当前标签的后代标签(查找可以是单个也可以是多个标签)
div>span:找到div标签中的儿子span标签
div span:扎到div标签中的所有后代span标签

div>span
div span

样式的设置方法

1.设置宽度: -->width:
2.设置高度: -->height:
3.设置边框: -->border:() -->三个参数:边框的粗细,实现solid/虚线dashed,颜色
注意:颜色可以使用16进制代码,例如#eaeaea(百度颜色代码对照)
4.设置背景颜色: -->background:
5.设置字体颜色: -->color:
6.设置字体: -->font-family:
7.设置字体大小: -->font-size:
8.设置字体加粗: -->font-weight:
9.水平居中: -->text-align: center
10.垂直居中: -->line-height:
注意:垂直居中的像素值必须和标签设置的高度一致
11.设置边框的圆角: -->border-radius:
12.去掉li标签的小黑点: -->list-style:
13.标签的浮动: -->float:
注意:添加了浮动之后,每个标签实际还是独占一行,质数这些标签之间存在了空间效果(即不在同一个平面中独占一行)
14.下划线: -->text-decoration:
15.外边距: -->margin:
16.内边距: -->padding:
注意参照物不同,使用的内外边距不同
例如:两个div的距离(实际上是属于两个盒子之间的距离:可以采用外边距)
17.绝对定位:标签的距离只跟浏览器有关系(以浏览器为参照物) -->position:absolute
18.相对定位:标签的距离和自己原来的位置有关系(以原来的位置为参照物) -->position:relative
19.样式当中的鼠标悬停事件: -->XXX:hover