百度前端技术学院 第三天学习笔记（CSS文本）

CSS学习, 百度前端技术学院 本文总阅读量次

参考

字体颜色

  • color 属性设置选中元素的前景内容的颜色 (通常指文本，不过也包含一些其他东西，或者是使用 text-decoration 属性放置在文本下方或上方的线 (underline overline)。 
    1
    2
    3
    p {
      color: red;
    }

字体大小

重点在rem （千万注意数字与单位之间不要有空格！）

px (像素)

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

em

  • 1em 等于我们设计的当前元素的父元素上设置的字体大小 (更加具体的话，比如包含在父元素中的大写字母 M 的宽度) 如果你有大量设置了不同字体大小的嵌套元素，这可能会变得棘手, 但它是可行的，为什么要使用这个麻烦的单位呢? 当你习惯这样做时，那么就会变得很自然，你可以使用em调整任何东西的大小，不只是文本。你可以有一个单位全部都使用 em 的网站，这样维护起来会很简单。

rem

  • 这个单位的效果和 em 差不多，除了 1rem 等于 HTML 中的根元素的字体大小， (i.e. ) ，而不是父元素。
  • 这可以让你更容易计算字体大小，但是遗憾的是， rem 不支持 Internet Explorer 8 和以下的版本。如果你的项目需要支持较老的浏览器，你可以坚持使用em 或 px, 或者是 polyfill 就像 REM-unit-polyfill. （这个单位在“CSS的值和单位”一节也有讲解）
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    html {
      font-size: 10px;
    }

    h1 {
      font-size: 2.6rem;//26px
    }

    p {
      font-size: 1.4rem;//14px
      color: red;
      font-family: Helvetica, Arial, sans-serif;
    }

字体样式

需要了解“网页安全字体”

字体栈

  • 由于你无法保证你想在你的网页上使用的字体的可用性 (甚至一个网络字体可能由于某些原因而出错), 你可以提供一个字体栈 (font stack)，这样的话，浏览器就有多种字体可以选择了。只需包含一个font-family属性，其值由几个用逗号分离的字体名称组成。
    1
    2
    3
    p {
      font-family: "Trebuchet MS", Verdana, sans-serif;
    }
  • 注意: 有一些字体名称不止一个单词，比如Trebuchet MS ，那么就需要用引号包裹。
  • 在这种情况下，浏览器从列表的第一个开始，然后查看在当前机器中，这个字体是否可用。如果可用，就把这个字体应用到选中的元素中。如果不可用，它就移到列表中的下一个字体，然后再检查。
  • 在 字体栈的最后提供一个合适的通用的字体名称(网页安全字体) 是个不错的办法，这样的话，即使列出的字体都无法使用，浏览器至少可以提供一个还算合适的选择。

font-style属性

用来打开和关闭文本 italic (斜体)。 (你很少会用到这个属性，除非你因为一些理由想将斜体文字关闭斜体状态)

属性值 含义
normal 【标准字体】将文本设置为普通字体 (将存在的斜体关闭)
italic 【斜体】如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会利用 oblique 状态来模拟 italics。
oblique 【倾斜字体】将文本设置为斜体字体的模拟版本，也就是将普通文本倾斜的样式应用到文本中。
inherit 规定应该从父元素继承字体样式

例子：
例子

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: 穿过文本的线

注意 text-decoration 是一个缩写形式，它由 text-decoration-line, text-decoration-style 和 text-decoration-color 构成****。

1
<h1 class="la">lalala</h1>
1
2
3
.la{
  text-decoration: wavy line-through red;
}

文字阴影

  • 你可以为你的文本应用阴影，使用 text-shadow 属性。这最多需要 4 个值， (前两个值是必须的) 如下例所示：
    1
    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.

多种阴影

可以通过包含以逗号分隔的多个阴影值，将多个阴影应用于同一文本

1
2
3
4
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);

补充

  • 颜色中Alpha为色彩空间，也就是透明度/不透明度。它的范围为0.0到1.0之间，0.5为半透明。
  • rgba(255,255,255,0)则表示完全透明的白色；
  • rgba(0,0,0,1)则表示完全不透明的黑色；

文本对齐 text-align 属性

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

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

行高 line-height 属性

  • 设置文本每行之间的高，可以接受大多数单位 length and size units，不过也可以设置一个无单位的值，作为乘数，通常这种是比较好的做法。无单位的值乘以 font-size 来获得 line-height。

  • 推荐的行高大约是 1.5–2 (双倍间距。) 所以要把我们的文本行高设置为字体高度的1.5倍，你可以使用这个:

    1
    line-height: 1.5;

  • 子元素为行内元素时垂直居中可设置该属性值与父元素（盒子容器）高度相同。

字母和单词间距

letter-spacing 和 word-spacing 属性允许你设置你的文本中的字母与字母之间的间距、或是单词与单词之间的间距。

选择器

参考图

  • CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
  • 选择器通常是您需要改变样式的** HTML 元素**。
  • 每条声明由一个属性和一个值组成。
  • 多条声明中间用分号隔开。
    1
    2
    3
    4
    选择器 {
        属性:值; 
        属性:值;
    }
  • 注意：如果值为若干单词，则要给值加引号：
    1
    p {font-family: "sans serif";}

选择器列表

  • 被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。
    1
    2
    3
    h1,h2,h3,h4,h5,h6 {
      color: green;
      }

插入外部样式表

1
2
3
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

内部样式表

1
2
3
4
5
6
7
<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

内联样式

1
2
3
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
CSS学习, 百度前端技术学院