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

    您现在的位置是:首页 > 学无止境 > 心得笔记

    没有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样式表用于格式化(通过指定字体、颜色、边框、背景和布局)遵守这个规则,网页就容易编辑。如果要修改整个网页的格式和布局,只要修改它所链接的样式表即可。

关键字词:css,教程