基本介绍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 等
优先级最低 —— 继承的样式
总结
引入方式
书写位置
作用范围
优先级
使用场景
内嵌样式
写在标签中
当前页面
由书写位置和选择器优先级来共同决定
小案例 对网站首页首次打开速度要求很高的网页需要 如:百度、腾讯首页
行内样式
css 样式写在标签的 style 属性中
当前标签
最高
配合 JS 或特殊需求
外链样式
css 样式写在单独 css 文件中,通过 link 标签引入
多个页面
由书写位置和选择器优先级来共同决定
项目开发中高频使用
导入式样式
把@import 放在style标签中或 CSS 文件中,用于导入外部 CSS 样式文件
被导入的页面
最低
项目开发中几乎不用(用作了解即可)