CSS总结(基本文本和字体样式)

基本文本和字体样式:

颜色:

p{color:red;}

字体种类:

p{font-family:arial;}

 arial 字体,这个字体可在任何电脑上找到。

通常认为最佳做法还是添加 Helvetica 作为 Arial 的首选替代品,尽管它们的字体面几乎相同,但 Helvetica 被认为具有更好的形状,即使Arial更广泛地可用。

字体栈:

由于你无法保证你想在你的网页上使用的字体的可用性 (甚至一个网络字体可能由于某些原因而出错), 你可以提供一个字体栈 (font stack),这样的话,浏览器就有多种字体可以选择了。只需包含一个font-family属性,其值由几个用逗号分离的字体名称组成。

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

这里的Trebuchet后有空格,所以Trebuchet MS要加双引号

使用font-family结合color的例子:

css代码:


效果:


字体大小:

px (像素): 将像素的值赋予给你的文本。这是一个绝对单位, 它导致了在任何情况下,页面上的文本所计算出来的像素值都是一样的。

ems: 1em 等于我们设计的当前元素的父元素上设置的字体大小 (更加具体的话,比如包含在父元素中的大写字母 M 的宽度) 如果你有大量设置了不同字体大小的嵌套元素,这可能会变得棘手, 但它是可行的,可以使用em调整任何东西的大小,不只是文本。

rems: 这个单位的效果和 ems 差不多,除了 1rem 等于 HTML 中的根元素的字体大小, (i.e. <html>) ,而不是父元素。这可以让你更容易计算字体大小,但是遗憾的是, rems 不支持 Internet Explorer 8 和以下的版本。

扫描二维码关注公众号,回复: 1639948 查看本文章

font-size标准设置的是16px。

一个简单的font-size例子:

当调整你的文本大小时,将文档(document)的基础  font-size 设置为10px往往是个不错的主意,这样之后的计算会变得简单,所需要的 (r)em 值就是想得到的像素的值除以 10,而不是 16。做完这个之后,你可以简单地调整在你的 HTML 中你想调整的不同类型文本的字体大小。在样式表的指定区域列出所有font-size的规则集是一个好主意,这样它们就可以很容易被找到。

css代码:


效果:


字体样式:

font-style: 用来打开和关闭文本 italic (斜体)。 可能的值如下 (你很少会用到这个属性,除非你因为一些理由想将斜体文字关闭斜体状态):

  • normal: 将文本设置为普通字体 (将存在的斜体关闭)
  • italic: 如果当前字体的斜体版本可用,那么文本设置为斜体版本;如果不可用,那么会利用 oblique 状态来模拟 italics。
  • oblique: 将文本设置为斜体字体的模拟版本,也就是将普通文本倾斜的样式应用到文本中

字体粗细:

font-weight: 设置文字的粗体大小。这里有很多值可选,防止你有好几个可用的字体。 (比如 -light, -normal, -bold, -extrabold, -black, 等等), 不过事实上你很少会用到 normal 和 bold以外的值:

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

文本转换:

text-transform: 允许你设置要转换的字体。值包括:

  • none: 防止任何转型。
  • uppercase: 将所有文本转为大写。
  • lowercase: 将所有文本转为小写。
  • capitalize: 转换所有单词让其首字母大写。
  • full-width: 将所有字形转换成固定宽度的正方形,类似于等宽字体,允许对齐。拉丁字符以及亚洲语言字形(如中文,日文,韩文)

文本装饰:

text-decoration: 设置/取消字体上的文本装饰 (你将主要使用此方法在设置链接时取消设置链接上的默认下划线。) 可用值为:

  • none: 取消已经存在的任何文本装饰。
  • underline文本下划线.
  • overline文本上划线
  • line-through: 穿过文本的线 strikethrough over the text.

文字阴影:

你可以为你的文本应用阴影,使用 text-shadow 属性。这最多需要 4 个值。

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

文本布局:

 text-align 属性用来控制文本如何和它所在的内容盒子对齐。可用值如下,并且在与常规文字处理器应用程序中的工作方式几乎相同:

  • left: 左对齐文本。
  • right: 右对齐文本。
  • center: 居中文字
  • justify: 使文本展开,改变单词之间的差距,使所有文本行的宽度相同。你需要仔细使用,它可以看起来很可怕。特别是当应用于其中有很多长单词的段落时。如果你要使用这个,你也应该考虑一起使用别的东西,比如 hyphens,打破一些更长的词语。

行高:

 line-height 属性设置文本每行之间的高,可以接受大多数单位 length and size units,不过也可以设置一个无单位的值,作为乘数,通常这种是比较好的做法。无单位的值乘以 font-size 来获得 line-height。当行与行之间拉开空间,正文文本通常看起来更好更容易阅读。推荐的行高大约是 1.5–2 (双倍间距。) 所以要把我们的文本行高设置为字体高度的1.5倍。

line-height: 1.5;

字母和行间距:

letter-spacing word-spacing 属性允许你设置你的文本中的字母与字母之间的间距、或是字与字之间的间距。你不会经常使用它们,但是可能可以通过它们,来获得一个特定的外观,或者让较为密集的文字更加可读。它们可以接受大多数单位 length and size units.

更改<p>中第一行的行间距:

p::first-line {
  letter-spacing: 2px;
  word-spacing: 4px;
}


猜你喜欢

转载自blog.csdn.net/cccbtrya/article/details/80396740