【译】用html5和css3 开发博客实例(2)

接上一篇《用html5和css3 开发博客实例(1)》,这部分内容,主要是以CSS为主,做一个博客界面。

6、用 CSS3添加样式

CSS3建立在早期版本的CSS基础上。并增加了许多新功能,包括新的选择器、伪类和属性。用这些新 功能,使其更易于进行布局。让我们继续深入。

基本设置

首先,定义一些有关网 页排版和背景颜色等方面的基本样式。同CSS2.1代码差不多

/* Makeshift CSS Reset */
{
	margin: 0;
	padding: 0;
}

/* Tell the browser to render HTML 5 elements as block */
header, footer, aside, nav, article {
	display: block;
}

body {
	margin: 0 auto;
	width: 940px;
	font: 13px/22px Helvetica, Arial, sans-serif;
	background: #f0f0f0;
}

h2 {
	font-size: 28px;
	line-height: 44px;
	padding: 22px 0;
}

h3 {
	font-size: 18px;
	line-height: 22px;
	padding: 11px 0;
}

p {
	padding-bottom: 22px;
}

现在我们来写一个简单的代码用以设置 margin 和 padding 的样式。具体操作环境中我会用更完整的CSS重置这段代码,就像Eric Meyer的那样(CSS 2.1)。但仅在本教程所涉及的范围内。
当我们告诉浏览器呈现所有HTML5块元素时,浏览器虽然会加载那些不认可的元素(这就是为什么HTML 5向下兼容的原因),但默认情况下并不知道如何渲染。
请注意我是如何选择字体大小的,用像素而不是用ems或%。这是为了保持该教程的先进性。当主流浏览器完全支持HTML5和CSS3时,我们将获得页面缩放功能,而不仅仅是字体大小。由于浏览器能用任意方式改变网页大小,就消除 了需要相对单位来界定大小的因素。
应用基本样式后看看页面的变化。现在我们可以进入到页面样式设置的其余部分了。对于页头来说无 需额外的样式,因此我们将直接进入导航样式的设置中。

设置导航样式

重点是注意body的宽度被定义为940px,且已经居中。导航栏要与窗口等宽,所以要应用一些其他样式:

nav {
	position: absolute;
	left: 0;
	width: 100%;
	background: url("nav_background");
}

将导航元素设为绝对定位,对齐到窗口左侧,并令其与窗口等宽。将嵌套的列表设为居中以显示布局的边界:

nav ul {
	margin: 0 auto;
	width: 940px;
	list-style: none;
}

现在,我们将定义一些其他样式,使导航项的外观看起来漂亮些并基于布局使其对齐到网格。包括一些重点页面的样式和一个自定义样式的订阅链接。

nav ul li {
	float: left;
}

	nav ul li a {
		display: block;
		margin-right: 20px;
		width: 140px;
		font-size: 14px;
		line-height: 44px;
		text-align: center;
		text-decoration: none;
		color: #777;
	}

		nav ul li a:hover {
			color: #fff;
		}

		nav ul li.selected a {
			color: #fff;
		}

		nav ul li.subscribe a {
			margin-left: 22px;
			padding-left: 33px;
			text-align: left;
			background: url("rss.png") left center no-repeat;
		}

设置导言样式

导言标记非常简单:就是带有标题和简介的 一小节文字。但是,我们将使用一些CSS3的新技巧,使其看起来更具吸引力。

#intro {
	margin-top: 66px;
	padding: 44px;
	background: #467612 url("intro_background.png") repeat-x;
	background-size: 100%;
	border-radius: 22px;
}

我们使用了两个新的属性。首先是background-size属性,它允许你缩放背景图像。就我们而言, 将x、y两轴都缩放到100%。如果添加了更多的内容可以让边框伸缩,渐变背景也将同时伸缩。

其次是border-radius属性,适 用于带圆角的元素。我们每个圆角的 半径都设为22px。你也可以给每个圆角指定不同的值或选择仅将某个的角设为圆角。

不幸的是,在主流浏览器中这个性能未得以得到充分发 挥。但是,我们可以通过使 用提供商的特定属性获得一些支持。Safari、Opera及 Konqueror的新版本都支持Background-size。Safari和Firefox的新版本支持Border-radius。

#intro {
	...
	/* Background-size not implemented yet */
	-webkit-background-size: 100%;
	-o-background-size: 100%;
	-khtml-background-size: 100%;

	/* Border-radius not implemented yet */
 	-moz-border-radius: 22px;
	-webkit-border-radius: 22px;
}

既然我们有一个background-color定义,个别浏览器不支持background-size也没有多大 关系,如Firefox。现在我们只需要设置头部和文本的风格即可。

#intro h2, #intro p {
	width: 336px;
}

#intro h2 {
	padding: 0 0 22px 0;
	font-weight: normal
	color: #fff;
}

#intro p {
	padding: 0;
	color: #d9f499;
}

图片可以很轻易地被指定为#intr的第二个背景图片,CSS3支持这样。

#intro {
	...
	background: #467612 url("intro_background.png") top left (287px 100%) repeat-x,
			url("intro_flower.png") top right (653px 100%) no-repeat;
	...
}

我们赋予这两个背景图片明确的尺寸以确保他们不重叠,请记住设置背景大小的简略标记法。

不幸的是当前没有浏览器能可靠支持,因此我们必须采用古老的做法:通过内嵌图片,用CSS定位。见最后一个例子,看看如何做。

9、内容域和边栏的风格化

内容域和边栏要相互对齐。传统的方式是利用浮动,但在CSS 3中我们将用表格!

“啥?用表格?”你可能会有疑问并感到困惑。你可能学过,在网页布局中使用表格绝对是一大禁忌,现在也依然是。你不应使table元素来布局。但在CSS 3中,我们可以让某些元素行为更像表!首先,我们需要一些div来群组章节部分,用更合理一点的方式。

<div id="content">
	<div id="mainContent">
		<section>
			<!-- Blog post -->
		</section>
		<section id="comments">
			<!-- Comments -->
		</section>
		<form>
			<!-- Comment form -->
		</form>
	</div>
	<aside>
		<!-- Sidebar -->
	</aside>
</div>

一切仍然符合语义化标准,现在我们要给他样式。我们希望#content div表现出表格的特性,用#mainContent,就使其如表的单元格一般。

#content {
	display: table;
}

	#mainContent {
		display: table-cell;
		width: 620px;
		padding-right: 22px;
	}

	aside {
		display: table-cell;
		width: 300px;
	}

好了!没有浮动、伪纵列背景图片、清除或设置间距。我们做出的内容就像一个表,这让我们更易于排版。

10、博客帖子的风格

这个博客帖子页眉部分的风格很一般,因此我们将跳到最有趣的部分:多行布局。

多行布局

以前文本的多行布局离不开手动拆分段落。但在CSS3里它就像一块蛋糕,虽然对于当前正使用的浏览器来说,我们 必须增加一个div来解决这种情况。

<div>
	<p>Lorem ipsum dolor sit amet...</p>
	<p>Pellentesque ut sapien arcu...</p>
	<p>Vivamus vitae nulla dolor...</p>
	...
</div>

现在我们可以添加两个简单的属性然后收工。

.blogPost div {
	column-count: 2;
	column-gap: 22px;
}

我们希望第二列有22像素的间距。这需要额外的div,因为目前还没有一个元素支持超过一列的跨度。但在未来你可以指定column-span,那时我们只需这么写:

.blogPost {
	column-count: 2;
	column-gap: 22px;
}

	.blogPost header {
		column-span: all;
	}

当然,仅有Safari和Firefox浏览器支持 column-count和column-gap属性。我们目前必须使用提供商特定的属性。

.blogPost div {
	/* Column-count not implemented yet */
	-moz-column-count: 2;
	-webkit-column-count: 2;

	/* Column-gap not implemented yet */
	-moz-column-gap: 22px;
	-webkit-column-gap: 22px;
}

如果你仔细观察博客帖子里的图片,你会发现一个投影。我们可以使用CSS3和box-shadow属性来生成。

阴影

.blogPost img {
	margin: 22px 0;
	box-shadow: 3px 3px 7px #777;
}

第一个“3px”告诉浏览器阴影的水平位置。第一个“3px”告诉浏览器垂直位置。最后的“7px”确定模糊值的大小。如果设为0就是实色。最后我们定义阴影的基本色调,虽然放在最后说,但并非不重要。颜色的浓淡取决于你设置的模糊值。

这个属性也许并不令人吃惊,因为它还未被所有的浏览器支持。事实上,该属性只能在Safari浏览器中工作,你必须使用提供商特定的属性。

.blogPost img {
	margin: 22px 0;
	-webkit-box-shadow: 3px 3px 7px #777;
}

11、为评论设置斑马纹

所谓的斑马纹即网站中常用的隔行换色,一般的做法是用程序遍历所有奇数元素并以突出的颜色显示。CSS3介绍了伪类“nth-child”,这使隔行换色简单到无以复加的地步,从此不必再用编程做这件事了。我们将用这个属性来为评论设置隔行换色。

section#comments article:nth-child(2n+1) {
	padding: 21px;
	background: #E3E3E3;
	border: 1px solid #d7d7d7;

	/* Border-radius not implemented yet */
	-moz-border-radius: 11px;
	-webkit-border-radius: 11px;
}

“2n+1”这个值看起来很古怪,但如果明白其意义就很简单了:

  • 2n表示选择第2n项,其中n为变量,即n=0时不选择,n=1时选择第2项,n=2时选择第4项,n=3时选择第6项等依次类推。如果为3n表示选择第 3n项。为4n时表示选择第4n项。对隔行换色来说,2n表示每隔一行显示一个高亮项,3n表示每隔两行显示一个高亮项,4n表示每隔三行显示一个高亮项等等。
  • +1告诉浏览器从元素1开始。如果你熟悉编程,你就知道所有数组都是从0开始的,在这里也是一样。这意味着元素1实际上是同系列的第二个元素。如 2n+1,当n=0时指的是第一个元素,当n=1时指的是第三个元素,当n=2时指的是第五个元素等等。

此处,也可以简写为:

section#comments article:nth-child(odd) { ... }

这是因为该简写标准包括两个最常用的值,奇和偶。评论部分风格的其他设置,用你的新知识就可以简单理解了。

设置评论表单、页脚和侧边栏的风格

联系前面学到的CSS 3技术重新设置评论表单、页脚和侧边栏的风格。在评论表单和页脚部分我们使用在前面中用过的表格布局技术。侧边栏的border-radius则在四角都添加的圆角。

12、最终设计结果

看一下该应用最终设计的样式

我们设计的这个页面可以在Safari 4和基于WebKit的浏览器中正确呈现,因为它目前唯一支持我们所采用的CSS 3技术的渲染引擎。Firefox 3在给图片应用圆角时有一些问题,并且也不支持设置背景大小,但在布局方面则没什么问题。我们忽略Internet Explorer,因为它需要插件才能应用HTML 5。你也可以定义一些规则以获得各主要浏览器的支持,但这些不在本教程的讨论范围内。

结论

当所有浏览器都支持HTML 5和CSS 3的一天到来时建设一个网站将更容易。我们最终将停用层浮动,我们在编写背景图片或隔行换色的javascript扩展上花费更少的时间。希望我们能利用这些额外的时间来研究网页设计中长期被忽视的领域,前台优化及恰当的通信架构。

原文出处:http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/

发表评论

电子邮件地址不会被公开。 必填项已用*标注