感性体验CSS
什么是CSS呢？你可能急迫的想知道答案。但是空泛的文字描述意义不大，让我们先来一点感性体验吧。看看这个没有添加CSS的HTML文件，是一个普普通通的网页。然而通过给这个文件添加的CSS规则，我们可以得到十分美观的网页。
这还不是全部，不改动HTML，只是通过添加不同的CSS规则，我们就可以得到各种不同样式的网页。好了，下面我们再来回答什么是CSS这个问题。
什么是CSS?
CSS是CascadingStyleSheets（层叠样式表）的缩写。它的作用是定义网页的外观（例如字体，颜等等），它也可以和javascript等浏览器端脚本语言合作做出许多动态的效果。
学习CSS的基础
学习CSS之前您应该已经了解了HTML或者XHTML。
学习CSS需要什么特殊的软件吗？
不。同学习XHTML一样，在学习CSS的过程中您只需要使用Windows自带的记事本()就可以了。在未来实际制作网页的时候您可能需要用到Dreamweaver等专业的网页设计软件，它们将使得为网页添加CSS的工作变得异常简单。但是再次强调，在学习CSS的过程中，您不需要这些强大的软件。本教程只使用记事本，目的在于练习手写CSS代码的能力，也是为了方便那些还没有Dreamweaver之类软件的读者。
现在就开始在菜鸟吧学习CSS——CSS入门教程目录
1.CSS入门教程——CSS简介
2.CSS入门教程——基本语法(一)
3.CSS入门教程——基本语法(二)
4.CSS入门教程——加入方式
5.CSS入门教程——文字属性
6.CSS入门教程——文本属性)
7.CSS入门教程——背景属性
8.CSS入门教程——列表
9.CSS入门教程——div和span
10.CSS入门教程——盒子
11.CSS入门教程——定位
12.CSS入门教程——链接
13.CSS入门教程——总结
插入样式表前后的网页。
为了更好地理解样式表的作用，我们先看一个CSS的应用实例。在本例子中，你很容易对比出使用CSS前后两个网页的区别，当然了，现在你可能读不懂CSS部分的代码。别担心，这些代码将在少后的教程中介绍。
我们首先来看一下未加入CSS的页面。网页里只有一段话：“菜鸟吧的站长是大傻瓜！傻瓜爱吃大西瓜！”。而且由于分别是标题1、2、3、4，页面内字体大小也不相同，还有标题的自动换行。
它的源代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="/1999/xhtml">
<head>
<title>我真惨!被用来演示CSS!</title>
<meta http-equiv="Content-Type"
content="text/html; charset=gb2312" />
</head>
<body>
<h1><a href="cainiao8/">菜鸟吧</a></h1>
<h2>的站长</h2>
<h3>是大傻瓜！傻瓜</h3>
<h4>爱吃大西瓜！</h4>
</body>
</html>
下面我们简单的为它加上一点CSS，来让我不再傻……按如下提示修改网页的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="/1999/xhtml">
<head>
<title>我真惨!被用来演示CSS!</title>
<meta http-equiv="Content-Type"
content="text/html; charset=gb2312" />
  <style type="text/css">
  <!--
    h1 {font-size: 12px;}
    h2,h4 {font-size: 12px; display:inline;}
    -->
  </style>
</head>
<body>
<h1><a href="cainiao8/">菜鸟吧</a></h1>
<h2>的站长</h2>
<h3 >是大傻瓜！傻瓜</h3>
<h4>爱吃大西瓜！</h4>
</body>
</html>
让我们来看看加入CSS之后的网页。你很容易看出两个网页的差别，页面内的文字大小统
一了，而且只有标题1后面有一个换行，甚至有一部分文字被隐藏了起来。这都要归功于上面红部分的代码。它们就是CSS，下面就让我们大概了解一下这些代码的意义。
CSS语法简介
加在head部分的font weight bolder<style type="text/css">和</style>分别被浏览器识别为CSS的开始和结束。而注释标签则是避免不支持CSS的浏览器将CSS内容作为网页正文显示在页面上。
上面的内容并没有定义任何样式，它的任务只是告诉浏览器CSS代码的位置。下面的内容是重点，正是下面这一部分的内容使得页面的外观发生了明显的变化，它也就是CSS的描述部分(定义部分)：
h1 {font-size: 12px;}
h2,h4 {font-size: 12px; display:inline;}
……
<h3 >是大傻瓜！傻瓜</h3>       
通常情况下，CSS的描述部分是由三部分组成的，分别是选择器、属性和属性值。写法如下：
选择器 { 属性: 属性值; }
例如：h1 {font-size: 12px;}
本例中选择器也就是你想要描述的HTML标签，其它选择器将在后面的教程中讲解。上面例子的选择器就是h1标签。属性和属性值则是说明你想要描述h1的哪一个属性，该属性的值为多少，例如上面例子中将h1字体大小属性为12像素，写成font-size: 12px。属性和属性值之间用一个冒号“:”分开，以一个分号“;”结束，最后别忘记用一对大括号“{}”括起来。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。