您好!欢迎访问家园网-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‌首行缩进- 长度值(如 20px)p { text-indent: 20px; }:使段落首行缩进 20 像素。
‌text-overflow‌溢出处理- clip(裁剪)
- ellipsis(省略号)
- fade(渐隐)
div { text-overflow: ellipsis; }:当文本溢出时显示省略号。

‌说明‌:

  • font 属性是复合属性,可同时设置 font-weight、font-style、font-size、line-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 可用于恢复浏览器默认样式,但需注意兼容性。


标签: