用途
Textual Layout and Styling 用于掌握 Textual 的 CSS 式样式系统，构建响应式、视觉精致的 TUI（终端用户界面）应用。Textual 的样式系统支持为终端环境适配的 CSS 概念。
主要能力
CSS 属性
文档列出了可用于 Textual 的 CSS 属性，包括：
- 布局属性：
width、height（支持100%、固定值、1fr、auto），layout: vertical | horizontal | grid。 - 间距：
padding、margin，支持单值、双值（垂直 水平）、四值（上 右 下 左）写法。 - 边框：
border、border-left、border-right、border-top、border-bottom，样式可选 solid、dashed、double、thick、tall、wide。 - 背景与前景色：
background、color，支持主题变量、十六进制、rgb()。 - 文本样式：
text-style: bold | italic | underline | dim，可组合。 - 对齐：
align、align-horizontal、align-vertical、content-align。 - 透明度：
opacity（0.0 到 1.0）。 - 显示：
display: block | none。 - 偏移：
offset（x y）。 - 文本溢出：
text-overflow: fold | crop | ellipsis，overflow: auto | hidden。 - 层级：
layer、z-index。
内联 CSS
可在组件中通过 DEFAULT_CSS 字符串定义样式，也可使用独立的 .tcss 文件（通过 CSS_PATH = "file.tcss" 加载），或在 App 类中定义全局样式。可使用后代选择器（如 FormWidget Input）和类选择器（如 FormWidget .label）。
颜色与主题
通过 THEME 选择内置主题，文档列出的主题包括：nord、dracula、monokai、solarized-dark、solarized-light、one-dark、one-light、gruvbox、nord-deep 等。可用颜色变量包括 $primary、$secondary、$accent、$success、$error、$warning、$info、$surface、$boost、$panel、$text、$text-muted。可用 python -m textual 预览演示应用。
响应式布局
通过媒体查询实现自适应布局，条件包括 (max-width: N)、(min-width: N)、(max-height: N)、(min-height: N)、(width: N)、(height: N)，N 以终端字符单元计。示例在小于 80 列时改为垂直堆叠布局，大于等于 80 列时改为水平并排布局。
网格布局
使用 layout: grid，配合 grid-size（列 行）、grid-gutter（垂直 水平）、grid-column / grid-row（起止位置与跨格）构建复杂布局，支持跨列跨行。
类与伪类
可用 CSS 类定义样式变体，并从 Python 通过 add_class、remove_class、toggle_class、has_class 操作。伪类包括 :focus、:hover、:disabled、:dark、:light。
使用方式
文档按步骤组织：第一步理解 Textual 的 CSS 属性；第二步在组件中定义内联 CSS；第三步使用颜色与主题；第四步实现响应式布局；第五步创建网格布局；第六步使用类与伪类。随后提供两个完整示例：一个是带侧边栏、内容区和统计框、含响应式媒体查询的仪表盘布局；另一个是带校验反馈样式（含隐藏/显示错误提示）的登录表单。
适用场景
适用于使用 Textual 框架构建终端 TUI 应用时需要实现响应式布局、CSS 样式、配色方案、间距调整等场景。
限制与要求
文档要求 Textual >= 0.45.0（含 CSS 支持），并需要理解 CSS 概念（width、height、padding、borders）。最佳实践建议使用主题变量而非硬编码颜色、逻辑组织 CSS、避免不适应终端的固定宽度而改用分数单位。文档还提及参见 textual-widget-development.md 与 textual-app-lifecycle.md。