1. 写在前面
自从入了前端的坑，坑是越来越大，快把自己埋了。现在又开始搞样式了。
2. CSS样式的写法
CSS样式的写法有这么3种，下面我们一一介绍。
1. 外部样式表
链入外部样式表是这样的，一般放在<head></head>里：
<link href="mystyle.css" rel="stylesheet" type="text/css" media="all">…… </head>其中mystyle.css是自己写的CSS文件，内部大概是长这样的：
.text-center{
vertical-align: middle;
text-align:center;
display: table-cell;
}
.vw {
width: 50%;
height: 50%;
}
.contentstyle{
transform: scale(0.95);
border-left-color:black;border-left-width:1px;border-left-style:solid;
border-right-color:black;border-right-width:1px;border-right-style:solid;
margin-top:-13px;
}引入的时候，通过class来引入，像下面这样：
<div class="mybackgrounds" id="maindiv">2. 内部样式表
内部样式表大概长这样：
<head> …… <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> …… </head>3. 内嵌样式
内嵌样式通常是这样子的：
<p style="color: sienna;margin-left: 20px;"> 这是一个段落 </p>一般不推荐这第三种这种，一般使用第一种写法，容易管理，也便于重用。
不过这三种样式也是有优先级的：内联式 > 嵌入式 > 外部式，但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。
其实总结来说，就是–就近原则（离被设置元素越近优先级别越高）。
3. CSS样式表和Js文件位置
一般来讲引用的外部js放在下面，外部css放在上面这是习惯，其原因如下：
1. JS 有可能会修改 DOM.
典型的，可能会有 document.write. 这意味着，在当前 JS 加载和执行完成前，后续所有资源的下载有可能是没必要的。这是 JS 阻塞后续资源下载的根本原因。
2. JS 的执行有可能依赖最新样式。
比如，可能会有 var width = $(‘#id’).width(). 这意味着，JS 代码在执行前，浏览器必须保证在此 JS 之前的所有 css（无论外链还是内嵌）都已下载和解析完成。这是 CSS 阻塞后续 JS 执行的根本原因。
3. CSS要先渲染。
CSS放在前端是页面渲染时首先是根据DOM结构生成一个DOM树然后加上CSS样式生成一个渲染树，如果CSS放在后面可能页面会出现闪跳的感觉，或者是白屏或者布局混乱样式很丑直到CSS加载完成。
但是，现代浏览器之间的竞争也十分激烈，他们通常有自己的优化方式，能够进行prefetch优化，这样的话，性能是如此重要，现代浏览器在竞争中，在 UI update 线程之外，还会开启另一个线程，对后续 JS 和 CSS 提前下载（注意，仅提前下载，并不执行）。有了 prefetch 优化，这意味着，在不存在任何阻塞的情况下，理论上 JS 和 CSS 的下载时机都非常优先，和位置无关。
4. iframe与变换缩放
使用iframe的时候，最大的好处就是内网页不用自己写了，可以引用，但是通常会有一个问题，因为iframe有可能只是我们自己网页的一部分，那么引用网页有可能是一个完整的网页，那么这样子的话，会造成显示上的问题。那这时候，其实使用缩放来做，可以做一个折中的方案，毕竟原网页不是你想改就能改的。
缩放也是有2种的，一种是ZOOM，另一种是CSS3的transform:scale，那么他们有什么不同呢？
- 首先，他们的来源不同：
还在几年前，zoom还只是IE浏览器自己私有的玩具，但是，现在，除了FireFox浏览器，其他，尤其Chrome和移动端浏览器已经很好支持zoom属性了，注意，虽然Chrome/Safari浏览器支持了zoom属性，但是，其实zoom并不是标准属性。
而Transform则是CSS3标准，明明确确写入规范的。从IE9+到其他现代浏览器都支持。
- 其次，是他们写法不同：
来看一下他们如果都是缩放一半，应该怎么写：
.zoom-half { zoom: 0.5; }
.scale-half { transform: scale(0.5); }
- 最后是他们的效果不同：
zoom缩放是相对于左上角的，而scale默认是相对于元素的中心点缩放的，scale可以通过设置transform-origin来改变缩放的相对位置，当设置transform-origin: 0 0时，scale缩放可以达到和zoom缩放相似的结果。
总而言之还是有一些差异的：
- 浏览器兼容性。IE全族/Chrome/Safari和IE9+现代浏览器的差别。
- 控制缩放的值不一样。zoom更全面，但是不能是负数，只能等比例控制；而scale虽然只能是数值，但是能负数，可以只控制1个维度。
- zoom的缩放是相对于左上角的；而scale默认是居中缩放；
- zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化；
- zoom和scale对元素的渲染计算方法可能有差异。
- 对文字的缩放规则不一致。zoom缩放依然受限于最小12像素中文大小限制；而scale就是纯粹的对图形进行比例控制，文字50%原来尺寸。
- 渲染的性能差异明显。
综合上述原因，iframe应当使用的是transform：scale放缩更好一些。
5.背景渐变
背景渐变这个应该简单的不能再简单了，简单来讲就是长这样的：
.mybackgrounds{
background:-webkit-linear-gradient(top,#222222,#FFFFFF);
}这里具体的，来讲，background是设置背景，而-webkit-linear-gradient则表示线性渐变，(top,#222222,#FFFFFF)分别表示的是开始位置（从上到下），开始颜色（灰黑），结束颜色（白色）。更具体的可以看一下下面这里：背景渐变详解
6. 输入框组
输入框组就像之前提到的那样，boostrap里提供了一个简单的样式，但是还算美观。具体的写法如下：
<div class="form-group">
<div class="input-group ">
<span id="hotwordspan" class="input-group-addon">
热点词汇
</span>
<asp:TextBox ID="TextBox2" class="form-control"runat="server">
</asp:TextBox>
</div>
</div>尤为值得注意的是，class="form-control"输入框的这个class要添加，不然的话，输入框会比前一个span小上一部分，因此必须加上这个。
同样的，<asp:TextBox ID="TextBox2" class="form-control"runat="server"></asp:TextBox>
这个可以换成其他的组件，包括像下拉框、选择框、输入框等等都可以。
7. 时间选择
时间框也是非常常见的组件，我们来看一下长什么样：
<div class="form-group">
<div class="input-group date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
<span class="input-group-addon">选择日期</span>
<!--这是最终获取日期的框-->
<asp:TextBox ID="TextBox1" class="form-control" runat="server"></asp:TextBox>
<!--这是一个清除图标-->
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<!--这是一个日期图标-->
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<!--这是一个展示日历框-->
<input type="hidden" id="dtp_input1" value="" />
</div>这都写完了就完成了么？不，这个组件被称为是Js组件，因此还需要写以下js代码：
$(‘.form_date‘).datetimepicker({
format: ‘yyyy-mm-dd‘,
weekStart: 1,
autoclose: true,
startView: 2,
minView: 2,
forceParse: false,
//选择语言
language: ‘zh-CN‘,
//今天按钮可用否
todayBtn: true,
//今天高亮否
todayHighlight: true,
//初始化日期
initialDate: ‘2016-07-01‘,
});当然，把这些都写完了以后，还是不成功的话，你需要考虑以下有没有引入这个：
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen" />上一个是Bootstrap样式，下一个是datetimepicker组件。