第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%的人还看了以下文章

  • 第4课:字体

    这一课,你将学习字体以及如何用CSS来设置字体。我们还会考虑如何解决“网站所选的字体仅当访问者的PC上安装有该字体时才会被显示”这一难题。本课将对下列CSS属性进行讲解: font-family font-style font-variant font-weight font-size font 字体族[font-family] CSS属性font-fami…

    2020年2月22日
    1.9K0
  • HTML5网页中如何嵌入音频,视频?

    《HTML5的视频播放控制技术》 介绍了HTML5的video元素和常用属性,以及视频播放控制技术,如播放、暂停、音量、全屏、回放功能的实现。不会的童鞋可以学习。 本文主要介绍在HTML5 中如何嵌入音频,视频? 在HTML5 中如何嵌入音频? HTML5 支持 MP3、Wav 和 Ogg 格式的音频,代码示例: <audio controls>…

    2019年11月23日
    2.1K0
  • 中国省、市区二级联动下拉选择框-JS源码

    中国省、市区二级联动下拉选择框,包含所有省份及市县信息。 当选择省份下拉选择框时,市区的下拉框会根据选择的省市加载出来。如上图所示选择“山东省”,市的下拉选择框只会出现山东省的市县。 1.把中国省份和市区的信息放到JavaScript文件里(js/common.js),中国网页设计在js文件里定义了两个数组,分别存放省份和对应的市区。 //省份 var pr…

    2019年6月5日
    3.0K0
  • HTML5+CSS3制作网页实例:HTML5入门

    文章最后提供HTML5+CSS3制作网页实例源码下载。 步骤1 -设计 设计师先根据构想使用PHOTOSHOP设计页面,然后开始HTML和CSS编码,从设计背景、颜色和字体,细节部分的工作内容。 步骤2 – HTML 头部html代码 <!DOCTYPE html> <html> <head> <meta…

    2019年3月7日
    8.6K0
  • jQuery屏蔽页面右键,禁止复制,文本选择代码

    屏蔽页面右键,禁止复制,文本选择功能,用jQuery实现非常简单。 125建站网分享两种方法。 方法一: //禁用右键、文本选择、复制 $(document).bind(“contextmenu”,function(){return false;}); $(document).bind(“selectstart”,function(){return fals…

    2019年10月16日
    2.4K0
  • 两个iframe自适应高度的解决方法

    很多小伙伴在做网站的时候对于解决iframe的高度问题都是很头大的一件事,今天吾爱编程为大家介绍一下iframe自适应高度的方法,有需要的小伙伴可以参考一下: 1、需求分析: 使页面中的iframe可以自适应高度,避免页面高度增加的时候页面和iframe会同时出现滚动条。 2、方法一: 在iframe上面直接加onload的方法,使其自适应 <ifra…

    2021年3月16日
    7300

发表回复

登录后才能评论