您当时的方位:主页 > 言语编程 > CSS

CSS入门教程——样式表的根本语法(一)

2014-10-22  

刺进样式表前后的网页。

为了更好地了解样式表的效果,咱们先看一个CSS的运用实例。在本比如中,你很简略比照出运用CSS前后两个网页的差异,当然了,现在你可能读不明白CSS部分的代码。别忧虑,这些代码将在少后的教程中介绍。

咱们首要来看一下未参加CSS的页面。网页里只要一段话:“菜鸟吧的站长是大傻瓜!傻瓜爱吃大西瓜!”。并且因为分别是标题1、2、3、4,页面内字体大小也不相同,还有标题的主动换行。

它的源代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>我真惨!被用来演示CSS!</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<!--这儿即将刺进CSS -->
</head>
<body>
<h1><a href="http://cainiao8.com/">菜鸟吧</a></h1>
<h2>的站长</h2>
<h3>是大傻瓜!傻瓜</h3><!--我就要被修该啦,抑郁 -->
<h4>爱吃大西瓜!</h4>
</body>
</html>

下面咱们简略的为它加上一点CSS,来让我不再傻……按如下提示修正网页的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/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="http://cainiao8.com/">菜鸟吧</a></h1>
<h2>的站长</h2>
<h3 style="display:none">是大傻瓜!傻瓜</h3>
<h4>爱吃大西瓜!</h4>
</body>
</html>

让咱们来看看参加CSS之后的网页。你很简略看出两个网页的不同,页面内的文字大小一致了,并且只要标题1后边有一个换行,甚至有一部分文字被躲藏了起来。这都要归功于上面赤色部分的代码。它们便是CSS,下面就让咱们大约了解一下这些代码的含义。