您现在的位置是:首页 > 网站制作 > 前端设计

前端设计

CSS简明教程(一)——如何在网页中添加样式

杨青 2013-07-24前端设计

没有css也就是层叠样式表,就没有现代的Web设计。即便是格式极为丰富、构图极为复杂的网页,也可以通过css把格式化工作转移到一个外部文件——样式表里。这样一来,网页标记就可以非常清晰易读。

在网页中添加样式

有三种在网页中使用样式的方式。

第一种是直接把样式信息嵌入到元素里,这就要用到style属性。下面这个例子展示了如何修改标题文本的颜色:

<h1 style="color:red">Inlinw styles are sloppy styles</h1>

这种方法非常方便,但是会是标记显得杂乱无章。

第二种是把全部样式嵌入到<style>元素里,而这个<style>元素要放到页面的<head>部分:

<head>

 <title> Embedded syle sheet test</title>

<style>

...

</style>

</head>

这样写代码能够把样式与标记分开,但最终他们还是在一个文件里。这种方式适合一次性的样式(也就是不想在其他页面中重用的样式),也适合简单的测试和示例。就像我的博客中某些列表页和内容页就采用了这种方式。

第三种方式就是使用<link>元素在<head>部分链接外部样式表文件。下面这个例子告诉浏览器应用名为main.css的外部样式表中的样式:

<head>

 <link href="/skin/blog/css/main.css" rel="stylesheet">

</head>

这种方式最常用,效果也最好。而且通过这种方式还能在其他页面间重用样式。

注意:现代web开发建立在一个简单的原理基础上。html标记用于把页面结构化为逻辑区块(段落、标题、列表、图片和链接),而css样式表用于格式化(通过指定字体、颜色、边框、背景和布局)遵守这个规则,网页就容易编辑。如果要修改整个网页的格式和布局,只要修改它所链接的样式表即可。

文章评论