收藏必备：实用且常见的 CSS 代码片段大全

2024-01-02 17:34:12

序幕：探寻 CSS 的奇妙世界

在网页设计和前端开发的浩瀚宇宙中，CSS（Cascading Style Sheets）就像一位优雅的魔法师，它能够赋予网页元素以视觉之美，让网页呈现出千变万化的风格。CSS 代码片段，则是这些魔法咒语的集合，它们能够快速而轻松地实现各种设计效果，让网页焕发出新的生机。

正文：常用 CSS 代码片段一览

文字样式
- font-family: Arial, sans-serif; - 使用 Arial 或其他无衬线字体作为网页正文字体。
- font-size: 16px; - 将网页正文字体大小设置为 16 像素。
- color: #333; - 将网页正文字体颜色设置为黑色。
链接样式
- a:link { color: #000; } - 设置未访问链接的文本颜色为黑色。
- a:visited { color: #666; } - 设置已访问链接的文本颜色为灰色。
- a:hover { color: #ff0000; } - 设置鼠标悬停在链接上的文本颜色为红色。
列表样式
- ul { list-style-type: square; } - 将无序列表的项目符号设置为方块。
- ol { list-style-type: upper-roman; } - 将有序列表的项目符号设置为大写罗马数字。
- li { margin-bottom: 10px; } - 设置列表项之间的间距为 10 像素。
表格样式
- table { border-collapse: collapse; } - 设置表格边框折叠，使表格单元格紧密相连。
- th, td { padding: 5px; } - 设置表格头部和单元格的内边距为 5 像素。
- th { background-color: #eee; } - 设置表格头部背景颜色为浅灰色。
布局样式
- #header { width: 100%; height: 100px; background-color: #f00; } - 设置页眉的宽度、高度和背景颜色。
- #content { width: 80%; margin: 0 auto; } - 设置内容区域的宽度和自动居中。
- #footer { width: 100%; height: 50px; background-color: #333; } - 设置页脚的宽度、高度和背景颜色。
动画样式
- #element { transition: all 0.5s ease-in-out; } - 设置元素的过渡效果，持续时间为 0.5 秒，缓入缓出。
- #element:hover { transform: scale(1.2); } - 当鼠标悬停在元素上时，将其放大 1.2 倍。
- #element { animation: my-animation 2s infinite alternate; } - 为元素添加动画效果，动画名称为 my-animation，持续时间为 2 秒，无限循环，交替播放。