HTML5基础篇之html(三）

今天新教了js 表示有点小压力啊。。。奋斗到了现在 差点忘记了更新……so sorry 下面进入正题

六、a标签的4 种状态

1.link:

正常状态，也就是刚出现时候的状态

2.visited

被点击之后的状态

3.hover:

鼠标悬停时的状态，不仅a标签有hover 其他标签也有hover,只不过悬停时不会出现小手。

4,active

鼠标点住不松手时的状态。

七、css的引入方式

1,行间样式style

优点：优先级高、可以准确定位某一标签、不会增加额外请求

缺点：没有实现样式复用、代码冗余、没有实现结构和样式的分离

2.内部引入<style></style>在head里面引入样式

优点：可以样式复用、不会增加额外请求

缺点：没有从本质上实现内容和样式的分离、多个html文档不能共享或者用相同样式

3.外部引入 <link/>在head里面引入样式，此时需要填写css文件的路劲

优点：可以实现样式复用、从本质上实现了样式和结构的分离、多个html文档可以共享一套样式、可以通过link标签引入多个CSS文件

缺点：（可忽略） 增加了额外请求

八、选择器

1.标签选择器

为某一标签设置样式方便，不能准确定位到某一标签、标签名（样式）

2.类选择器

可以准确定位到某一标签，样式可以复用，一个标签可以设置，一个类名可以被多个标签同时使用、优先级较低

3.id选择器

可以准确定位到某一个标签，id名不能重复，样式不能复用、#id名称（样式）

4.后代选择器

选择器1 选择器2（样式）、优先级计算时是累加的

5.通配选择器

为所有的标签设置统一样式*（样式）

6.群组选择器

选择器1 选择器2 选择器3 （样式）、同时为多个选择器选取同一样式

7.行间样式 style

8.!important

注：选择器的优先级：通配（0）<标签（1）<类（10）<id（100）<后代（1000）<style（10000）<!important

选择器的使用法则或者原则

1>相同类型的选择器，如果产生了样式冲突，听后面或者下面的。（编译时后编译的样式）编译是从上往下的。

2>不同类型的选择器，如果产生了样式冲突，选择器优先级高的是首选样式。

3>选择器优先级不允许跨级比较。

九、浮动（稍微重要了一丢丢哦！！！）

1.left、right、none

2.浮动元素不会超出容器范围，如果空间足以容纳浮动元素，会浮动到下一行。

3.浮动之后的元素是不区分行级和块级，都可以设置宽度和高度，都可以设置四个方向上的margin和padding

4.浮动元素如果不设置宽度和高度，那么就会紧紧包裹住里面的内容。

5.浮动元素不占空间，不会撑开容器高度。

清除浮动

1、为浮动的元素父级设置高度

没有从本质上清除浮动

需要自己算父级的高度，比较麻烦

2.为浮动元素的父级设置overflow:hidden

父级会将内部元素紧紧包裹住，包括浮动元素。这种方式比较简单，也是最常用的，但是它并没有从本质上清除浮动。

3.在浮动元素的同级下面新增元素，并且设置此标签的样式：clear:both

A.从本质上清除了浮动，并且更加灵活地对浮动进行操作。

B 破坏了html结构

html到这边也差不多要告一段落了  不知道是否对大家有所帮助 希望大家有更精彩的小skill可以互相分享哦  嘿嘿  明天见~~~