百度前端技术学院--零基础--第三天：让简历有点色彩

本文链接：https://blog.csdn.net/m0_45317318/article/details/107116322

百度前端技术学院–零基础–第三天：让简历有点色彩

课程目标
初步了解什么是CSS，掌握基本的CSS概念，语法，学习如何设置一些简单的样式
任务描述
打开昨天编辑的 Codepen，在中间CSS的窗口，加上下面的代码

h2{
    font-size: 32px;
}
li {
    color: orange;
}

阅读（一）
1.阅读MDN的文字样式，先看看字体颜色，种类几个基础的属性设置。
2.W3School中的文字样式部分和W3School字体部分
阅读笔记
1.颜色
color 属性设置选中元素的前景内容的颜色 (通常指文本，不过也包含一些其他东西，或者是使用 text-decoration 属性放置在文本下方或上方的线 (underline overline)。

color 也可以接受任何合法的 CSS 颜色单位, 比如:

p {
  color: red;
}

这将导致段落变为红色，而不是标准的浏览器默认的黑色

2.字体种类
使用 font-family 属性，这个允许你为浏览器指定一个字体 (或者一个字体的列表)，然后浏览器可以将这种字体应用到选中的元素上。浏览器只会把在当前机器上可用的字体应用到当前正在访问的网站上；如果字体不可用，那么就会用浏览器默认的字体代替 default font. 下面是一个简单的例子:

p {
  font-family: arial;
}

这段语句使所有在页面上的段落都采用 arial 字体。
3.字体大小
字体大小 (通过 font-size 属性设置) 可以取大多数这些单位的值 (以及其他，比如百分比 percentages)，在调整字体大小时，最常用的单位是：

px (像素): 将像素的值赋予给你的文本。这是一个绝对单位。
em: 1em 等于我们设计的当前元素的父元素上设置的字体大小。
rem: 这个单位的效果和 em 差不多。

4.font-style：用来打开和关闭italic（斜体）

normal：将文本设置为普通字体
italic：如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会利用oblique状态来模拟italic
oblique：将文本设置为斜体字体的模拟版本，也就是普通文本倾斜的样式应用到文本中

5.font-weight：设置文字的粗体大小。

normal，bold：普通或者加粗的字体粗细
lighter，bolder：将当前元素的粗体设置为比起父元素粗体更细或更粗一步。
100-900：数值粗体值

6.文字阴影
使用 text-shadow 属性。这最多需要 4 个值，如下例所示：

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

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

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

left: 左对齐文本。
right: 右对齐文本。
center: 居中文字
justify: 使文本展开，改变单词之间的差距，使所有文本行的宽度相同。

8.text-decoration：设置/取消字体山的文本装饰。

none：取消已经存在的任何文本装饰
underline：文本下划线
overline：文本上划线
line-through：穿过文本的线可一次接受多个值

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

line-height: 1.5;

10.字母和单词间距
letter-spacing 和 word-spacing 属性允许你设置你的文本中的字母与字母之间的间距、或是单词与单词之间的间距。
11.其他一些值得看一下的属性

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: 定义文本行布局为水平还是垂直，以及后继文本流的方向。

阅读（二）
认真阅读以下几个内容：

MDN-CSS 介绍
 MDN-CSS如何工作
 MDN-CSS 语法
 MDN-选择器
 MDN-简单选择器
 MDN-属性选择器
然后可以暂时跳过伪类选择器，开始重新仔细看文本相关的样式

MDN-基本文本和字体样式
阅读笔记
1.什么是CSS？
CSS（层叠样式表）用于对网页进行样式设置和布局-例如，更改内容的字体，颜色，大小和间距，将其拆分为多列，或者添加动画和其他装饰性功能。
2.将CSS应用于HTML
首先，让我们研究一下将CSS应用于文档的三种方法：使用外部样式表，内部样式表和内联样式。

外部样式表
外部样式表在带有.css扩展名的单独文件中包含CSS 。这是将CSS引入文档的最常见和最有用的方法。您可以将一个CSS文件链接到多个网页，并使用相同的CSS样式表对它们进行样式设置。在CSS入门中，我们将外部样式表链接到了我们的网页。
可以从HTML 元素引用外部CSS样式表：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

内部样式表
内部样式表位于HTML文档中。要创建内部样式表，请将CSS放在<style>HTML 内包含的元素内<head>。

内部样式表的HTML可能如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

内联样式
内联样式是影响style属性中包含的单个HTML元素的CSS声明。HTML文档中内联样式的实现可能如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>