2020-07-20

CSS学习

1. 继承

标签未设置的属性会继承父标签设置了的属性，父标签未设置属性会继承父标签的父标签的属性，以此类推。

2. 选择器

div p 选择

元素内部的所有

元素。
div>p 选择父元素为

元素的所有

元素。
div+p 选择紧接在

元素之后的所有

元素。
[target=_blank] 选择 target="_blank" 的所有元素。
[title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。
[lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。
input:focus 选择获得焦点的 input 元素。

3. CSS样式

背景

background-attachment：fixed 背景随着滚动条滚动
background-repeat 背景是否重复

文字

text-indent：首行缩进
如果有要求除首行或者标题等不缩进，其他缩进则可以：

h1{
text-indent : -2em;
}
div{
padding-left : 2em;
}

标题
文字
文字

text-transform:改变字母大小写
text-shadow：文字阴影（属性1：表示向右平移的距离，属性2：表示向下平移的距离，属性3：表示模糊度，属性4：阴影颜色）
word-wrap：文字换行（可以规定宽度）
text-align:center 文字居中

伪类

a:link 普通的未被访问的链接
a:visited 用户已访问的链接
a:hover 鼠标指针位于链接上方
a:active 链接被点击的时刻
注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
注意：伪类的名称不区分大小写。
p:first-child 匹配第一个

元素
p:before 在每个

元素之前插入内容
p:after 在每个

元素之后插入内容

表格

border-collapse: collapse 表格边框折叠（由双行变为单行）
colspan 是合并列，rowspan是合并行，合并行的时候，比如rowspan="2"，它的下一行tr会少一列；合并列的时候 colspan="2"，此行的列会少一列

定位

position:static 默认值
position:relative 相对布局,相对于其正常位置进行定位
position:absolute 绝对布局,相对于 static 定位以外的第一个父元素进行定位
position:fixed 绝对布局,相对于浏览器窗口进行定位

浮动

clear:left 清除左浮动
clear:right 清除右浮动
clear:both 清除所有浮动

盒子模型

外边距会叠加，采用外边距更长的那段，浮动元素不会叠加

兼容性

-ms- IE浏览器
-moz- 火狐浏览器
-webkit- Google Chrome浏览器
-webkit- Safari浏览器
-o- Opera浏览器
-xv- Opera浏览器

CSS动画

transform:translate(100px,200px); 延X轴向右平移100px，延Y轴向下平移200px。
transform:rotate(45deg); 顺时针旋转45度。
transform:scale(1,2); 宽度不变，高度变为原来的2倍。
transform:skew(20deg,30deg); X轴倾斜20度，Y轴倾斜30度。
transform:rotateX(60deg); 延X轴向平面里旋转60度。
transform:rotateY(60deg); 延Y轴向平面里旋转60度。
transition: width 1s linear 2s; 宽度过渡时间1s，过渡方式 linear，等2s开始
animation:anima 5s; 定义一个动画，名称为anima，完成时间5s

@keyframes anima{
0%{}//初始状态
25%{}//动画演示到25%状态
50%{}//动画演示到50%状态
75%{}//动画演示到75%状态
100%{}//动画演示到100%状态
}

权值

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100，继承的权值最低可以看成0.1

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/