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;//背景图片的大小。
}