css文本基本样式与布局

一,文本样式

1.字体,为了避免使用的字体在当前机器上没有,可以使用字体栈,即 font-family:"Trans font",serif,sans-serif;浏览器会从前往后检索字体是否在机器上存在

2.text-decoration由 text-decoration-line,text-decoration-style,text-decoration-color组成
text-decoration-line可取值有underline,overline,line-through,none,前三个值可以多选
text-decoration-style可以取solid,double,dotted,dashed,wavy
text-decoration-color可取颜色值,例:text-decoration:line-through red wavy;

3.text-transform:uppercase/lowercase/capitalize/none

4.font-famliy 字体,font-weight 字体粗细,color前景内容颜色,font-style:打开关闭斜体,italic,oblique模拟斜体

5.文本阴影:text-shadow:4px 4px 2px yellow;水平偏移,垂直偏移,模糊尺寸,阴影颜色。偏移值也可以使用负值,来实现反向偏移。多种阴影,您可以通过包含以逗号分隔的多个阴影值,将多个阴影应用于同一文本,例如:

text-shadow: -1px -1px 1px #aaa,
             0px 4px 1px rgba(0,0,0,0.5),
             4px 4px 5px rgba(0,0,0,0.7),
             0px 0px 7px rgba(0,0,0,0.4);

二,文本布局

1.text-align:left/right/center/justify(改变单词间距,使每行文本长度相同)

2.行高:line-height

3.字母和单词间距:letter-spacing,word-spacing

4.首行缩进:text-indent

三,其他不常用的属性

  • text-overflow: 定义如何向用户表示存在被隐藏的溢出内容。
  • white-space: 定义如何处理元素内部的空白和换行。
  • word-break: 指定是否能在单词内部换行。
  • direction: 定义文本的方向 (这取决于语言,并且通常最好让HTML来处理这部分,因为它是和文本内容相关联的。)
  • hyphens: 为支持的语言开启或关闭连字符。
  • line-break: 对东亚语言采用更强或更弱的换行规则。
  • text-align-last: 定义一个块或行的最后一行,恰好位于一个强制换行前时,如何对齐。
  • text-orientation: 定义行内文本的方向。
  • word-wrap: 指定浏览器是否可以在单词内换行以避免超出范围。
  • writing-mode: 定义文本行布局为水平还是垂直,以及后继文本流的方向。
  • font-variant: 在小型大写字母和普通文本选项之间切换。
  • font-kerning: 开启或关闭字体间距选项。
  • font-feature-settings: 开启或关闭不同的 OpenType 字体特性。
  • font-variant-alternates: 控制给定的自定义字体的替代字形的使用。
  • font-variant-caps: 控制大写字母替代字形的使用。
  • font-variant-east-asian: 控制东亚文字替代字形的使用, 像日语和汉语。
  • font-variant-ligatures: 控制文本中使用的连写和上下文形式。
  • font-variant-numeric: 控制数字,分式和序标的替代字形的使用。
  • font-variant-position: 控制位于上标或下标处,字号更小的替代字形的使用。
  • font-size-adjust: 独立于字体的实际大小尺寸,调整其可视大小尺寸。
  • font-stretch: 在给定字体的可选拉伸版本中切换。
  • text-underline-position: 指定下划线的排版位置,通过使用 text-decoration-line 属性的underline 值。
  • text-rendering: 尝试执行一些文本渲染优化。

四,font简写

  顺序:font-stylefont-variantfont-weightfont-stretchfont-sizeline-height, and font-family.
只有font-size和font-family是必须指定的,font-size和line-height之间必须放一个正斜杠/

猜你喜欢

转载自blog.csdn.net/weixin_40522938/article/details/81940043