您好!欢迎访问家园网-www.jy.wang!

家园网

CSS 中用于控制文本的属性有哪些,全部列出来,然后并且列出每一个属性的所有参数值,采用列表,分属性、作用、所有参数值及效果、示例及说明4列

网络 作者:本站 点击:

根据 CSS 标准和常见用法,以下是控制文本的属性及其参数值列表:

属性名作用参数值及效果示例及说明
color文本颜色

- ‌颜色关键字‌(如 red)

- ‌十六进制‌(如 #ff0000)

- ‌RGB/RGBA‌(如 rgb(255,0,0))

- ‌HSL/HSLA‌(如 hsl(0, 100%, 50%))

- transparent(透明)

- currentcolor(继承文本颜色)

- inherit(继承父元素)

- initial(重置为默认值)

- unset(重置为默认或继承)

- revert(恢复浏览器默认)

p { color: #333; }:设置段落文本为深灰色。
text-align水平对齐

- left(默认左对齐)

- right(右对齐)

- center(居中对齐)

- justify(两端对齐)

- start(智能左对齐/右对齐)

- end(智能右对齐/左对齐)

- inherit(继承父元素)

div { text-align: center; }:使文本在容器内水平居中。
text-decoration装饰效果none(默认无装饰)
underline(下划线)
overline(上划线)
line-through(删除线)
a { text-decoration: none; }:移除链接的默认下划线。
text-transform大小写转换none(默认无转换)
capitalize(首字母大写)
uppercase(全大写)
lowercase(全小写)
full-width(全角字符)
full-size-kana(全角片假名)
initial(默认值)
inherit(继承父元素)
unset(重置为默认或继承)
revert(恢复浏览器默认)
h1 { text-transform: uppercase; }:将标题文本转换为大写。
line-height行高- 数值(如 1.5 表示字体大小的 1.5 倍)
- 固定值(如 24px
p { line-height: 1.6; }:设置段落行高为字体大小的 1.6 倍。
text-shadow阴影效果- 语法:h-shadow v-shadow blur color(如 2px 2px 4px rgba(0,0,0,0.5)h2 { text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }:为标题添加阴影。
font-weight字体粗细normal(默认)
bold(粗体)
bolder(更粗)
lighter(更细)
- 数值(100-900)
p { font-weight: bold; }:使文本显示为粗体。
font-family字体系列- 字体名称(如 "Times"
- 通用字体(如 serif
- 多字体回退(如 "Arial", sans-serif
body { font-family: "Arial", sans-serif; }:优先使用 Arial,否则使用无衬线字体。
font-size字体大小- 关键字(如 small
- 固定值(如 16px
- 相对值(如 1.2em
h2 { font-size: 20px; }:设置标题大小为 20 像素。
font-style字体样式normal(默认)
italic(斜体)
oblique(倾斜)
span { font-style: italic; }:使文本显示为斜体。
word-spacing单词间距normal(默认)
- 长度值(如 2px
p { word-spacing: 2px; }:增加单词间的间距。
letter-spacing字符间距normal(默认)
- 长度值(如 1px
span { letter-spacing: 1px; }:增加字符间的间距。
text-indent首行缩进- 长度值(如 20pxp { text-indent: 20px; }:使段落首行缩进 20 像素。
text-overflow溢出处理clip(裁剪)
ellipsis(省略号)
fade(渐隐)
div { text-overflow: ellipsis; }:当文本溢出时显示省略号。

说明‌:

  • font 属性是复合属性,可同时设置 font-weightfont-stylefont-sizeline-height 和 font-family,如 font: bold 14px/1.5 "Arial", sans-serif;

  • 颜色值支持多种格式,推荐使用十六进制或 RGB/RGBA 以确保跨浏览器兼容性。

  • text-align: justify 会使文本两端对齐,但可能导致行距不均匀。

  • text-shadow 可用于创建阴影效果,但可能影响性能,建议在关键路径中谨慎使用。

  • text-transform: full-width 将字符转换为全角形式,适用于日文排版。

  • text-transform: revert 可用于恢复浏览器默认样式,但需注意兼容性。


标签: