当前位置：首页 > news >正文

前端基础二、CSS（一）、CSS基础知识

news 2025/10/20 8:27:34

1、CSS简介

CSS(CascadingStyleSheets，层叠样式表）。是用来控制网页在浏览器中的显示外观的语言。CSS3现在已被大部分现代浏览器支持，而下一版的CSS4仍在开发中。

（CSS就是浏览器的化妆师）

CSS的核心是控制视觉表现。

样式美化：文本样式、背景、边框等。
布局与定位：元素排列、响应式设计。
动画交互：伪类、过渡、动画。

html与css对比（结构与样式分离）：

html：html是结构，用于展示内容。
css：css是样式，用于设置网页的样式及布局。

2、CSS分类

内联样式表（行内样式表）
内部样式表
外部样式表

2.1、内联样式表

样式写到标签内部，可以控制当前标签的样式，特殊情况使用。

样例：

<!-- 1.内联样式表（行内样式表） 直接写到标签内部，控制当前标签 -->
<p style="color: pink;">我是粉色的</p>

2.2、内部样式表

写到<head>标签中，脱离结构，可以控制当前页面的所有标签，较为常用。

样例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>内部样式表</title><style>div {color: blue;}strong {color: purple;}</style>
</head><body><!-- 2.内部样式表（嵌入样式表） 写到head标签中的style标签中，控制当前页面 --><div>我是蓝色的</div><strong>我是紫色的</strong></body></html>

2.3、外部样式表

单独新建一个CSS文件，完全脱离结构，可以控制整个网站的所有标签，最常用。

样例：

my.css:

div {color: red;
}

html:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>外部样式表</title><!-- 3.外部样式表 外部引入，控制多个页面的样式 --><link rel="stylesheet" href="./my.css">
</head><body><div>回忆是一条没有终点的路</div>
</body></html>

（my.css和html文件在同一级路径）

查看全文

http://www.dtcms.com/a/503370.html