迹忆客 计算机编程题库

HTML提升题目(一)

下列语句能够正确在一个HTML页面中导入在同一目录下的“StyleSheet1.css”样式表的是( )
  • <style>@import StyleSheet1.css;</style>
  • <link rel=”stylesheet” type=”text/css” href=”StyleSheet1.css”>
  • < link rel=”stylesheet1.css” type=”text/css”>
  • <style rel=”stylesheet” type=”text/css” src=”StyleSheet1.css”></style>
正确答案是:A,B
正确率:26%

解析:

在HTML里面导入CSS总共有四种方式:

  • 内联方式
  • 嵌入方式
  • 链接方式
  • 导入方式

一、内联方式

<div style="background-color: red"></div>

这样的书写方式,不用多说,大家都知道其缺点在哪里。

  • (1)、结构层与样式层没有分离。
  • (2)、当样式发生修改的时候,我们不得不去一一修改。给后期的维护成本加大了不少。

二、嵌入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <style>
        .box{
            width: 200px;
            height: 200px;
            border: 5px solid red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

嵌入方式相比较内联方式的还是有不同的地方。嵌入方式仅作用于当前页面的元素。在其它页面需要重写。这样的做法,不仅页面代码冗余大,而且后期维护成本加大。也不符合页面开发的要求。

三、链接方式

<head>
    <link href="style.css" rel="stylesheet"  media="screen"/>
</head>

这种引入的方式是最常见的,也是我们最符合现代开发的要求。这样书写的优点不仅在于 与其它页面进行共享相同的css代码,节省后期的维护成本,而且当浏览器第二次访问到相同的资源,就可以直接从本地获取资源,减少带宽。提升用户体验。

但是,如果在开发过程中(注意:我的说是开发过程中)这样书写的话,就不利于我们后期的维护,当找寻其中一处代码进行修改的话,就相对比较麻烦。

四、导入方式

<style>
    @import url(a.css);
</style>

查看笔记

扫码一下
查看教程更方便