css部分详解

一.css概念

Cascading Style Sheets:层叠样式表

白话:一层一层的属性表,多个属性多个样式

css原理:把属性从标签中分离 来单独控制页面元素的样式

html原理:用标签来封装数据 用属性控制样式

html提供标签封装数据 css提供属性控制样式

css优点:

1. 提供丰富精准的样式
2. 标签和属性分离 方便样式复用
3. 实现页面元素的任意布局
4. 有更好的兼容性

二.使用方式

1. 行内:通过标签的style属性控制样式 缺点:样式在标签内,无法复用
2. 内部:写在head内,通过head的子标签style控制样式 缺点:不能跨页面
3. 外部:外部通过css文件控制样式,可以在style标签中通过@import或用link标签引入

三.css选择器

1. id选择器 格式: #id{}
2. 标签选择器 格式: 标签名{}
3. 类选择器 格式: .class{}
4. 通配符选择器 格式: *{}
5. 组合选择器 格式: selector1,selector2,selector3…{}
6. 派生选择器 格式: fuSelector ziSelector{}
7. 伪类选择器 格式: 标签名:selectorName{}

• css选择器的优先级:

行内(style属性)>id选择器>类选择器>标签选择器>通配符选择器

四.盒子模型

理解:把页面分成一块一块的区域

相关属性:border |margin |padding

五.布局:浮动

float:浮动

float:left 内容向左排队

float:right 内容向右排队

clear:left/right/both 作用:取消上一个内容的float命令(因为上一个内容的float会影响下一个内容的布局)

注意:

1. 当上一个内容有float属性时,下一个内容必须设置float/clear属性
2. float+margin实现页面布局

六.布局:定位

position:位置

position:absolute(绝对位置)

absolute:一般情况下是内容相对于body的位置,但如果当前内容有父标签,父标签设置position属性,那当前内容的位置就相对于父标签

position:relative(相对位置)

relative:相对于内容原来的位置