CSS 样式用法大全

木易士心

发布于 2025-11-30 10:02:17

370

S 特性（可选）

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;（块级元素）

水平垂直居中：

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

或使用 Flex：

.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() 等（现代浏览器支持）

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-10-24，如有侵权请联系 cloudcommunity@tencent.com 删除

动画

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

CSS 样式用法大全

CSS 样式用法大全

S 特性（可选）

一、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 特性（可选）

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐