从 HTML 到 CSS：开启网页样式之旅（开篇之一）——CSS 初体验与网页样式新征程
从 HTML 到 CSS：开启网页样式之旅（一）——CSS 初体验与网页样式新征程
- 前言
- 一、为什么需要 CSS？
- 二、CSS的引用
- （一）行内样式
- （二）内部样式
- （三）外部样式
- （四）样式表的优先级
- 三、CSS语法规范
- （一）选择器
- 例子（后面会详细讲）
- 1.元素选择器
- 2.类选择器
- 3.ID选择器
- （二）声明块
- 1.属性名和属性值
- 2.注释的写法
前言
- 在之前的学习和分享中，我们已经对 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 在样式呈现方面的不足
它可以让我们轻松地控制网页中每个元素的外观，包括但不限于以下几个方面：
-
- 字体样式
-
- 颜色与背景
-
- 布局与定位
-
- 边框与装饰
二、CSS的引用
在网页开发中，CSS样式可以通过多种方式被应用到HTML页面中，常见的有行内样式、内部样式和外部样式这三种引用方法
（一）行内样式
- 行内样式是将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.元素选择器
这是最基本的选择器类型，直接使用HTML元素的名称作为选择器。例如，h1就是一个元素选择器，它会选择页面中所有的
<h1>元素
h1 {
color: green;
font - size: 40px;
}
2.类选择器
类选择器允许我们给特定的一组元素添加相同的样式，而这些元素不一定是同一种HTML元素。它通过在HTML元素中添加一个class属性来标识，然后在CSS中通过.加上类名来选择这些元素
<p class="highlight">这是一段需要突出显示的段落。</p>
<div class="highlight">这是一个需要突出显示的div元素。</div>
3.ID选择器
ID选择器用于选中具有特定ID的唯一元素。在HTML中，每个元素的ID应该是唯一的。它通过在HTML元素中添加一个id属性，然后在CSS中通过#加上ID名来选择该元素
<p id="unique - paragraph">这是一个独一无二的段落。</p>
（二）声明块
声明块用于设置具体的样式，它是由一个或多个声明组成的。声明的格式为：属性名:属性值。
1.属性名和属性值
在CSS中，有许多属性可以用来设置元素的样式，如color（颜色）、font - size（字体大小）、background - color（背景颜色）等。每个属性都有其对应的属性值
- 例如，color: green中，color是属性名，表示要设置元素的颜色，green是属性值，表示将颜色设置为绿色。
- 对于多个属性的设置，在声明块中用分号;隔开。如{color: green; font - size: 40px;}，这里分别设置了颜色为绿色和字体大小为40像素
2.注释的写法
- CSS中可以添加注释来对样式进行说明，方便自己和其他开发者理解代码。注释的格式是/* 注释内容 */
/* 给h1元素添加样式 */
h1 {
/* 设置文字颜色为红色 */
color: red;
/* 设置文字大小为40px */
font - size: 40px;
}
| CSS的引言到此结束，下一节后面我们会详细讲CSS的选择器内容，喜欢的话记得三连哦 |
