第三天：让简历有点色彩

开始时间：2018/5/5 15:02:07

课程目标

初步了解什么是CSS，掌握基本的CSS概念，语法，学习如何设置一些简单的样式

任务描述

打开昨天编辑的Codepen，在中间CSS的窗口，加上下面的代码。

h1 {
    font-size: 32px;
}
p {
    color: orange;
}

阅读

1. MDN的文字样式，先看看字体颜色，种类几个基础的属性设置。
2. W3School中的文字样式部分和W3School字体部分

阅读笔记

1. 用于样式文本的CSS属性通常可以分为两类
   
   • 文字样式：作用于字体的属性，会直接应用到文本中，比如使用哪种字体，字体的大小是怎样的，字体是粗体还是斜体，等等
   • 文本布局风格：作用于文本的间距以及其他布局功能的属性，比如，允许操纵行与字之间的空间，以及在内容框中，文本如何对齐。
2. color属性设置选中元素的前景内容的颜色
3. text-decoration属性放置在文本下方或上方的线
4. font-family允许你为浏览器指定一个字体（或者一个字体的列表）

5. 默认字体：CSS定义了5个常用的字体名称：serif，sans-serif，monospace，cursive和fantasy。这些都是非常通用的，当使用这些通用名称时，使用的字体完全取决于每个浏览器，而且它们所运行的每个操作系统也会有所不同。serif，sans-serif和monospace是比较好预测的，默认的情况应该比较合理，另一方面，cursive和fantasy是不太好预测的，使用它们的时候应该稍微注意一些，多多测试。

   名称	定义
   serif	有衬线的字体（在一些字体的结尾，你看到的那些华丽的和其他的细节）
   sans-serif	没有衬线的字体
   monospace	每个字符具有相同宽度的字体，通常用于代码列表
   cursive	用于模拟笔迹的字体，具有流动的连接笔画
   fantasy	用于装饰的字体

6. 字体栈：例：font-family: "Trebuchet MS", Verdana, sans-serif;在这种情况下，浏览器从列表的第一个开始，然后查看在当前机器中，这个字体是否可用。
   注意：有一些字体名称不止一个单词，比如Trebuchet MS，那么就需要用引号包裹。
7. 字体大小：通过font-size属性设置。常用单位：
   
   • px（像素）：这是一个绝对单位，在任何情况，页面上的文本所计算出来的像素值都是一样的。
   • em：1em等于我们设计的当前元素的父元素上设置的字体大小
   • rem：1rem等于HTML中的根元素的字体大小，而不是父元素。rem不支持IE8和以下的版本。
8. font-style：用来打开和关闭italic（斜体）
   
   • normal：将文本设置为普通字体
   • italic：如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会利用oblique状态来模拟italic
   • oblique：将文本设置为斜体字体的模拟版本，也就是普通文本倾斜的样式应用到文本中
9. font-weight：设置文字的粗体大小。
   
   • normal、bold：普通或者加粗的字体粗细
   • lighter，bolder：将当前元素的粗体设置为比起父元素粗体更细或更粗一步。
   • 100-900：数值粗体值
10. font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
    
    • normal：默认值。浏览器会显示一个标准的字体。
    • small-caps：浏览器会显示小型大写字母的字体。
11. text-transform：允许你设置要转换的字体。
    
    • none：防止任何转型
    • uppercase：将所有文本转为大写
    • lowercase：将所有文本转为小写
    • capitalize：转换所有单词让其首字母大写
    • full-width：将所有字形转换成固定宽度的正方形，类似于等宽字体，允许对齐。
12. text-decoration：设置/取消字体山的文本装饰。
    
    • none：取消已经存在的任何文本装饰
    • underline：文本下划线
    • overline：文本上划线
    • line-through：穿过文本的线
    • 可一次接受多个值
13. 文字阴影：text-shadow属性。最多需要4个值。
    
    • 值1：阴影与原始文本的水平偏移，可以使用大多数的CSS单位，但是px是比较合适的，这个值必须指定。
    • 值2：阴影与原始文本的垂直偏移，这个值必须指定。
    • 值3：模糊半径，更高的值意味着阴影分散得更广泛，如果不包含此值，则默认为0，这意味着没有模糊。
    • 值4：阴影的基础颜色。如果没有指定，默认为black。
    • 可以通过包含以逗号分隔的多个阴影值，将多个阴影应用于同一个文本。
14. text-align：文本对齐，用来控制文本如何和它所在内容盒子对齐。
    
    • left：左对齐文本
    • right：右对齐文本
    • center：居中文字
    • justify：使文本展开，改变单词之间的差距，使所有文本行的宽度相同。
15. line-height：行高，设置文本没行之间的高。可以设置一个无单位的值，作为乘数。无单位的值乘以font-size来获得line-height。推荐的行高大约是1.5-2。
16. 字母和字间距：letter-spacing和word-spacing属性允许你设置你的文本中的字母与字母之间的间距、或是字与字之间的间距。
17. font：简写：font-style，font-variant，font-weight，font-stretch，font-size，line-height，andfont-family。在所有这些属性中，只有font-size和font-family是一定要指定的。font-size和line-height属性之间必须放一个正斜杆。
18. text-indent：实现文本缩进。

19. white-space：影响到用户代理对源文档中的空格、换行和tab字符的处理。

    • normal：按照平常的做法去处理，丢掉多余的空白符。
    • pre：空白符不会被忽略（IE7以及更早的版本不支持该值）
    • nowrap：防止元素中的文本换行，除非使用了一个br元素。
    • pre-wrap：元素中的文本会保留空白序列，但是文本行会正常地换行。源文件中的行分隔符以及生成的行分隔符也会保留。
    • pre-line：像正常文本中一样会合并空白序列，但保留换行符。

    值	空白符	换行符	自动换行
    pre-line	合并	保留	允许
    normal	合并	忽略	允许
    nowrap	合并	忽略	不允许
    pre	保留	保留	不允许
    pre-wrap	保留	保留	允许

阅读

下面又要开始漫长的阅读之路了

1. MDN-CSS介绍
2. MDN-CSS如何工作
3. MDN-CSS语法
4. MDN-选择器
5. MDN-简单选择器
6. MDN-属性选择器
7. MDN-基本文本和字体样式

阅读笔记

• 什么是CSS：css是用来样式化和排版你的网页的,CSS是一种用于向用户指定文档如何呈现的语言。
• CSS规则：选择器+属性

2018/5/5 19:05:02

2018/5/6 16:02:37 继续开始

• CSS实际上如何工作：

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

• DOM是什么：DOM是一种树形结构。标记语言中的每个元素、属性、文本片段都变为一个DOM节点。

• CSS声明：给CSS属性设置特定的值是CSS语言的核心功能。CSS引擎会通过计算，将对应的CSS声明应用到页面的每一个元素上，从而使得元素们以适当的方式布局，并展示出适当的样式。
• CSS的属性和属性值都是区分大小写的。
• CSS声明块：每一组声明都用一对大括号包裹，用({)开始，用(})结束。声明块里的每一个声明必须用半角分号(;)分隔。
• 选择器加上声明块被称为规则集(ruleset)，通常简称规则（rule）。
• @-规则：在CSS中被用来传递元数据、条件信息或其他描述信息。它由(@)符号开始，紧跟着一个表明它是哪种规则的描述符，之后是这种规则的语法块，并最终由一个半角分号(;)结束。
  
  • @charset和@import（元数据）
  • @media或@document（条件信息，又被称为嵌套语句）
  • @font-face（描述性信息）

具体语法示例：

@import 'custom.css'；

• 选择器可以分为以下类别：
  
  • 简单选择器：通过元素类型、class或id匹配一个或多个元素
    
    • 类选择器：
    • id选择器
    • 通用选择器
  • 属性选择器：通过属性/属性值匹配一个或多个元素
    
    • [attr]：该选择器选择包含attr属性的所有元素，不论attr的值为何
    • [attr=val]：该选择器仅选择attr属性被赋值为val的所有元素
    • [attr~=val]：该选择器仅选择attr属性的值（以空格间隔出多个值）中有包含val值的所有元素，比如位于被空格分隔的多个类（class）中的一个类。
    • [attr|=val]：选择attr属性的值是val或值以val-开头的元素
    • [attr^=val]：选择attr属性的值以val开头（包括val）的元素
    • [attr$=val]：选择attr属性的值以val结尾（包括val）的元素
    • [attr*=val]：选择attr属性的值中包括字符串val的元素
  • 伪类:：匹配处于确定状态的一个或多个元素，比如被鼠标指针悬停元素，或当前被选中或未被选中的复选框，或元素是DOM树中一父节点的第一个子节点。
  • 伪元素::：匹配处于相关的确定位置的一个或多个元素，例如每个段落的第一个字，或者某个元素之前生成的内容。
  • 组合器：这里不仅仅是选择器本身，还有以有效的方式组合两个或更多的选择器用于非常特定的选择的方法。
  • 多用选择器：这些也不是单独的选择器。

编码

将每个属性的每种值的效果都写出来看看。同时，确保你会使用到简单选择器和属性选择器。

编码地址：https://codepen.io/hippo32/pen/MGEeOe

验证

• 什么是CSS，CSS是如何工作的
• CSS的基本语法是怎样的
• CSS选择器是什么概念，简单选择器和属性选择器是什么
• 文本样式都有哪些相关属性，对应哪些值

答案在笔记那里都有啦~

第三天结束2018/5/7 0:59:04