CSS 的作用

CSS 的作用

基本介绍CSS 的作用CSS 的使用方式1.内联样式(Inline Style)2.内部样式表(Internal Style Sheet)3.外部样式表(External Style Sheet)优先级总结基本介绍

CSS(Cascading Style Sheets,层叠样式表)是一种用来描述 HTML 或其他基于标记语言的文档外观和格式的样式表语言。它是前端开发的核心技术之一,与 HTML 和 JavaScript 一起构成了构建现代网页的三大基石。

CSS 的作用

控制网页样式

设置字体、颜色、边距、边框、背景等。定义页面布局,例如居中、对齐、浮动、网格等。

响应式设计

使用媒体查询(@media)实现不同屏幕尺寸和设备上的页面适配。

动态效果

添加过渡(transition)、动画(@keyframes)等视觉效果。配合 JavaScript 实现更加复杂的交互。

分离内容与样式

将 HTML 的结构与样式分离,代码更易于维护。

CSS 的使用方式1.内联样式(Inline Style)

将样式直接写在 HTML 标签的 style 属性中。示例:

这是一个段落。

2.内部样式表(Internal Style Sheet)

将样式写在 HTML 文档的

3.外部样式表(External Style Sheet)

将样式写在独立的 .css 文件中,通过 标签引入。示例:

优先级由高到低依次是:

5级—— !important

!important 是顶级优先级,可重置 JavaScript 设置的样式,通常不推荐使用。

4级——style 内联样式

3级——ID 选择器

2级—— 类选择器、属性选择器和伪类

1级——标签选择器

0级——通配选择器 *、逻辑组合伪类,如 :not()、:is() 和 :where 等

优先级最低 —— 继承的样式

总结

引入方式

书写位置

作用范围

优先级

使用场景

内嵌样式

写在