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

我会带着你远行 2022-11-13 00:48 251阅读 0赞

### 丰富多彩的网页样式 ###

*  1、任务描述
 *  2、相关知识
 *   *  2.1 CSS基本概念
     *  2.2 一个简单地实例
     *  2.3 CSS基本语法
     *   *  2.3.1 选择器
         *  2.3.2 声明

# 1、任务描述 #

本关任务：通过编写CSS给网页添加基本的样式。显示效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]

# 2、相关知识 #

## 2.1 CSS基本概念 ##

*  CSS(Cascading StyleSheets)即层叠样式表，它是一种用来为结构化文档（例如HTML文档或XML应用）添加样式的计算机语言，目前由W3C定义和维护。
 *  在前端网页开发中，我们使用CSS来定义网页元素的样式，例如背景颜色、字体展示、元素位置、动画效果等等。
 *  所以，HTML 与 CSS 结合，将网页的内容与样式分离，有利于提高开发效率。
 *  基本的CSS语法如同积木一般，通过各种变换设计，构成了丰富多彩的网页世界。

例如，

使用CSS排版清晰的网站：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 1]  
包含丰富多媒体的网站：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 2]  
自如运用CSS动画的网站：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 3]

*  【这本来是个动图哦~牙牙只截了图】

## 2.2 一个简单地实例 ##

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

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Hello World</title>
        <style type="text/css"> body { background-color: teal; } h1 { color:white; font-size: 36px; text-align: center; } </style>
      </head>
      <body>
        <h1>CSS让网页样式更丰富</h1>
      </body>
    </html>

显示效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 4]  
我们在HTML文档的`<head>`元素中，加入了`<style>`元素，设置其属性`type`为`text/css`，表示此处内容为`CSS`。

我们在此CSS代码中，指定了：

*  `body`背景颜色为蓝绿色(`teal`)；
 *  `h1`标题的字体颜色为白色(`white`)，字体大小为`36px`并且在网页中居中对齐。

## 2.3 CSS基本语法 ##

一般而言，CSS要如何指定HTML元素样式呢？CSS的基础语法是什么的呢？

由上面的实例，我们可以看出CSS语法主要包括两部分：选择器和声明。

基本格式如下：

选择器 {声明1}

### 2.3.1 选择器 ###

选择器是什么呢？

*  选择器用于指定我们要修改的HTML元素。例如，在上述实例中，body和h1就是选择器。在之后的实训中，我们也会学习使用多种更复杂的选择器。

### 2.3.2 声明 ###

声明是什么呢？

*  通过声明，我们定义要改变的元素样式。声明由属性和值构成，包含在花括号中，基本格式如下：

{属性: 值;}

例如，在上述实例中：

{background-color: teal;}

这一声明，指定了`body`元素的背景颜色为蓝绿色(`teal`)。

同样的，我们对`h1`添加了多行声明：

{
        /* 声明代表`h1`的字体颜色设置为白色*/
        color: white;
        /* 字体大小(font-size)为36px */
        font-size: 36px;
        /* 文字居中方式(text-align)为居中 */
        text-align: center;
    }

*  在平时开发网站时，建议每个声明通常单独列为一行，有助于阅读。当网站发布时，可以使用工具压缩，将多行声明写在一行，使得CSS文件大小更小，加载速度更快。

**`提示：`**

*  语句最后的分号可以不写。如果多个声明写在一行，就必须书写。一般情况下，建议都书写。

**编程要求**

*  在右侧编辑器中，补全Begin至end中间的部分，选择index.html文件，设置其CSS样式为：
 *  修改h1标题的text-align为居中显示，字体大小为40px；
 *  p段落的颜色为灰色:grey,字体大小为18px。
 *

**`代码文件：`**

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Hello World</title>
        <style type="text/css"> body { text-align: center; } h1 { /* ********** BEGIN ********** */ text-align: center; font-size:40px; /************ END ********** */ color: #62A8CB; } img { height: 250px; } p { /* ********** BEGIN ********** */ color:grey; font-size:18px; /* ********** END ********** */ } </style>
      </head>
      <body>
        <h1>CSS让网页样式更丰富</h1>
        <img src="https://www.educoder.net/attachments/download/189467">
        <p>使用CSS(Cascading Style Sheets)，可以使网页样式更加的丰富多彩，它解决内容与表现分离的问题，提高了工作效率。</p>
      </body>
    </html>

另一个文件：

> 世界上只有一种真正的英雄主义，就是认清了生活的真相后还依然热爱它。——罗曼罗兰

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]: /images/20221022/c27d3efdd6fd46c7a93bab440b4f16bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 1]: /images/20221022/85cadc0bb0c6422eb06a8be71dc4c193.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 2]: /images/20221022/f4152ce46742450aa67a90627b048ab8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 3]: /images/20221022/96d8227d91e645e4916dcbaadb8d181d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 4]: /images/20221022/56730b697f5e4f50a15e6458939451be.png