CSS从入门到精通——基础知识

第1关：初识CSS：丰富多彩的网页样式

任务描述

本关任务：通过编写CSS给网页添加基本的样式。显示效果如下：

为了完成本关的任务，请大家认真阅读相关知识

相关知识

CSS基本概念

CSS(Cascading Style Sheets)即层叠样式表，它是一种用来为结构化文档（例如HTML文档或XML应用）添加样式的计算机语言，目前由W3C定义和维护。

在前端网页开发中，我们使用CSS来定义网页元素的样式，例如背景颜色、字体展示、元素位置、动画效果等等。

所以，HTML 与 CSS 结合，将网页的内容与样式分离，有利于提高开发效率。

基本的CSS语法如同积木一般，通过各种变换设计，构成了丰富多彩的网页世界。

例如，

使用CSS排版清晰的网站：

包含丰富多媒体的网站：

自如运用CSS动画的网站：

一个简单的实例

首先，我们来下一个简单的实例：

9. CSS让网页样式更丰富

显示效果如下：

我们在HTML文档的元素中，加入了

CSS让网页样式更丰富

使用CSS(Cascading Style Sheets)，可以使网页样式更加的丰富多彩，它解决内容与表现分离的问题，提高了工作效率。

 第2关：CSS样式引入方式

任务描述

本关任务：在上一关中，我们了解了CSS的基础概念。这一关中，我们将要理解CSS继承和多种样式引入方式。

本关任务完成之后的效果图如下：

为了完成本关任务，请大家认真阅读相关知识。

相关知识

样式引入方式

CSS样式有三种引入方式：

1. 内部样式表：如同之前实例中所示，在文档头部中引入；

2. 外部样式表：通过外部文件引入；

3. 内联样式：直接在特定元素中引入。

下面，我们将为大家一一介绍这三种引入方式。

内部样式表

首先，对于内部样式表，书写的方式是直接在HTML文件的头部，添加元素。

具体举例如下：

在之前的实例中，为了方便大家同时看到HTML和CSS代码，我们都是使用的这一种方式。

外部样式表

第二种方式，是将CSS单独书写在文件后缀名为.css的文件中。然后在HTML的中添加CSS文件链接。

4. /* 引入外部的CSS文件 */

属性rel的值stylesheet代表样式表，通常不变。href属性值，代表文件的位置。与图像路径的链接方式类似，href属性值的书写方式要根据具体的CSS文件位置。

例如，当HTML文件与要引入的CSS文件不在同一文件夹时：

可以如下书写：

在实际的项目中，推荐将样式表统一放在CSS文件夹中，使得项目结构更清晰，资源管理更容易。

内联样式

内联样式是指直接在标签内添加样式属性。

举例如下：

1. 内联样式CSS表格

显示如下：

通用的书写格式：

使用哪一种样式表？

在实际开发过程中，通常建议使用第二种外联样式表的方式。

主要优点如下：

1. 内容与样式分离；

   易于开发和维护样式。

2. 样式易于复用；

   可在多个HTML文件中引入相同的样式文件。

3. 加载更快。

   如果在不同的页面中引入相同的样式文件。通常浏览器会直接从缓存中读取，而不再需要再一次访问服务器资源。

样式的优先级顺序

三种样式引入的优先级顺序是：

外部样式< 内部样式 < 内联样式

也就是说，如果同时有三种样式的方式作用于同一元素，会优先的使用内联样式。

编程要求

选择index.html文件，完成：

• 引入外部样式表 style.css， 引入的路径为step2/CSS/style.css；(注意路径中CSS是大写)

• 设置 h1 元素内联样式的字体颜色(color)为cornflowerblue；

• 修改 samll 元素内联样式：设置字体大小(font-size)为10px; 颜色(color)为lightslategray。

选择style.css 文件，完成：

• 设置 p 元素的 font-weight 为 粗体(bold)；

测试说明

在右侧编辑器左上方，点击代码文件，就可以在多个文件直接进行切换。例如，在关卡中含有实例 example.html，你可以点击 example.html 切换到该文件。然后在编辑器中修改任意内容，效果显示便会更新。

具体演示如下：

    
    
     
        
    

     

    



    

        
        
        
O Captain! My Captain!

        
            
        
        
O Captain! my Captain! our fearful trip is done,
The ship has weather’d every rack, the prize we sought is won,
The port is near, the bells I hear, the people all exulting,
While follow eyes the steady keel, the vessel grim and daring;
    
        
    
        
© Walt Whitman
            
        
    

 

body {
    font-family: 'Times New Roman', Times, serif;
}

div {
    border: 1px solid #000;
    overflow: hidden;
    padding: 0 1em .25em;
}

h1 {
    color: green;
}

p {
    /* ********** BEGIN ********** */
font-weight:bold;
    /* ********** END ********** */
}