他们说这叫“面向对象CSS” (3) 主要样式代码

Blog - 代码 Monday, 01 March 2010 11:29

其实是another HTML5+CSS3实战教程。之前一篇里面，我们了解了这轮学习的目标页面范例以及相应的页面代码，对整体布局的HTML5用法也做了简要的解释；今天开始进入样式方面的话题。

在之前一篇的页面代码范例中，我们可以看到该页面一共调用了3个样式表：reset.css、text.css和styles.css；其中reset.css就是Eric Meyer的样式重置方案；text.css用来定义一些文本元素的基本样式，我们来看下它的代码：

body { font: 13px/1.6 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;}
h1, h2, h3, h4, h5, h6 { color:#333; }
h1 { font-size: 50px; text-shadow:1px 1px 0 #fff; font-family:arial black, arial}
h2 { font-size: 23px; }
h3 { font-size: 21px; }
h4 { font-size: 19px; }
h5 { font-size: 17px; }
h6 { font-size: 15px; }
p, h1, h2, h3, h4, h5, h6, ul {  margin-bottom: 20px; }
 
article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; }

可以看到这里还包括HTML5新元素标签的默认样式重置；这一点在之前一期的实战系列中也讲到过。

接下来看主要的样式表styles.css；首先是一些基本元素的样式，例如body和链接：

body 
  { background:url(../img/grad.jpg) repeat-x #c0c0c0; 
  }
 
a 
  { text-decoration:none; 
    color:#474747; 
    padding:1px;
  }
a:hover 
  { background:#db5500; 
    color:#fff; 
  }
.selected 
  { border-bottom:1px solid #db5500;  
  }
li 
  { padding-left:15px; 
    background:url(../img/bullet.png) 0 5.9px no-repeat; 
  }

接下来的代码用来定义页面主要结构组成部分的样式：

#container
  { margin:40px auto;
    width:960px;
    border:1px solid #ccc;
    background:#ececec;
  }
  #container > header, #container > footer
    { padding:80px 80px 80px;
      width:800px;
      overflow:hidden;
      border: 1px solid #ccc;
      border-width:1px 0 1px 0;
    }
  #container > header
    { background:url(../img/header.jpg) repeat-x #d9d9d7;
    }
    #container > header li, #container > footer li
    { float:left;
      padding:0 5px 0 0;
      background:none;
    }
  #container > section
    { background:#fdfdfd;
      padding:0 40px 40px 80px;
      float:left;
      width:493px;
      border-right:1px solid #ccc;
    }
  #container > aside
    { padding-top:20px;
      float:left;
      width:346px;
    }
  #container > footer
  { padding:40px 80px 80px;
    background:#fcfcfc;
  }
    #container > footer li:after
    { content:" |"
    }
      #container > footer li:last-child:after
      { content:""
      }

然后是每篇文章的局部样式：

.post                     
  { overflow:visible; 
    margin-top:40px; 
  }
  .post > header          
    { margin:0 0 20px 0; 
      position:relative; 
    }
  .post .date             
    { padding:2px 4px ; 
      background:#474747; 
      color:#ececec; 
      font-weight:bold; 
      transform:rotate(270deg);
      -moz-transform:rotate(270deg);
      -webkit-transform:rotate(270deg);
      position:absolute; 
      top:60px; 
      left:-105.5px; 
    }
  .post img               
    { float:left;  
      margin-right:10px;
    }
    .post.ext img         
      { float:right; 
        margin:0 0 0 10px; 
      }
  .post footer            
    { overflow:hidden; 
    }
  .post footer li
    { float:left;
      background:none;
    }