跳至主要內容

CSS文本、背景与表格

cheniy2025/9/17大约 14 分钟CSS文本样式背景样式表格样式关系选择器

CSS文本、背景与表格

学习目标

  • 掌握CSS文本属性的使用
  • 学会设置背景样式
  • 了解表格的CSS样式控制
  • 掌握关系选择器的使用

文本属性

文本对齐 - text-align

控制文本的水平对齐方式。

/* 文本对齐属性 */
.text-left {
    text-align: left;      /* 左对齐（默认值） */
}

.text-center {
    text-align: center;    /* 居中对齐 */
}

.text-right {
    text-align: right;     /* 右对齐 */
}

.text-justify {
    text-align: justify;   /* 两端对齐 */
}
HTML
<div class="text-demo">
    <p class="text-left">这是左对齐的文本内容</p>
    <p class="text-center">这是居中对齐的文本内容</p>
    <p class="text-right">这是右对齐的文本内容</p>
    <p class="text-justify">这是两端对齐的文本内容，当文本内容较长时，会自动调整字符间距以实现两端对齐的效果。</p>
</div>

文本装饰 - text-decoration

控制文本的装饰效果，如下划线、删除线等。

/* 文本装饰属性 */
.text-underline {
    text-decoration: underline;      /* 下划线 */
}

.text-overline {
    text-decoration: overline;       /* 上划线 */
}

.text-line-through {
    text-decoration: line-through;   /* 删除线 */
}

.text-none {
    text-decoration: none;           /* 无装饰（常用于移除链接下划线） */
}

/* 组合装饰效果 */
.text-multiple {
    text-decoration: underline overline; /* 同时显示上划线和下划线 */
}

/* 链接样式示例 */
a {
    color: #007bff;
    text-decoration: none;           /* 移除默认下划线 */
    transition: all 0.3s ease;
}

a:hover {
    text-decoration: underline;      /* 悬停时显示下划线 */
    color: #0056b3;
}

文本转换 - text-transform

控制文本的大小写转换。

/* 文本转换属性 */
.text-uppercase {
    text-transform: uppercase;       /* 转换为大写 */
}

.text-lowercase {
    text-transform: lowercase;       /* 转换为小写 */
}

.text-capitalize {
    text-transform: capitalize;      /* 首字母大写 */
}

.text-normal {
    text-transform: none;            /* 保持原样（默认值） */
}
HTML
<div class="transform-demo">
    <p class="text-uppercase">hello world css</p>
    <p class="text-lowercase">HELLO WORLD CSS</p>
    <p class="text-capitalize">hello world css</p>
    <p class="text-normal">Hello World CSS</p>
</div>

文本缩进 - text-indent

控制段落首行的缩进距离。

/* 文本缩进属性 */
.indent-2em {
    text-indent: 2em;               /* 缩进2个字符 */
}

.indent-30px {
    text-indent: 30px;              /* 缩进30像素 */
}

.indent-negative {
    text-indent: -20px;             /* 负缩进（悬挂缩进） */
    padding-left: 20px;             /* 配合负缩进使用 */
}

/* 实际应用示例 */
.article-paragraph {
    text-indent: 2em;               /* 段落首行缩进 */
    line-height: 1.8;               /* 行高 */
    margin-bottom: 15px;            /* 段落间距 */
}

.list-item {
    text-indent: -1em;              /* 悬挂缩进 */
    padding-left: 1em;              /* 左内边距 */
}

综合文本样式示例

点击查看完整的文本样式示例
/* 文章样式示例 */
.article {
    max-width: 800px;
    margin: 40px auto;
    padding: 30px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.article-title {
    font-size: 2.5em;
    font-weight: bold;
    text-align: center;
    color: #2c3e50;
    margin-bottom: 10px;
    text-transform: capitalize;
}

.article-subtitle {
    font-size: 1.2em;
    text-align: center;
    color: #7f8c8d;
    margin-bottom: 30px;
    text-decoration: underline;
}

.article-content p {
    text-indent: 2em;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: justify;
    color: #34495e;
}

.article-quote {
    font-style: italic;
    text-align: center;
    color: #e74c3c;
    font-size: 1.1em;
    margin: 30px 0;
    padding: 20px;
    background-color: #fdf2f2;
    border-left: 4px solid #e74c3c;
    text-decoration: none;
}

.article-highlight {
    background-color: #fff3cd;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: bold;
}
<article class="article">
    <h1 class="article-title">css text properties guide</h1>
    <p class="article-subtitle">comprehensive text styling tutorial</p>
    
    <div class="article-content">
        <p>CSS文本属性为我们提供了丰富的文本样式控制能力。通过合理使用这些属性，我们可以创建出<span class="article-highlight">美观且易读</span>的网页内容。</p>
        
        <div class="article-quote">
            "好的排版是看不见的，坏的排版到处都是。"
        </div>
        
        <p>在实际开发中，我们需要根据设计需求和用户体验来选择合适的文本样式。记住，<span class="article-highlight">可读性</span>永远是第一位的。</p>
    </div>
</article>

背景属性

背景颜色 - background-color

设置元素的背景颜色。

/* 背景颜色设置 */
.bg-primary {
    background-color: #007bff;      /* 蓝色背景 */
}

.bg-success {
    background-color: #28a745;      /* 绿色背景 */
}

.bg-warning {
    background-color: #ffc107;      /* 黄色背景 */
}

.bg-danger {
    background-color: #dc3545;      /* 红色背景 */
}

.bg-transparent {
    background-color: transparent;   /* 透明背景 */
}

.bg-rgba {
    background-color: rgba(0, 123, 255, 0.1);  /* 半透明蓝色 */
}

背景图片 - background-image

设置元素的背景图片。

/* 背景图片设置 */
.bg-image {
    background-image: url('images/background.jpg');
    height: 400px;
    background-size: cover;          /* 覆盖整个容器 */
    background-position: center;     /* 居中显示 */
    background-repeat: no-repeat;    /* 不重复 */
}

/* 渐变背景 */
.bg-gradient {
    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 40px;
    text-align: center;
}

/* 多重背景 */
.bg-multiple {
    background-image: 
        url('images/pattern.png'),
        linear-gradient(45deg, #f0f0f0, #e0e0e0);
    background-size: 50px 50px, cover;
    background-repeat: repeat, no-repeat;
}

背景重复 - background-repeat

控制背景图片的重复方式。

/* 背景重复设置 */
.bg-repeat {
    background-image: url('images/pattern.png');
    background-repeat: repeat;       /* 水平和垂直重复（默认） */
}

.bg-repeat-x {
    background-repeat: repeat-x;     /* 只水平重复 */
}

.bg-repeat-y {
    background-repeat: repeat-y;     /* 只垂直重复 */
}

.bg-no-repeat {
    background-repeat: no-repeat;    /* 不重复 */
}

背景位置 - background-position

控制背景图片的位置。

/* 背景位置设置 */
.bg-position-center {
    background-position: center;     /* 居中 */
}

.bg-position-top {
    background-position: top;        /* 顶部 */
}

.bg-position-bottom {
    background-position: bottom;     /* 底部 */
}

.bg-position-left {
    background-position: left;       /* 左侧 */
}

.bg-position-right {
    background-position: right;      /* 右侧 */
}

.bg-position-custom {
    background-position: 20px 30px;  /* 自定义位置 */
}

.bg-position-percent {
    background-position: 50% 25%;    /* 百分比位置 */
}

背景尺寸 - background-size

控制背景图片的尺寸。

/* 背景尺寸设置 */
.bg-size-cover {
    background-size: cover;          /* 覆盖整个容器，可能裁剪图片 */
}

.bg-size-contain {
    background-size: contain;        /* 完整显示图片，可能留白 */
}

.bg-size-100 {
    background-size: 100% 100%;      /* 拉伸填满容器 */
}

.bg-size-custom {
    background-size: 200px 150px;    /* 自定义尺寸 */
}

背景简写属性

/* 背景简写语法 */
.bg-shorthand {
    /* background: color image repeat position/size attachment; */
    background: #f0f0f0 url('images/bg.jpg') no-repeat center/cover fixed;
}

/* 等价于 */
.bg-longhand {
    background-color: #f0f0f0;
    background-image: url('images/bg.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

实用背景样式示例

点击查看背景样式实际应用
/* 卡片背景样式 */
.card {
    background-color: #fff;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin: 20px;
}

/* 英雄区域背景 */
.hero-section {
    background: linear-gradient(
        135deg,
        rgba(74, 144, 226, 0.9) 0%,
        rgba(80, 101, 166, 0.9) 100%
    ), url('images/hero-bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: white;
    text-align: center;
    padding: 100px 0;
}

/* 纹理背景 */
.texture-bg {
    background-color: #f8f9fa;
    background-image: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.05) 2px,
            rgba(0, 0, 0, 0.05) 4px
        );
}

/* 动态渐变背景 */
.animated-bg {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

表格样式

基础表格样式

/* 基础表格样式 */
table {
    width: 100%;                     /* 表格宽度 */
    border-collapse: collapse;       /* 合并边框 */
    margin: 20px 0;                  /* 外边距 */
    font-family: Arial, sans-serif;  /* 字体 */
}

th, td {
    padding: 12px 15px;              /* 单元格内边距 */
    text-align: left;                /* 文本对齐 */
    border: 1px solid #ddd;          /* 边框 */
}

th {
    background-color: #f8f9fa;       /* 表头背景色 */
    font-weight: bold;               /* 表头字体加粗 */
    color: #495057;                  /* 表头文字颜色 */
}

tbody tr:nth-child(even) {
    background-color: #f8f9fa;       /* 偶数行背景色 */
}

tbody tr:hover {
    background-color: #e9ecef;       /* 悬停效果 */
    transition: background-color 0.3s ease;
}

表格边框样式

/* 不同的边框样式 */
.table-bordered {
    border: 2px solid #007bff;
}

.table-bordered th,
.table-bordered td {
    border: 1px solid #007bff;
}

/* 无边框表格 */
.table-borderless {
    border: none;
}

.table-borderless th,
.table-borderless td {
    border: none;
}

/* 只有水平边框 */
.table-horizontal {
    border-collapse: collapse;
}

.table-horizontal th,
.table-horizontal td {
    border-left: none;
    border-right: none;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

表格尺寸控制

/* 表格尺寸样式 */
.table-sm th,
.table-sm td {
    padding: 6px 8px;               /* 紧凑表格 */
}

.table-lg th,
.table-lg td {
    padding: 16px 20px;             /* 宽松表格 */
}

/* 固定列宽 */
.table-fixed {
    table-layout: fixed;            /* 固定布局 */
}

.table-fixed .col-id {
    width: 80px;                    /* ID列宽度 */
}

.table-fixed .col-name {
    width: 200px;                   /* 姓名列宽度 */
}

.table-fixed .col-email {
    width: 250px;                   /* 邮箱列宽度 */
}

响应式表格

/* 响应式表格容器 */
.table-responsive {
    overflow-x: auto;               /* 水平滚动 */
    -webkit-overflow-scrolling: touch; /* iOS平滑滚动 */
}

.table-responsive table {
    min-width: 600px;               /* 最小宽度 */
}

/* 移动端表格样式 */
@media (max-width: 768px) {
    .table-mobile {
        font-size: 14px;
    }
    
    .table-mobile th,
    .table-mobile td {
        padding: 8px 6px;
    }
    
    /* 隐藏不重要的列 */
    .table-mobile .hide-mobile {
        display: none;
    }
}

完整表格示例

点击查看完整的表格样式示例
/* 现代化表格样式 */
.modern-table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
    font-size: 16px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.modern-table thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.modern-table th {
    padding: 15px 20px;
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
}

.modern-table td {
    padding: 15px 20px;
    border: none;
    border-bottom: 1px solid #f0f0f0;
}

.modern-table tbody tr {
    background-color: #fff;
    transition: all 0.3s ease;
}

.modern-table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

.modern-table tbody tr:hover {
    background-color: #e3f2fd;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 状态指示器 */
.status-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

.status-active {
    background-color: #d4edda;
    color: #155724;
}

.status-inactive {
    background-color: #f8d7da;
    color: #721c24;
}

.status-pending {
    background-color: #fff3cd;
    color: #856404;
}
<div class="table-responsive">
    <table class="modern-table">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>邮箱</th>
                <th>状态</th>
                <th>注册时间</th>
                <th class="hide-mobile">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>001</td>
                <td>张三</td>
                <td>zhangsan@example.com</td>
                <td><span class="status-badge status-active">活跃</span></td>
                <td>2024-01-15</td>
                <td class="hide-mobile">
                    <button class="btn btn-sm btn-primary">编辑</button>
                    <button class="btn btn-sm btn-danger">删除</button>
                </td>
            </tr>
            <tr>
                <td>002</td>
                <td>李四</td>
                <td>lisi@example.com</td>
                <td><span class="status-badge status-pending">待审核</span></td>
                <td>2024-01-16</td>
                <td class="hide-mobile">
                    <button class="btn btn-sm btn-primary">编辑</button>
                    <button class="btn btn-sm btn-danger">删除</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

关系选择器

关系选择器用于选择具有特定关系的元素。

后代选择器（空格）

选择指定元素内部的所有后代元素。

/* 后代选择器 - 选择div内部的所有p元素 */
div p {
    color: blue;
    margin-bottom: 10px;
}

/* 选择.container内部的所有.item元素 */
.container .item {
    padding: 10px;
    border: 1px solid #ddd;
}

/* 多层后代选择器 */
.header .nav .menu-item {
    display: inline-block;
    margin-right: 20px;
}

/* 实际应用示例 */
.article p {
    line-height: 1.8;               /* 文章段落行高 */
    margin-bottom: 15px;
}

.article h2 {
    color: #2c3e50;                 /* 文章标题颜色 */
    border-bottom: 2px solid #3498db;
    padding-bottom: 5px;
}

.sidebar ul li {
    list-style: none;               /* 侧边栏列表样式 */
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

子代选择器（>）

只选择直接子元素，不包括更深层的后代。

/* 子代选择器 - 只选择div的直接子元素p */
div > p {
    font-weight: bold;
}

/* 选择.menu的直接子元素li */
.menu > li {
    display: inline-block;
    position: relative;
}

/* 导航菜单示例 */
.navbar > ul > li {
    float: left;                    /* 一级菜单项浮动 */
    margin-right: 30px;
}

.navbar > ul > li > a {
    color: #333;                    /* 一级菜单链接颜色 */
    text-decoration: none;
    padding: 10px 15px;
    display: block;
}

/* 表格行选择器 */
tbody > tr > td {
    padding: 12px;                  /* 只选择tbody直接子行的单元格 */
}

thead > tr > th {
    background-color: #f8f9fa;      /* 只选择thead直接子行的表头 */
    font-weight: bold;
}

相邻兄弟选择器（+）

选择紧跟在指定元素后面的第一个兄弟元素。

/* 相邻兄弟选择器 - 选择紧跟在h2后面的第一个p元素 */
h2 + p {
    font-size: 1.1em;              /* 标题后第一段字体稍大 */
    font-weight: 500;
    color: #555;
}

/* 表单标签后的输入框 */
label + input {
    margin-left: 10px;              /* 标签后输入框左边距 */
}

/* 图片后的段落 */
img + p {
    margin-top: 20px;               /* 图片后段落上边距 */
    font-style: italic;             /* 图片说明文字斜体 */
    color: #666;
    text-align: center;
}

/* 按钮组样式 */
.btn + .btn {
    margin-left: 10px;              /* 相邻按钮间距 */
}

/* 分隔线后的内容 */
hr + .content {
    padding-top: 30px;              /* 分隔线后内容上边距 */
}

通用兄弟选择器（~）

选择指定元素后面的所有兄弟元素。

/* 通用兄弟选择器 - 选择h2后面的所有p元素 */
h2 ~ p {
    margin-left: 20px;              /* 标题后所有段落缩进 */
}

/* 选中状态的兄弟元素 */
input:checked ~ label {
    color: #007bff;                 /* 选中后的标签颜色 */
    font-weight: bold;
}

/* 焦点状态的兄弟元素 */
input:focus ~ .help-text {
    display: block;                 /* 输入框获得焦点时显示帮助文本 */
    color: #007bff;
}

/* 悬停效果 */
.card:hover ~ .card {
    opacity: 0.7;                   /* 悬停时其他卡片变透明 */
    transition: opacity 0.3s ease;
}

关系选择器综合示例

点击查看关系选择器实际应用
/* 文章布局样式 */
.article-layout {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* 后代选择器 - 文章内所有段落 */
.article-layout p {
    line-height: 1.8;
    margin-bottom: 20px;
    color: #333;
}

/* 子代选择器 - 文章直接子标题 */
.article-layout > h1 {
    font-size: 2.5em;
    text-align: center;
    margin-bottom: 30px;
    color: #2c3e50;
}

.article-layout > h2 {
    font-size: 1.8em;
    margin: 40px 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #3498db;
}

/* 相邻兄弟选择器 - 标题后第一段 */
h2 + p {
    font-size: 1.1em;
    font-weight: 500;
    color: #2c3e50;
}

/* 通用兄弟选择器 - 代码块后的段落 */
pre ~ p {
    margin-top: 25px;
}

/* 复合选择器示例 */
.sidebar > .widget + .widget {
    margin-top: 30px;               /* 侧边栏小部件间距 */
    border-top: 1px solid #eee;
    padding-top: 30px;
}

/* 表单相关选择器 */
.form-group label + input,
.form-group label + textarea,
.form-group label + select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top: 5px;
}

.form-group input:focus ~ .form-help {
    display: block;
    color: #007bff;
    font-size: 0.9em;
    margin-top: 5px;
}

/* 导航菜单选择器 */
.nav > li > a {
    display: block;
    padding: 15px 20px;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
}

.nav > li > a:hover {
    background-color: #f8f9fa;
    color: #007bff;
}

.nav > li.active > a {
    background-color: #007bff;
    color: white;
}

/* 子菜单样式 */
.nav > li:hover > .submenu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    min-width: 200px;
}
<div class="article-layout">
    <h1>CSS关系选择器详解</h1>
    
    <h2>什么是关系选择器</h2>
    <p>关系选择器用于选择具有特定关系的HTML元素...</p>
    <p>它们包括后代选择器、子代选择器等...</p>
    
    <h2>实际应用场景</h2>
    <p>在实际开发中，关系选择器非常有用...</p>
    
    <pre><code>/* 代码示例 */</code></pre>
    <p>上面的代码展示了关系选择器的用法...</p>
</div>

<nav class="nav">
    <li><a href="#">首页</a></li>
    <li class="active">
        <a href="#">产品</a>
        <ul class="submenu">
            <li><a href="#">产品A</a></li>
            <li><a href="#">产品B</a></li>
        </ul>
    </li>
    <li><a href="#">关于我们</a></li>
</nav>

最佳实践

1. 文本样式优化

/* 提高文本可读性 */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;               /* 适当的行高 */
    color: #333;                    /* 足够的对比度 */
    font-size: 16px;                /* 基础字体大小 */
}

/* 响应式文本 */
@media (max-width: 768px) {
    body {
        font-size: 14px;            /* 移动端稍小字体 */
        line-height: 1.5;
    }
}

/* 标题层次 */
h1 { font-size: 2.5em; }
h2 { font-size: 2em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.25em; }
h5 { font-size: 1.1em; }
h6 { font-size: 1em; }

2. 背景性能优化

/* 优化背景图片性能 */
.hero-bg {
    background-image: url('hero-small.jpg');  /* 移动端小图 */
    background-size: cover;
    background-position: center;
}

@media (min-width: 768px) {
    .hero-bg {
        background-image: url('hero-large.jpg'); /* 桌面端大图 */
    }
}

/* 使用CSS渐变替代图片 */
.gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    /* 比图片文件更小，加载更快 */
}

3. 表格无障碍访问

/* 表格无障碍优化 */
table {
    border-collapse: collapse;
    width: 100%;
}

th {
    background-color: #f8f9fa;
    font-weight: bold;
    text-align: left;
    padding: 12px;
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    th {
        background-color: #000;
        color: #fff;
    }
    
    td {
        border: 2px solid #000;
    }
}

/* 焦点可见性 */
table:focus-within {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

总结

本章我们学习了CSS的文本属性、背景属性、表格样式和关系选择器。这些知识为创建美观且功能完善的网页奠定了基础。在下一章中，我们将学习CSS盒子模型和布局技术。

最近更新
贡献者: cheniy