HTML--CSS样式

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：默认箭头