HTML5 教程学习 - HTML5+CSS3 实战(11) 主样式表
在之前的7篇实战教程中，我们搞定了范例页面的HTML代码；今天开始我们将重心转移到样式表方面。
在昨天的“HTML5 教程学习 - HTML5+CSS3 实战(10) 页面代码整合”中可以看到，完整的页面代码里面包含一个main.css样式表；我们今天就来创建这个文件，接下来所有的样式代码也都要写到这个文件中。
今天要做的基础部分的主要目的呢，是进行一部分的样式重置(reset)，同时根据页面设计稿将一些基本的元素样式设定好。有以下几点需要注意的样子：
- 前面几行注释掉的是一些基本信息，在做自己项目的时候可以酌情编辑或去掉；另外可以发现原作者的名字Ramírez和Modern War 2后面美军关卡主角的名字是相同的...
- 虽然这部分样式代码本身有一定的重置作用，不过作者还是导入了来自Eric Meyer的重置文件；另外一个导入的样式表在不久的将来会讲到。
该说的不该说的都说了，接下来我们来看看实际的代码，然后做些相关解释：
/*
Name: Smashing HTML5
Date: July 2009
Description: Sample layout for HTML5 and CSS3 goodness.
Version: 1.0
Author: Enrique Ramírez
Autor URI: http://enrique-ramirez.com
*/
/* Imports */
@import url("reset.css");
@import url("global-forms.css");
/***** Global *****/
/* Body */
body {
background: #F5F4EF url('../images/bg.png');
color: #000305;
font-size: 87.5%; /* Base font size: 14px */
font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
line-height: 1.429;
margin: 0;
padding: 0;
text-align: left;
}
/* Headings */
h2 {font-size: 1.571em} /* 22px */
h3 {font-size: 1.429em} /* 20px */
h4 {font-size: 1.286em} /* 18px */
h5 {font-size: 1.143em} /* 16px */
h6 {font-size: 1em} /* 14px */
h2, h3, h4, h5, h6 {
font-weight: 400;
line-height: 1.1;
margin-bottom: .8em;
}
/* Anchors */
a {outline: 0;}
a img {border: 0px; text-decoration: none;}
a:link, a:visited {
color: #C74350;
padding: 0 1px;
text-decoration: underline;
}
a:hover, a:active {
background-color: #C74350;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #333;
}
/* Paragraphs */
p {margin-bottom: 1.143em;}
* p:last-child {margin-bottom: 0;}
strong, b {font-weight: bold;}
em, i {font-style: italic;}
::-moz-selection {background: #F6CF74; color: #fff;}
::selection {background: #F6CF74; color: #fff;}
/* Lists */
ul {
list-style: outside disc;
margin: 1em 0 1.5em 1.5em;
}
ol {
list-style: outside decimal;
margin: 1em 0 1.5em 1.5em;
}
dl {margin: 0 0 1.5em 0;}
dt {font-weight: bold;}
dd {margin-left: 1.5em;}
/* Quotes */
blockquote {font-style: italic;}
cite {}
q {}
/* Tables */
table {margin: .5em auto 1.5em auto; width: 98%;}
/* Thead */
thead th {padding: .5em .4em; text-align: left;}
thead td {}
/* Tbody */
tbody td {padding: .5em .4em;}
tbody th {}
tbody .alt td {}
tbody .alt th {}
/* Tfoot */
tfoot th {}
tfoot td {}
其中这行代码：
text-shadow: 1px 1px 1px #333;
为对象文字设定阴影效果，具体样式是阴影右偏移1像素，下偏移5像素，本身模糊2个像素。
然后呢，这行代码：
* p:last-child {margin-bottom: 0;}
表示容器中的最后一个<p>的下间距为0。通常我们会给容器设置一定的padding，这样做可以避免最后一个段落与容器底部之间的间距过大。
最后呢，我们来看下面这两行：
::-moz-selection {background: #F6CF74; color: #fff;}
::selection {background: #F6CF74; color: #fff;}
::selection状态伪类用来设定文字被选定之后的样式；它只有背景色和字色两个属性；::-moz-selection用来兼容Mozilla。
OK今天先到这里，明天我们来搞一些专门针对HTML5元素的样式设置。
译者：Viiiix7210
原文参考：Coding A HTML 5 Layout From Scratch
| < Prev | Next > |
|---|
