CSS菜鸟教程
- 格式：doc
- 大小：166.00 KB
- 文档页数：31
什么是CSS?
CSS是CascadingStyleSheets（层叠样式表）的缩写。它的作用是定义网页的外观（例如字体，颜色等等），它也可以和javascript等浏览器端脚本语言合作做出许多动态的效果。
学习CSS的基础
学习CSS之前您应该已经了解了HTML或者XHTML。
学习CSS需要什么特殊的软件吗？
注意：类名和id名不可以用数字开头。
不指定标签的类或id
在网页设计的过程中，你可能不希望你定义的类只局限于一个标签。就拿上面的例子来说，你可能希望xinwen类可以应用于段落标签<p>。那么你只需要将定义部分的h1.xinwen改为.xinwen，即去掉h1。这种定义中不含标签名的类当然也就不再局限于某一个标签了。看看我们修改之后的网页，“新闻的内容”也应用了xinwen类的样式。
没有加入CSS时的页面，加入CSS之后的页面。它们的源代码如下，红色字体的是我们本节将要学习的部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"/TR/xhtml1/DTD/xhtml1-strict.dtd">
h2,h4 {
font-size: 12px;
display:inline;
}
注意1：现在讲解上面代码的最后一行，在<h3style="display:none">中，我们没有看到选择器，这是因为插入CSS的位置不同，它将直接作用与当前标签之内的元素。关于CSS不同的插入方式将在随后的教程中讨论。
注意2：CSS的书写方式请大家根据自己的喜好决定，不过最终的目的都很明确，提高维护CSS代码的效率。
<h4>爱吃大西瓜！</h4>
</body>
</html>
下面我们简单的为它加上一点CSS，来让我不再傻……按如下提示修改网页的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"/TR/xhtml1/DTD/xhtml1-strict.dtd">
我们也可以为一个选择器同时定义多个样式，样式之间用分号“;”隔开。也可以同时为几个标签同时定义一组样式，标签之间用逗号“,”隔开。也许这两句话比较绕嘴，不过事实上上面例子的第二行代码就用到了CSS的这个特性。语句“h2,h4 {font-size: 12px; display:inline;}”同时为h2和,h4两个标签定义了两个样式。当然了，为了使你的CSS代码更容易阅读和维护，你可以分行书写这些属性：
不。同学习XHTML一样，在学习CSS的过程中您只需要使用Windows自带的记事本(Notepad.exe)就可以了。在未来实际制作网页的时候您可能需要用到Dreamweaver等专业的网页设计软件，它们将使得为网页添加CSS的工作变得异常简单。但是再次强调，在学习CSS的过程中，您不需要这些强大的软件。本教程只使用记事本，目的在于练习手写CSS代码的能力，也是为了方便那些还没有Dreamweaver之类软件的读者。
<style type="text/css">
<!--
h1.dabiaoti {
font-weight: bolder;
text-align: center;
}
h1#daohang {
font-size: 12px;
font-weight: bolder;
text-align: left;
}
h1.xinwen {
<html xmlns="/1999/xhtml">
<head>
<title>我真惨!被用来演示CSS!</title>
<meta http-equiv="Content-Type"
content="text/html; charset=gb2312" />
</head>
CSS注释
我们以一个例子介绍在CSS中插入注释的方法：
<style type="text/css">
<!--
h1 {font-size: 12px;}
/* 把标题的大小都定义为12个像素 */
h2,h4 {font-size: 12px; display:inline;}
-->
</style>
在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"
<html xmlns="/1999/xhtml">
<head>
<title>我真惨!被用来演示CSS!</title>
<meta http-equiv="Content-Type"
content="text/html; charset=gb2312" />
<style type="text/css">
现在就开始在菜鸟吧学习CSS——CSS入门教程目录
1.CSS入门教程——CSS简介
2.CSS入门教程——基本语法(一)
3.CSS入门教程——基本语法(二)
4.CSS入门教程——加入方式
5.CSS入门教程——文字属性
6.CSS入门教程——文本属性)
7.CSS入门教程——背景属性
8.CSS入门教程——列表
font-size: 16px;
font-weight:bold;
text-align: center;
color:green;
}
-->
</style>
</head>
<body>
<h1class="dabiaoti">我是页面最上端的标题1</h1>
<h1id="daohang">我是页面左侧的标题，用来导航</h1>
h1 {font-size: 12px;}
h2,h4 {font-size: 12px; display:inline;}
……
<h3style="display:none">是大傻瓜！傻瓜</h3>
通常情况下，CSS的描述部分是由三部分组成的，分别是选择器、属性和属性值。写法如下：
选择器 { 属性: 属性值; }
<body>
<h1>我是页面最上端的标题1</h1>
<h1>我是页面左侧的标题1，用来导航</h1>
<h1>我是页面右侧新闻的标题1</h1>
<p>我是新闻的内容。</p>
</body>
</html>
<!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" />
这种方式定义的class(类)和id只能作用于指定标签。在上面的例子中我们定义了三个类，类名分别为"dabiaoti"、"daohang"和"xinwen"，它们均作用于h1标签。当我们试图将其中“xinwen”的样式应用于一个<p>标签的时候(<p class="xinwen">我是新闻的内容。</p>)，您会看到它的样式没有发生任何改变。这是一种错误的CSS应用。
<h4>爱吃大西瓜！</h4>
</body>
</html>
让我们来看看加入CSS之后的网页。你很容易看出两个网页的差别，页面内的文字大小统一了，而且只有标题1后面有一个换行，甚至有一部分文字被隐藏了起来。这都要归功于上面红色部分的代码。它们就是CSS，下面就让我们大概了解一下这些代码的意义。
CSS语法简介
例如：h1 {font-size: 12px;}
CSS是CascadingStyleSheets（层叠样式表）的缩写。它的作用是定义网页的外观（例如字体，颜色等等），它也可以和javascript等浏览器端脚本语言合作做出许多动态的效果。
学习CSS的基础
学习CSS之前您应该已经了解了HTML或者XHTML。
学习CSS需要什么特殊的软件吗？
注意：类名和id名不可以用数字开头。
不指定标签的类或id
在网页设计的过程中，你可能不希望你定义的类只局限于一个标签。就拿上面的例子来说，你可能希望xinwen类可以应用于段落标签<p>。那么你只需要将定义部分的h1.xinwen改为.xinwen，即去掉h1。这种定义中不含标签名的类当然也就不再局限于某一个标签了。看看我们修改之后的网页，“新闻的内容”也应用了xinwen类的样式。
没有加入CSS时的页面，加入CSS之后的页面。它们的源代码如下，红色字体的是我们本节将要学习的部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"/TR/xhtml1/DTD/xhtml1-strict.dtd">
h2,h4 {
font-size: 12px;
display:inline;
}
注意1：现在讲解上面代码的最后一行，在<h3style="display:none">中，我们没有看到选择器，这是因为插入CSS的位置不同，它将直接作用与当前标签之内的元素。关于CSS不同的插入方式将在随后的教程中讨论。
注意2：CSS的书写方式请大家根据自己的喜好决定，不过最终的目的都很明确，提高维护CSS代码的效率。
<h4>爱吃大西瓜！</h4>
</body>
</html>
下面我们简单的为它加上一点CSS，来让我不再傻……按如下提示修改网页的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"/TR/xhtml1/DTD/xhtml1-strict.dtd">
我们也可以为一个选择器同时定义多个样式，样式之间用分号“;”隔开。也可以同时为几个标签同时定义一组样式，标签之间用逗号“,”隔开。也许这两句话比较绕嘴，不过事实上上面例子的第二行代码就用到了CSS的这个特性。语句“h2,h4 {font-size: 12px; display:inline;}”同时为h2和,h4两个标签定义了两个样式。当然了，为了使你的CSS代码更容易阅读和维护，你可以分行书写这些属性：
不。同学习XHTML一样，在学习CSS的过程中您只需要使用Windows自带的记事本(Notepad.exe)就可以了。在未来实际制作网页的时候您可能需要用到Dreamweaver等专业的网页设计软件，它们将使得为网页添加CSS的工作变得异常简单。但是再次强调，在学习CSS的过程中，您不需要这些强大的软件。本教程只使用记事本，目的在于练习手写CSS代码的能力，也是为了方便那些还没有Dreamweaver之类软件的读者。
<style type="text/css">
<!--
h1.dabiaoti {
font-weight: bolder;
text-align: center;
}
h1#daohang {
font-size: 12px;
font-weight: bolder;
text-align: left;
}
h1.xinwen {
<html xmlns="/1999/xhtml">
<head>
<title>我真惨!被用来演示CSS!</title>
<meta http-equiv="Content-Type"
content="text/html; charset=gb2312" />
</head>
CSS注释
我们以一个例子介绍在CSS中插入注释的方法：
<style type="text/css">
<!--
h1 {font-size: 12px;}
/* 把标题的大小都定义为12个像素 */
h2,h4 {font-size: 12px; display:inline;}
-->
</style>
在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"
<html xmlns="/1999/xhtml">
<head>
<title>我真惨!被用来演示CSS!</title>
<meta http-equiv="Content-Type"
content="text/html; charset=gb2312" />
<style type="text/css">
现在就开始在菜鸟吧学习CSS——CSS入门教程目录
1.CSS入门教程——CSS简介
2.CSS入门教程——基本语法(一)
3.CSS入门教程——基本语法(二)
4.CSS入门教程——加入方式
5.CSS入门教程——文字属性
6.CSS入门教程——文本属性)
7.CSS入门教程——背景属性
8.CSS入门教程——列表
font-size: 16px;
font-weight:bold;
text-align: center;
color:green;
}
-->
</style>
</head>
<body>
<h1class="dabiaoti">我是页面最上端的标题1</h1>
<h1id="daohang">我是页面左侧的标题，用来导航</h1>
h1 {font-size: 12px;}
h2,h4 {font-size: 12px; display:inline;}
……
<h3style="display:none">是大傻瓜！傻瓜</h3>
通常情况下，CSS的描述部分是由三部分组成的，分别是选择器、属性和属性值。写法如下：
选择器 { 属性: 属性值; }
<body>
<h1>我是页面最上端的标题1</h1>
<h1>我是页面左侧的标题1，用来导航</h1>
<h1>我是页面右侧新闻的标题1</h1>
<p>我是新闻的内容。</p>
</body>
</html>
<!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" />
这种方式定义的class(类)和id只能作用于指定标签。在上面的例子中我们定义了三个类，类名分别为"dabiaoti"、"daohang"和"xinwen"，它们均作用于h1标签。当我们试图将其中“xinwen”的样式应用于一个<p>标签的时候(<p class="xinwen">我是新闻的内容。</p>)，您会看到它的样式没有发生任何改变。这是一种错误的CSS应用。
<h4>爱吃大西瓜！</h4>
</body>
</html>
让我们来看看加入CSS之后的网页。你很容易看出两个网页的差别，页面内的文字大小统一了，而且只有标题1后面有一个换行，甚至有一部分文字被隐藏了起来。这都要归功于上面红色部分的代码。它们就是CSS，下面就让我们大概了解一下这些代码的意义。
CSS语法简介
例如：h1 {font-size: 12px;}
