你应该知道的 Vanilla CSS 基础知识-css教程-PHP中文网

你应该知道的 Vanilla CSS 基础知识

DDD

发布： 2024-12-20 10:03:35

原创

971人浏览过

你应该知道的 vanilla css 基础知识

CSS 基础知识（层叠样式表）

CSS 允许我们精准定位网页元素并进行样式调整。

CSS 工作原理

CSS 主要由两部分构成：

选择器：用于指定目标元素。
声明：包含属性和值，定义元素的样式。

CSS 的三个级别

内联 CSS: 直接在 HTML 元素内定义样式，优先级最高。例如：<p style="color:white;">这是内联 CSS</p>
内部 CSS: 在 HTML 文件的 <head> 部分使用 <style> 标签定义样式。

立即学习“前端免费学习笔记（深入）”；
外部 CSS: 将样式定义在单独的 CSS 文件中，通过链接引入 HTML 文件。外部 CSS 优先级最低。编译时，内联 > 内部 > 外部。

CSS 选择器

选择器决定如何从 HTML 中选择元素。选择器的类型及其作用至关重要。

常用 CSS 选择器：

网页制作与PHP语言应用

图书《网页制作与PHP语言应用》，由武汉大学出版社于2006出版，该书为普通高等院校网络传播系列教材之一，主要阐述了网页制作的基础知识与实践，以及PHP语言在网络传播中的应用。该书内容涉及：HTML基础知识、PHP的基本语法、PHP程序中的常用函数、数据库软件MySQL的基本操作、网页加密和身份验证、动态生成图像、MySQL与多媒体素材库的建设等。

447

查看详情

*通用选择器 (`)**: 选择所有 HTML 元素。例如：*{ background-color: gray; }` (将所有元素背景色设为灰色)
元素选择器: 选择特定 HTML 元素。例如：p { color: blue; } (将所有段落文本设为蓝色)
类选择器和 ID 选择器: 类选择器使用点 (.)，ID 选择器使用井号 (#)。类名可重复使用，ID 名应唯一。例如：.warning { text-align: center; } #myElement { color: red; }
子选择器: 选择父元素的直接子元素。例如：nav ul { display: flex; } (将导航栏内的直接子 ul 元素设为 flex 布局)