CSS 教程

/* 设置行高 */
.element {
    line-height: normal; /* 设置行高为正常 */
}

.number-line-height {
    line-height: 1.5; /* 设置行高为字体大小的1.5倍 */
}

.length-line-height {
    line-height: 24px; /* 设置行高为24像素 */
}

.percent-line-height {
    line-height: 120%; /* 设置行高为字体大小的120% */
}

/* 设置文本对齐方式 */
.element {
    text-align: left; /* 设置文本对齐方式为左对齐 */
}

.center-text {
    text-align: center; /* 设置文本对齐方式为居中对齐 */
}

.right-text {
    text-align: right; /* 设置文本对齐方式为右对齐 */
}

.justify-text {
    text-align: justify; /* 设置文本对齐方式为两端对齐 */
}

/* 设置文本装饰 */
.element {
    text-decoration: none; /* 设置文本装饰为无 */
}

.underline {
    text-decoration: underline; /* 设置文本装饰为下划线 */
}

.overline {
    text-decoration: overline; /* 设置文本装饰为上划线 */
}

.line-through {
    text-decoration: line-through; /* 设置文本装饰为删除线 */
}

/* 组合使用 */
.combined {
    text-decoration: underline overline; /* 组合使用下划线和上划线 */
}

/* 设置装饰的颜色、样式和厚度 */
.decorated {
    text-decoration: underline red wavy 2px; /* 设置文本装饰为红色波浪形下划线，厚度为2像素 */
}

/* 设置文本转换 */
.element {
    text-transform: none; /* 设置文本转换为无 */
}

.capitalize {
    text-transform: capitalize; /* 设置文本转换为首字母大写 */
}

.uppercase {
    text-transform: uppercase; /* 设置文本转换为全部大写 */
}

.lowercase {
    text-transform: lowercase; /* 设置文本转换为全部小写 */
}

/* 设置文本缩进 */
.element {
    text-indent: 2em; /* 设置文本缩进为2em */
}

.negative-indent {
    text-indent: -2em; /* 设置文本缩进为-2em，实现悬挂缩进效果 */
    padding-left: 2em; /* 设置左侧内边距为2em，配合负缩进使用 */
}

.percent-indent {
    text-indent: 10%; /* 设置文本缩进为10% */
}

/* 设置字母间距 */
.element {
    letter-spacing: normal; /* 设置字母间距为正常 */
}

.wide-spacing {
    letter-spacing: 2px; /* 设置字母间距为加宽2像素 */
}

.tight-spacing {
    letter-spacing: -1px; /* 设置字母间距为收紧1像素 */
}

/* 设置单词间距 */
.element {
    word-spacing: normal; /* 设置单词间距为正常 */
}

.wide-word-spacing {
    word-spacing: 10px; /* 设置单词间距为加宽10像素 */
}

.tight-word-spacing {
    word-spacing: -2px; /* 设置单词间距为收紧2像素 */
}

/* 设置文本阴影 */
.element {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 设置文本阴影：水平偏移2px，垂直偏移2px，模糊半径4px，颜色为半透明黑色 */
}

/* 多重阴影 */
.multi-shadow {
    text-shadow: 2px 2px 4px red, -2px -2px 4px blue; /* 设置多重文本阴影：红色阴影和蓝色阴影 */
}

/* 模糊效果 */
.blur-shadow {
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 设置文本阴影：无偏移，模糊半径10px，颜色为半透明黑色，产生模糊效果 */
}

/* 设置最后一行对齐方式 */
.element {
    text-align: justify; /* 设置文本对齐方式为两端对齐 */
    text-align-last: center; /* 设置最后一行对齐方式为居中对齐 */
}

.right-last {
    text-align: justify; /* 设置文本对齐方式为两端对齐 */
    text-align-last: right; /* 设置最后一行对齐方式为右对齐 */
}

/* 设置文本换行方式 */
.element {
    text-wrap: normal; /* 设置文本换行方式为正常 */
}

.balance {
    text-wrap: balance; /* 设置文本换行方式为平衡，优化换行位置 */
}

.stable {
    text-wrap: stable; /* 设置文本换行方式为稳定，保持换行位置稳定 */
}

/* 设置空白处理方式 */
.element {
    white-space: normal; /* 设置空白处理方式为正常，合并连续空白，允许换行 */
}

.pre {
    white-space: pre; /* 设置空白处理方式为保留，保留连续空白，不允许自动换行 */
}

.nowrap {
    white-space: nowrap; /* 设置空白处理方式为不换行，合并连续空白，不允许换行 */
}

.pre-wrap {
    white-space: pre-wrap; /* 设置空白处理方式为保留并换行，保留连续空白，允许自动换行 */
}

.pre-line {
    white-space: pre-line; /* 设置空白处理方式为合并并换行，合并连续空白，允许自动换行 */
}

/* 设置单词换行方式 */
.element {
    word-break: normal; /* 设置单词换行方式为正常，只在单词边界处换行 */
}

.break-all {
    word-break: break-all; /* 设置单词换行方式为强制换行，允许在单词中间换行 */
}

.keep-all {
    word-break: keep-all; /* 设置单词换行方式为保持全部，不允许在单词中间换行 */
}

.break-word {
    word-break: break-word; /* 设置单词换行方式为单词换行，在必要时在单词中间换行 */
}

/* 设置长单词换行方式 */
.element {
    overflow-wrap: normal; /* 设置长单词换行方式为正常，只在单词边界处换行 */
}

.break-word {
    overflow-wrap: break-word; /* 设置长单词换行方式为单词换行，在必要时在单词中间换行 */
}

.anywhere {
    overflow-wrap: anywhere; /* 设置长单词换行方式为任意位置，允许在任意位置换行 */
}