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

2023-10-24 04:03:59

丰富多彩的网页样式

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

1、任务描述

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

2、相关知识

2.1 CSS基本概念

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

例如，

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

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

2.2 一个简单地实例

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


<html><head><meta charset="utf-8"><title>Hello Worldtitle><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>

显示效果如下：
在这里插入图片描述
我们在HTML文档的元素中，加入了