自分で整理したresetlessを記録する
一般的にいくつかのプロジェクトをするときはresetが必要です.cssとstyle.cssの2つのファイル.だから、私自身のreset.cssはresetだけでなく、共通のcssをすべて中に入れます.
私はlessで書いたのです.調整を容易にするためです.今からsassを勉強していますが、まだ変換されていません.
コードは次のとおりです.
いくつかの変数は実際の使用で調整する必要があるからです.だから、コンパイルしたcssは入れません.
私はlessで書いたのです.調整を容易にするためです.今からsassを勉強していますが、まだ変換されていません.
コードは次のとおりです.
// Setting parameters by fungleo
@WinWitdh:1200px;
@BaseC:#555;
@LinkC:#06f;
@HoverC:#f60;
@FontSize:13px;
// reset by fungleo date 2015.08.27
@charset "UTF-8";
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,button,textarea,p,blockquote,table,th,td,menu{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0;table-layout:fixed}
ul,ol,menu{list-style:none}
fieldset,img{border:none}
img,object,select,input,textarea,button{vertical-align:middle}
input,textarea,select,address,caption,cite,code,dfn,em,i,b,strong,small,th,var,abbr{font-size:100%;font-style:normal}
caption,th {text-align: left;}
article,aside,footer,header,hgroup,nav,section,figure,figcaption {display: block;}
code, kbd, pre, samp, tt { font-family: Consolas,"Courier New", Courier, monospace;}
address, cite, dfn, em, var,i {font-style: normal;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content:"";content: none;}
a {
color:@LinkC; text-decoration:none;cursor: pointer;
&:link,&:visited, &:active{color: @LinkC;}
&:hover, &:focus {color:@HoverC; text-decoration:underline;outline:none;}
&,span,i,em,u,strong,b,p,img,ul,li,div,dd,dt,dl,ol,table,th,td,h1,h2,h3,h4,h5,h6,input,textarea,button,small,select {cursor: pointer;.dz;}
}
abbr[title], acronym[title] {border-bottom: 1px dotted;cursor: help;}
// base by fungleo
html {min-width:@WinWitdh;overflow-y: scroll;}
body {font-size: @FontSize;color: @BaseC;line-height: 2;}
body,button, input, select, textarea {font-family:tahoma,Helvetica, Arial,"\5FAE\8F6F\96C5\9ED1";*font-family:"\5FAE\8F6F\96C5\9ED1";}
h1 {font-size: @FontSize+10;}
h2 {font-size: @FontSize+8;}
h3 {font-size: @FontSize+6;}
h4 {font-size: @FontSize+4;}
h5 {font-size: @FontSize+2;}
h6 {font-size: @FontSize;}
hr {border: none;height: 1px;background: lighten(@BaseC,50%);}
.fl {float: left;}
.fr {float: right;}
.tl {text-align: left;}
.tr {text-align: right;}
.tc {text-align: center;}
.cf:before, .cf:after,.web:before, .web:after,.web_:before, .web_:after {content:"";display:table;}
.cf:after,.web:after,.web_:after {clear:both;}
.cf {zoom:1;}
.web {width: @WinWitdh;margin-left: auto;margin-right: auto;zoom:1;}
.web_ {min-width:@WinWitdh;width: 100%;zoom: 1;}
.block {display: block;}
.none {display:none}
.clear {clear: both; }
.dz(@time:0.25s){-webkit-transition: all @time ease-in-out;-moz-transition: all @time ease-in-out;-o-transition: all @time ease-in-out;transition: all @time ease-in-out;}
いくつかの変数は実際の使用で調整する必要があるからです.だから、コンパイルしたcssは入れません.