1.引入css文件
<link rel="stylesheet" href = "index.css">
2.优先级
!important
3.选择器
3.1 元素选择器
标签名+{}
div{}
3.2 class选择器
. +classname+{}
.class{}
3.3 通配符选择器
*{}
3.4 兄弟选择器
div~p{}
选择与div同级的p
3.5 相邻选择器
div + p{}
必须相邻,不能间隔
div +p+p{}
选择前面有div和p 的p
3.6 子代选择器
ul > li{}
只选择ul的子代,非所有后代
3.7 后代选择器
div + 空格 + li{}
div后代中所有li
4.文字属性
font- family 字体
font-size 字体大小 px 像素
rem 相对于跟标签字体大小(浏览器默认)
em % 相对于父级的字体大小
font- style 字体样式 italic 斜体
font-weight 字体粗细 bold
lighter
直接赋值 100-700 整百数
color:字体颜色
5.文本属性
文字多时,单行展示,多余用省略号代替
white-space:nowrap; 单行显示不换行
over-flow:hidden 超出隐藏
text-overflow:ellipsis 超出部分用省略号代替
text-indent : 2em 首行缩进
line-height : 10px 行高
text-align:left/right/center 水平对齐
vertical-align: 垂直方向
text-decoration : underline 下划线
overline 上划线
line-through 删除线
text-transform 文本大小写
none
uppercase
lowercase
capitalize
6.a标签
a:link{} 未被点击的连接
a:visited{} 已被点击的连接
a:hover{} 鼠标悬停
a:active{} 鼠标按下但未放开
7.背景
background-color
background-image :url(“img/01.jpg”)
background-repeat 背景铺盖
no-repeat
repeat-x
repeat-y
background-size 可以赋值
cover 铺满
contain 单方向铺满
background-position 图片位置
x轴 y轴
只给一个值默认x轴,Y轴居中
还可以botton right
8.盒子模型
对四个方向赋值时,顺时针,没有值时找对边
盒子大小=内容+内边距+边框
8.1边框
border
border-color
border-width
border-style
border-left/right/top/bottom
border-radins:50% 圆角
8.2内边距
padding
padding-left/right/top/bottom
8.3外边距
margin:auto
margin–left/right/top/bottom
垂直方向,两个盒子间距取较大值
水平方向,取两者之和
overflow:hiddin 解决内边距重叠问题
9.浮动
让元素脱离正常的文档流。遇到父级的边界或者相邻的浮动元素就会停下来。
浮动只能左右浮动
清除浮动引起的高度坍塌
.clearfix:{
content :"";
display : block;
clear:both;
}
10.定位
10.1 定位的两个属性
position属性: static,relative,absolute,fixed
top/left/right/bottom属性:具体数值
10.2 属性值
static: 默认,不能做定位父级
relative:相对定位 不会脱离文档流,以自身元素为参考
absolute:绝对定位 脱离文档流,默认以整个文档为参考,有定位父级则参考父级
fixed:固定定位 脱离文档流,默认以窗口为参考,窗口滚动,位置不变
10.3层级
z-index:
默认为0,值越大,越考上
11.hover
li:hover{
cursor:pointer/wait/help/default
}
pointer :手指
wait:等待
help:帮助
default:默认箭头