CSS三大特性学习

综合练习昨天的内容

综合案例练习 五彩导航

1链接属于行内元素，但此时需要宽度高度，因此需要模式转换

2里面文字需要水平居中和垂直居中，因此需要单行文字垂直居中的代码

3链接里面需要设置背景图片，因此需要用到背景的相关属性设置

4鼠标经过变化背景图片，因此需要用到链接伪类选择器

CSS三大特性

层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式，层叠性主要解决样式冲突的问题

层叠性原则：

• 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个

• 样式不冲突，不会层叠

继承性

CSS中的继承，子标签会继承父标签的某些样式，如文本颜色和字号(与文字相关)，简单的理解就是：子承父业

• 恰当地使用继承可以简化代码，降低CSS样式的复杂性

行高的继承

body {

font: 12px/1.5 Microsoft YaHei ;

}

• 行高可以跟单位，也可以不跟单位

• 如果子元素没有设置行高，则会继承父元素的行高为1.5

• 此时子元素的行高是：当前子元素的文字大小*1.5

• body行高1.5这样写法最大的优势是里面子元素可以根据自己文字大小自动调整行高

优先级

当同一个元素指定多个选择器，就会有优先级的产生

• 选择器相同，则执行层叠性

• 选择器不同，则根据选择器权重执行

继承 或者* 0,0,0,0

元素选择器 0,0,0,1

类选择器 伪类选择器 0,0,1,0

ID选择器 0,1,0,0

行内样式style "" 1,0,0,0

important 最重要 ""无穷大

注意点

• 权重有4组数字组成，但是不会有进位

• 可以理解为类选择器用于大于元素选择器，id选择器永远大于类选择器，以此类推

• 等级判断从左到右，如果某一位数值相同，则判断下一位数值

• 可以简单记忆法，通配符和继承权重为0 标签选择器为1 类(伪类)选择器为10 id选择器为100 行内样式表为100 !important无穷大

 

继承权重为0 如果该元素没有直接选中 不管父元素权重有多高 子元素的大的权重都是0

口述：继承的父元素都为0 除非单独选中的元素才有意义

 

权重叠加

如果是复合选择器，则会有权重叠加，需要计算权重

div ul li ----->0,0,0,3

.nav ul li ----->0,0,1,2

a:hover------->0,0,1,1

.anv a ------->0,0,1,1

CSS盒子模型

页面布局要学习三大核心，盒子模型，浮动 和定位 学习好盒子模型能非常好的帮助我们布局页面

看透网页布局的本质

网页布局过程：

• 先准备好相关的网页元素 网页元素基本都是盒子box

• 利用CSS设置好盒子样式，然后摆放到相应位置

• 往盒子里面装内容

网页布局的核心本质：就是利用CSS摆盒子

盒子模型(box model)组成

盒子模型：就是HTML页面中的布局元素看作是一个矩形盒子，也就是一个盛装内容的容器

CSS盒子模型本质是一个盒子，封装周围HTML元素 他包括：边框、外边距、内边距和实际内容

盒子里面的内容

border边框 content内容 padding内边框(内容与边框的距离) margin外边距(盒子与盒子之间的距离)

盒子模型---边框(border)

boder可以设置元素的边框，边框有三部分组成边框宽度(粗细) 边框样式 边框颜色

border: border-width | border-style | boder-color

boder-width 定义边框粗细，单位是px

border-style 边框的样式 solid实线 dashed虚线 dotted点线

boder-color 边框的颜色

复合边框简写

border: 1px solid red; 没有顺序

边框分开写

border-top: 1px solid red; /*只设定上边框 其余同理 */

先写大的 再写小的