作为一名计算机专业的学生，我们在大学期间，不可避免也是必不可少的学习前端技术。对于前端技术，一般常用的就是Html，jsp,vue.js,css；这篇博客就是介绍css的常用用法和教学。一是巩固自己的学习，而是帮助一些想要学习css的朋友，一起共同学信，一起进步。
目录
一、CSS的介绍；
（1）什么是CSS？
CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css
样式 用来装饰 html ，样式通常放在样式表里，样式表放在CSS文件中，多个样式可以层叠为 一个。
（2）CSS的语法
css规则有两个主要部分：选择器，1 or N 个声明
body {background-color:yellow;}
//body 为选择器
//background-color :yellow; 为一条声明
//background-color 为属性
//yellow 为值
（3）选择器 'id' 和 'class';
CSS在HTML文件或者vue.js文件中都需要在<style>中加入样式表
CSS 中 id 选择器以 " # " 来定义
CSS 中 class 选择器以 " . " 来定义
二者的区别在于class可以在多个元素中使用
//css样式表
.center
{
text-align:center;
}
#col
{
text-align:center;
color:red;
} 然后在页面元素中使用id，或者class
<h1 class="center">标题居中</h1>
<p id="col">Hello World!</p> 效果如下： 
二、常用css属性教学
（1）background背景属性
CSS 属性定义背景效果:
1.background-color : 页面的背景颜色使用在body的选择器中
2.background-image :背景照片
background-image:url('https://ts1.cn.mm.bing.net/th/id')
3.background-repeat : 背景图像水平平铺或垂直平铺
//水平平埔
background-repeat:repeat-x;
//垂直平埔
background-repeat:repeat-y;
//不平埔
background-repeat:no-repeat;（2）Border边框属性
border-style值：
body
{
border-style:dashed;
}none: 默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值
（3）Margin外边距属性
1. Margin属性可以用四个值：如25px,50px,50px,100px
意味着 上边距25px
右边距50px
下边距50px
左边距100px
2. Margin属性可以用三个值：如25px,50px,100px
意味着 上边距25px
左、右边距50px
下边距100px
3. Margin属性可以用两个个值：如50px,100px
意味着 上、下边距50px 左、右边距100px
4. Margin属性可以用一个值：如25px
意味着 上边距25px 右边距25px 下边距25px 左边距25px
（4）Padding填充属性
| padding | 使用简写属性设置在一个声明中的所有填充属性 |
| padding-bottom | 设置元素的底部填充 |
| padding-left | 设置元素的左部填充 |
| padding-right | 设置元素的右部填充 |
| padding-top | 设置元素的顶部填充 |
1. Padding属性可以用四个值：如25px,50px,50px,100px
意味着 上边距25px
右边距50px
下边距50px
左边距100px
2. Padding属性可以用三个值：如25px,50px,100px
意味着 上边距25px
左、右边距50px
下边距100px
3. Padding属性可以用两个个值：如50px,100px
意味着 上、下边距50px 左、右边距100px
4. Padding属性可以用一个值：如25px
意味着 上边距25px 右边距25px 下边距25px 左边距25px