CSS作用：定义html页面元素的显示形式，是一种格式化网页内容的技术
使用：
1）css的语法
选择器{属性1：值1；属性2：值2；...；属性N：值N}，选择器就是要改变页面中的哪些元素
2）CSS的样式位置
1、外部样式表
<link rel="stylesheet" href="xxx.css"/>
2、内联样式表(直接给元素添加样式)
在元素中添加style,例如<p style="color:blue">q我是一段话</p>
3、嵌入式样式表（在html中使用style标签）
<style type="text/css"> h3{font-size:72px}</style>
3)选择器
元素选择器，格式：元素名 p,h3{color:barkorange;}
id选择器，格式：#id #p2{font-size:72px;}
类选择器，格式：.class .c1{font-family:"华文彩云";}
后代选择器，格式：选择器1 选择器2 p.i1{font-size:36px;}
伪类标签
伪类有：:first-child ，:link:， vistited，:hover:，:active，:focus，:lang，:right，:left，:first
何为伪类?就是css内置类css内部本身赋予它一些特性和功能，也就是你不用再class=...或id=...你就可以直接拿来使用，当然你也可以改变它的部分属性比如：
a.link{color:#FF0000}/*未访问的链接*/
a.visited{color:#00FF00}/*已访问的链接*/
a.hover{color:#FF00FF}/*鼠标移动到链接上*/
a.active{color:#0000FF}/*选定的链接*/
<a href="www.baidu.com">百度</a>
imports的应用
<link rel="stylesheet" href="main.css"/>
media 针对不同的设备不同尺寸的屏幕设置不同的样式，特别是如果你需要设置设计响应式的页面
@media screen and(max-width:500px) { CSS-Code; }
文本属性 font
p{
font-family:"myFont";设置字体
font-size:20px;设置字体大小
font-style:italic;设置斜体
font-weight:bolder;设置加粗
color:#FF00FF;设置字体颜色
line-height:100px;设置行高
letter-spacing:10px;设置文字间隔
text-decoration:none;没有下描线
text-align:left;设置靠左
text-overflow:ellipsis;设置显示省略符号来代表被修剪的文本。
white-space:nowrap;设置不换行
overflow:hidden;
}
背景属性 background
#myDiv{
width:60px;
height:40px;
/*background-color:lightblue*/
background-image:url("baidu_jgylogo3.gif");设置背景图片
background-repeat:no-repeat;设置背景图片是否重复
background-attachment:scroll;设置背景图片是否固定：随着页面滚动存在
border:1px solid red;设置边框类型颜色
}
定位属性 position:
.container{
position:absolute;
}
.demo{
position:relative;
}
<div class="container">
<div>AAAA</div>
<div class="demo">BBBB
</div>
<div>CCCC</div>
</div>
<!--
1.子元素有relative定位时，不脱离文档流
2.子元素有absolute定位时，脱离文档流
3.子元素有absolute定位时，参考1.父级元素定位 2.body原点定位
4.子元素有relative定位时，参考1.自身原点定位
-->
z-index 属性
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
#MyIma{
z-index: 999;
}
float 浮动属性
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
img {
float: left; 左浮动 float:right;右浮动 }
display: 显示属性 visibility: 能见度属性
/*display: none; /!*消失*!/*/ 元素的位置会被其他元素占用
visibility: hidden; /*隐藏*/ 元素位置不会被占用
list：列表属性
#fruits{
list-style-type: upper-roman;设置大写的罗马字列表头
list-style-position: inside;
list-style-image: url("icon.jpg");设置有序列表头图片
}
盒子模型：
<!-- 盒子模型将html中每一个元素看作为一个盒子，用几个属性描述这个盒子
border 边框
border类型：实线、虚线、双实线等
border的粗细：通过px来描述
border的颜色：通过color表示颜色
margin 外边距
width属性 外边距长：距离其他元素的距离，两个外边距是可以重叠的
padding 内补丁
width属性 内补丁长：边距距离内容的距离
-->
来源：oschina
链接：https://my.oschina.net/u/4118325/blog/3042999