css文件代码压缩
一、安装node和npm（不做介绍,在我之前转载的博客中有）
二、安装ckstyle npm install -g ckstyle
三、安装ckstyle-serve（仅仅代码压缩可以不用安装这个） npm install -g ckstyle-serve
使用介绍:
压缩css文件命令:
先把需要压缩的文件上传至linux系统中去 example: rz basem.css.
新建一个basem-min.css文件. touch basem-min.css chmod +755 basem-min.css
ckstyle compress basem.css 代码压缩。
ckstyle compress basem.css >basem-min.css 将basem.css文件压缩后写入basem-min.css文件中。
代码压缩之前样式显示:
vim basem.css
就截图部分代码图片以示参考。
查看压缩后的文件:
vim basem-min.css
明显看出变得密密麻麻,中间少了许多间隙。[代码太多,仅提供部分以供参考]
html5常用标签
header：定义文档的页眉 头部
nav: 定义导航链接的部分
footer:定义文档或节页脚 底部
article: 定义文章
section:定义区段
aside: 定义其所处内容之外的内容 侧边
datalist 定义选项列表，请与input元素配合使用该元素
<input type="text" name="" id="" value="请输入明星" list="star">
<datalist id="star">
<option value="刘德华">刘某</option> 低版本的浏览器需要value有值才行。
<option value="刘若英">刘女士</option>
<option value="爱丽丝">爱丽丝女士</option>
<option value="成吉思汗">成吉思汗</option>
</datalist>
fieldset元素可将表单内的相关元素分组，打包 和legend搭配使用。
<fielset>
<legend>用户登录界面</legend>
用户 ：<input type="text" name="" id="">
</fielset>
input新增表单
email:email邮箱
<input type="email" name="" id="" width="100px" height="30px">
tel:手机号码 //引入required 表示该字段必须输入值。
<input type="tel" name="" id="" placeholder="请输入手机号" autofocus required > //自动聚焦,且输入字体后，请输入手机号文件会消失
url:地址
<input type="url" name="" id="" accesskey="c" > //使用快捷键聚焦
number: 数字
<input type="number" name="" id="" placeholder="请输入手机号" autofocus > //只能输入数字。
time: 时间
<input type="time" name="" id="" autofocus >
date: 日期
<input type="date" name="" id="" autofocus >
search: 搜索
<input type="search" name="" id="">
range: 滑动条
<input type="range" name="" id="" placeholder="请输入手机号" autofocus >
file: 引入multiple 多个文件上传
<input type="file" name="" id="" autofocus required multiple width="80px">
效果图： time date range
插入视频和音频
Audio
Firefox：支持 Ogg Vorbis和WAV
Opera ：支持Ogg Vorbis和WAV
Safari ：支持MP3，AAC格式 ，和MP4
Chrome ：支持Ogg Vorbis，MP3，WAV，AAC和MP4
Internet Explorer 9+ ：支持MP3，AAC格式 ，和MP4
IOS ：支持MP3，AAC格式 ，和MP4
Android ：支持AAC和MP3
为了最大程度支持所有上面提到的浏览器，建议开发者使用Ogg Vorbis和MP3这两种格式
<audio controls autoplay loop> // 可以调节 自动播放 循环
<source src="../audio/bgsound.mp3" > 先播放第一个音频，不行则跳至第二个,都不行，则显示“你的浏览器版本过低”
<!--<source > wav格式-->
<source src="../audio/music.ogg">
你的浏览器版本过低
</audio>
Video
Firefox ：支持Ogg Theora格式和WEBM
Opera ：支持Ogg Theora格式和WEBM
Safari ：支持MP4
Chrome ：支持Ogg Theora格式，MP4和WEBM
Internet Explorer 9 ：支持MP4和WEBM(需要安装插件)
IOS ：支持MP4
Android ：支持MP4和WEBM(Android 2.3版本以上)
为了支持上述所有的浏览器，建议使用ogg和MP4视频文件作为source元素,也可以使用MP4和WEBM文件格式。
<video controls loop>
<!--webm格式-->
<source src="../video/movie04.ogg">
<source src="../video/mp4.mp4">
你的浏览器版本过低
</video>
插入视频:
<iframe height=1000 width=1000 src='http://player.youku.com/embed/XNDI0MzE3NTUyOA==' frameborder=0 'allowfullscreen'></iframe>
结构伪类选择器、属性选择器、伪元素选择器
结构伪类选择器
html结构:
<ul class="ul">
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
css样式:
.ul{
margin-top: 10px;
padding-left: 20px;
width: 100%;
list-style: none;
}
li:first-child{
background-color: #999999;
}
li:last-child{
background-color: green;
}
li:nth-child(even){
background-color: rosybrown;
}
li:nth-child(odd){
font-size: 20px;
}
li:nth-child(3){
background-color: yellow;
}
li:nth-child(4n){
font-weight: 700;
font-style: italic;
}
ul :first-child{
background-color:royalblue; /*这个效果这 li:first-child 一样。都是选中第一个li*/
}
属性伪类选择器
html结构：
<div class="attr"><a href="#" class="ad">包含属性</a>
<a href="#" name="mingzi">有名字</a>
<a href="#" class="testh">test开头</a>
<a href="#"class="testf">test开头</a>
<a href="#" class="af">包含属性</a>
</div>
css样式：
.attr{
width: 400px;
margin: 20px auto;
height: 100px;
}
.attr a{
display: inline-block;
height: 20px;
font-size: 14px;
line-height: 20px;
text-decoration: none;
color: #999999;
}
.attr a[class]{ //选中包含class属性的所有的a标签
color: #00aaee;
}
.attr a[class="ad"]{ //选中class=“ad” 的a 标签
font-weight: bolder;
}
.attr a[name]{ //选中包含name属性的所有的a标签
color: #ecc000;
}
.attr a[class^="test"]{ //选中a标签中class 以 test 开头的
color: #ff3333;
}
.attr a[class$="f"]{ /选中以 “f” 结尾的a标签
font-style: italic;
}
.attr a[class*="t"]{ //选中class 中包含 t 的标签
font-family: 方正粗黑宋简体;
}
伪元素选择器
html结构：
<p>乐居财经讯 杨倩 7月3日，因原董事长王振华被刑事拘留，新城控股董事会选举产生新任董事长，王振华之子王晓松接任董事长一职。期间，网络上出现涉及王晓松的传闻，称“儿子做局”、“这次的案发或许是父子相争”等。</p>
css样式：
p{
margin: auto;
width: 500px;
line-height: 20px;
}
p:first-letter{ //第一个字体
font-size: 30px;
}
p:first-line{ //第一行
background-color: #00aaee;
}
p::selection{ // 文字选中之后的效果
color: #ffb300;
background-color: pink;
}
before 和after 伪元素
demo：
html：
<div class="ifont">
<input type="text" name="" id="">
</div>
css：
.ifont::before{
/*在该标签前面添加一个盒子，默认是行内元素，没有宽高.*/
content: "我是谁";
}
.ifont::after{
/*在该标签后面添加一个伪元素,*/
content: "我在哪里？";
}
效果如下： 
和图标字体联合使用：
html结构：
<div class="icfont">
<input type="text" class="in">
</div>
css样式：
@font-face {
font-family: 'icomoon';
src: url('../icomoon/fonts/icomoon.eot?90ytl7');
src: url('../icomoon/fonts/icomoon.eot?90ytl7#iefix') format('embedded-opentype'),
url('../icomoon/fonts/icomoon.ttf?90ytl7') format('truetype'),
url('../icomoon/fonts/icomoon.woff?90ytl7') format('woff'),
url('../icomoon/fonts/icomoon.svg?90ytl7#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
.icfont{
position: relative;
width: 100px;
height: 25px;
margin: auto;
box-sizing: border-box;
}
.icfont::before{
content: "\ea2e";
font-family: icomoon;
font-style: normal;
font-size: 12px;
font-weight: normal;
position: absolute;
right: 5px;
top: 6px;
transition: all 0.5s;
}
.icfont:hover{
border: 1px solid #ff3333;
}
.icfont:hover .in{
border: 0;
}
.icfont:hover::before{
color: red;
transform: rotate(90deg);
}
.in{
margin: 0px;
padding: 2px 6px ;
outline: none;
width: 100%;
height: 100%;
box-sizing: border-box;
}
悬浮之前：
悬浮后:
练习实现如下效果
悬浮前：
悬浮后：
悬浮前:
悬浮后:
