• 慕课网首页
  • 免费课
  • 实战课
  • 体系课
  • 发现
    教程 专栏 手记
  • 企业服务
  • 讲师入驻

我的购物车

已加入门课程

购物车里空空如也

快去这里选购你中意的课程

实战课

体系课

我的订单中心
去购物车
  • 登录 / 注册
  • 新人专属0元礼包 | 查看
抱歉,未找到你想要查询的结果
全部开发者教程

CSS3 入门教程

简介
CSS3简介
盒模型
border 边框 borderImage 边框图片 border-radius 圆角 box-shadow 阴影 box-sizing 盒类型
颜色渐变
gradients 渐变
文字处理
text-justify 对齐 text-overflow 文字超出 text-shadow 文本阴影
文字排版
word-break 文本打断 word-wrap 文本换行 letter-spacing 字间距
空间转换2D和3D
perspective 透视 transform 2D 空间转换 transform 3D 空间转换
过渡和动画
transition 过渡 animation 动画
排版布局
columns 字符分割 flex 弹性盒子布局 flex order 顺序 flex: grow、shrink、basis flex-direction 排列方向 flex-wrap 换行 justify-content (轴内)对齐方式 align-items 竖直方向对齐方式 align-content Grid 布局简介 Grid 行和列
媒体查询
media 媒体查询
伪类
only 元素选择 before && after 位置 nth 类型元素选择器
计算函数
calc 计算属性
  • 前端开发

    JavaScript

    JavaScript 入门教程

    本教程带你从初级到高级全面掌握 Javascript 的使用方法

    TypeScript 入门教程

    这是一个很好的简单课程,只需2小时你就可以学习TypeScript基础知识。

    Vue 入门教程

    本教程带您从零开始学习 Vue 框架的使用,让您轻松应对 Vue 项目的开发。

    Ajax 入门教程

    本教程涵盖Ajax的实现原理,及Ajax封装,最后是框架实现方法。

    ES6-10 入门教程

    对比 ES5 进行学习 ES6+,理解 ES6+ 语法背后的思想

    Yarn 入门教程

    Yarn得相关基础知识和高级进阶

    ECharts 入门教程

    从零开始学习 ECharts ,掌握 ECharts 核心内容

    HTML & CSS

    CSS3 入门教程

    本课程从盒模型、文字、颜色、过渡、动画、布局、伪类等方面介绍 CSS3 的使用。

    雪碧图入门教程

    本文详细介绍了雪碧图的由来历史以及各种使用方式

    移动端布局教程

    由于移动互联网的兴起,移动端项目占据了很大一部分比重,本章将详细讲解几种常见布局

    Html5 入门教程

    最新一代的HTML标准,增加了许多实用的特性

    Sass 入门教程

    前端项目中 Sass 的快速入门教程

    HTML 入门教程

    从零讲解 HTML,掌握基础 HTML 知识内容

    canvas 入门教程

    本教程带你从初级到高级全面掌握canvas的使用方法

    uni-app 入门教程

    从零开始学习 uni-app 框架,轻松上手应用开发

  • 服务端相关

    服务器

    Nginx 入门教程

    本教程使您掌握 Nginx 安装、配置、核心模块的详解、实际使用的能力。

    HTTP 入门教程

    从协议原理开始到 Web 服务器以及 Web 安全一网打尽

    Docker 入门教程

    从 Docker 的基础概念开始,从实际问题入手带你学习 Docker

    Shell 入门教程

    本教程由浅入深,系统性的讲解Linux Shell脚本编程。

    Linux 入门教程

    本教程从安装 Linux 开始,囊括 Linux 基础命令操作以及进阶系统管理

    开发工具

    Gradle 入门教程

    本教程使您掌握实际使用gradle进行项目构建、测试、打包、发布的能力。

    Vim 编辑器教程

    课程主要讲解Vim的安装配置,四种模式、基本操作,以及包管理工具和寄存器等内容。

    RESTful 规范教程

    本教程从什么是 REST 开始带你领略 Web 开发中无处不在的规范

    Dreamweaver 教程

    DW 是一款同时具有网页制作和网页管理功能的网站开发工具,可以快速进行网站建设

    Markdown 入门教程

    本课程涵盖 Markdown 的基本及扩展语法。

    Maven 入门教程

    从最基础的安装 Maven 开始到 Maven 在开发中的实际应用

    Eclipse 编辑器教程

    本教程从Eclipse安装开始带你轻松掌握Eclipse常用开发技巧

    GitHub 入门教程

    本教程带你轻松掌握最实用的 GitHub 知识

    Android Studio 编辑器教程

    Android Studio 编程技巧一网打尽

    PyCharm 编辑器教程

    工作经常用到的 PyCharm 编辑器使用技巧一网打尽

    Sublime Text 使用教程

    花里胡哨展示sublime编辑器的各种功能

    Postman 教程

    Postman 由Google 开发用来做接口请求测试,前后端开发人员都可以使用

    Git入门教程

    从入门到精通。

    热门服务端语言

    C 语言入门教程

    本教程从语法基础、进阶知识等各方面详解 C 语言。

    Go 入门教程

    本教程从 Go 语言的基本语法掌握到进阶编程实践

    Kotlin 教程

    从 Kotlin 的基础语法到高级特性一网打尽

    Ruby 入门教程

    本教程从 Ruby 的各种对象开始学习到 Ruby 的实际使用

    ThinkPHP 入门教程

    本教程主要讲解 ThinkPHP 框架如何上手开发应用

  • Java

    基础应用

    Java 入门教程

    深入浅出讲解 Java 语言基础知识,带你入门 Java 语言

    Android 入门教程

    为你解析最实用的 Android 技术,让你平滑上手,顺利进阶,为开发保驾护航

    算法入门教程

    分析讲解常见算法的思想及使用

    数据结构入门教程

    通俗易懂的带你了解 Java 数据结构

    Lambda 表达式教程

    本教程展现了Lambda表达式的基础语法以及在程序中的应用

    Java 并发原理入门教程

    本教程为Java并发原理入门教程,在Java程序开发中占据着举足轻重的地位

    设计模式入门教程

    带你分析最常见的九个设计模式

    Java并发工具

    本课程简洁明了展示最基本的并发工具类相关概念及应用方法。

    JVM 入门教程

    JVM 入门教程,对JVM结构进行分模块讲解,简单易懂。

    RabbitMQ 入门教程

    超系统的RabbitMQ基础知识课程,你还在等什么?

    网络编程入门教程

    Java 网络编程核心要点详解

    后端通用面试教程

    带你系统梳理后端高频面试题,轻松丰富你的校招&社招阶段

    框架应用

    Spring Boot 入门教程

    循序渐进讲解 Spring Boot 企业级应用开发

    Spring 入门教程

    通俗易懂 渐进式讲解 Spring 企业级开发应用

    Hibernate 入门教程

    由浅入深讲解 Hibernate 企业级 JDBC 应用框架

    MyBatis 入门教程

    本教程整理出“百分之二十”的知识,帮你办到“百分之八十”事情

    Spring MVC 入门教程

    通俗易懂讲解 Spring MVC 框架应用

    Swagger 入门教程

    本课程以图文并茂的方式带你学习 Swagger 核心知识和应用剖析

    Zookeeper 入门教程

    由浅入深的 学习 ZooKeeper 的基本使用以及高级使用

    Netty 教程

    由浅入深的讲解 Netty 的核心知识体系,快速上手使用和理解 Netty

    Spring Security

    本课程涵盖了 Spring Security 框架的基本原理和集成方法

    微服务

    Spring Cloud Hystrix

    系统介绍 Hystrix 支持特性与实际应用场景实战

  • Python

    基础应用

    Python 入门语法教程

    本教程带你从 Python 的基础语法开始学习 Python。

    Python 原生爬虫教程

    本教程从爬虫基础知识到进阶技巧到实际应用。

    Python 进阶应用教程

    本教程涵盖 Python 的面向对象、标准库解析、异常处理直至最后的领域应用

    Python 算法入门教程

    用 Python 代码实现常用算法并汲取算法核心思想。

    进阶方向应用

    Django 入门教程

    从 Web 基础到 Django 框架的实际开发应用

    Flask 框架教程

    Flask 框架快速入门实现一个 TodoList 功能

    NumPy 入门教程

    本教程从基础的数据类型开始到 NumPy 的高级应用一网打尽

    Scrapy 入门教程

    从爬虫基础开始到使用 Scrapy 框架抓取各大网站数据

    TensorFlow 入门教程

    通过本教程对 TensorFlow 框架快速入门

    Python 办公自动化教程

    本教程带你使用Python快速操作Excel、Word、PPT,处理各种文件

    Pandas 入门教程

    本教程从基础的数据类型开始到 Pandas 的高级应用一-网打尽

  • 数据库

    MySQL

    MySQL 入门教程

    本教程主要讲解 MySQL 增删改查等基础操作

    SQL 入门教程

    本教程讲解使用 SQL 访问和处理数据系统中的数据的方法。

    MySQL 进阶教程

    那些你还不理解的 MySQL 高阶特性一网打尽

首页 慕课教程 CSS3 入门教程 CSS3 入门教程 CSS3简介
如风般魅影 · 更新于 2020-04-27

border 边框

下一节

CSS3 简介

图片描述

提起 CSS 我们不会太陌生,我们 Web 页面的样式离不开它,而 CSS3 是 CSS 技术升级版本。

对于 CSS3 我们在前端开发的工作中有大量的应用,它主要就是对普通 CSS 样式的一种补充。如果说 HTML 标签是页面的骨架, CSS 是页面的皮肤, 那么 CSS3 就是页面的灵魂, 它丰富了页面的交互和显示效果。

1. 什么是 CSS3 ?

它其实是 CSS 不停升级的演变,早在 2001 年 W3C 就完成了 CSS3 的草案规范。CSS3 规范的一个新特点是被分为若干个相互独立的模块。一方面分成若干较小的模块较利于规范及时更新和发布,及时调整模块的内容,这些模块独立实现和发布,也为日后 CSS 的扩展奠定了基础。另外一方面,由于受支持设备和浏览器厂商的限制,设备或者厂商可以有选择的支持一部分模块,支持 CSS3 的一个子集,这样有利于 CSS3 的推广。

我们日常工作中其实 CSS 和 CSS3 是在一起使用的,有时候你甚至不知道已经使用了 CSS3 。因为 CSS3 就是 CSS 升级演变的产物。

2. 为什么要学习 CSS3 ?

我们学习它肯定需要一个理由,最直观的就是前端已经进入了图形化时代,丰富的页面效果在使用 CSS2 实现成本很高。其次,使用 CSS3 可以轻松完成动画或者过渡效果,远离脚本实现动画,让我节省开发时间。

CSS3 技术可以代替很多图片,减少标签的嵌套,这意味着页面的标签更少,静态资源请求数减少,这就意味着我们打开页面的时间更快更好。

最后,CSS3 做到了向后兼容,在低版本浏览器中它不会打乱原有的布局,最多就是不起作用。

3. CSS3 各个模块发展进程

时间 名称 最后状态 模块
1999.01.27 - 2019.08.13 文本修饰模块 候选推荐 css-text-decor-3
1999.06.22 - 2018.10.18 分页媒体模块 工作草案 css-page-3
1999.06.23 - 2019.10.15 多列布局 工作草案 css-multicol-1
1999.06.22 - 2018.06.19 颜色模块 推荐 css-color-3
1999.06.25 - 2014.03.20 命名空间模块 推荐 css-namespaces-3
1999.08.03 - 2018.11.06 选择器 推荐 selectors-3
2001.04.04 - 2012.06.19 媒体查询 推荐 css3-mediaqueries
2001.05.17 - 2019.11.13 文本模块 工作草案 css-text-3
2001.07.13 - 2018.08.28 级联和继承 候选推荐 css-cascade-3
2001.07.13 - 2019.06.06 取值和单位模块 候选推荐 css-values-3
2001.07.26 - 2018.12.18 基本盒子模型 工作草案 css-box-3
2001.07.31- 2018.09.20 字体模块 推荐 css-fonts-3
2001.09.24 - 2017.10.17 背景和边框模块 候选推荐 css-backgrounds-3
2002.02.20 - 2019.08-17 列表模块 工作草案 css-lists-3
2002.05.15 - 2018.08.08 行内布局模块 工作草案 css-inline-3
2002.08.02 - 2018.06.21 基本用户界面模块 推荐 css-ui-3
2003.05.14 - 2019.08.02 生成内容模块 工作草案 css-content-3
2003.08.13 - 2019.07.16 语法模块 候选推荐 css-syntax-3
2004.02.24 - 2014.10.14 超链接显示模块 工作组笔记 css3-hyperlinks
2005.12.15 - 2015.03.26 模板布局模块 工作组笔记 css-template-3
2006.06.12 - 2014.05.13 分页媒体模块生成内容 工作草案 css-gcpm-3
2008.08.01 - 2014.10.14 Marquee模块 工作组笔记 css3-marquee
2009.07.23 - 2019.10.10 图像模块 候选推荐 css-images-3
2010.12.02 - 2019.12.10 书写模式 推荐 css-writing-modes-3
2011.09.01 - 2013.04.04 条件规则模块 候选推荐 css3-conditionalr
2012.02.07 - 2016.05.17 定位布局模块 工作草案 css-position-3
2012.02.28 - 2018.12.04 片段模块 候选推荐 css-break-3
2012.09.27 - 2019.05.22 宽高大小模块 工作草案 css-sizing-3
2012.10.09 - 2017.12.14 计数器风格 候选推荐 css-counter-styles-3
2013.04.18 - 2018.07.31 溢出模块 工作草案 css-overflow-3
2014.02.20- 2019.07.11 显示类型模块 候选推荐 css-display-3

参考文献:百度百科

4. CSS3 新增特性

  1. 边框特性: 增加了圆角的定义和图片边框,它给了设计师更多的设计空间,在以前所有的元素都是方的,如果我们想要使用漂亮的边框只能使用背景图,这就无形中给服务器带来了压力。
  2. 多背景图: 现在我们一个元素上可以使用多张背景图了。
  3. 颜色: 现在我们不但可以使用线性渐变和径向渐变,还可以设置颜色的透明度,在不借助背景图的情况下可以创建更多的色彩。
  4. **多列布局和弹性盒模:**让我们不再像以前那样为了布局大盒子套小盒子,定位 和 浮动 傻傻分不清楚,它可以说是前端布局的革命。
  5. 空间上增加了 2D 和 3D 空间。
  6. 过渡和动画。
  7. web字体,我们可以告别千篇一律的微软雅黑了。
  8. 媒体查询,现在在不同的分辨率下我们不再通过 JS 去控制样式了。
  9. 丰富的阴影效果。多用于 hover,悬浮等场景。

5. 学习基础

  1. 有一定的 CSS 语法基础。
  2. 了解 HTML 基本的一些元素,如: div h1-h6 a span i 这些简单的标签。
  3. 了解 class id 这类基础元素选择器。

6. 兼容性

目前 Chrome 、 Firefox 、IE 9+ 基本上支持了大部分的 CSS3 特性,我们可以放心的使用了。对于支持性不好的也可以使用前缀。

Chrome Safari Firefox IE Opera
webkit- -webkit- -moz- -ms- -0-
  • 划线
  • 写笔记
  • 复制

0/1000

 

下一节

border 边框

我要提出意见反馈
· 最近更新于 请填写更新时间
使用手机查看
最近更新
向你推荐
更多
索引目录
CSS3 简介
1. 什么是 CSS3 ?
2. 为什么要学习 CSS3 ?
3. CSS3 各个模块发展进程
4. CSS3 新增特性
5. 学习基础
6. 兼容性
意见反馈 收藏教程 标记书签
使用 Ctrl+D 可将网站添加到书签
  • 企业服务
  • 网站地图
  • 网站首页
  • 关于我们
  • 联系我们
  • 讲师招募
  • 帮助中心
  • 意见反馈
  • 代码托管

Copyright© 2023 imooc.com All Rights Reserved | 京ICP备 12003892号-11 京公网安备11010802030151号

意见反馈 常见问题 APP下载
官方微信
返回顶部