零基础教你学前端——53、如何添加CSS_内部样式

myzbx 2025-01-18 22:35 49 浏览

再来看一下代码，我们发现行内样式存在一些问题，最大的问题就是：样式代码和 html 代码编写到了一起，显得杂乱。为了解决这个问题，我们来学习另外一种添加样式的方法：内部 CSS。

如果一个单一的 HTML 页面有一个独特的风格，可以使用一个内部样式表。

内部样式表，一般定义在 head 元素里。通过 style 元素来定义。页面的样式声明均需要添加在 style 元素内部。

现在，样式声明到了 html 元素的外部。我猜，有的小伙伴可能就要问，我怎么告诉浏览器给哪个元素添加样式呢？没错，其实行内样式也有一个好处，就是我们不用思考这个问题，想给哪个元素添加样式，直接写在 html 元素上就好了。内部样式，我们得需要一个方法，来找到这些要添加样式的 html 元素，这个方法就是选择器。

CSS选择器是用来寻找或选择你想要定义样式的HTML元素的。CSS选择器有很多种，现在我们先认识第一个选择器——元素选择器，它是根据元素名称来选择HTML元素的。

例如，这个 p 元素就是一个元素选择器，根据 p 这个名称选择了这个 html 文档里的全部 p 元素，在花括号里来声明样式。

p {

text-align: center;

color: red;

}

<body>

<p>Hello CSS !</p>

<p>这些段落用CSS进行了风格化处理。</p>

</body>

我们来做个例子。

在 002-add-css 文件夹里创建 internal.html 文件，来完成一个内部样式的案例。

添加一个 h1 元素，填入一些标题文本。再添加一个 p 元素，填入一些段落文本。

在 head 元素末尾添加 style 元素，定义选择器 body，这样我们就找到了 body 元素，并为他添加样式： background-color linen 。

这里样式声明的语法我们在后面的CSS课程中，会深入探索，大家现在只需要能读懂 background-color 是给 body，也就是页面的整体添加背景颜色就可以了，保存。

在浏览器中预览，整个页面背景色变成了亚麻色。

在 style 元素里继续定义选择器 h1，给 h1 定义样式 color maroon[m??ru?n]，margin-left 40px。保存。

我们看，标题的颜色变为了紫褐色，距离窗口左侧 40个像素。

可见，margin-left 用于定义 h1 标题元素位于父容器左侧的距离。这些样式声明我们在后续课程里详细阐述。

通过内部样式来给页面添加CSS，我们就讲完了。内部样式解决了行内样式的代码分离问题。大家思考一下，这种添加样式的方法有什么弊端呢？大家可以尝试着总结一下，在弹幕上告诉我，我们下节课讨论这个问题。

文章配套视频链接：https://www.bilibili.com/video/BV1oU4y1278g?p=54

CSS 使用

零基础教你学前端——53、如何添加CSS_内部样式

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

8.7k star，一款超炫酷的动态可视化大屏项目

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿