CSS 样式用法大全
文章目录
- 一、CSS 基础语法
- 二、CSS 引入方式
- 三、CSS 选择器大全
- 常用伪类
- 常用伪元素
- 四、常用 CSS 属性
- 1. 文本与字体
- 2. 盒模型（Box Model）
- 边框详细设置
- 3. 背景
- 4. 显示与可见性
- 5. 定位（Positioning）
- 6. 浮动与清除
- 五、现代布局方式
- 1. Flexbox（弹性布局）
- 2. Grid（网格布局）
- 3. 多列布局（Columns）
- 六、响应式设计
- 1. 媒体查询（Media Queries）
- 2. 视口单位
- 3. 相对单位
- 七、过渡与动画
- 1. 过渡（Transition）
- 八、其他实用技巧
- 1. 重置默认样式（CSS Reset）
- 2. 清除浮动（Clearfix）
- 3. 居中技巧
- 九、CSS 最佳实践
- 十、现代 CSS 特性（可选）
CSS（层叠样式表）是用于描述HTML或XML（包括如SVG或XHTML）文档外观和格式的样式语言。它控制网页的布局、颜色、字体、动画等视觉表现。
以下是一个全面的 CSS 样式用法大全 概览，涵盖常用语法、选择器、属性、布局方式及现代特性。
一、CSS 基础语法
选择器 {属性: 值;属性: 值;
}
示例：
p {color: red;font-size: 16px;
}
二、CSS 引入方式
-
内联样式（Inline）
<p style="color: blue;">文本</p> -
内部样式表（Internal）
<head><style>p { color: green; }</style> </head> -
外部样式表（External）
<link rel="stylesheet" href="styles.css">文件
styles.css内容：p { color: purple; }
三、CSS 选择器大全
| 选择器 | 示例 | 说明 |
|---|---|---|
| 元素选择器 | p { } | 选择所有 <p> 元素 |
| 类选择器 | .class { } | 选择 class=“class” 的元素 |
| ID 选择器 | #id { } | 选择 id=“id” 的元素 |
| 后代选择器 | div p { } | div 内的所有 p 元素 |
| 子选择器 | div > p { } | div 的直接子元素 p |
| 相邻兄弟 | h1 + p { } | 紧接在 h1 后的 p 元素 |
| 通用兄弟 | h1 ~ p { } | h1 后面所有的同级 p 元素 |
| 属性选择器 | [type="text"] | 拥有 type=“text” 的元素 |
| 伪类 | a:hover { } | 鼠标悬停时的链接 |
| 伪元素 | ::before, ::after | 在元素前后插入内容 |
常用伪类
:hover- 鼠标悬停:focus- 获得焦点:active- 被激活（点击）:visited- 已访问链接:first-child,:last-child:nth-child(n)- 第 n 个子元素:not()- 排除某个选择器
常用伪元素
::before/::after- 插入内容::first-line- 首行样式::first-letter- 首字母样式::selection- 选中文本样式
四、常用 CSS 属性
1. 文本与字体
color: #333; /* 文字颜色 */
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold; /* normal, bold, 100-900 */
font-style: italic; /* 斜体 */
text-align: center; /* left, right, justify */
text-decoration: none; /* underline, overline, line-through */
text-transform: uppercase; /* 大写、小写、首字母大写 */
line-height: 1.5; /* 行高 */
letter-spacing: 1px; /* 字间距 */
word-spacing: 2px; /* 词间距 */
white-space: nowrap; /* 控制空白处理 */
2. 盒模型（Box Model）
width: 200px;
height: 100px;
padding: 10px; /* 内边距 */
border: 1px solid #ccc; /* 边框 */
margin: 20px; /* 外边距 */
box-sizing: border-box; /* 包含 padding 和 border 在 width/height 中 */
边框详细设置
border-width: 1px;
border-style: solid;
border-color: black;
/* 或简写 */
border: 2px dashed red;/* 圆角 */
border-radius: 8px;
border-top-left-radius: 10px;/* 阴影 */
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
3. 背景
background-color: #f0f0f0;
background-image: url('bg.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover; /* contain, 100% 100% */
background-attachment: fixed; /* 背景固定 *//* 简写 */
background: #fff url(bg.png) no-repeat center center / cover;
4. 显示与可见性
display: block; /* block, inline, inline-block, none */
visibility: hidden; /* visible, hidden (保留空间) */
opacity: 0.8; /* 透明度 0-1 */
overflow: hidden; /* visible, scroll, auto */
5. 定位（Positioning）
position: static; /* 默认 */
position: relative; /* 相对定位 */
position: absolute; /* 绝对定位（相对于最近的定位祖先） */
position: fixed; /* 固定定位（相对于视口） */
position: sticky; /* 粘性定位 */top: 10px;
right: 10px;
bottom: 10px;
left: 10px;z-index: 10; /* 层叠顺序，仅对定位元素有效 */
6. 浮动与清除
float: left; /* left, right, none */
clear: both; /* both, left, right, none */
⚠️ 注意：浮动主要用于早期布局，现多被 Flex/Grid 替代。
五、现代布局方式
1. Flexbox（弹性布局）
.container {display: flex;flex-direction: row; /* row, column, row-reverse, column-reverse */justify-content: center; /* 主轴对齐 */align-items: center; /* 交叉轴对齐 */flex-wrap: wrap; /* 是否换行 */
}.item {flex: 1; /* 缩写：flex-grow, flex-shrink, flex-basis */flex-basis: 100px;
}
2. Grid（网格布局）
.container {display: grid;grid-template-columns: 1fr 2fr; /* 列宽 */grid-template-rows: 100px 1fr; /* 行高 */gap: 10px; /* 网格间距 */grid-template-areas:"header header""nav main""footer footer";
}.header { grid-area: header; }
.nav { grid-area: nav; }
3. 多列布局（Columns）
.container {column-count: 3;column-gap: 20px;column-rule: 1px solid #ddd;
}
六、响应式设计
1. 媒体查询（Media Queries）
@media (max-width: 768px) {.container {flex-direction: column;}
}@media (min-width: 1024px) {.sidebar {width: 300px;}
}
2. 视口单位
width: 100vw; /* 视口宽度的 100% */
height: 100vh; /* 视口高度的 100% */
font-size: 4vmin; /* 取 vw 和 vh 中较小者 */
3. 相对单位
em：相对于父元素字体大小rem：相对于根元素（html）字体大小%：相对于父元素ch：相对于字符 ‘0’ 的宽度ex：相对于小写字母 x 的高度
七、过渡与动画
1. 过渡（Transition）
.button {background: blue;transition: all 0.3s ease;
}.button:hover {background: red;transform: scale(1.1);
}### 2. 动画（Animation）
```css
@keyframes fadeIn {from { opacity: 0; }to { opacity: 1; }
}.element {animation: fadeIn 2s ease-in-out infinite alternate;
}
八、其他实用技巧
1. 重置默认样式（CSS Reset）
* {margin: 0;padding: 0;box-sizing: border-box;
}
2. 清除浮动（Clearfix）
.clearfix::after {content: "";display: table;clear: both;
}
3. 居中技巧
- 水平居中：
margin: 0 auto;（块级元素） - 水平垂直居中：
或使用 Flex：.center {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); }.container {display: flex;justify-content: center;align-items: center;height: 100vh; }
九、CSS 最佳实践
- 语义化命名：使用 BEM、SMACSS 等命名规范
- 避免过度嵌套：减少选择器复杂度
- 使用变量（CSS Custom Properties）
:root {--primary-color: #007bff; } .btn {background: var(--primary-color); } - 模块化与组件化：便于维护
- 性能优化：避免频繁重排重绘，合理使用
transform和opacity
十、现代 CSS 特性（可选）
- CSS Houdini：自定义属性与渲染
- Container Queries：基于容器尺寸的响应式
- Scroll Snap：滚动吸附
- Backdrop Filter：背景模糊
- Color Functions：
color-mix(),oklch()等（现代浏览器支持）