第2课:CSS的工作原理

在这一课,你将学习如何制作自己的第一个样式表。你将了解基本的CSS模型,以及在HTML文档里使用CSS所必需的代码。

在这一课,你将学习如何制作自己的第一个样式表。你将了解基本的CSS模型,以及在HTML文档里使用CSS所必需的代码。

级联样式表(CSS)里用到的许多CSS属性都与HTML属性相似,所以,假如你熟悉采用HTML进行布局的话,那么这里的许多代码你都不会感到陌生。我们先来看一个具体的例子。

基本的CSS语法

比方说,我们要用红色作为网页的背景色:

HTML的话,我们可以这样:

<body bgcolor="#FF0000">

CSS的话,我们可以这样获得同样的效果:

body {background-color: #FF0000;}

你会注意到,HTML和CSS的代码颇有几分相似。上例也向你展示了基本的CSS模型:

本图对选择器、CSS属性和值进行了解释

但是把CSS代码放在哪里呢?这正是我们下面要讲的。

为一个HTML文档应用CSS

为HTML文档应用CSS,有三种方法可供选择。下面对这三种方法进行了概括。我们建议你对第三种方法(即外部样式表)予以关注。

方法1:行内样式表(style属性)

为HTML应用CSS的一种方法是使用HTML属性style。我们在上例的基础之上,通过行内样式表将页面背景设为红色:

<html> 
    <head>
        <title>例子</title>
    </head>
    <body style="background-color: #FF0000;">
          <p>这个页面是红色的</p> 
    </body>
</html>

方法2:内部样式表(style元素)

为HTML应用CSS的另一种方法是采用HTML元素style。比如像这样:

<html>
 <head>
  <title>例子</title>
  <style type="text/css">
   body {
    background-color: #FF0000;
   }
  </style>
 </head>
 <body>
  <p>这个页面是红色的</p>
 </body>
</html>

方法3:外部样式表(引用一个样式表文件)

我们推荐采用这种引用外部样式表的方法。在本教程之后的例子中,我们将全部采用该方法。

外部样式表就是一个扩展名为css的文本文件。跟其他文件一样,你可以把样式表文件放在Web服务器上或者本地硬盘上。

例如,比方说你的样式表文件名为style.css,它通常被存放于名为CSS的目录中。就像下面这样:

第2课:CSS的工作原理

现在的问题是:如何在一个HTML文档里引用一个外部样式表文件(style.css)呢?答案是:在HTML文档里创建一个指向外部样式表文件的链接(link)即可,就像下面这样:

<link rel="stylesheet" type="text/css" href="css/style.css" />

注意要在href属性里给出样式表文件的地址。

这行代码必须被插入HTML代码的头部(header),即放在标签<head>和标签</head>之间。就像这样:

<html>
 <head>
  <title>我的文档</title>
  <link rel="stylesheet" type="text/css" href="css/style.css" />
 </head>
 <body> ...

这个链接告诉浏览器:在显示该HTML文件时,应使用给出的CSS文件进行布局。

这种方法的优越之处在于:多个HTML文档可以同时引用一个样式表。换句话说,可以用一个CSS文件来控制多个HTML文档的布局。

本图显示了多个HTML文档同时引用一个样式表的情况

这一方法可以令你省去许多工作。例如,假设你要修改某网站的所有网页(比方说有100个网页)的背景颜色,采用外部样式表可以避免你手工一一修改这100个HTML文档的工作。采用外部样式表,这样的修改只需几秒钟即可搞定——修改外部样式表文件里的代码即可。

让我们来实践刚刚所学到的知识。

自己试试看

打开记事本(或其他文本编辑器),创建两个文件——一个HTML文件,一个CSS文件——它们的内容如下:

default.htm

<html>
 <head>
  <title>我的文档</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
 <body>
  <h1>我的第一个样式表</h1>
 </body>
</html>

style.css

body { background-color: #FF0000;}

然后,把这两个文件放在同一目录下。记得在保存文件时使用正确的扩展名(分别为“htm”和“css”)。

用浏览器打开default.htm,你所看到的页面应该具有红色背景。恭喜!你已经完成了自己的第一个样式表!

加快进入下一课,在那里你会学到一些CSS属性。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/4953.html

(7)
江山如画的头像江山如画管理团队
上一篇 2020年2月22日 下午3:57
下一篇 2020年2月22日 下午4:23

99%的人还看了以下文章

  • Div+CSS左侧尺寸固定右侧自适应布局的5种实现方法

    css多栏自适应布局一般使用position属性布局,或者用float属性布局,也可以使用display属性。 position适合首页布局,因为首页内容往往可以完全控制。float适合模板布局,模板中填充的内容无法控制。 相关阅读:左侧固定,右侧自适应布局的两种实现方法 1、浮动实现 原理:左侧定宽浮动,右侧使用margin-left,且不要定宽,容器尺寸…

    2021年11月29日
    9500
  • vue学习-我的第一个vue代码

    创建一个 .html 文件,然后通过如下方式引入 Vue: <!– 开发环境版本,包含了有帮助的命令行警告 –> <script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script> 或者: <!– 生产环境版本,优化了尺寸和速度 –>…

    2020年6月14日
    2.2K0
  • 第11课:边框(border)

    边框(border)可以有多种用途,比如作为装饰元素或者作为划分两物的分界线。在设置边框方面,CSS为你提供了无尽选择。border-widthborder-colorborder-style 边框宽度[border-width] 边框宽度由CSS属性border-width定义,其值可以是“thin”(薄)、“medium”(普通)或“thick”(厚)等…

    2020年2月25日
    2.1K0
  • 如何在网页中输入多个连续的空格?

    默认状态下(输入法为半角状态),按空格键只能输入一个空格,要在文本之间插入多个连续的空格,可以使用以下几种方法: 1) 使用Ctrl+Shift+Space组合键。 2) 在中文全角状态下,使用空格键。 3) 选择【插入】→【HTML】→【特殊字符】命令下的“不换行空格”命令。 4) 直接在代码视图输入“&nbsp;”字符。

    2020年4月3日
    7.0K0
  • jQuery获取URL传递的参数

    URL传递参数是程序开发中经常用到的,中国网页设计给大家分享使用jQuery如何获取URL传递的参数。 例如要获取下面URL地址中的参数: http://www.125jz.com?id=”2020″&title=”jQuery获取URL传递的参数” 实现代码如下: //获取URL参数a和b funct…

    2018年9月30日
    1.8K0
  • 第12课:页面布局(CSS)

    如何为页面实现理想的布局? 你可以使用级联样式表(Cascading Style Sheets,简称CSS)为网站设计页面布局。本课将对CSS作简单介绍。如需从头开始全面学习CSS知识,可以使用我们提供的CSS教程。因此,请将本课当作CSS的预备课。CSS是HTML的搭档。在编码过程中,它们发挥不同的作用:HTML负责网页的具体内容(结构),而CSS则修饰网…

    2018年1月19日
    2.4K0

发表回复

登录后才能评论