从 HTML 到 CSS：开启网页样式之旅（开篇之一）——CSS 初体验与网页样式新征程

从 HTML 到 CSS：开启网页样式之旅（一）------CSS 初体验与网页样式新征程

前言
[一、为什么需要 CSS？](#一、为什么需要 CSS？)
二、CSS的引用
三、CSS语法规范

前言

在之前的学习和分享中，我们已经对 HTML（超文本标记语言）有了较为深入的了解。HTML 就像是搭建房屋的骨架，它为我们的网页提供了基本的结构和内容框架，让我们能够在浏览器中呈现出文字、图片、链接等各种元素。**然而，仅仅有骨架可不够，要让我们的网页真正变得美观、吸引人，就需要 CSS（层叠样式表）登场啦！**今天，就让我们在 HTML 讲解结束的基础上，正式开启对 CSS 的探索之旅

HTML（结构）

它负责定义网页的结构和内容。例如，<html>、<body>、<div>、<p>等标签用于构建网页的基本框架，确定页面上元素的位置和层次关系。

CSS（表现）

CSS（层叠样式表）用于控制网页的外观和样式。==它可以设置元素的颜色、大小、字体、布局等。==例如，color: red;可以将文本颜色设置为红色，font - size: 16px;可以设置字体大小为 16 像素。

JavaScript（行为）

JavaScript 是一种脚本语言，用于实现网页的动态效果和交互功能。==例如，它可以用于创建下拉菜单、表单验证、动画效果等。==当用户点击按钮、输入文本或在页面上进行其他操作时，JavaScript 可以响应这些操作并执行相应的代码。

一、为什么需要 CSS？

当我们只用 HTML 构建网页时，会发现所有的元素都是以一种非常朴素、原始的状态呈现的。文本就是简单的纯文本样式，没有颜色、字体大小的区分 ，图片也只是按照默认的方式显示，各个元素之间的布局也相对简单和生硬。CSS 的出现，就是为了弥补 HTML 在样式呈现方面的不足

它可以让我们轻松地控制网页中每个元素的外观，包括但不限于以下几个方面：

1. 字体样式
1. 颜色与背景
1. 布局与定位
1. 边框与装饰

二、CSS的引用

在网页开发中，CSS样式可以通过多种方式被应用到HTML页面中，常见的有行内样式、内部样式和外部样式这三种引用方法

（一）行内样式

行内样式是将CSS代码直接写在HTML标签的style属性中，也被称为内联样式

例子

c 复制代码

<h1 style="color:red; font - size:60px;">欢迎来到我的博客</h1>

（二）内部样式

内部样式是将所有的CSS代码提取出来，放在HTML页面内部的

例子

c 复制代码

<style>
h1 {
    color: red;
    font - size: 40px;
}
</style>
color:red;表示设置字体颜色为红色
font - size:60px;表示设置字体大小为60像素

（三）外部样式

外部样式是将CSS代码写在一个单独的.css文件中，然后在HTML文件中引入该.css文件来应用样式
CSS文件

c 复制代码

h1 {
    color: red;
    font - size: 40px;
}

然后，在HTML文件中使用<link>标签引入这个.css文件：
HTML文件

c 复制代码

<head>
    <link rel="stylesheet" href="styles.css">
</head>

（四）样式表的优先级

在网页开发中，当存在多种样式表引用方式时就需要了解样式表的优先级规则，以确定最终应用到 HTML 元素上的样式
总体规则是 ：行内样式 > 内部样式 = 外部样式。这意味着当一个元素同时受到行内样式、内部样式和外部样式影响时，行内样式具有最高的优先级，会优先被应用。而内部样式和外部样式在优先级上是相同的

三、CSS语法规范

CSS语法规范由两部分构成：选择器和声明块

（一）选择器

选择器的主要作用是找到要添加样式的元素

例子（后面会详细讲）

1.元素选择器

这是最基本的选择器类型，直接使用HTML元素的名称作为选择器。例如，h1就是一个元素选择器，它会选择页面中所有的<h1>元素

html 复制代码

h1 {
  color: green;
  font - size: 40px;
}

2.类选择器

类选择器允许我们给特定的一组元素添加相同的样式，而这些元素不一定是同一种HTML元素。它通过在HTML元素中添加一个class属性来标识，然后在CSS中通过.加上类名来选择这些元素

html 复制代码

<p class="highlight">这是一段需要突出显示的段落。</p>
<div class="highlight">这是一个需要突出显示的div元素。</div>

3.ID选择器

ID选择器用于选中具有特定ID的唯一元素。在HTML中，每个元素的ID应该是唯一的。它通过在HTML元素中添加一个id属性，然后在CSS中通过#加上ID名来选择该元素

html 复制代码

<p id="unique - paragraph">这是一个独一无二的段落。</p>

（二）声明块

声明块用于设置具体的样式，它是由一个或多个声明组成的。声明的格式为：属性名:属性值。

1.属性名和属性值

在CSS中，有许多属性可以用来设置元素的样式，如color（颜色）、font - size（字体大小）、background - color（背景颜色）等。每个属性都有其对应的属性值

例如，color: green中，color是属性名 ，表示要设置元素的颜色，green是属性值，表示将颜色设置为绿色。
对于多个属性的设置 ，在声明块中用分号;隔开。如{color: green; font - size: 40px;}，这里分别设置了颜色为绿色和字体大小为40像素

2.注释的写法

CSS中可以添加注释来对样式进行说明，方便自己和其他开发者理解代码。注释的格式是/* 注释内容 */

html 复制代码

/* 给h1元素添加样式 */
h1 {
  /* 设置文字颜色为红色 */
  color: red;
  /* 设置文字大小为40px */
  font - size: 40px;
}

|-------------------------------------------|
| CSS的引言到此结束，下一节后面我们会详细讲CSS的选择器内容，喜欢的话记得三连哦 |