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