加强css

css

css（cascading style sheets）层叠样式表，css的书写直接决定网页的美观与否。是整个前端必不可少的一部分，但是我长期以来前端的工作重心都是放在js上，忽略了对css进行系统性的学习，因此在工作过程中，为了实现某一特效，也走了不少弯路。
本文将致力于对自己css方面的知识进行查漏补缺，会记录一些实用的且自己甚少或没有使用的功能。也会记载一些易忽略的知识点，方便以后回顾。

1、样式的引入

外联：<link rel='stylesheet' href='...'>
内部：<style>...</style>
内联：style="..."

2、文本相关

text-decoration：默认none，overline：顶部划线，line-through：删除线，underline：下划线
text-transform:默认none，uppercase：全大写，lowercase：全小写，capitalize：首字母大写
text-indent:具体像素值，即首行缩进具体像素值
letter-spacing：具体像素值，指定字符间距
word-spacing：单词之间的间距

3、链接相关

a标签的四种状态，a:link、a:hover、a:active、a:visited;分别表示未访问、悬浮、点击、访问过状态
a:hover必须跟在a:link、a:visited后面；a:active必须跟在a:hover后面

4、定位相关

position: relative | absolute | fixed | static | inherit | sticky
前面几个属性值没什么好说的。当属性值为sticky时，元素定位介于relative和fixed之间。即当元素在可是范围内定位为relative，当页面滚动超出可是范围就定位为fixed。参考

5、css组合选择器

div p：所有div后代的p标签
div>p: 所有div的直接子元素p标签（范围比第一个小）
div+p: 位于div后的直接相邻兄弟元素p标签（范围比下面的小）
div~p: 所有位于div后的兄弟元素p标签

6、伪类、伪元素相关

伪类基于当前元素的状态进行操作。伪元素基于内容进行操作。
p:first-line p标签的第一行文本
p:first-letter p标签的首字符（只能用于块级元素）
input标签拥有众多伪类，可以方便做输入验证等

7、css属性选择器

[attr] 选择包含attr属性的标签
[attr=value] 选择属性attr值等于value的标签
[attr~=value] 选择属性attr值包含value的标签
[attr^=value] 以value开头
[attr$=value] 以value结尾

css3相关

8、背景添加多图

background: url(..) .. .. ..,url(..) .. .. ..;

9、添加阴影叠加效果

box-shadow: 0 4px 8px 0 raba(0,0,255,0.2),0 6px 20px 0 rgba(0,0,0,0.19);

10、文本换行

word-wrap:break-word; 单词过长强制拆分

11、css3 2D转换

transform: translate() | rotate() | scale() | skew() | matrix();
translate(x,y): 从当前元素位置移动；值可以具体像素也可以为百分比
rotate(x): 元素旋转；正数顺时针，负数逆时针。单位deg；
scale(x,y): 改变元素大小；宽为原来x倍，高为原来y倍；无单位；
skew(x,y): 元素倾斜；单位deg

12、图片滤镜

filter: blur() | brightness() | contrast() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | speia() | drop-shadow()；参考