从 HTML 到 CSS：开启网页样式之旅（一）——CSS 初体验与网页样式新征程
前言
- 在之前的学习和分享中，我们已经对 HTML（超文本标记语言）有了较为深入的了解。HTML 就像是搭建房屋的骨架，它为我们的网页提供了基本的结构和内容框架，让我们能够在浏览器中呈现出文字、图片、链接等各种元素。**然而，仅仅有骨架可不够，要让我们的网页真正变得美观、吸引人，就需要 CSS（层叠样式表）登场啦！**今天，就让我们在 HTML 讲解结束的基础上，正式开启对 CSS 的探索之旅
HTML（结构）
CSS（表现）
JavaScript（行为）
一、为什么需要 CSS？
- 当我们只用 HTML 构建网页时，会发现所有的元素都是以一种非常朴素、原始的状态呈现的。文本就是简单的纯文本样式，没有颜色、字体大小的区分，图片也只是按照默认的方式显示，各个元素之间的布局也相对简单和生硬。CSS 的出现，就是为了弥补 HTML 在样式呈现方面的不足
-
- 字体样式
-
- 颜色与背景
-
- 布局与定位
-
- 边框与装饰
二、CSS的引用
（一）行内样式
- 行内样式是将CSS代码直接写在HTML标签的style属性中，也被称为内联样式
<h1 style="color:red; font - size:60px;">欢迎来到我的博客</h1>
（二）内部样式
- 内部样式是将所有的CSS代码提取出来，放在HTML页面内部的
<style>
h1 {
color: red;
font - size: 40px;
}
</style>
color:red;表示设置字体颜色为红色
font - size:60px;表示设置字体大小为60像素
（三）外部样式
- 外部样式是将CSS代码写在一个单独的.css文件中，然后在HTML文件中引入该.css文件来应用样式
- CSS文件
h1 {
color: red;
font - size: 40px;
}
- 然后，在HTML文件中使用
<link>标签引入这个.css文件： - HTML文件
<head>
<link rel="stylesheet" href="styles.css">
</head>
（四）样式表的优先级
- 在网页开发中，当存在多种样式表引用方式时就需要了解样式表的优先级规则，以确定最终应用到 HTML 元素上的样式
- 总体规则是：行内样式 > 内部样式 = 外部样式。这意味着当一个元素同时受到行内样式、内部样式和外部样式影响时，行内样式具有最高的优先级，会优先被应用。而内部样式和外部样式在优先级上是相同的
三、CSS语法规范
- CSS语法规范由两部分构成：选择器和声明块
（一）选择器
例子（后面会详细讲）
1.元素选择器
h1 {
color: green;
font - size: 40px;
}
2.类选择器
<p class="highlight">这是一段需要突出显示的段落。</p>
<div class="highlight">这是一个需要突出显示的div元素。</div>
3.ID选择器
<p id="unique - paragraph">这是一个独一无二的段落。</p>
（二）声明块
1.属性名和属性值
- 例如，color: green中，color是属性名，表示要设置元素的颜色，green是属性值，表示将颜色设置为绿色。
- 对于多个属性的设置，在声明块中用分号;隔开。如{color: green; font - size: 40px;}，这里分别设置了颜色为绿色和字体大小为40像素
2.注释的写法
- CSS中可以添加注释来对样式进行说明，方便自己和其他开发者理解代码。注释的格式是/* 注释内容 */
/* 给h1元素添加样式 */
h1 {
/* 设置文字颜色为红色 */
color: red;
/* 设置文字大小为40px */
font - size: 40px;
}
| CSS的引言到此结束，下一节后面我们会详细讲CSS的选择器内容，喜欢的话记得三连哦 |
