学习CSS需要做的准备

什么是css
层叠样式表单（Cascading Style Sheet）简称“CSS”，是用来进行网页风格设计。

入门学习需要记住哪些常用样式
为啥要记呢？是不是学习方法太老套了。NO！比如写一些常规的页面样式，无从下手还需要去查资料，会大大降低工作效率。当然用一些功能强大的IDE可以有代码提示，减少了很多机械记忆。但是做为专业的从业人员，我还是推荐记一些常用的样式以提高工作效率。

这里推荐一个css样式的速查手册：http://css.doyoe.com/

1、文字属性

color : #999999; 
font-family :“ Arial”;
font-size : 12px;
line-height : 24px; 
font-weight:bold;
text-align:right; 
text-align:left;
text-align:center;

 

2、内边距

padding-top:10px;
padding-right:10px; 
padding-bottom:10px;
padding-left:10px; 
 /*综合写*/
padding:10px 10px 10px 10px;

 

3、外边距

margin-top:10px;
margin-right:10px; 
margin-bottom:10px; 
margin-left:10px;
/*综合写*/
margin:10px 10px 10px 10px;

 

4、尺寸

width:50px;
height:50px;

 

5、边框

border-top:1px solid #666666;
border-bottom:1px solid #666666;
border-left:1px solid #666666;
border-right:1px solid #666666;
/*综合写*/
border:1px solid #66666;

 

6、背景

background-color:#666666;
background-image:url(); 
background-repeat:no-repeat; 
background-repeat:repeat-x; 
background-repeat:repeat-y;
background-position:50px 50px; 
background-position:top; 
background-position:bottom;
background-position:left;
background-position:right;
background-position:center;
/*综合写*/
background: #666666 url() no-repeat center center;

 

7、定位

position:relative;
position:absolute;
position:fixed;

 

8、布局

float:left;
float:right;
display:block;
display:inline-block;

 

 

编辑器推荐

WebStorm下载地址：http://www.jetbrains.com/webstorm      需要破解，强力推荐
VsCode下载地址：https://code.visualstudio.com
HBuilder下载地址：https://www.dcloud.io      国产
notepad++下载地址：https://notepad-plus-plus.org    功能少方便浏览，或写少量代码用

 

如果是设计师可以根据自己的习惯可以沿用Adobe的DW。自己用什么最顺手就用什么，毕竟工具只是拿来更好的服务工作的；前端工程师推荐使用WebStorm，个人觉得超级好用。