html元素 css样式 选择器

fieldset元素-为控件分组
legend元素-为分组指定一个标题

<fieldset>
       <legend>地址信息</legend>
       地址：<input type="text">
       邮编：<input type="text">
</fieldset>

浮动框架：iframe
可以在一个浏览器窗口中同时显示多个页面文档
-在页面上使用iframe元素
-设置iframe元素的src属性，指向其他页面的URL
主要属性：
-src:浮动框架中的网页的URL
-height:高度
-width:宽度
-frameborder=”0/1” :边框
scrolling=“no”是否有滚动条

发票信息：
页面上经常需要将部分信息进行展开或者收缩
details元素用于定义细节
summary元素用来包含details元素的标题
目前只有Chrome支持

marquee:弹幕效果
主要属性：
behavior=”scroll”滚动效果/“alternate”晃动效果
scrollamount=”100” 滚动速度
direction=“up left right down”滚动方向

css样式：
1.什么是css
CSS : Cascading Style Sheet
层叠样式表、级联样式表、样式表
2.样式表的作用
修改页面中元素的显示样式
能够实现内容与表现分离
提高代码的可重用性和可维护性
3.HTML和CSS之间的关系
HTML：构建页面（人）
CSS：构建HTML元素的样式（化妆师）
HTML是页面的内容组成，CSS是页面的表现

1.内联样式（行内样式）
在html元素中声明样式内容 每个属性都具备stye属性
css语法：

1允许出现多个属性：值 对
2每对之间用；隔开
特点：只作用在所定义的标签内，其他标签不受影响
2.内部样式表
样式定义在html中的head中
特点：定义好内部样式表后，当前页面中所有的标签都可以使用定义好的样式可以实现代码重用。
使用方法：
1.在head中定义style
2.在style元素中添加样式规则
引入外部样式表：
1.通过link引入
2.@import(URL)
**区别：1.@import只能引入css样式表 link还可以引入其他文件
2.@import等到页面加载完成才加载 link网页加载同时就加载
3.@import(兼容性问题)只能支持IE5级以上的浏览器
4.用JS的DOM操作改变页面样式的时候，只能改变link引入的css样式**

css样式表特征：
1、继承性
2、层叠性
一个选择器可以被重复定义
在多个不同的定义中，不重读的属性可以层叠到一起
如果属性重复的话，以后定义的为准
3.优先级
样式定义冲突时，按照不同样式的优先级来使用样式
1.浏览器缺省设置（最低）
2.外部样式表或内部样式表
-就近原则
3.内联样式（最高）
4.！improtant
手动调整样式属性的优先级

css基础选择器：
什么是选择器：
1.当前样式规则的名称
2.规范哪些元素能够使用当前的样式规则

通用选择器：
语法：*
作用：匹配页面中所有元素
*{属性：值}
使用场合：定义当前页面中最基本的显示样式，如：字体、大小

元素选择器
语法：html文档中的元素，就是选择器
作用：更改某个元素（标签）的默认显示样式

类选择器：（类样式）
作用：定义一组元素的通用样式
语法：className
注意*：类名不能以数字开头*
.important{}
.set{}
.s1{}
.1action{}错误
使用：通过标签的class属性，来引用定义好的类名

分类选择器（分类样式）
将类选择器和元素选择器进行结合，主要针对某种元素不同的类进行细分控制
语法：元素选择器 . 类选择器
p.important{} : 控制class属性值为important的p标签的样式
div.warning{} : 控制class属性值为warning的div标签的样式

id选择器（id样式）
作用：定义某一元素的固定样式
语法：#idName
使用：通过标签的id属性值进行引用

元素选择器#id选择器{}
#most{}
div#most{}

群组选择器：
声明以，隔开的选择器列表
div,span,.most,#main,div.important{
color:blue
}
#div1,#div2,#div3,seation{
background-color:red;
}
#div1{
font-size:30px;
}

后代选择器
通过元素的位置关系来匹配到元素
语法：选择器1 选择器2{}
div span{}:匹配到div中所有的span元素
#myDiv .important{}:

<div id="myDiv">
    <span class="important">  </span>
</div>

子代选择器
两个元素间只能是父子关系
语法：选择器1>选择器2
h1>b>span{}

伪类选择器
作用：根据某一元素不同的状态来进行样式声明
语法：
选择器：伪类{}
伪类分类：
1.链接伪类
：link，适用于尚未访问的链接
：visited，访问过后的链接
2.动态伪类：
：hover，适用于鼠标悬停在元素时
：active，元素被激活
：focus，元素获取焦点时（多用于文本框，密码框等表单元素）
3。目标伪类；
4.元素状态伪类
5.结构伪类
6.否定伪类