【web前端开发】CSS--CSS简介及其编写位置（上）

hefaxiang2025-03-07 12:32

1、CSS简介

（1）CSS的全称为：层叠式样式表（Cascading Style Sheets）

（2）CSS也是一种标记语言，用于给HTML结构设置样式，例如：文字大小、颜色、元素宽度等等。

剖析层叠式样式表：

层叠：一层一层"涂"上去

样式：文字大小、背景颜色、元素宽度等等

表：列表

简单理解：CSS可以美化HTML，让HTML更漂亮。

核心思想：HTML搭建结构，CSS添加样式，实现了：结构与样式的分离。

2、CSS的编写位置

（1）行内样式

示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS_行内样式</title>
</head>
<body>
    <h1 style="color:green;font-size: 60px;">好好学习，天天向上</h1>
</body>

</html>

结果：

所谓的行内样式就是与HTML的标签搭配使用。

在HTML中，名值对之间用"="相连；

例如：

而在CSS中，名与值之间用**"："相连，末尾加";"**

总结：

（1）CSS的行内样式是写在标签的style属性中（行内样式又称：内联样式）

（2）语法：

html 复制代码

<h1 style="color: blue;">锄禾日当午</h1>
<h1 style="color: red;">汗滴禾下土</h1>

运行结果：

（3）注意点：

1))style属性的值不能随便写，写时要符合CSS语法规范：是**名：值；**的形式

2))行内样式表，只能控制当前标签的样式，对其他标签无效

例如：

存在的问题:

书写繁琐，样式不能复用，并且没有体现出结构与样式分离的思想，不推荐大量使用，只有对当前元素添加样式时，才偶尔使用。