CSS初学者常用教学

   

作为一名计算机专业的学生，我们在大学期间，不可避免也是必不可少的学习前端技术。对于前端技术，一般常用的就是Html，jsp,vue.js,css；这篇博客就是介绍css的常用用法和教学。一是巩固自己的学习，而是帮助一些想要学习css的朋友，一起共同学信，一起进步。

目录

一、CSS的介绍；

（1）什么是CSS？

（2）CSS的语法

（3）选择器  'id'  和  'class';

 二、常用css属性教学

（1）background背景属性

（2）Border边框属性

（3）Margin外边距属性

（4）Padding填充属性

---

一、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