CSS 文字风格样式范例

CSS 是用来设定 Web Page Style 网页样式的表达语言方式，例如 font-family 可以让控制网页中文字元素外观的呈现方式 font-size 用来指定文字的大小、font-weight 指定文字的粗细。使用 CSS 来设定文字的风格和字型。

color: #0f0f0f; /*文字颜色*/
font-family: Arial, sans-serif; /*文字风格字型*/
font-size: 13px; /*文字大小*/
font-weight: bold; /*文字粗体*/
font-style: italic; /*文字斜体*/
font-variant: small-caps; /*小字体*/
  • font-weight: normal; Andersen Danish Author Whose Fairy Tales
  • font-weight: bold; Andersen Danish Author Whose Fairy Tales
  • font-style: italic; Andersen Danish Author Whose Fairy Tales
  • font-variant: small-caps; Andersen Danish Author Whose Fairy Tales
letter-spacing: 1px; /*字体间距离*/
line-height: 18px; /*设定行高(上下行的间距)*/
  • letter-spacing: -1px; Andersen Danish Author Whose Fairy Tales
  • letter-spacing: 0px; Andersen Danish Author Whose Fairy Tales
  • letter-spacing: 1px; Andersen Danish Author Whose Fairy Tales
  • letter-spacing: 2px; Andersen Danish Author Whose Fairy Tales
  • letter-spacing: 3px; Andersen Danish Author Whose Fairy Tales
  • letter-spacing: 5px; Andersen Danish Author Whose Fairy Tales
word-spacing: 5px; /*设定词的间距(词间需有空白)*/
  • Andersen enjoyed considerable success with a short story titled A Journey on Foot from Holmen Canal to the East Point of Amager. He also published a comedy and a collection of poems that season. Though he made little progress writing and publishing immediately thereafter, in 1833 he received a small traveling grant from the King, enabling him to set out on the first of many journeys through Europe.

CSS 文字删除线、顶线、底线

如何在文字上加上删除线、顶线或底线等效果。

text-decoration: line-through; /*加上删除线*/
text-decoration: overline; /*加上顶线*/
text-decoration: underline; /*加上底线*/
text-decoration: underline;text-decoration-style:wavy; /*波浪底线*/
text-decoration: none; /*删除连结底线*/
  • text-decoration: line-through; Until My Dancing Days are Done
  • text-decoration: overline; Until My Dancing Days are Done
  • text-decoration: underline; Until My Dancing Days are Done
  • text-decoration: underline; Until My Dancing Days are Done
  • text-decoration: none; Until My Dancing Days are Done

text-underline-offset

只能于 text-decoration:underline 下划线的时候 text-underline-offset 属性才有效，删除线和 overline 上划线都是无效的。

  • text-underline-offset : 0px; Until My Dancing Days are Done
  • text-underline-offset : 5px; Until My Dancing Days are Done
  • text-underline-offset : 10px; Until My Dancing Days are Done
text-transform: capitalize; /*字首大写*/
text-transform: uppercase; /*英文大写*/
text-transform: lowercase; /*英文小写*/
  • andersen danish author whose fairy tales
  • andersen danish author whose fairy tales
  • andersen danish author whose fairy tales

首行缩排 Text-Indent

设定文字的第一行内缩的距离用在区块元素。预设值为 0px 设定内缩长度或使用 % 百分比、以百分比为内缩长度。

text-indent: 36px;

文字左右对齐

text-align: right; /*文字靠右对齐*/
text-align: left; /*文字靠左对齐*/
text-align: center; /*文字置中对齐*/
text-align: justify; /*文字分散对齐*/
  • Text-Align (Right) Andersen enjoyed considerable success with a short story titled A Journey on Foot from Holmen Canal to the East Point of Amager. He also published a comedy and a collection of poems that season. Though he made little progress writing and publishing immediately thereafter, in 1833 he received a small traveling grant from the King, enabling him to set out on the first of many journeys through Europe.
  • Text-Align (Center) Andersen enjoyed considerable success with a short story titled A Journey on Foot from Holmen Canal to the East Point of Amager. He also published a comedy and a collection of poems that season. Though he made little progress writing and publishing immediately thereafter, in 1833 he received a small traveling grant from the King, enabling him to set out on the first of many journeys through Europe.
  • Text-Align (Justify) Andersen enjoyed considerable success with a short story titled A Journey on Foot from Holmen Canal to the East Point of Amager. He also published a comedy and a collection of poems that season. Though he made little progress writing and publishing immediately thereafter, in 1833 he received a small traveling grant from the King, enabling him to set out on the first of many journeys through Europe.


vertical-align: super; /*上标字*/
vertical-align: sub; /*下标字*/
  • vertical-align: super; Stayed at Dickens home for five weeks
  • vertical-align: sub; Stayed at Dickens home for five weeks
vertical-align: top; /*垂直向上对齐*/
vertical-align: bottom; /*垂直向下对齐*/
vertical-align: middle; /*垂直置中对齐*/
vertical-align: text-top; /*文字垂直向上对齐*/
vertical-align: text-bottom; /*文字垂直向下对齐*/

文字换行

word-wrap: break-word; /* 任意断字，适用于英文 */
word-wrap: nowrap; /* 强制水平排序不断行 */
word-break: normal; /* 预设值 */
word-break: keep-all;
word-break: break-all;

主要是用来设定亚洲语言 Chinese, Japan, Korea 及非亚洲语言文字的断行规则。

文字长度、超出边界

指定是否可以将完整的长字分为二，以免长字超出边界。适用于英文，通常英文用音节规则来断字。
文字状态下 anywhere 和 break-word 的显示似乎相同。

overflow-wrap: normal; /* 预设值 */
overflow-wrap: break-word;
overflow-wrap: anywhere;

hyphens 使用连字符

适用于英文在换行时如何使用连字元连接单词。可以完全阻止使用「连字符」及什么时候使用「连字符」。

hyphens:manual; /* 预设值 */
hyphens:none;
hyphens:auto;

Text Rendering，只处理 ASCII 码的文字

在呈现文本时要优化的内容及字元间距。定义浏览器渲染引擎在速度、易读性、清晰度之间进行优化权衡。

text-rendering: auto;
text-rendering: optimizeSpeed;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
  • text-rendering: auto; ff fi fl ffl
  • text-rendering: optimizeSpeed; ff fi fl ffl
  • text-rendering: optimizeLegibility; ff fi fl ffl
  • text-rendering: geometricPrecision; ff fi fl ffl
www.zhangleiboke.com首页betway官方下载