基本文字和字体样式—CSS学习笔记

龙二_
194 阅读4分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情

前言

在设计一个网页时，文字往往是不可缺少的。所以本文将会单独从css方面去样式化文字，以使页面的文字样式布局等符合观感。

样式化文字

在css中，从外观上可改变的有字体样式以及文字的布局。我们先从字体样式方面来下手。

字体样式

字体样式总的来说就是作用于字体的属性，属性能作用于字体种类、字的粗细、字的样式（下划线...）等等。

字体种类对应的属性为font-family可包含一个或多个。当用多个字体时用逗号分隔，称为字体栈。浏览器会从字体栈第一个开始查看是否可用直到最后一个，若有可用的就应用到浏览器上，若无便使用浏览器默认字体。

font-family: "Trebuchet MS", Verdana, sans-serif;

字体颜色对应的属性为color，与背景颜色属性一样，可接受颜色关键字（red）、颜色代码（#000000）、颜色方法（rgb等）。

color: red;

字体大小对应的属性为font-size，可接受长度值和百分比值。长度值单位包括px、em（1em为父元素字体大小）、rem（1rem为根元素字体大小）。

font-size:2em;

字体样式对应的属性为font-style，可接受3个属性值分别是normal（普通字体）、italic（书写体斜体）、oblique（常规字的倾斜版本）。

font-style:normal;

字体粗细对应的属性为font-weight，可用值包括normal, bold: 普通或者加粗的字体粗细，lighter, bolder: 将当前元素的粗体设置为比其父元素粗体更细或更粗一步。100–900: 数值粗体值，如果需要，可提供比上述关键字更精细的粒度控制。

font-weight:900;

字的形式对应的属性为text-transform，可用值包括none: 防止任何转型。uppercase: 将所有文本转为大写。lowercase: 将所有文本转为小写。capitalize: 转换所有单词让其首字母大写。full-width: 将所有字形转换成全角，即固定宽度的正方形，类似于等宽字体，允许拉丁字符和亚洲语言字形（如中文，日文，韩文）对齐。

text-transform:lowercase;

字体装饰对应的属性为text-decoration，可用值包括none: 取消已经存在的任何文本装饰。underline: 文本下划线。overline: 文本上划线line-through: 穿过文本的线。

text-decoration:underline;

文本阴影对应的属性为text-shadow，包括4个值

  1. 阴影与原始文本的水平偏移，可以使用大多数的 CSS 单位，但是 px 是比较合适的。这个值必须指定。
  2. 阴影与原始文本的垂直偏移;效果基本上就像水平偏移，向上/向下移动阴影而不是左/右。这个值必须指定。
  3. 模糊半径 - 更高的值意味着阴影分散得更广泛。如果不包含此值，则默认为 0，这意味着没有模糊。可以使用大多数的 CSS 单位。
  4. 阴影的基础颜色，可以使用大多数的 CSS 颜色单位 。如果没有指定，默认为 black.

当然可以使用多组值，越靠前的组会显示得越靠上。

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);

文本布局

文本对齐对应的属性为text-align，用来控制如何与所在的容器对齐，可用值包括left: 左对齐文本。right: 右对齐文本。center: 居中文字justify: 向两端对齐

text-align:center

行高对应的属性为line-height，用来设置文本每行的高，可接受大多数长度单位，也可以无单位，作为font-size的倍数

line-height: 1.5;

font简写属性

许多字体属性都可以用font来简写，一般按以下顺序

<'font-style'>

<'font-variant'>

<'font-weight'>

<'font-size'>

<'line-height'>

<'font-family'>

，但有以下规则

  • font-style, font-variant 和 font-weight 必须在 font-size 之前
  • 在 CSS 2.1 中 font-variant 只可以是 normal 和 small-caps
  • line-height 必须跟在 font-size 后面，由 "/" 分隔，例如 "16px/3"
  • font-family 必须最后指定
font: normal normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
avatar
文章
阅读
粉丝