Go语言视频零基础入门到精通

javalearner

在之前的7篇实战教程中，我们搞定了范例页面的HTML代码；今天开始我们将重心转移到样式表方面。    完整的页面代码里面包含一个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 {}
[/code]
   
  

其中这行代码：

  
   
  

1. text-shadow: 1px 1px 1px #333;

复制代码

   
  
为对象文字设定阴影效果，具体样式是阴影右偏移1像素，下偏移5像素，本身模糊2个像素。 然后呢，这行代码：

  
   
  

1. * p:last-child {margin-bottom: 0;}

复制代码

   
  
表示容器中的最后一个<p>的下间距为0。通常我们会给容器设置一定的padding，这样做可以避免最后一个段落与容器底部之间的间 距过大。 最后呢，我们来看下面这两行：

  
   
  

1. ::-moz-selection {background: #F6CF74; color: #fff;}
2. ::selection {background: #F6CF74; color: #fff;}

复制代码

   
  
::selection状态伪类用来设定文字被选定之后的样式；它只有背景色和字色两个属性；::-moz-selection用来兼容 Mozilla。



  
  
   
   

     
   

     
   
  

复制代码