CSS
选择器
类选择器
.class
ID选择器
#idName
相同点可以应用于任何元素
区别
ID选择器为唯一表示,只能出现一次
类选择器:不同元素之间可以用同一类名
子选择器
应用于第一代元素 标识符 >
.className>元素标签{
}
应用于后代所有元素 标识符 空格
.className元素标签{
}
应用于后代所有元素 标识符 *
*元素标签{
}
伪类标签
常用a:hover
标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100
还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
元素
在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有:(display:block)
块级元素特点:
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
常用的内联元素有:(display:inline)
内联元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
常用的内联块状元素有:(display:inline-block)
内联块状元素特点:
同时具备内联元素、块状元素的特点
1、和其他元素都在一行上;
2、元素的高度、宽度、行高以及顶和底边距都可设置。
盒子模型
盒子边框属性
1、border-style(边框样式)常见样式有:
dashed(虚线)| dotted(点线)| solid(实线)。
2、border-color(边框颜色)
3、border-width(边框宽度)
高度宽度
左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
div{
width:200px; //内容宽度
padding:20px;//填充(top,right,bottom,left)
(border-bottom,top,right,left):1px(solid dashed dotted)red;//边框
(margin-bottom,top,right,left):10px; //边界
}
css布局模型
1、流动模型(Flow)
流动(Flow)是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示
2、浮动模型(Float)
实现两个块状元素并排显示 float:left,right.bottom,top
3、层模型(Layer)(图层)
层模型有三种形式:
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
HTML文档可以说由节点构成的集合,三种常见的DOM节点:(document object model)
1. 元素节点:上图中、、
等都是元素节点,即标签。
2. 文本节点:向用户展示的内容,如
3. 属性节点:元素属性,如标签的链接属性href="http://www.imooc.com"。
鼠标事件
o’clock = 点击事件;
onmouseonver = 鼠标经过事件
onmouseout = 鼠标移开事件
on focus = 光标聚焦事件
nobler = 失焦事件
unselect = 内容选定事件
unchange = 文本框内容改变事件
unload = 加载事件
on unload = 卸载事件