CSS 基础训练 1

2017, Nov 16    

课程视频链接: CSS Essential Training 1 @ LinkedIn Learning

1. Getting Started

• Project overview and setup exercise

  个人简历（一）起始 HTML

  图像占位符： Lorem Picsum

  文字占位符： Meet the Ipsums

• Inline, internal, and external CSS

  个人简历（二）链接到外部样式表

2. CSS Core

• Syntax, terminology, and naming conventions

  CSS Reference：Codrops

• Type, class, and id selectors

  元素选择器（h1），类选择器（.example），ID 选择器（#example）

• Pseudo-class selectors

  JSFiddle: Pseudo-classes

• RGB, hex, and keyword color values

  Color Resource 1：Colours

  Color Resource 2：Coolors.co

  Color Resource 3：random a11y

• Practicing with selectors and colors

  个人简历（三）修改背景颜色

• Cascading, inheritance, and specificity

  Specificity Reference 1：CSS Specificity

  Specificity Reference 2：Specificity Calculator

3. Typography

• Web-safe fonts and the font-family property

  Serif, Sans-serif, Monospace, Cursive, Fantasy

  Font Resource 1：Web-safe fonts

• Web fonts and Google fonts

  Font Resource 2：Using font face

  Font Resource 3：Free font generator

  Font Resource 4：Google Fonts

• The font-size property

  font-size 设置文本的大小，值有 px, em, rem

• Practicing with web fonts and font-size

  个人简历（四）修改字体

• The font-style and font-weight properties

  font-weight 设置文本的粗细，值有 normal, bold, lighter, bolder

  font-style 指定文本的字体样式，值有 normal, italic

• The color, line-height, and text properties

  color 规定文本的颜色，值有 keyword, hex code, rgb

  line-height 设置行间的距离，值有 px, %, ems, rems, unitless

  text-decoration 规定添加到文本的修饰，值有 none, underline, overline, line-through

  text-transform 控制文本的大小写，值有 none, capitalize, uppercase, lowercase

  text-align 规定元素中的文本的水平对齐方式，值有 left, right, center, justify

4. Layout

• Block vs. inline display

  在布局中，display 是最重要的 CSS 属性之一。常见的值有 none, block, inline 以及 inline-block

• The Box Model

  CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容

• Margin and page layouts

  JSFiddle: Use margin to center paragraph

• Practicing layouts

  个人简历（五）修改布局

• Practicing with padding and spacing

  个人简历（六）修改边距

• Floats

  float 会使元素向左或向右移动，其周围的元素也会重新排列。使用 clear 清除浮动

  JSFiddle: float

  Self-Clearing Floats:

  1）使用 overflow auto 或 hidden

  2）使用 clearfix 清除浮动

  Reference：clearfix

• Practicing with floats

  个人简历（七）添加浮动

  图像处理：Pixlr

• The box model fix

  Reference：Box Model Fix

• Practicing with columns

  个人简历（八）排列文本