css样式由两部分组成，选择器和声明。选择器{属性：属性值}
行内样式，在style属性的属性值里声明样式、内部样式，在head标签里使用style标签，所有的样式写在style标签里、外部样式，新建一个后缀名为css的文件，直接在文件里写样式，引用css文件使用link标签在helf里写上css的地址。
三种样式的优先级，行内样式>内部样式>外部样式。靠近标签的会先生效
类选择器，在标签里使用calss属性，值改为名字<p class="名字">使用时需要在名字前加上“.”号，.名字{}。id选择器，<p id="名字">需加上“#”，#名字{}。标签选择器，为所有标签声明样式，p{}。
三种方式优先级，id选择器>类选择器>标签选择器。
父选择器：body p选中body下所有p元素、子选择器：body>p选中第一层的p元素、相邻兄弟选择器：body+p和body紧挨的p元素被选中、通用兄弟选择器：body~p和body紧邻的所有p元素都被选中。
p：first-child，body元素下第一个子元素。p：last-child，body元素下最后一个子元素。p：nth-child（n），body元素下第n个子元素。p：first-of-type，body元素下相同元素第一个。p：last-of-type，body元素下相同元素最后一个。p：nth-of-child（n），body元素下相同元素第n个
E[arr]有指定属性的E元素。E[arr=value]E元素中arr的值必须为value。E[arr^=value]E元素中arr的值开头为value。E[arr$=value]结尾为value的E元素。E[arr*=value]包含value的E元素。
字体：font-style：字体倾斜度，font-weight：粗细，font-size：字体大小，font-family：字体，font：按顺序设置，每个设置使用空格间隔
文本：color：颜色，text-align：水平对齐位置，left、center、right，line-height：每行高度，text-decoration：划线，none、underline、overline、line-through，vertical-align：垂直对齐（与图片进行的对齐），top、middle、bottom，text-shadow:文本阴影text-shadow：水平 垂直 颜色
超链接伪类：link（在a标签中有作用）：访问前的样式、visited（同理）：访问后、hover：悬停时、active：持续点击时。说明样式时请按顺序。
列表：list-style：none；去除列表前的序号。
背景样式：background-color：背景颜色、-image：url（'背景图片'）、-repeat：背景图片重复方式，repeat“垂直和水平重复”，repeat-x“水平重复”，-y“垂直”，no-repeat“不重复”、-position：背景图片位置（top、right、bottom、left、center结合使用）设置数值（%、px，两个可以混合，也能使用其他单位）、-size：背景图片尺寸，关键字（cover——完全填充、contain——等比填充），像素（宽、高）、背景图片综合设置，background：url（''）position repeat
背景颜色渐变：background-image：linear-gradient（top、right、bottom、left结合使用，在前加上“to”空格隔开——方位，颜色——颜色能多个）
边距，margin、padding、border，top、right、bottom、left——对应属性的四个方位，能以像素为单位
border-style，border-风格：border-style：solid实线边框、dashed虚线、dotted点线、double双线（两条线宽度和border-width相同），说明了四条边框，border-top-style：说明上边框。border-style：solid double（说明上下为solid，左右为double）
边框样式说明：顺时针说明，没有说明的边按照对边的样式说明
border-width，border-宽度：格式和border风格相似，不同处换为width，设置边框宽度
border-color，border-颜色：同上，值换为颜色，设置边框宽度
border：设置四角位置的四种属性，也可设置单边的四种属性，单边为：border-top：想要的样式；其他边同前
盒子尺寸：margin+padding+border=width；也能设置box-sizing：border-box，使总尺寸符合宽高设定
圆角：border-radius：角度数。拥有四个值，具体使用同前相似。
盒子阴影，box-shadow：h-shadow（水平移动） v-shadow（垂直） blur（模糊距离） spread（阴影大小） color（阴影颜色） inset（内阴影）。
display：行|块；值为inline，改为行内。block，改为块。inline-block，行&块。none，不变。方向不可控
float：left|right|none；可以设置左右浮动，也可以设置没有浮动。浮动后的元素脱离标准文档流，如果是行内元素，能支持宽高。漂浮后的元素会覆盖在其他元素之上，但不会覆盖在其他元素内容之上。漂浮后的元素不在父级里，它在天上，比父级等级高，父级抓不到。
消除影响：clear：left（左）|right（右）|both（双边）|none（无）；消除对应方向的所有影响、为父级设置宽高，视觉上存在于父级中、添加伪类after，类名：after{content='';clear=both;display:block;zoom:1;}、使用overflow：hidden；
处理超出边界的内容
指定定位，position：reatlive（相对定位）；top：距离；right：距离；移动后保留位置。position：absolute（绝对定位）；top：距离；right：距离；如果父级没有设置相对定位，就依据body移动，位置不保留，对周围元素无影响。position：fixed；top：距离；right：距离；固定在浏览器窗口的指定位置，不影响周围元素。
z-index：值能正能负。根据值的大小决定元素层级，在上|在下。仅在position属性中适用。
opacity：0~1；值越小元素透明度越高。
transform:translate(xpx，ypx)——移动|rotate(ndeg,-ndeg)——旋转|scale(x，y)——缩放，小于1的数会使元素缩小|shew(xdeg,ydeg)——倾斜;
transition:（property——属性名&duration——持续时间）|timing-function——linear“匀速移动”、ease“先快后慢”、ease-in“先慢后快”、ease-out“结束时为慢速”、ease-in-out“以慢速开始慢速结束”|delay——延迟开始
@keyframes：@keyframes &名字，以百分比指定特定帧率的效果，通过名字引用这个@keyfranes效果
animation：name（@keyframes名字） duration timing-funtion delay iteration-count（播放次数，infinite：无限次播放） direation（轮流反向播放，alternate：反向播放）