CSS样式
<link rel="stylesheet" href="../../css/first.css">
<!--引入css文件，相当于把所有的css复制到当前位置-->
行内样式：
缺点：1.内容和样式没有分离。
2.样式没有复用性，仅作用于当前一个样式
优点：1.写法简单，适用范围广
2.优先级高
内部样式：
缺点：1.样式和内容没有完全分离，样式在多个页面间不能复用
优点：1.可以实现样式复用，但是复用程度不高，不能在多个页面之间复用
外部样式：
缺点：1.编辑css的时候需要频繁切换
优点：1.html和css的完全分离
2.css得到了最大程度的复用
样式优先级的比较
在正常的引入顺序下（先引入外部的，再引入内部的）
优先级（就近原则）的顺序为：
行内样式>内部样式>外部样式
宽高属性
1.块级元素
所有的块级元素对宽高都有效
2.行级元素
所有的行级元素对宽高设置都无效
但是存在特殊元素： img input textarea select
文本样式
opacity: 1;......................................................................................................... /*1不透明，0全透明*/
font-weight:bold;................................................................................................/*字体粗细*/
font-size: 40px;................................................................................................../*字体大小*/
font-family:宋体 微软雅黑 sans-serif;................................................................/*字体系列*/
font-style: italic;................................................................................................./*字体样式(斜体）*/
/*复合属性（注意顺序）：等效前五个属性（复合属性效率高）*/
font: italic,bold, 40px/1.5 ,宋体 ,微软雅黑 ,sans-serif;
height: 30px;...................................................................................................../*高度*/
background-color: red;...................................................................................../*背景颜色*/
text-align: center;............................................................................................./*文本水平对齐方式*/
line-height: 30px;............................................................................................./*行高，通常用来设置文本垂直方向的对齐方式*/
letter-spacing: 10px;......................................................................................../*文本间距*/
overline.........................................................................................................上划线
underline.........................................................................................................下划线
line-through.........................................................................................................中划线
text-decoration: overline;................................................................................./*文本修饰*/
wavy............................................................................................................波浪线
dashed.........................................................................................................（间隔）短横线
dotted.........................................................................................................点状线
solid.........................................................................................................单实线
double.........................................................................................................双实线
text-decoration-style: dashed;............................................................................./*文本修饰的样式*/
text-decoration-color: #cccccc;.........................................................................../*文本修饰的颜色*/
text-indent: 2em;................................................................................................./*文本缩进*/
white-space: nowrap;........................................................................................../*文本换行的处理：不折行*/
overflow: hidden;................................................................................................./*溢出部分的处理：隐藏*/
text-overflow: ellipsis;........................................................................................../*溢出文本的处理：显示省略号*/
css的变形效果
border-radius: 10px 20px 30px 40px;..................................................................../*圆角(值: 左上，右上，右下，左下)*/
transform:translateY(50px);............................................................................../*元素的平移*/
transform: scale(1.5);......................................................................................../*元素的缩放倍数*/
transform: rotate(90deg);......................................................................................../*元素的旋转角度*/
transform: skew(45deg);......................................................................................./*元素的倾斜效果*/
transition: all 2s ease;......................................................................................./*元素的过渡效果*/
（x轴的偏移 y轴的偏移 模糊程度 模糊范围 阴影颜色）
box-shadow: 3px 5px 10px 10px greenyellow;................................................../*box阴影*/
