CSS 基本语法大全详解

CSS（层叠样式表）语法是前端开发的核心内容之一，其语法结构清晰且功能强大。以下是CSS语法的详细解析：

一、CSS语法基础结构

CSS规则集由选择器和声明块组成，基本语法为：

选择器 { 属性: 值; }

选择器：定位需要设置样式的HTML元素。
声明块：包含在花括号{}中，由一条或多条声明组成。
声明：由属性和值组成，格式为属性: 值;，多条声明用分号分隔。

二、选择器详解

基本选择器

标签选择器：通过HTML标签名选择元素，如p { color: red; }。
类选择器：通过元素的class属性选择，以.开头，如.highlight { background: yellow; }。
ID选择器：通过元素的id属性选择，以#开头，如#header { font-size: 24px; }。
通配符选择器：选择所有元素，用*表示，如* { margin: 0; }。

组合选择器

后代选择器：选择某个元素的所有后代，用空格分隔，如div p { color: blue; }。
子选择器：选择某个元素的直接子元素，用>连接，如div > p { color: green; }。
相邻兄弟选择器：选择紧接在另一个元素后的兄弟元素，用+连接，如h1 + p { color: purple; }。
通用兄弟选择器：选择某个元素之后的所有兄弟元素，用~连接，如h1 ~ p { color: orange; }。

属性选择器

根据元素的属性或属性值选择元素，如[title] { color: blue; }选择所有带有title属性的元素。

伪类选择器

选择元素的特定状态，如a:hover { color: red; }表示鼠标悬停时的样式。

伪元素选择器

选择元素的特定部分，如p::first-letter { font-size: 24px; }选择段落的首字母。

三、常用CSS属性

颜色相关属性

color：设置文本颜色，如color: blue;。
background-color：设置背景颜色，如background-color: #f0f0f0;。

布局相关属性

display：控制元素显示方式，如display: flex;创建弹性布局。
position：控制元素定位方式，如position: absolute;实现绝对定位。
margin和padding：控制元素的外边距和内边距。

字体和文本属性

font-family：设置字体类型，如font-family: Arial, sans-serif;。
font-size：设置字体大小，如font-size: 16px;。
text-align：设置文本对齐方式，如text-align: center;。

背景和边框属性

background-image：设置背景图片，如background-image: url('image.jpg');。
border：设置边框样式，如border: 1px solid black;。

四、CSS高级特性

层叠性和继承性

层叠性：多种CSS样式叠加时，后定义的样式优先。
继承性：子元素继承父元素的某些样式（如字体、颜色），但边框、定位等属性不继承。

优先级规则

选择器优先级由权重决定，权重越高优先级越高。
权重计算：内联样式（1000）> ID选择器（100）> 类/属性/伪类选择器（10）> 元素/伪元素选择器（1）。
使用!important可强制覆盖其他样式（慎用）。

响应式设计

通过媒体查询（@media）实现不同设备的样式适配，如：
css @media (max-width: 768px) { .container { width: 100%; } }

CSS动画和过渡

过渡：通过transition实现状态变化的平滑效果，如：
css .box { transition: all 0.3s ease; } .box:hover { transform: scale(1.1); }
动画：通过@keyframes和animation创建复杂动画。

五、CSS语法注意事项

属性和值之间用冒号分隔，多条声明用分号分隔。
值若包含多个单词，需用引号包裹，如font-family: "Times New Roman";。
选择器分组：用逗号分隔多个选择器，共享相同样式，如h1, h2, h3 { color: red; }。
注释语法：/* 注释内容 */。

六、CSS插入方式

外部样式表：通过<link>引入.css文件。
内部样式表：在<style>标签中定义样式。
内联样式：直接在HTML元素的style属性中定义样式（不推荐大量使用）。

发表评论取消回复