插入样式表前后的网页。

为了更好地理解样式表的作用,我们先看一个CSS的应用实例。在本例子中,你很容易对比出使用CSS前后两个网页的区别,当然了,现在你可能读不懂CSS部分的代码。别担心,这些代码将在少后的教程中介绍。

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

它的源代码如下:

复制代码代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head>
<title>我真惨!被用来演示CSS!</title>
<meta http-equiv="Content-Type"
content="text/html; charset=gb2312" />
<!--这里将要插入CSS -->
</head>
<body>
<h1><a href="<a href="https://www.jb51.net/">https://www.jb51.net/</a>"></a></h1>
<h2>的站长</h2>
<h3>是大傻瓜!傻瓜</h3><!--我就要被修该啦,郁闷 -->
<h4>爱吃大西瓜!</h4>
</body>
</html>

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

复制代码代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<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="<a href="https://www.jb51.net/">https://www.jb51.net/</a>"></a></h1>
<h2>的站长</h2>
<h3 style="display:none">是大傻瓜!傻瓜</h3>
<h4>爱吃大西瓜!</h4>
</body>
</html>

让我们来看看加入CSS之后的网页。你很容易看出两个网页的差别,页面内的文字大小统一了,而且只有标题1后面有一个换行,甚至有一部分文字被隐藏了起来。这都要归功于上面红色部分的代码。它们就是CSS,下面就让我们大概了解一下这些代码的意义。

CSS语法简介

加在head部分的<style type="text/css">和</style>分别被浏览器识别为CSS的开始和结束。而注释标签<!-- -->则是避免不支持CSS的浏览器将CSS内容作为网页正文显示在页面上。

上面的内容并没有定义任何样式,它的任务只是告诉浏览器CSS代码的位置。下面的内容是重点,正是下面这一部分的内容使得页面的外观发生了明显的变化,它也就是CSS的描述部分(定义部分):

复制代码代码如下:
h1 {font-size: 12px;}
h2,h4 {font-size: 12px; display:inline;}
……
<h3 style="display:none">是大傻瓜!傻瓜</h3>

通常情况下,CSS的描述部分是由三部分组成的,分别是选择器、属性和属性值。写法如下:

选择器 { 属性: 属性值; }

例如:

复制代码代码如下:
h1 {font-size: 12px;}

本例中选择器也就是你想要描述的HTML标签,其它选择器将在后面的教程中讲解。上面例子的选择器就是h1标签。属性和属性值则是说明你想要描述h1的哪一个属性,该属性的值为多少,例如上面例子中将h1字体大小属性为12像素,写成font-size: 12px。属性和属性值之间用一个冒号“:”分开,以一个分号“;”结束,最后别忘记用一对大括号“{}”括起来。

我们也可以为一个选择器同时定义多个样式,样式之间用分号“;”隔开。也可以同时为几个标签同时定义一组样式,标签之间用逗号“,”隔开。也许这两句话比较绕嘴,不过事实上上面例子的第二行代码就用到了CSS的这个特性。语句“h2,h4 {font-size: 12px; display:inline;} ”同时为h2和,h4两个标签定义了两个样式。当然了,为了使你的CSS代码更容易阅读和维护,你可以分行书写这些属性:

复制代码代码如下:
h2,h4 {
font-size: 12px;
display:inline;
}

注意1:现在讲解上面代码的最后一行,在<h3 style="display:none">中,我们没有看到选择器,这是因为插入CSS的位置不同,它将直接作用与当前标签之内的元素。关于CSS不同的插入方式将在随后的教程中讨论。

注意2:CSS的书写方式请大家根据自己的喜好决定,不过最终的目的都很明确,提高维护CSS代码的效率。

CSS注释

我们以一个例子介绍在CSS中插入注释的方法:

复制代码代码如下:
<style type="text/css">
<!--
h1 {font-size: 12px;}
/* 把标题的大小都定义为12个像素 */
h2,h4 {font-size: 12px; display:inline;}
-->
</style>

在CSS中,注释以“/*”开始,以“*/”结束,注释里面的内容对于浏览器来说是没有意义的。

广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。