css简单的基础功能

在说css功能之前，我先讲一下我写css的经验，也可以说是编写web的经验。在要去编写web之前首先要设计一个你脑中所想的一个蓝图，如果已经有具体页面了，也要先把整个页面的布局设计好。比如：导航览的大小，长度，颜色等。而不至于在确定css时出现混乱。说的有点儿简单，但我觉得对于初学者来说这是一个必须要习惯的。下面说一下一些css代码：

每一个模快都有自己的边距，搞不清楚它们可是很吃亏的。

边距分为外边距（margin）和内边距（padding）:

 

div{
       margin:10px 10px 10px 10px;//依次代表上 ，右，下，左
       margin-left:10px;//左外边距
       margin-top:10px;//上外边距
       margin-right:10px;//右外边距
       margin-bottom:10px;//下外边距
}

 http://www.w3school.com.cn/css/css_margin.asp

div{
       padding:10px 10px 10px 10px;//依次代表上 ，右，下，左
       padding-left:10px;//左内边距
       padding-top:10px;//上内边距
       padding-right:10px;//右内边距
       padding-bottom:10px;//下内边距
}

http://www.w3school.com.cn/css/css_padding.asp

如果你想两个div标签在同一行的话：

 

.a{
  display:inline;
}

 

.b{
  display:inline;
}

这样两个不同的div的class就可以在同一行出现。

改变颜色是用color属性：

 

div{
    background-color:black;//背景颜色
    color:black;//字体颜色
     border-color:black;//边框颜色
}

 边框属性border:

 

 

div{
    border:1px solid black;//依次表示边框粗细，边框样式，边框颜色
    border-radius: 5px 5px 0px 0px;//边框四角的弧度，依次是左上，右上，右下，左下
}
//值改变边框的某一边
div{
    boder:none;//无边框
    border-top:1px solid black;
    border-bottom:1px solid black;
    border-right:1px solid black;
    border-left:1px solid black;
}

 字体的属性font:

 

 

div{
   font-weight: 600 ;//字体粗细
   font-size: 20px;//字体大小
   text-align: center //文本居中
   vertical-align:top;//置顶
}

 关于图片的属性：

 

 

div{
    background-image: url(../images/shopping_cart.png);//插入背景图
    background-repeat: no-repeat;//背景图像在水平和垂直方向上不重复。
    background-position:left center;//背景图片的位置;
    background-size: 19px 19px;//背景图片的大小。
}