李笑来 css,CSS

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.文本节点:向用户展示的内容，如

...中的JavaScript、DOM、CSS等文本。

鼠标事件

o’clock = 点击事件；

onmouseonver = 鼠标经过事件

onmouseout = 鼠标移开事件

on focus = 光标聚焦事件

nobler = 失焦事件

unselect = 内容选定事件

unchange = 文本框内容改变事件

unload = 加载事件

on unload = 卸载事件