###一、起步
####开发工具
市面上有各种不同的浏览器，但是对于前端来说最好用的浏览器莫过于chrome，它的调试工具很方便使用，自身也很轻量级，[点击这里下载chrome](http://www.google.cn/chrome/browser/desktop/index.html)。抛弃你手中的其他浏览器吧，至少在写前端时是这样的。
####如何写样式
说到css就必须说一下它的样式引入方法，你可能经常看到如下代码
~~~
<p style="color:red">text</P>
~~~
style标签里的东西就是一段css，它将p标签里面的文本颜色设置为红色。这种通过直接在标签内加style属性的css被称为行内样式。这种做法的**唯一**优点就是节省时间，但是缺点也很明显：html与css紧耦合，不利于优化，只适合写一些基本样式。
我们再看下面的代码
~~~
<html>
<head>
<style>
p{
color:red;
}
</style>
</head>
<body>
<p>text</p>
</body>
</html>
~~~
这种写在head中的style标签里的方式叫做嵌入式，与行内样式比较就会发现body里面只有标签，所有的样式都放在style标签里。
下面这种方式是我最推荐的
~~~
//index.html
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<p>text</p>
</body>
</html>
//index.css
p{
color:red;
}
~~~
可以看到我把样式单独放到了一个名字叫做index.css的文件，在head标签中通过link引入样式。这样就实现了html与css的分离，你的html只负责写标签，所有的样式都交给css文件处理。我推荐在项目中新建一个名字叫做css的文件夹，把你的所有样式都放到这个文件夹里面。
###二、正文
####标签
在开始聊css之前，我觉得有必要列出一些项目中常用的标签
行内元素：span、img、a、button、input、label、select
块级元素：div、table、ul、form、p、h1-h6
如何区分行内元素和块级元素呢？
行内元素：不带换行符，一行可以放多个标签
~~~
<span>1</span>
<span>2</span>
<span>3</span>
~~~
块级元素：自带换行符，一行只能放一个标签
~~~
<p>1</p>
<p>2</p>
<p>3</p>
~~~
####选择器
说完了常用的标签，我们来说一下选择器。我们都知道，用行内方式写css的时候由于是直接写在标签的style属性里的，它可以及时生效，但是现在我们通过link的方式来引入css文件，如何保证让某些特定样式在某种和某些标签中生效呢？这就是选择器的作用。常用的选择器有三种：标签、id、class
~~~
p{
color:red;
}
#myId{
color:red;
}
.myClass{
color:red;
}
<p>text</p>
<p id="myId">text</p>
<p class="myClass">text</p>
~~~
这三个的结果是一样的，不过要尽可能地避免使用id，最好全部用class。这是因为id是不能重复的，也就意味的同一个html文件不可能出现两个相同名字的id。而class是允许重复的，如果一个html文件有5个class为myClass的标签，那么.myClass的样式会对这5个标签都生效。如果你使用的是asp.net的控件，它会自动生成ID，但请在它的旁边加上一个class，然后通过class来设置样式。
除了上面三种基本的选择器外，还有一些高级的选择器，具体用法可以参考[w3c的文档](http://www.w3school.com.cn/cssref/css_selectors.asp)，这里不再赘述。
####颜色和边框
color：设置文本颜色
background-color：设置背景色
border：设置边框
~~~
//假设有这么一个div
div{
width:100px;
height:100px;
color:red;
background-color:blue;
border:1px solid black;
}
~~~
####内外边距
padding（内边距）：该标签与该标签内的其他标签之间的距离
margin（外边距）：该标签与其他同级的标签之间的距离
你可以把一个标签想象成一个盒子，内边距越大，盒子能放的东西越少，外边距越大，两个盒子之间的距离就越大。
我们在与div同级的位置加一个button
你会发现这个button与div距离很紧凑，使用外边距就可以解决这个问题
~~~
button{
margin-top:10px;
}
//给div设置margin-bottom:10px;也会达到同样的效果
~~~
现在div下面有一段文字“这是一个div”，我想把这段文字离div的顶部远一点，这时候就用到了内边距
~~~
div{
width:100px;
height:100px;
color:red;
background-color:blue;
border:1px solid black;
padding-top:10px;
}
~~~
无论是padding还是margin都拥有-left、-right、-top、-bottom，代表着左内外边距、右内外边距、上内外边距、下内外边距
~~~
div{
margin-top:1px;
margin-right:2px;
margin-bottom:3px;
margin-left:4px;
padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:4px;
}
~~~
如果你觉得这么写太麻烦了，可以对它们进行简化
~~~
div{
margin:1px 2px 3px 4px;//上、右、下、左，顺序不能变
padding:1px 2px 3px 4px;//上、右、下、左，顺序不能变
}
~~~
如果你的四个方向都值都一样，可以再简化
~~~
div{
margin:1px;//上、右、下、左全是1px
padding:1px;//上、右、下、左全是1px
}
~~~
####流式布局
假设有以下需求：让两个div水平排放
~~~
.first{
width:100px;
height:100px;
background-color: red;
}
.second{
width:100px;
height:100px;
background-color: blue;
}
<div class="first">这是第一个div</div>
<div class="second">这是第二个div</div>
~~~
然而结果并没有达到需求，这是因为div是块级元素，自身带换行符
流式布局（float），无视元素本身行内或块级的限制，针对于父层进行浮动
~~~
.father{
width:200px;
height:100px;
}
.first{
width:100px;
height:100px;
background-color: red;
float:left;
}
.second{
width:100px;
height:100px;
background-color: blue;
float:left;
}
<div class="father">
<div class="first">这是第一个div</div>
<div class="second">这是第二个div</div>
</div>
~~~
####绝对定位
新增需求：两个div重叠到一起
方法一：使用float
~~~
.father{
width:200px;
height:100px;
}
.first{
width:100px;
height:100px;
background-color: red;
float:left;
}
.second{
width:100px;
height:100px;
background-color: blue;
float:left;
margin-left:-100px;
}
<div class="father">
<div class="first">这是第一个div</div>
<div class="second">这是第二个div</div>
</div>
~~~
通过设置第二div的左外边距为-100px，也就是说它与第一个div的距离是-100px
方法二：使用绝对定位
什么是绝对定位？以父层div为参照物，通过top、left、right、bottom（默认全部为0px）来决定它在父层内的位置。它就像一个漂浮层，飘在父层里面。在绝对定位中margin是无效的，你只能通过上面四个方向值来决定它的位置，但是可以使用padding来设置它里面的内容边距。
~~~
.father{
width:200px;
height:100px;
position:relative;//指定该div作为参照物
}
.first{
width:100px;
height:100px;
background-color: red;
position:absolute;
}
.second{
width:100px;
height:100px;
background-color: blue;
position:absolute;
}
<div class="father">
<div class="first">这是第一个div</div>
<div class="second">这是第二个div</div>
</div>
~~~
现在使用绝对定位让两个div平行
~~~
.father{
width:200px;
height:100px;
position:relative;//指定该div作为参照物
}
.first{
width:100px;
height:100px;
background-color: red;
position:absolute;
}
.second{
width:100px;
height:100px;
background-color: blue;
position:absolute;
left:100px;//相对于父层元素father向左平移100px;
}
<div class="father">
<div class="first">这是第一个div</div>
<div class="second">这是第二个div</div>
</div>
~~~
####display和visible
如果我们想把一个标签隐藏，既可以使用visibility：hidden，也可以使用display：none，这两者本质的区别就在于visibility：hidden只是把标签隐藏，但它本身还在那里，还是占据空间的。但是display：none是完全移除这个标签，不会占据空间
~~~
.father{
width:300px;
height:100px;
}
.first{
width:100px;
height:100px;
background-color: red;
float:left;
}
.second{
width:100px;
height:100px;
background-color: blue;
float:left;
visibility:hidden
}
.third{
width:100px;
height:100px;
background-color: yellow;
float:left;
}
<div class="father">
<div class="first">这是第一个div</div>
<div class="second">这是第二个div</div>
<div class="third">这是第三个div</div>
</div>
~~~
~~~
.father{
width:300px;
height:100px;
}
.first{
width:100px;
height:100px;
background-color: red;
float:left;
}
.second{
width:100px;
height:100px;
background-color: blue;
float:left;
display:none
}
.third{
width:100px;
height:100px;
background-color: yellow;
float:left;
}
<div class="father">
<div class="first">这是第一个div</div>
<div class="second">这是第二个div</div>
<div class="third">这是第三个div</div>
</div>
~~~
如何把隐藏掉的标签显示出来？
visibility：hidden——visibility：visible，
display：none——display：block（如果该元素为块级元素）
display：none——display：inline（如果该元素为行内元素）
####其他一些常用的样式属性
1、font-size：文字的字体大小
2、font-weight：文字的粗细（一般设为bold就好）
3、font-family：文字的字体
4、line-height：两行文字之间的行间距
5、cursor：鼠标的样式（pointer比较常用）
6、overflow：当内容超出宽度和高度限制时的解决方法
7、text-align：文字在标签中的对齐方式（默认向左，可以设置为center让它居中）
####备注
项目中常用到的css都在上文中一一说明了，你可能还会用到伪类，参考[w3c的文档](http://www.w3school.com.cn/css/css_pseudo_classes.asp)就好。
####Bootstrap
非前端研发方向的你肯定对自己手写样式十分头疼，你希望有一个框架，可以帮你完成大部分的样式，只需要自己手写一些基本代码进行微调整。在这里我安利一个样式框架：Bootstrap，点击[这里](http://v3.bootcss.com/)查看文档。
如何使用？
首先把Bootstrap下载下来（选择生产环境）
把它的bootstrap.min.css引入到你的html中
bootstrap几乎所有的样式都是用class申明的，只要你引入了它的样式文件，直接在标签中添加相应的class即可（参考它的文档）。
在这里我用table来举例
1、不使用bootstrap
~~~
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<table>
<thead>
<tr>
<th>标题1</th>
<th>标题2</th>
</tr>
</thead>
<tbody>
<tr>
<td>第一行内容1</td>
<td>第一行内容2</td>
</tr>
<tr>
<td>第二行内容1</td>
<td>第二行内容2</td>
</tr>
</tbody>
</table>
</body>
</html>
~~~
2、使用bootstrap
参照文档，直接加上class="table"即可
~~~
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<table class="table">
<thead>
<tr>
<th>标题1</th>
<th>标题2</th>
</tr>
</thead>
<tbody>
<tr>
<td>第一行内容1</td>
<td>第一行内容2</td>
</tr>
<tr>
<td>第二行内容1</td>
<td>第二行内容2</td>
</tr>
</tbody>
</table>
</body>
</html>
~~~
我们把它放到一个面板中
~~~
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">
<span class="panel-title">这是一个table</span>
</div>
<div class="panel-body">
<table class="table">
<thead>
<tr>
<th>标题1</th>
<th>标题2</th>
</tr>
</thead>
<tbody>
<tr>
<td>第一行内容1</td>
<td>第一行内容2</td>
</tr>
<tr>
<td>第二行内容1</td>
<td>第二行内容2</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
~~~
接下来要做的就是自己手写css样式对bootstrap进行微调
首先新建css文件，并在html中引入它（注意要放到bootstrap.min.css的下面）
~~~
.panel{
width:500px;
margin:0 auto;//让div相对于父层（这里就是body）水平居中
}
~~~
小技巧：当你发现你的样式没有覆盖bootstrap的样式的时候，检查一下你的css文件引入顺序（一定要放在bootstrap的下面），如果顺序没问题，尝试通过！important提升优先级
~~~
.panel{
width:500px !important;
margin:0 auto;//让div相对于父层（这里就是body）水平居中
}
~~~
关于css的优先级可以参考我的另一篇文档 [css优先级](http://www.kancloud.cn/xiaoxiaoqc/web/194488)
关于如何实现水平垂直居中可以参考 [水平垂直居中那些事](http://www.kancloud.cn/xiaoxiaoqc/web/153278)
- html/css
- 不一样的css3之Transform
- 不一样的css3之Transition
- 不一样的css3之Animation
- Less初学
- Sass初学
- 水平垂直居中那些事
- css优先级
- css基础教学
- javascript
- 浅谈javascript事件处理程序
- cookie,localStorage,sessionStorage的区别
- Ajax
- 说说JSON
- 数组常用的方法
- 字符串常用的方法
- 闭包之我的理解
- 常用DOM操作
- 扒一扒所谓的面向对象
- JS Blob对象
- ES6学习笔记（一）
- ES6学习笔记（二）
- 用ES6书写React
- React+Redux实战总结
- 基于Express搭建开发环境
- 其他
- github初学
- 轻松配置Webpack
- asp.net学习笔记
- ado.net
- 如何使用ajax进行前后端交互
- 银行大厅自助服务系统需求分析
- 西电银行开发手册
- 接口
- ajax