1.引入css样式表的三种方式
- 行内式
<div style="width: 100px;"> 123 </div>
- 内嵌式
<head>
<style type="text/CSS">
选择器(选择的标签) {
属性1: 属性值1;
}
</style>
</head>
- 外链式
<head>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>
2.css基础选择器
- 标签选择器
- 类选择器
- id选择器
- 通配符选择器
3.font 字体
- font-size
- font-weight
1. normal 默认不加粗
2. bold 加粗
3. 100-900 400:bold
- font-family
- font-style
1. normal 默认
2. italic 斜体
4.文本外观属性
- color
- text-align (left,center,right)
- line-height
- text-descoration
1.none 取消下划线
2.underine
3.overline
4.line-through
5.其它选择器
6.css背景
7.css 定位
- static 静态定位
- relative 相对定位
- absolute 绝对定位
- fixed 固定定位
relative:
- 相对于 自己原来在标准流中位置来移动的
- 原来在标准流的区域继续占有,后面的盒子仍然以标准流的方式对待它。
absolute:
- 完全不占位置
- 父元素没有定位则以浏览器为准。
fixed:
- 将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。
8.元素的显示与隐藏
display:
- none
- block
visibility:
- visible
- hidden
overflow:
- visible不剪切内容也不添加滚动条
- hidden不显示超过对象尺寸的内容,超出的部分隐藏掉
- scroll不管超出内容否,总是显示滚动条
- auto超出自动显示滚动条,不超出不显示滚动条
9.鼠标样式
- default小白 默认
- pointer小手
- move移动
- text文本
- not-allowed禁止
10.CSS过渡
11.CSS动画
12.CSS 2D转换
- 移动:translate
- 旋转: rotate
- 缩放: scale