CSS属性

css的定义：层叠样式表

css的作用：布局页面，美化页面

css的语法：选择器{样式1；样式2}

css的特性

层叠性：样式可以一条一条叠加；

继承性：父级设置样式，子级会继承该样式；

打破继承性的方式：页面字体都是16px，在子级上写新的样式font-size:18px;，打破他的继承

性

css的引用方式：

1. 外部样式表： 在head标签中使用link标签，引入外部的css文件

2. 内部样式表： head标签内写style标签

3. 行内样式表：标签名后写style属性

优先级：写的离元素越近 ， 行内样式优先级最高

内部和外部的优先级：内部大于外部

css选择器：

作用：精确选择需要渲染需要加样式的标签；

1.标签选择器 p{样式} 选择范围：页面中的所有p标签

2.通配符选择器 *{样式} *选择的是 页面中的所有内容，一般用来加全局的公共样式；

*会把html标签全部找一遍，实际开发中直接把所有标签都写上

3.id选择器 #id值{样式} 首先给元素加一个id属性； 一个id值在网页中只能出现一次

4.class选择器 .class值 同一个元素可以有多个class值，同一个class值可以用给多个标签

5.相邻子级选择器 div>p 选中div为父级的下面紧挨着的第一代子级p标签；

6.派生元素选择器 div p 选中div为父级的下面所有p标签，无论第几代子级；

7.群组选择器 （并集选择器） div，p，img 同级元素组成一组加公共样式；

8.交级选择器 li.first 选中类名为first的li标签

9.兄弟选择器 li+li 选中第二个弟弟元素， 必须是同一级，有共同的父级；

10.伪类选择器 li：hover{background-color：red；} 鼠标悬停在li标签上时li背景色为红色；

li：hover>a{color:red;} 鼠标悬停在li标签上时li内的a标签字体为红色；

选择器权重系数：

id选择器：100

class选择器 ：10

标签选择器： 1

有层级关系的选择器（复合选择器）：每个选择器的权重相加

群组选择器 （并集选择器）：逗号之间权重系数不加

选择器命名规范（见类名的明名规则总结表）

css基础样式

长度单位

1.固定值 px

2.百分比取值：参考点是当前标签的父级尺寸

颜色单位取值

1. 关键字取值

2. 三基色取值 rgb（255，255，255）白色

rgba（125，250，120，0.4）

a代表颜色的透明度，取值范围介于 0.0（完全透明）与1.0（完全不透明）

3. 16进制取值 #fff白色 #000黑色 #333黑色 #ccc灰色 #666 #eaeaea浅灰

尺寸设置

宽度：width

高度：height

最大宽高：max-width max-height

最小宽高：min-width min-height

最大宽高设置一个元素尺寸上下限度

显示：display

display：inline

display：inline-block

display：block

列表样式：

list-style：none

链接样式：

：hover 伪类 权重系数：10

伪类状态选择器

li：hover a{color:red;}

伪类样式四种状态：

刚看到链接标签，鼠标放上去之前的状态：--- ：link；

鼠标悬停上去的状态；--- ：hover；

鼠标按下但没松手的状态；--- ：active；

鼠标按下后松手的状态； --- ：visited；

表格样式：border-collapse:collapse; 边框线双线折叠为单线；

网页三种布局方式：

流动布局 盒模型

浮动布局 浮动

层布局

定位

（浮动和定位元素同样遵循盒模型概念）

盒模型：

元素组成： content padding border margin

content：元素本身的宽高

border：边框

border-width：5px 边框宽度，一个值四条边都是5px，四个值是上右下左

border-style： solid 实线 dashed 虚线

border-color：边框颜色

border：1px solid red ； （border简写）

padding：内边距，边框到内容的距离

padding也是四个方向。 写两个值是上下，左右；三个值是上，左右，下

margin：外边距，元素到元素之间的距离

行标签：垂直方向时padding和margin不占位

盒模型作用：计算元素在网页中实际的占位

元素盒子的宽高计算： content+padding+border；

元素盒子所占位的区域： content+padding+border+margin；

元素之间间距问题：

两个块标签上下的margin以大的为准；

两个元素（包括三种特性标签）：水平方向间距等于两者margin之和；

边距合并现象：

块标签中，子级块标签设置margin-top，父级高度也下来了。浏览器区分不了谁是子级谁是父

级，他们共用一条边框。解决方案：

1. 给子级标签改变输出特征：display：inline-block；

2. 给父级设置padding就撑开了，给子级margin-top去掉。

3. 父级子级设置border，子级再设置margin-top

4. 父级设overflow：hidden，子级再设置margin-top

浮动：子级标签漂浮出父级的约束，一行排列，浮动后的子级不占位；

语法：float：left right none 浮动之后所有标签都具备行内块标签特性

浮动负面影响：

1. 浮动后父级高度消失

2. 浮动之后，第二行内容跟随

浮动后父级高度消失解决办法： 只要使用浮动，必须清除浮动

1. 父级高度消失：给父级设置高度可以恢复 缺点：不提倡给固定高度

给父级设置overflow:hidden,超出部分隐藏。 子级标签内部有下拉菜单，那么就不能使

用overflow-hidden；

2.

3. 给失去高度的父级标签内最后面插入一个不参与浮动的空块级标签，给这个标签添加：

css课程总结

 

 显示：display

display：inline

display：inline-block

display：block

display：none 消失，不占位

背景：background

background-color 背景色

background-image 背景图

background-repeat no-repeat 背景图是否平铺

background-position 水平方向，垂直方向位置移动

background-attachment: fixed ; 背景图固定在网页的可视范围内

背景图默认从左上角开始填进元素盒子中

精灵图（雪碧图）

每写一个图片，向服务器请求一次，文件很大很慢

所有小图标放同一个图里面，通过通过背景图的定位实现不同图标的展现

文本样式

text-align 除了设置文本，还可以设置标签居中，仅仅针对块元素中的行标签和行内块标签

text-indent：缩进，取值px，em（当前文本的大小）

text-decoration：修饰 text-decoration：none；取消下划线；

letter-spacing：改变英文单词之间的标准间隔

word-spacing：改变文字（汉字）之间的间隔；改变字母（英文）之间的间隔；

文字样式：

字体：font-family 计算机显示的字体

大小：font-size

颜色：color

斜体：font-style：italic 斜体

加粗：font-weight：400正常 block（900）最粗

行高：line-height 让单行文字在元素中垂直居中

line-height取值：1：固定数值，2：数值倍数

line-height在什么环境下使内容垂直居中？

块元素父级内只有一行内容时可以实现垂直居中；文本，行内标签都适用。

图片和文字在同一行，如何实现图片和文字都垂直居中？ 分两步

parent{line-height: ;} 先设置父级盒子设line-height，文字垂直居中，此时图片底边线

和文字底线对齐；

1.

2. parent img{vertical-align:middle;} 再给图片设置垂直居中样式。

1. 父级高度消失：给父级设置高度可以恢复 缺点：不提倡给固定高度

给父级设置overflow:hidden,超出部分隐藏。 子级标签内部有下拉菜单，那么就不能使

用overflow-hidden；

2.

给失去高度的父级标签内最后面插入一个不参与浮动的空块级标签，给这个标签添加：

clear：both。缺点：空标签太多

3.

4. 最合适的方法： 给父级添加伪类：谁浮动，给谁的父级设置；浮动类名设为clearfix

父级：after{content：“”；

display：block；

visibility：hidden；

clear：both；

}

第二行内容跟随解决办法：

给跟随的第二行内容的最大父级标签设置：clear：both

定位：position

相对定位：position：relative 定位后依然占位。 以元素自身当前位置左上角为参考点移动；

绝对定位：position：absolute 脱离文档流，不占位 相较于参与定位的父级左上角为参考点

绝对定位元素如何寻找自己的定位父级

1.从自己开始往自己的祖先去找，直到找到了一个有position属性的元素，那么这个元素就是它的定

位父级；不会继续找了；

2.如果找到body的时候，还没有position的元素，那么就以body为定位父级；

一般情况用绝对定位，父级设为相对定位：子绝对，父相对

固定定位：position：fixed 相对于整个浏览器来定位 可以做弹窗 脱离文档流，不占位

z-index 层级关系 取值默认是0，取值越大，越靠上

注意三大定位的区别

案例：让一个元素在窗口上下左右都居中

position：fixed；

left：50%；

top：50%；

margin-left：-元素本身宽度一半；

margin-top：-元素本身高度一半；