<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Object Oriented CSS</title>
<!--[if IE]><script src="http://nettuts.s3.cdn.plus.org/450_ooCss/http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!-- This makes IE recognize and use the HTML5 elements -->
<link type="text/css" rel="stylesheet" href="/css/reset.css" />
<link type="text/css" rel="stylesheet" href="/css/text.css" />
<link type="text/css" rel="stylesheet" href="/css/styles.css" />
</head>
<body>
<article id="container">
<header>
<h1>Object Oriented CSS</h1>
<h2 class="subtitle">(really just a bunch of best practices and patterns; not a new language)</h2>
<nav>
<ul>
<li><a href="/index.htm" class="selected">Home</a></li>
<li><a href="/=post.htm">Archives</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<section>
<article class="post">
<header>
<span class="date">September 10, 2009</span>
<h2><a href="/post.htm">Check out WorkAwesome!</a></h2>
</header>
<section>
<img src="http://nettuts.s3.cdn.plus.org/450_ooCss/img/wa.jpg" alt="Work Awesome" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
</section>
<footer>
<ul>
<li><a href="#">Read More . . .</a></li>
<li><a href="#">Retweet!</a></li>
<li><a href="#">Comments (4)</a></li>
</ul>
</footer>
</article>
<article class="post ext">
<header>
<span class="date">September 7, 2009</span>
<h2>The Intro Post</h2>
</header>
<section>
<img src="http://nettuts.s3.cdn.plus.org/450_ooCss/img/wa.jpg" alt="Work Awesome" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
</section>
<footer>
<ul>
<li><a href="#">Read More . . .</a></li>
<li><a href="#">Retweet!</a></li>
<li><a href="#">Comments (4)</a></li>
</ul>
</footer>
</article>
<article class="post">
<header>
<span class="date">September 5, 2009</span>
<h2>Welcome</h2>
</header>
<section>
<img src="http://nettuts.s3.cdn.plus.org/450_ooCss/img/wa.jpg" alt="Work Awesome" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis urna dui,
ut tempus tortor. Aliquam enim massa, porta a vehicula in, vehicula at lectus. Ut turpis
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat a felis pulvinar
tempor ut id leo. Aenean accumsan feugiat ultrices. Duis rhoncus eros id odio faucibus
imperdiet. Nulla nibh mauris, placerat sagittis placerat sed, commodo in mi.</p>
</section>
<footer>
<ul>
<li><a href="#">Read More . . .</a></li>
<li><a href="#">Retweet!</a></li>
<li><a href="#">Comments (4)</a></li>
</ul>
</footer>
</article>
</section>
<aside>
<article class="side-box">
<header>
<h3>Archives</h3>
<p>look into the past</p>
</header>
<section>
<ul>
<li><a href="#">August 2009</a></li>
<li><a href="#">July 2009</a></li>
<li><a href="#">June 2009</a></li>
<li><a href="#">May 2009</a></li>
<li><a href="#"> . . . </a></li>
</ul>
</section>
</article>
<article class="pop-out side-box">
<header class="post-it">
<h3>Recent Comments</h3>
<p>see what folks are saying</p>
</header>
<section>
<ul>
<li>
<p>I think oocss is really cool!</p>
<p class="meta">By J. Garret on Sept 12, about "The Intro Post"</p>
</li>
<li>
<p>Are you kidding? CSS can't ever be Object Oriented.</p>
<p class="meta">By Joe Thomas on Sept 11, about "The Intro Post"</p>
</li>
<li>
<p>Envato has done it again; workAwesome is simply awesome!</p>
<p class="meta">By GV on Sept 10, about "Check out WorkAwesome"</p>
</li>
<li>
<p>I really like the site's desing; another work of art from Collis.</p>
<p class="meta">By Anonymous on Sept 10, about "Check out WorkAwesome"</p>
</li>
</ul>
</section>
</article>
</aside>
<footer>
<ul>
<li>Standard</li>
<li>Footer</li>
<li>Information</li>
<li>Yada</li>
<li>Yada</li>
<li>© 2009</li>
</ul>
</footer>
</article>
</body>
</html>
他们说这叫“面向对象CSS” (2) 目标范例及HTML5代码
其实是another HTML5+CSS3实战教程。昨天我们起了个头，看了作者对他所定义的“面向对象CSS”的概述；天上一句地上一句的且不管他，今天来实际看看究竟要搞怎样的飞机。
这个“Object Oriented CSS”页面是最终成品图，也就是我们的目标范例。和之前一档HTML5+CSS3实战类似，都是用这样的Blog文章列表形式的页面来做示范，比较典型；如果慢慢的看到这样的页面时脑海里能用新的HTML5元素标签建立起一套轮廓来，那是很好的事情来；这也是反复用小实战演示的方法来学习的一个目的之一。
推荐到目标页面中使用firebug一类对应实际样式查看代码；我拿来放在下面先：
忽略细节，页面主要由以下几个部分组成：
作者在body中使用一个<article>标签作为所有内脏的容器，头部和页脚对应的自然是<header>和<footer>，主要内容部分的容器是<section>，侧边栏就是<aside>了。页面代码结构和HTML5元素标签的使用就是这样一个大的状况，明天我们进入样式的部分，从整体到局部来看看作者所谓“面向对象CSS”的写法。
译者：Viiiix7210
原文参考：Object-Oriented CSS: What, How, and Why
| < Prev | Next > |
|---|
