一、选择器
<style>
#a1{color: #f5860f;} /*id选择器*/
.a2{color: #ff0026;} /*类选择器*/
h3,#a1,.a2{background: #b6eeff}/*分组选择器*/
input[type="text"]{background: darkcyan}/*属性选择器*/
body div div div div{color: #689797} /*子孙后代选择器，包含后代只要在div里都会改颜色*/
body >div >p{color: #689797} /*子元素选择器,不包含后代*/
/*伪类选择器*/
a:link{color:red }/*未访问*/
a:visited{color:rebeccapurple }/*访问过*/
a:hover{color: yellowgreen}/*悬停*/
a:active{color: dimgrey}/*点击/激活*/
</style>重复样式时，选择器范围越小优先级越高。内联低于css
! important 设置优先级最高。
二、块元素
#d1{
width: 200px;
height: 200px;
background-color: lightpink;
background-image: url("b.jpg");
background-size:100px 100px;/*设置！！！背景图片大小*/
background-repeat: no-repeat;/*禁止重复，如果图片小于块大小，会铺满块*/
background-position: 50px 50px ;/*横向 纵向移动*/
background-position: 100% 100% ;/*横向 纵向移动*/
}background-image和background 可以同时设置不冲突
background-image: url("b.jpg"); /*设置背景图片*/
background-size:100px 100px; /*设置！！！背景图片大小*/
background-repeat: no-repeat; /*禁止重复，如果图片小于块大小，会铺满块*/
background-position: 50px 50px ; /*横向 纵向移动*/
background-position: 100% 100% ; /*横向 纵向百分比移动*/
三、文本与字体
谷歌浏览器字体最小为12px,不能再小了。
| text-align: center | 文本水平对齐 |
| text-decoration：underline | 下划线 |
| text-decoration：line-through | 删除线 |
| text-decoration：none | 主要去掉a超链接的下划线 |
| text-shadow | 文本阴影：颜色 x偏移 y偏移 模糊度 |
| font-weight: normal; | 去掉加粗 |
| font-weight: bold; | 加粗 |
| font-style: italic; | 斜体 |
| font-family:cursive ; | 设置字体 |
| font-size: 30px; | 字体大小 |
| background-size:250px 250px; | 设置背景图片大小 |
| background-position: 300px 50px ; | 设置图片起始位置 |
| background-repeat: no-repeat; | 不允许照片铺满屏幕 |
| background-color:rgba(66, 66, 66 ,0.3); | 设置透明度 |
| border-radius: 5px; | 设置圆角 |
| color: rgba(217, 204, 204, 0.9) | 设置颜色和透明度 |
| Box-sizing: border-Box; | 元素添加边框和内边距则不再影响元素的宽高 |
| overflow: hidden; | 解决粘连问题 |
四、行元素设置为块元素
