各个浏览器并不兼容，想要兼容css属性，需要添加如下的前缀：
-ms-transform:rotate(-1deg); /* IE 9 旋转1度*/IE浏览器
-moz-transform:rotate(-1deg); /* Firefox 旋转1度*/火狐浏览器
-webkit-transform:rotate(-9deg); /* Safari and Chrome 旋转9度 */谷歌浏览器
-o-transform:rotate(-1deg); /* Opera 旋转1度*/Opera浏览器
transform:rotate(-1deg);//一般写法 旋转-1度
CSS定义：
- CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式。
CSS代码语法：
- css样式选择组成部分：选择符+声明（属性+值）。选择符别名是选择器，可以是标签（p{}）、表单、id(#id1{})、css(.css1{})等；声明是在一对大括号{}，大括号里面就是属性和值，若是多个属性，就用分号“；”来隔开；CSS注释代码：/**/，例如：/*设置body样式*/body{color:yellowgreen;font-size:20px;}。如下图所示.
引用CSS样式有三种方法（就近原则（离被设置元素越近优先级别越高）级别是 1>2>3）：
- 内嵌式：<p style="color:pink">在标签中直接添加
- 嵌入式：<style type="text/css">p{color:red;}</style> 在HTML页面上<head/>中
- 外部式：<link href="style.css" rel="stylesheet" type="text/css">
选择器：
-
子选择器：在选择器后面添加 “>”之后添加子选择器 .first>span{border:1px solid red;}/*添加边框样式（粗细为1px， 颜色为红色的实线）*/ 或者 p>span{border:1px solid red;}/*选择器可以是id、class、标签*/即大于符号(>),用于选择指定标签元素的第一代子元素。如下图
-
包含(后代)选择器： .first span{border:1px solid red;}即加入空格,用于选择指定标签元素下的所有后辈元素。总结：>作用于元素的第一代后代，空格作用于元素的所有后代如下图所示：
-
通用选择器：* {color:red;} 作用是匹配html中所有标签元素，如下图所示：
-
伪类选择符（html不存在的标签的某种状态设置样式）。a:hover{color:red;}/*鼠标滑过字体颜色变为红色特效。*/需要注意的是，伪类选择器很多，但是不能兼容所有的浏览器，可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了。如下图所示：
-
分组选择符：为html中多个标签元素设置同一个样式时，可以使用分组选择符（，）：h1,span{color:red;}/*等价于h1{color:red;} span{color:red;}*/。
继承
- 颜色具体继承性，但是border没有继承性,如下图所示：其中span就没有继承border属性，只有p有border属性：
特殊性（权重越大，就显示其css样式，id（100）>class（10）>子选择器（1+1+。。。。）>标签（1））
-
span{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*/
层叠性：内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
重要性：!important（设置具有最高权值）要写在分号的前面：p{color:red!important;}，p的权重最大，因此p.first不起作用了。
-
文字排版--字体（font-family）、
-
文字排版--字号、颜色（font-size、color）、
-
文字的样式：粗体、斜体、下划线、删除线（font-weight:normal/*默认值。定义标准的字符。bold:定义粗体字符。bolder:定义更粗的字符。、lighter:定义更细的字符。、inherit:规定应该从父元素继承字体的粗细。100-900:定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。*/）
-
文字排版--斜体{font-style:italic;}
-
文字排版--下划线{text-decoration:underline;}
-
文字排版--删除线{text-decoration:line-through;}
-
段落排版--缩进p{text-indent:2em;}2em指的是文字的两倍大小
-
段落排版--行间距（行高）p{line-height:2em;}行间距（行高）为2em
-
段落排版--中文字间距、字母间距 字母之间的距离{letter-spacing:50px;} 单词之间的距离{word-spacing:50px;}
-
段落排版--对齐div{text-align:center;}center、left、right
元素分类
-
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
-
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
内联元素特点：（块级元素可以display：inline 设置成内联元素）
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
-
常用的内联块状元素(inline-block)有：
<img>、<input>，除此之外，还可以设置内联元素变成内联块状元素：{display：inline-block},
inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
