第三天：让简历有点色彩-IFE

第三天：让简历有点色彩

日期	总用时	学习目标
2018.08.01	3h	初步了解css

学习内容

• 第三天：让简历有点色彩
• MDN的文字样式

学习笔记

CSS是怎么工作的?

CSS如何影响HTML？
Web浏览器将CSS规则应用于文档以影响它们的显示方式。一个CSS规则由以下组成：

• 一组属性 ，属性的值更新了 HTML 的内容的显示方式。比如，我想让元素的宽度是其父元素的50％，或者元素背景变为红色。
• 一个选择器，它选择元素，这（些）元素是你想应用这些最新的属性值于其上的元素。比如，我想将我的CSS规则应用到我HTML文档中的所有段落上。

当浏览器显示文档时，它必须将文档的内容与其样式信息结合。它分两个阶段处理文档：

浏览器将 HTML 和 CSS 转化成 DOM （文档对象模型）。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。
浏览器显示 DOM 的内容.

什么是DOM?

DOM是一种树形结构. 标记语言中的每个元素,属性,文本片段都变为一个 DOM 节点。这些节点由它们与其它 DOM 节点的关系来定义。有的元素是某些子节点的父节点，且这些子节点有兄弟（节点）。

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

在该 DOM中，我们的p元素所对应的节点是父节点。它的子节点是一个文本节点和我们的一些 span元素对应的节点。这些span结点也是父节点，它们各自的文本节点就是它们的子节点：

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
   └─ "Sheets"

CSS语法

• @-规则(At-rules)在CSS中被用来传递元数据、条件信息或其它描述性信息。它由（@）符号开始，紧跟着一个表明它是哪种规则的描述符，之后是这种规则的语法块，并最终由一个半角分号（;）结束。每种由描述符定义的@-规则，都有其特有的内部语法和语义。一些例子如下：

  • charset 和 @import （元数据）
  • @media 或 @document （条件信息，又被称为嵌套语句，见下方。)
  • @font-face （描述性信息）

具体语法示例

@import 'custom.css';

• 嵌套语句 是@-规则中的一种，它的语法是 CSS 规则的嵌套块，只有在特定条件匹配时才会应用到文档上。特定条件如下：

  • @media 只有在运行浏览器的设备匹配其表达条件时才会应用该@-规则的内容；
  • @supports 只有浏览器确实支持被测功能时才会应用该@-规则的内容；
  • @document 只有当前页面匹配一些条件时才会应用该@-规则的内容。

具体语法示例

@media (min-width: 801px) {
  body {
    margin: 0 auto;
    width: 800px;
  }
}

CSS中的注释以 /*开始并以*/ 结束。

CSS选择器

• 简单选择器（Simple selectors）：通过元素类型、class 或 id 匹配一个或多个元素。
• 属性选择器（Attribute selectors）：通过 属性 / 属性值 匹配一个或多个元素。
• 伪类（Pseudo-classes）：匹配处于确定状态的一个或多个元素，比如被鼠标指针悬停的元素，或当前被选中或未选中的复选框，或元素是DOM树中一父节点的第一个子节点。
• 伪元素（Pseudo-elements）:匹配处于相关的确定位置的一个或多个元素，例如每个段落的第一个字，或者某个元素之前生成的内容。
• 组合器（Combinators）：这里不仅仅是选择器本身，还有以有效的方式组合两个或更多的选择器用于非常特定的选择的方法。例如，你可以只选择divs的直系子节点的段落，或者直接跟在headings后面的段落。
• 多重选择器（Multiple selectors）：这些也不是单独的选择器；这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面， 以将一组声明应用于由这些选择器选择的所有元素。

简单选择器

• 类型选择器

<p>What color do you like?</p>
<div>I like blue.</div>
<p>I prefer red!</p>

/* All p elements are red */
p {
  color: red;
}

/* All div elements are blue */
div {
  color: blue;
}

• 类选择器

<ul>
  <li class="first done">Create an HTML document</li>
  <li class="second done">Create a CSS style sheet</li>
  <li class="third">Link them all together</li>
</ul>

/* The element with the class "first" is bolded */
.first {
  font-weight: bold;
}

/* All the elements with the class "done" are strike through */
.done {
  text-decoration: line-through;
}

• ID 选择器

<p id="polite"> — "Good morning."</p>
<p id="rude"> — "Go away!"</p>

#polite {
  font-family: cursive;
}

#rude {
  font-family: monospace;
  text-transform: uppercase;
}

• 通用选择器

<div>
  <p>I think the containing box just needed
  a <strong>border</strong> or <em>something</em>,
  but this is getting <strong>out of hand</strong>!</p>
</div>

* {
  padding: 5px;
  border: 1px solid black;
  background: rgba(255,0,0,0.25)
}

存在和值（Presence and value）属性选择器

• [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
• [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
• [attr~=val]：该选择器仅选择具有 attr 属性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个
• [attr|=val] : 选择attr属性的值是 val 或值以 val- 开头的元素（注意，这里的 “-” 不是一个错误，这是用来处理语言编码的）。
• [attr^=val] : 选择attr属性的值以 val 开头（包括 val）的元素。
• [attr$=val] : 选择attr属性的值以 val 结尾（包括 val）的元素。
• [attr*=val] : 选择attr属性的值中包含子字符串 val 的元素（一个子字符串就是一个字符串的一部分而已，例如，”cat“ 是 字符串 ”caterpillar“ 的子字符串）。

我的食谱配料: <i lang="fr-FR">Poulet basquaise</i>
<ul>
  <li data-quantity="1kg" data-vegetable>Tomatoes</li>
  <li data-quantity="3" data-vegetable>Onions</li>
  <li data-quantity="3" data-vegetable>Garlic</li>
  <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>
  <li data-quantity="2kg" data-meat>Chicken</li>
  <li data-quantity="optional 150g" data-meat>Bacon bits</li>
  <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li>
  <li data-quantity="25cl" data-vegetable="liquid">White wine</li>
</ul>

/* 所有具有"data-vegetable"属性的元素将被应用绿色的文本颜色 */
[data-vegetable] {
  color: green
}

/* 所有具有"data-vegetable"属性且属性值刚好为"liquid"的元素将被应用金色的背景颜色 */
[data-vegetable="liquid"] {
  background-color: goldenrod;
}

/* 所有具有"data-vegetable"属性且属性值包含"spicy"的元素，
即使元素的属性中还包含其他属性值，都会被应用红色的文本颜色 */
[data-vegetable~="spicy"] {
  color: red;
}

伪类（Pseudo-class）

一个 CSS 伪类（pseudo-class） 是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类（pseudo-class）。你可能希望某个元素在处于某种状态下呈现另一种样式，例如当鼠标悬停在元素上面时，或者当一个复选框被禁用或被勾选时，又或者当一个元素是它在 DOM 树中父元素的第一个子元素时

:active
:any
:checked
:default
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:focus
:hover
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid
:visited

示例

<a href="https://developer.mozilla.org/" target="_blank">Mozilla Developer Network</a>

/* 这些样式将在任何情况下应用于我们
的链接 */

a {
  color: blue;
  font-weight: bold;
}

/* 我们想让被访问过的链接和未被访问
的链接看起来一样 */

a:visited {
  color: blue;
}

/* 当光标悬停于链接，键盘激活或锁定
链接时，我们让链接呈现高亮 */

a:hover,
a:active,
a:focus {
  color: darkred;
  text-decoration: none;
}

伪元素

伪元素（Pseudo-element）跟伪类很像，但它们又有不同的地方。它们都是关键字，但这次伪元素前缀是两个冒号 (::) ， 同样是添加到选择器后面去选择某个元素的某个部分。

::after
::before
::first-letter
::first-line
::selection
::backdrop

具体例子

<ul>
  <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS">CSS</a> defined in the MDN glossary.</li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML">HTML</a> defined in the MDN glossary.</li>
</ul>

/* 所有含有"href"属性并且值以"http"开始的元素，
将会在其内容后增加一个箭头（去表明它是外部链接）
*/

[href^=http]::after {
  content: '⤴';
}

组合器和选择器组

虽然一次使用一个选择器就很有用，但在某些情形中却可能效率低下。 CSS选择器在你开始组合他们进行细粒度选择的时候变得更具使用价值。基于元素之间的相互关联关系，CSS提供了几种方法来对元素进行选择。下表使用连接符展示了这些关联关系(A和B代表前文所述的任意选择器):

Combinators	Select
A,B	匹配满足A（和/或）B的任意元素（参见下方 同一规则集上的多个选择器）.
A B	匹配任意元素，满足条件：B是A的后代结点（B是A的子节点，或者A的子节点的子节点）
A > B	匹配任意元素，满足条件：B是A的直接子节点
A + B	匹配任意元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面）
A ~ B	匹配任意元素，满足条件：B是A之后的兄弟节点中的任意一个（AB有相同的父节点，B在A之后，但不一定是紧挨着A）

基本文本和字体样式

用于样式文本的 CSS 属性通常可以分为两类，我们将在本文中分别观察。

• 字体样式: 作用于字体的属性，会直接应用到文本中，比如使用哪种字体，字体的大小是怎样的，字体是粗体还是斜体，等等。
• 文本布局风格: 作用于文本的间距以及其他布局功能的属性，比如，允许操纵行与字之间的空间，以及在内容框中，文本如何对齐。

注意: 请记住，包含在元素中的文本是作为一个单一的实体。你不能将文字其中一部分选中或添加样式，如果你要这么做，那么你必须要用适合的元素来包装它们，比如 ( <span> 或者 ), 或者使用伪元素，像::first-letter (选中元素文本的第一个字母), ::first-line (选中元素文本的第一行), 或者 ::selection (当前光标双击选中的文本)

字体

• 颜色

p {
 color: red;
 }

• 字体种类

p {
 font-family: arial;
}

• 字体栈:浏览器从列表的第一个开始，然后查看在当前机器中，这个字体是否可用。如果可用，就把这个字体应用到选中的元素中。如果不可用，它就移到列表中的下一个字体，然后再检查。

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

• 字体大小

h1 {
 font-size: 2.6rem;
}

• 字体样式，字体粗细，文本转换和文本装饰

  • 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-decoration 可以一次接受多个值，如果你想要同时添加多个装饰值， 比如 text-decoration: underline overline.。同时注意 text-decoration 是一个缩写形式，它由 text-decoration-line, text-decoration-style 和 text-decoration-color 构成。你可以使用这些属性值的组合来创建有趣的效果，比如 text-decoration: line-through red wavy.

• 文字阴影

text-shadow: 4px 4px 5px red;

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: 1.5;

• 字母和字间距

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

• Font 样式:

  • 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: 尝试执行一些文本渲染优化。

• 文本布局样式：

  • text-indent: 指定文本内容的第一行前面应该留出多少的水平空间。
  • text-overflow: 定义如何向用户表示存在被隐藏的溢出内容。
  • white-space: 定义如何处理元素内部的空白和换行。
  • word-break: 指定是否能再单词内部换行。
  • direction: 定义文本的方向 (这取决于语言，并且通常最好让HTML来处理这部分，因为它是和文本内容相关联的。)
  • hyphens: 为支持的语言开启或关闭连字符。
  • line-break: 对东亚语言采用更强或更弱的换行规则。
  • text-align-last: 定义一个块或行的最后一行，恰好位于一个强制换行前时，如何对齐。
  • text-orientation: 定义行内文本的方向。
  • word-wrap: 指定浏览器是否可以在单词内换行以避免超出范围。
  • writing-mode: 定义文本行布局为水平还是垂直，以及后继文本流的方向。

• 简写

  font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;

  许多字体的属性也可以通过 font 的简写方式来设置 . 这些是按照以下顺序来写的： font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family.

如果你想要使用 font 的简写形式，在所有这些属性中，只有 font-size 和 font-family 是一定要指定的。font-size 和 line-height 属性之间必须放一个正斜杠。

待深入的知识

基本CSS理解
CSS 参考

作业地址

带颜色的简历

疑问

Flag

系统的学习前端，坚持66天