1.CSS简介
CSS作为网页的表现
CSS是层叠样式表,不属于编程语言
CSS英文全称:Cascading Style Sheet
2.CSS常见属性
text-align:文字的水平对齐方式;常见值:center、left、right;
vertical-align:元素的垂直对齐方式;常见值:text-top;text-bottom;middle;
font-size:字体大小
3.CSS选择器
(1)元素选择器
通过元素名选择
(2)id选择器
只能在元素中唯一命名,不能重复
使用+id值选中
(3)类/class选择器
可以重复命名,通过+类名选中
一个元素可以使用多个类名,用空格隔开
(4)伪类选择器
一个特殊的类,表示元素的特殊状态
点击时效果,鼠标引入时效果
选择器:伪类名
frist-child:同类元素中的第一个元素
nth-child:选择同类元素中的指定
last-child:同类元素中的最后一个元素
n表示0到正无穷
2n表示偶数
4.display展示
用于控制HTML元素的显示效果。
值 意义
display:"none" HTML文档中元素存在,但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block" 默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充剩下的部分。
display:"inline" 按行内元素显示,此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block" 使元素同时具有行内元素和块级元素的特点。
5 边框属性
border-style 设置4个边框的样式。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。
dashed 定义虚线。
none 定义无边框。
6. 盒子模型
网页就是由许多个盒子通过不同的排列方式堆积而成,网页上每个元素都被浏览器看成是一个矩形的盒子,这个盒子由元素的内容,填充,边框,边界组成。默认盒子边框无,背景色透明,默认看不到盒子
6.1 盒子模型
margin 外边距,定义区块外边界与上级元素距离的属性,值为长度
padding 内边距(填充),是设置区块的内边距的属性,是边框和元素内容之间的间隔距离
border 边框(注意边框是有内外俩条边界的)
width 盒子的宽度
height 盒子的高度
内容 盒子里面所包含的元素和内容
属性值:
1个:上下左右都是该值
2个:前者表示上下的值,后者表示左右的值
3个:前者表示上边的值,中间表示左右的值,后者表示下边的值
4个:上右下左,顺时针排序
6.2不同浏览器解析盒子模型的差异
IE5盒子 width = 内容 + border + padding
盒子占据的宽度 = margin2+width
盒子占据的高度 = margin2+height
盒子实际的宽度 = width
盒子实际的高度 = height
W3C盒子 width = 内容
盒子占据的宽度 = margin2+border2+padding2+width
盒子占据的高度 = margin2+border2+padding2+height
盒子实际的宽度 = border2+padding2+width
盒子实际的高度 = border2+padding2+height