详细介绍：Streamlit：CSS——从基础到实战美化应用

news/2025/10/20 13:18:43/文章来源:https://www.cnblogs.com/wzzkaifa/p/19152422

文章目录

一、前言
二、CSS 是什么
三、Streamlit 中 CSS 的 3 种核心用法
- 方法 1：用st.markdown()嵌入 CSS（兼容所有版本）
- 方法 2：用st.html()嵌入 CSS（Streamlit 1.10 + 版本）
- 方法 3：外部 CSS 文件（适合复杂样式）
四、实例效果展示：美化销售数据应用

一、前言

在上一篇博客中，我们已经学会用 Streamlit 快速搭建数据应用：从st.title()设置标题、st.dataframe()展示数据，到st.button()实现交互，短短几行代码就能跑通核心功能。但实际项目中，默认的 “灰白底色、简单按钮、左对齐标题” 往往不够美观

比如企业应用需要匹配品牌色，个人项目想突出重点数据，这时候CSS（层叠样式表）就成了关键工具：它能突破 Streamlit 默认样式限制，自定义组件外观、布局甚至交互效果，让应用从 “能用” 升级为 “好用又好看”。

二、CSS 是什么

先明确基础概念：CSS 本身是用于描述网页元素样式的语言（如颜色、字体、间距），而在 Streamlit 中，CSS 的核心作用是 “修改 Streamlit 生成的网页组件样式”—— 因为 Streamlit 本质是将 Python 代码转化为网页，其组件（按钮、表格、标题等）都会对应网页中的 HTML 标签和类名（如按钮对应标签，类名为stButton），我们通过 CSS 选择器定位这些组件，再定义样式规则即可实现自定义。

简单说：Streamlit 负责 “搭骨架”（功能），CSS 负责 “穿衣服”（美化）。

三、Streamlit 中 CSS 的 3 种核心用法

Streamlit 没有专门的 “CSS 接口”，但提供了两种嵌入 CSS 的常用方式，结合基础选择器就能满足大部分需求。以下是实操方法（附代码示例）：

方法 1：用st.markdown()嵌入 CSS（兼容所有版本）

Streamlit 的st.markdown()支持渲染 HTML，只需添加unsafe_allow_html=True参数，就能嵌入

import streamlit as st
# 嵌入CSS：用<style>标签包裹，通过类名定位Streamlit组件st.markdown("""<style>/* 1. 自定义标题样式（定位<h1>标签） */h1 {color: #2E86AB; /* 品牌蓝色 */text-align: center; /* 居中对齐 */font-family: '微软雅黑', sans-serif; /* 字体 */margin-bottom: 30px; /* 底部间距 */}/* 2. 自定义按钮样式（定位Streamlit按钮类名.stButton） */.stButton > button {background-color: #A23B72; /* 按钮底色：粉色 */color: white; /* 文字白色 */border: none; /* 取消边框 */border-radius: 8px; /* 圆角 */padding: 10px 20px; /* 内边距：上下10px，左右20px */font-size: 16px; /* 字体大小 */}/* 3. 按钮hover效果（鼠标悬浮时） */.stButton > button:hover {background-color: #F18F01; /* 底色变橙色 */transform: scale(1.05); /* 轻微放大（1.05倍） */transition: all 0.3s ease; /* 过渡动画：0.3秒生效 */}</style>""", unsafe_allow_html=True)# 测试样式：标题和按钮st.title("这是CSS美化后的标题")st.button("点击测试美化按钮")

效果如下：

关键说明：
需用 style 标签包裹 CSS 代码，且必须加unsafe_allow_html=True（Streamlit 默认禁止 HTML，开启后需确保 CSS 来源安全）；
Streamlit 组件的类名可通过 “浏览器检查” 获取（右键组件→“检查”，查看 HTML 标签的class属性）。具体图示方法如下：

方法 2：用st.html()嵌入 CSS（Streamlit 1.10 + 版本）

Streamlit 1.10 版本后新增了st.html()组件，专门用于渲染 HTML/CSS，无需写unsafe_allow_html=True，代码更简洁。
示例：修改数据表格样式

import streamlit as st
import pandas as pd
import numpy as np
# 用st.html()嵌入CSS：更简洁，无需额外参数
st.html("""
<style>/* 1. 自定义表格容器样式（定位.stDataFrame） */.stDataFrame {width: 90% !important; /* 表格宽度90%（!important强制覆盖默认） */margin: 20px auto; /* 上下间距20px，左右自动（实现居中） */}/* 2. 表格表头样式（定位表头类名） */[data-testid="stDataFrameHeader"] {background-color: #2E86AB !important; /* 表头底色蓝色 */}[data-testid="stDataFrameHeader"] th {color: white !important; /* 表头文字白色 */font-weight: bold !important; /* 文字加粗 */}/* 3. 表格行hover效果（鼠标悬浮行） */[data-testid="stDataFrameRow"]:hover {background-color: #F8F9FA !important; /* 行底色变浅灰 */}
</style>
""")
# 生成测试数据并展示表格（测试样式）
data = pd.DataFrame({
"产品": ["手机", "电脑", "平板"],
"销量": np.random.randint(1000, 5000, 3),
"利润": np.random.randint(200, 1000, 3)
})
st.dataframe(data)

效果如下
在这里插入图片描述

方法 3：外部 CSS 文件（适合复杂样式）

如果 CSS 规则较多（如多个页面共用样式），可单独创建.css文件，再用st.markdown()读取并嵌入。
步骤：
创建style.css文件，写入样式：

/* style.css */
h3 { color: #F18F01; } /* 对应 st.subheader() */
h2 { color: #F18F01; } /* 对应 st.header() */
.stSelectbox { margin: 10px 0; }

在 Streamlit 代码中读取文件：

import streamlit as st
# 读取外部CSS文件
with open("style.css", "r") as f:
css = f.read()
# 嵌入CSS
st.markdown(f"<style>{css}</style>", unsafe_allow_html=True)
# 测试样式
st.subheader("这是二级标题（橙色）")
st.selectbox("下拉框（有上下间距）", ["选项1", "选项2"])

效果如下
在这里插入图片描述

四、实例效果展示：美化销售数据应用

下面用一个完整实例，帮助直观感受 CSS 的作用。

需求
搭建一个 “销售数据展示应用”
包含：居中标题、美化按钮（点击显示数据）、带样式的表格，突出品牌色（蓝色 + 粉色）。、
完整代码（含 CSS）

import streamlit as st
import pandas as pd
import numpy as np
# ---------------------- 1. 嵌入CSS样式 ----------------------
st.markdown("""
<style>/* 标题样式 */h1 {color: #2E86AB;text-align: center;font-family: '微软雅黑', sans-serif;margin: 20px 0 30px 0;}/* 按钮样式 */.stButton > button {background-color: #A23B72;color: white;border: none;border-radius: 8px;padding: 10px 25px;font-size: 16px;margin: 0 auto; /* 按钮居中 */display: block; /* 块级元素，支持margin:auto */}.stButton > button:hover {background-color: #F18F01;transform: scale(1.05);transition: all 0.3s ease;}/* 表格样式 */.stDataFrame {width: 90% !important;margin: 25px auto;border-radius: 8px; /* 表格圆角 */box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 轻微阴影 */}[data-testid="stDataFrameHeader"] {background-color: #2E86AB !important;border-top-left-radius: 8px !important;border-top-right-radius: 8px !important;}[data-testid="stDataFrameHeader"] th {color: white !important;font-size: 14px;padding: 12px !important;}[data-testid="stDataFrameRow"] td {padding: 10px !important;text-align: center;}[data-testid="stDataFrameRow"]:hover {background-color: #F8F9FA !important;}
</style>
""", unsafe_allow_html=True)
# ---------------------- 2. 应用功能逻辑 ----------------------
st.title("2024年1月销售数据展示")
# 按钮控制数据显示
if st.button("点击查看销售数据"):
# 生成模拟销售数据
dates = pd.date_range(start="2024-01-01", end="2024-01-10", freq="D")
sales_data = pd.DataFrame({
"日期": dates.strftime("%Y-%m-%d"),
"产品类别": np.random.choice(["电子产品", "服装", "食品", "家居"], size=10),
"销售额（元）": np.random.randint(1500, 6000, size=10),
"订单量": np.random.randint(15, 60, size=10)
})
# 展示表格（应用CSS样式）
st.dataframe(sales_data, use_container_width=False)

效果如下在这里插入图片描述

五、总结：Streamlit 中 CSS 的核心要点
核心价值：CSS 是 Streamlit 应用 “颜值提升” 的关键，解决默认样式单调问题，适配个性化需求（品牌色、重点突出、交互体验）；
常用方法：
简单样式用st.markdown()（兼容所有版本）或st.html()（1.10 + 版本更简洁）；
复杂样式用外部.css文件，便于维护和复用；
关键技巧：
通过 “浏览器检查” 获取 Streamlit 组件的类名（如stButton、stDataFrame），确保 CSS 选择器精准；
用!important强制覆盖 Streamlit 默认样式（如表格宽度）；
适度添加过渡动画（如transition），提升交互体验但避免过度花哨；
注意事项：
unsafe_allow_html=True需谨慎使用，确保 CSS 代码安全（避免引入恶意脚本）；
样式需适配不同屏幕（可添加响应式规则，如@media (max-width: 768px) { … }）。
掌握 CSS 后，你可以进一步探索更复杂的美化：比如自定义侧边栏样式、添加数据卡片动画、实现暗黑模式等。下一篇博客我们可以聚焦 “Streamlit 自定义组件与 CSS 的深度结合”，如果你有具体的美化需求，也可以随时提出！