css与html是内容与形式的关系,HTML生成内容,CSS负责样式
- 引入CSS样式的方法
- 行内样式 :定义在标签内使用style属性定义
- 嵌入式:定义在<head></head>标签内
- 导入式:
- 链接式:<link href="XXX.css" rel="stylesheet" type="text/css"/>
2.选择器
- 标签选择器
- 类别选择器
- id选择器
- 交集选择器
- 并集选择器
- 后代选择器
- 兄弟选择器
3.继承 子类继承父类的样式,在此基础上更改自己的样式,子类样式的修改并不影响父类的样式
4.层叠规则 样式优先级:行内样式>ID 样式>类别样式>标记样式
越特殊的样式优先级越高
盒子模型 border padding margin
标准文档流 :在不使用其他的与排列和定位相关的特殊CSS规则时,各种元素的排列规则
我的理解就是按顺序的文档,不使用float和position属性的absolute形成的文档 HTML文件
定位静态定位:
相对定位:相对于原本的位置,通过偏移指定的距离,到达新的位置
绝对定位:相对于最近的已经定位的父元素进行定位
固定定位:基于浏览器窗口或者其他设备的显示窗口
z-index 值大的位于值小的上方,换句话就是值越大越先显示,不过是针对同一块地方的显示顺序
display 属性
inlinea:行内元素
inline-block:行内块元素
block:块元素
文字Font
font-size:字号 font-weight:字体粗细
font-style:字体风格 font-family:字体
段落
text-align水平对齐方式 行高line-height
text-decoration 设置下划线等效果 text-indent首行缩进 文本阴影 text-shadow: h-shadow v-shadow blur color;
边
- 边框border
- padding内边距
- margin外边距
颜色、大小、样式
border padding margin 大小即粗细的参数个数分别设置的哪个方向的样式
参数值为2 :前一个数值是上下,后一个数值是左右
参数值为3个数字分别表示上、左右、下
参数值为4个数字分别表示上、右、下、左
backgound-image:url(" ")
background-repeat:repeat、no-repeat、repeat-x、repeat-y
background-color:color;
background-position:....;