CSS3学习计划

学习目标：

学习CSS3的相关内容，学会通过使用CSS3的知识设计网页的样式，美化网页，配合各种脚本语言动态地对网页各元素进行格式化

学习内容：

第一天

1.CSS3简介：

• CSS3用途及与之前CSS版本的关系
• 浏览器将永远支持CSS2。
• CSS3 模块：
  简单概括：CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。
  学习方式：通过菜鸟教程系统的做简单了解

2.CSS3 边框

• CSS3 边框：了解以下的边框属性：
  border-radius
  box-shadow
  border-image
• CSS3 圆角
  简单概括：在 CSS3 中 border-radius 属性被用于创建圆角
  学习方式：在菜鸟教程中练习在div中添加圆角元素：
• CSS3 盒阴影
  简单概括：CSS3 中的 box-shadow 属性被用来添加阴影:
  学习方式：在div中添加box-shadow属性
• CSS3 边界图片
  简单概括：border-image 属性允许你指定一个图片作为边框， 用于创建上文边框的 原始图像
  学习方式：在 div 中使用图片创建边框:
• 记录新边框属性

第二天

1.CSS3 圆角

• CSS3 border-radius 属性
  简单概括：使用 CSS3 border-radius 属性给元素制作 “圆角”。
  学习方式：通过菜鸟教程练习三个实例

1. 指定背景颜色的元素圆角：
2. 指定边框的元素圆角:
3. 指定背景图片的元素圆角:

• CSS3 border-radius - 指定每个圆角
  简单概括：如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。但是，如果你要在四个角上一一指定，可以使用四个值的规则：
  学习方式：通过菜鸟教程练习以下为三个实例:

1. 四个值
2. 三个值
3. 两个值

• 创建椭圆边角
• 记录CSS3 圆角属性

2.CSS3 背景

于本章将了解以下背景属性：

• background-image
  简单概括：CSS3中可以通过background-image属性添加背景图片。
  学习方式：通过菜鸟教程“尝试一下”
• background-size
  简单概括：background-size指定背景图像的大小。
  学习方式：通过菜鸟教程练习重置背景图像和伸展背景图像完全填充内容区域
• background-origin
  简单概括：background-origin 属性指定了背景图像的位置区域。
  学习方式：使用菜鸟教程在 content-box 中定位背景图片
• background-clip
  简单概括：CSS3中background-clip背景剪裁属性是从指定位置开始绘制。
  学习方式：通过菜鸟教程“尝试一下”
• CSS3 多个背景图像
  简单概括：CSS3 允许你在元素上添加多个背景图像。
  学习方式：使用菜鸟教程在 body 元素中设置两个背景图像：
• 记录新的背景属性

3.CSS3 渐变（Gradients）

学习内容：

• CSS3 线性渐变

• 线性渐变 - 从上到下（默认情况下）

• 线性渐变 - 从左到右

• 线性渐变 - 对角

• 使用角度

• 使用多个颜色节点

• 使用透明度（transparent）

• 重复的线性渐变

• CSS3 径向渐变

• 径向渐变 - 颜色节点均匀分布（默认情况下）

• 径向渐变 - 颜色节点不均匀分布

• 设置形状

• 不同尺寸大小关键字的使用

• 重复的径向渐变

学习方式：通过菜鸟教程尝试一下进行练习

第三天

1.CSS3 文本效果

学习内容

• CSS3 中，text-shadow属性适用于文本阴影。
• CSS3 中 CSS3 box-shadow 属性适用于盒子阴影
• 给阴影添加颜色
• 给阴影添加一个模糊效果
• 在 ::before 和 ::after 两个伪元素中添加阴影效果
• 卡片效果的实现
• CSS3 Text Overflow属性
• CSS3的换行word-wrap:break-word
• CSS3 单词拆分换行word-break: keep-all;

学习方式：使用菜鸟教程尝试一下

2.CSS3 字体

• CSS3 @font-face 规则

• 在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

• 包含粗体文字的@font-face规则

• 记录CSS3 字体描述

• font-family

• src

• font-stretch

• font-style

• font-weight

• unicode-range

第四天

1.CSS3 2D 转换
学习内容：
CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。

• translate() 方法
  简单概括：translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
  学习方法：菜鸟教程尝试一下translate值
• rotate() 方法
  简单概括：rotate()方法，在一个给定度数顺时针旋转的元素。
  学习方法：菜鸟教程尝试一下rotate值（30deg）元素顺时针旋转30度。
• scale() 方法
  简单概括：scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数
  学习方法：菜鸟教程尝试一下scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。
• skew() 方法
  简单概括：包含两个参数值，分别表示X轴和Y轴倾斜的角度，
  学习方法：菜鸟教程尝试一下skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度
• matrix() 方法
  简单概括：matrix()方法和2D变换方法合并成一个；matrix 方法有六个参数
  学习方法：菜鸟教程尝试一下利用matrix()方法旋转div元素30°
• 记录新转换属性
• 记录2D 转换方法

2.CSS3 3D 转换

学习内容：CSS3 允许您使用 3D 转换来对元素进行格式化。

• rotateX() 方法
  简单概括：rotateX()方法，围绕其在一个给定度数X轴旋转的元素。
  学习方式：菜鸟教程尝试一下
• rotateY() 方法
  简单概括：rotateX()方法，围绕其在一个给定度数X轴旋转的元素。
  学习方式：菜鸟教程尝试一下
• 记录转换属性
• 记录3D 转换方法

第五天

1.CSS3 过渡
学习内容：CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

• 指定要添加效果的CSS属性
• 指定效果的持续时间。
• 多项改变
• 记录过渡属性

学习方式（此处为实例练习）

• 应用于宽度属性的过渡效果，时长为 2 秒
• 规定当鼠标指针悬浮(:hover)于
  元素上时

2.CSS3 动画

学习内容

• CSS3 @keyframes 规则

• 当在 @keyframes 创建动画，把它绑定到一个选择器
  学习方式：练习把 “myfirst” 动画捆绑到 div 元素

• CSS3动画是什么？

• 动画是什么

• 可以改变任意多的样式任意多的次数

• 用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%

• 选择器的定义

• 记录CSS3的动画属性

第六天

1.CSS3 多列
学习内容：CSS3 可以将文本内容设计成像报纸一样的多列布局

• column-count
  简单概括：column-count 属性指定了需要分割的列数。
  学习方式：练习实例将 <div> 元素中的文本分为 3 列
• column-gap
  简单概括：column-gap 属性指定了列与列间的间隙。
  学习方式：以下实例指定了列与列间的间隙为 40 像素：
• column-rule-style
  简单概括：column-rule-style 属性指定了列与列间的边框样式
• column-rule-width
  简单概括：column-rule-width 属性指定了两列的边框厚度
• column-rule-color
  简单概括：column-rule-color 属性指定了两列的边框颜色
• column-rule
  简单概括：column-rule 属性是 column-rule-* 所有属性的简写。
  学习方式：练习实例设置了列直接的边框的厚度，样式及颜色
• column-span
  简单概括：指定元素跨越多少列
  学习方式：练习实例指定 <h2> 元素跨越所有列
• column-width
  指定列的宽度
  简单概括：column-width 属性指定了列的宽度。
• 记录CSS3 多列属性

2.CSS3 用户界面

• CSS3 调整尺寸(Resizing)
  简单概括：resize属性指定一个元素是否应该由用户去调整大小
  学习方式：菜鸟教程练习实例由用户指定一个div元素尺寸大小

• CSS3 方框大小调整(Box Sizing)
  简单概括：box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。
  学习方式：练习规定两个并排的带边框方框

• CSS3 外形修饰（outline-offset ）
  简单概括：outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓；轮廓与边框有两点不同
  学习方式：练习使这个 div 在边框之外 15 像素处有一个轮廓，规定边框边缘之外 15 像素处的轮廓

• 记录新的用户界面特性

第七天

CSS 图片
学习内容：如何使用 CSS 来布局图片

• 圆角图片

• 圆角图片

• 椭圆形图片

• 缩略图：使用 border 属性来创建缩略图

• 响应式图片：响应式图片会自动适配各种尺寸的屏幕

• 图片文本：定位图片文本

• 卡片式图片

• 图片滤镜：filter 属性用为元素添加可视效果

• 响应式图片相册

• 图片 Modal(模态)：结合 CSS 和 JavaScript 来一起渲染图片

第八天

1.CSS 按钮

• 使用 background-color 属性来设置按钮颜色
• 使用 font-size 属性来设置按钮大小
• 使用 border-radius 属性来设置圆角按钮
• 使用 border 属性设置按钮边框颜色
• 使用 :hover 选择器来修改鼠标悬停在按钮上的样式
• 使用 transition-duration 属性来设置 “hover” 效果的速度
• 使用 box-shadow 属性来为按钮添加阴影
• 使用 opacity 属性为按钮添加透明度 (看起来类似 “disabled” 属性效果)
• 添加 cursor 属性并设置为 “not-allowed” 来设置一个禁用的图片
• 使用 width 属性来设置按钮的宽度
• 移除外边距并添加 float:left 来设置按钮组:
• 使用 border 属性来设置带边框的按钮组
• 按钮动画

2.CSS 分页
学习内容：使用 CSS 来创建分页

• 简单分页
• 点击及鼠标悬停分页样式
• 圆角样式
• 鼠标悬停过渡效果
• 带边框分页
• 圆角边框
• 分页间隔
• 分页字体大小
• 居中分页
• 面包屑导航

第九天

CSS3 框大小

• 不使用 CSS3 box-sizing 属性
  width(宽) + padding(内边距) + border(边框) = 元素实际宽度
  height(高) + padding(内边距) + border(边框) = 元素实际高度
• 使用 CSS3 box-sizing 属性

第十天

弹性盒子

• CSS3 弹性盒子(Flex Box)相关介绍

• CSS3 弹性盒子内容

• 组成

• 设置 display 属性的值

• 弹性子元素

• 修改排列方式

• 设置 direction 属性为 rtl (right-to-left)

• flex-direction

• flex-direction 属性指定了弹性子元素在父容器中的位置

• flex-direction的值

• justify-content 属性
  简单概括：内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐

• flex-start：

• flex-end：

• center：

• space-between：

• space-around：

• align-items 属性
  简单概括：align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式

• flex-start

• flex-end

• center

• baseline

• stretch

• flex-wrap 属性
  flex-wrap 属性用于指定弹性盒子的子元素换行方式

• nowrap

• wrap

• wrap-reverse

• align-content 属性
  align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

• stretch

• flex-start

• flex-end

• center

• space-between

• space-around

• 弹性子元素属性

• 排序

• 对齐

• 完美的居中

• align-self：align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式

• auto

• flex-start

• flex-end

• center

• baseline

• stretch

• flex
  flex 属性用于指定弹性子元素如何分配空间

• auto

• initial

• none

• inherit

• [ flex-grow ]

• [ flex-shrink ]

• [ flex-basis ]

• 块元素垂直居中问题采用 flex 解决。

• 行内元素垂直居中问题解决

• 记录CSS3 弹性盒子属性

• 练习使用弹性盒子创建响应式页面

第十一天

1.CSS3 多媒体查询
学习内容：

• viewport(视窗) 的宽度与高度
• 设备的宽度与高度
• 朝向 (智能手机横屏，竖屏) 。
• 分辨率

学习方式：

• 使用多媒体查询可以在指定的设备上使用对应的样式替代原有的样式。
• 练习实例中在屏幕可视窗口尺寸小于 480 像素的设备上修改背景颜色
• 练习实例在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧
• 练习实例在屏幕可视窗口尺寸小于 600 像素时将 div 元素隐藏

学习时间：

• 时间段计划：9月8号-9月21号

• 每日时间安排

   1、 每周一至周五晚上 7 点—晚上9点
   2、 每周六上午 9 点-上午 11 点
   3、 每周日下午 9 点-下午 11 点
  

学习产出：

1、 学习笔记（11天，方式为优快云 技术博客）
3、 一个W3School网站首页
一个三栏响应式界面和响应式居中
一个行星图