• [织梦吧]仅有域名:www.tbea-hb.com,织梦DedeCMS学习渠道.

当时方位: > 网页制造 > DIV&CSS >

为往后的项目制造空白CSS模板文件

来历: www.tbea-hb.com 修正:织梦吧 时刻:2018-09-19点击:


假如你从前保藏过许多关于CSS的最佳实践但还没开端运用它们,那么这篇文章将协助你制造一个很好且很有安排的CSS文件来应用于一些CSS最佳实践。在 这儿我将为为我的下一个项目制造一个根本的CSS模板文件。运用规范的重设(Reset)办法,界说一些根本的便利的类,命名一些常见的页面区域等…

在开端之前,创立一个新建文件夹并将它命名为”styles”(您也能够命名自己喜爱的名字),然后在该文件夹下创立两个文件别离命名为“reset.css” 和 “style.css”。现在你的文件夹结构不出意外的话应该是这样的:

–root
|
styles
– reset.css
– style.css
|

1-独自运用一个大局CSS重设办法

我以Eric Meyer的重设为根底。仅仅去掉了其间的“ins”, “del”和 “table”,由于我实在是很少运用它们,由于某些原因又从头界说了“strong”“em”,我知道您或许会有自己的办法,所以您也能够自在为自己的文件界说。写完CSS重设后,将其存储为”reset.css”。

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: ”;
content: none;
}
:focus {
outline: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}

在这个重设文件里我去掉了“body”款式,由于一般咱们在不同的项目中都会界说不同的”body”款式,所以咱们将它放在style.css文件中。

2-在顶部为款式表增加描绘注释

现在咱们翻开style.css来开端写一些根本的款式。在创立一个新款式文件(style.css)后,榜首件事应该是在文件顶部写一些结构性的 注释,用来描绘一些款式的细节,比方版别、作者、作者的具体联络办法等,这将协助你和其他前端开发人员运用该文件。描绘细节应当包含像作者名字、版别和提 供更多信息的URL地址。我比较喜爱,由于它比较广泛。

/*
主题称号: 玫瑰主题
URI: the-theme’s-homepage
描绘: a-brief-description
作者: 您的名字
作者 URI: 您的-URI
模板: 在这儿能够提示它的父级模板
版别: 版别号
彬Go-集前端开发/网页规划/网站可用性/用户体会于一体的兴趣互联网日子
网址:http://blog.bingo929.com/
*/

3-界说便于查找的目录表

现在,咱们来一同界说咱们款式的目录表。界说TOC能协助其他人乃至自己更容易与阅览和了解代码。或许您会觉得这个没什么必要,但请信任我!

首要让咱们看看它应当是什么姿态的:

[目录表]
0- Reset
1- Global
2- Links
3- Headings
4- Header
5- Navigation
6- Middle
7- Forms
8- Extras
9- Footer

正如您看到的,咱们将目录表从0到9分红10部分。

  • TOC十分简略以至于它不会花费您超越1分钟的时刻。
  • 您不必为每个项目界说不同的TOC。
  • 命名的运用十分遍及,所以能够合适模本的任何部分。
  • 不运用动态的#ID和.class。
  • 它并不大所以不会占用许多Kbytes。
  • 次序的数字很有用,用处请往下看。

4-运用注释将每个部分离隔并运用一个=符号

请看一下款式,在0部分我将之前的重设款式表reset.css导入。

/* =0 Reset
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
@import url(’reset.css’);
/* =1 Global

–––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =2 Links
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =3 Headings
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =4 Header
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =5 Navigation
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =6 Middle
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =7 Form
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =8 Extra
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =9 Footer
–––––––––––––––––––––––––––––––––––––––––––––––––––*/

在每个部分的分区注释中运用=符号,能够协助您和您的团队其他成员快速找到需求的代码。咱们都知道,在CSS款式中的声明几乎是不会运用等号的,所 以咱们能够运用等号来协助查找。比方你想寻觅表单的相关款式代码,能够先检查目录表中表单对应的数字,然后查找”=7″便能够快速跳转到表单的相关代码区 域。

5-界说最常用的类

其实有一些类是咱们要常常运用的,那咱们为什么不一次性把它们都界说好呢?现在正是时候!我增加了一些个人比较喜爱的,当然您也能够依照自己的喜爱进行增修正。将它们界说在“=1 Global”下。
我还把body选择器界说在了Global中。
注:一下界说类仅仅是比较简略的一些。

/* =1 Global
–––––––––––––––––––––––––––––––––––––––––––––––––––*/
body {
line-height: 1;
font: normal 12px Arial, Helvetica, sans-serif;
vertical-align: top;
background: #fff;
color: #000;
}
.right {
float: right;
}
.left {
float: left;
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
.align-center {
text-align:center;
}
.justify {
text-align:justify;
}
.hide {
display: none;
}
.clear {
clear: both;
}
.bold {
font-weight:bold;
}
.italic {
font-style:italic;
}
.underline {
border-bottom:1px solid;
}
.highlight {
background:#ffc;
}
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignleft {
float:left;
margin:4px 10px 4px 0;
}
img.alignright {
float:right;
margin:4px 0 4px 10px;
}
.clearfix:after {
content: “.”;
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}

6-为链接和标题界说款式

终究,咱们来界说恰当的链接和标题的款式,由于他们在任何项目中都是必需的。假如你在制造某个网页,你不可能不是用它们。

/* =2 Links
––––––––––––––––––––––––––––––––––––––––––––––––––*/
a:link, a:visited {
color: #333;
}
a:hover {
color: #111;
}
a:active {
color: #111;
}
/* =3 Headings
––––––––––––––––––––––––––––––––––––––––––––––––––*/
h1 {
font: bold 2em “Times New Roman”, Times, serif;
}
h2 {
font: bold 1.5em “Times New Roman”, Times, serif;
}
h3 {
font: bold 1.2em Arial, Geneva, Helvetica, sans-serif;
}
h4 {
font: bold 1em Arial, Geneva, Helvetica, sans-serif;
}
h5 {
font: bold 0.9em Arial, Geneva, Helvetica, sans-serif;
}

style.css模板的终究代码

/*
主题称号: 玫瑰主题
URI: the-theme’s-homepage
描绘: a-brief-description
作者: 您的名字
作者 URI: 您的-URI
模板: 在这儿能够提示它的父级模板

[目录表]
0- Reset
1- Global
2- Links
3- Headings
4- Header
5- Navigation
6- Middle
7- Forms
8- Extras
9- Footer
*/
/* =0 Reset
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
@import url(’reset.css’);

/* =1 Global
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
body {
line-height: 1;
font: normal 12px Arial, Helvetica, sans-serif;
vertical-align: top;
background: #fff;
color: #000;
}
.right {
float: right;
}
.left {
float: left;
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
.align-center {
text-align:center;
}
.justify {
text-align:justify;
}
.hide {
display: none;
}
.clear {
clear: both;
}
.bold {
font-weight:bold;
}
.italic {
font-style:italic;
}
.underline {
border-bottom:1px solid;
}
.highlight {
background:#ffc;
}
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignleft {
float:left;
margin:4px 10px 4px 0;
}
img.alignright {
float:right;
margin:4px 0 4px 10px;
}
.clearfix:after {
content: “.”;
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
/* =2 Links
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
a:link, a:visited {
color: #333;
}
a:hover {
color: #111;
}
a:active {
color: #111;
}
/* =3 Headings
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
h1 {
font: bold 2em “Times New Roman”, Times, serif;
}
h2 {
font: bold 1.5em “Times New Roman”, Times, serif;
}
h3 {
font: bold 1.2em Arial, Geneva, Helvetica, sans-serif;
}
h4 {
font: bold 1em Arial, Geneva, Helvetica, sans-serif;
}
h5 {
font: bold 0.9em Arial, Geneva, Helvetica, sans-serif;
}
/* =4 Header
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =5 Navigation
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =6 Middle
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =7 Form
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =8 Extra
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* =9 Footer
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/

总结

感谢咱们阅览本文,CSS最佳实践在某种意义上确实会对咱们供给很大的协助。它能够协助咱们节约更多的工作时刻,明显进步工作效率。假如您有任何观点或主张,欢迎。

下载源文件

 

来历: 翻译:

 

About D8

  • ©2014 织梦吧(d8) DedeCMS学习交流渠道
  • 仅有网址 www.tbea-hb.com 网站地图
  • 联络咱们 1978130638@qq.com ,