CSS3参考手册

CSS即层叠样式表,通过CSS能够能够控制网页的外观表现。你可以在本CSS3参考手册中学到常用属性有CSS布局、CSS字体、CSS颜色、CSS背景等。本CSS3参考手册还包括CSS3版本,增加了盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。希望本CSS3参考手册对你有所帮助!

本CSS3参考手册重构于2017年7月7日,如果你发现问题,欢迎在微博上私信我。@前端开发博客

最近更新时间:

CSS3参考手册属性列表

CSS定位:该属性允许你对元素进行定位。

CSS布局:设置或检索对象是否及如何显示

CSS尺寸:该属性允许你控制元素的高度和宽度。同样,它允许你增加行间距。

CSS外边距:围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。

CSS内边距:元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。

CSS边框:元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

CSS背景:CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。

CSS颜色

CSS字体:CSS 字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)。

CSS文本:通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等。

CSS文本装饰

CSS书写模式

CSS列表:CSS 列表属性允许你放置、改变列表项标志,或者将图像作为列表项标志。

CSS表格:CSS 表格属性可以帮助您极大地改善表格的外观。

CSS内容

CSS内容界面

CSS多列:通过 CSS3,您能够创建多个列来对文本进行布局 - 就像报纸那样!

CSS box

CSS Flexbox

CSS Transform:通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。

CSS Transition:元素从一种样式变换为另一种样式时为元素添加效果。

CSS Animation:通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

CSS打印

CSS媒体查询

元素选择器

关系选择器

属性选择器

伪类选择器

伪元素

语法与规则

CSS 长度值与单位

角度值与单位

时间值与单位

频率值与单位

特殊布局值与单位

分辨率值与单位

颜色值

文本值

函数值

图像值

数字值

附录

常用CSS Hack

问题和经验

CSS3参考手册相关文章

CSS3热身实战——过渡与动画(实现炫酷下拉,手风琴,无缝滚动)》css3,给我的感觉就是,不难,但是很难玩转自如。今天,就用css3来实现三个特效,希望这三个特殊能让大家受到启发,利用css3做出更好,更炫的动画效果。网页链接(by 守候你 ) ​

【20170802 #前端开发#日报】饿了么出品 Node.js 实践教程;CSS3热身实战–过渡与动画(实现炫酷下拉,手风琴,无缝滚动);HTML5 Canvas制作雷达图实战;《深入理解ES6》笔记—— Promise与异步编程(11);2017-08-01 前端日报;重复造轮子:...详情→网页链接

#开源项目#【创建时间轴的 JS 库:Timesheet.js】详见:网页链接 Timesheet.js 是使用 HTML5 与 CSS3 将数据和事件进行可视化处理的 JS 库。JS 用来实现时间轴,而 CSS 则美化样式。它没有任何的外部依赖,仅需几行 JS 代码,就可以搞定漂亮的 HTML5 布局咯。[喵喵]

【【Web动画】SVG 线条动画入门】分享自 @SegmentFault,文章作者:ChokCoco,文章传送门:网页链接
内容导读:
通常我们说的 Web 动画,包含了三大类。
- CSS3 动画
- javascript 动画(canvas)
- html 动画(SVG)
个人认为 3 种动画各有优劣,实际应用中根据掌握情 ​ ...展开全文c

【用CSS3实现无限循环的无缝滚动】分享自 @SegmentFault,文章作者:wenzi,文章传送门:网页链接
内容导读:
有时候在页面的某个模块中,需要无限循环的滚动一些消息。那么如果我们用js实现无缝衔接滚动的思路是什么呢(比如我们这个模块是向上滚动的)? ​

【20170727 #前端开发#日报】JavaScript 进阶之深入理解数据双向绑定;阿里巴巴即将开源Angular组件库NG-ZORRO;ReactNative学习笔记十一之FlatList;在 Node.js 中使用 MySQL & MySQL JavaScript 客户端;分享8款最新HTML5/CSS3功能插件及源...详情→网页链接

CSS3 transform对普通元素的N多渲染影响】
一个普普通通的元素,如果应用了CSS3 transform变换,即便这个transform属性值不会改变其...
详见:网页链接
作者:@张鑫旭

【CSS多行文字超出隐藏加省略号】本文通过两个思路介绍了纯CSS实现多行内容超出时加省略号的代码,一种是支持webkit的浏览器,使用CSS3属性-webkit-line-clamp来限制行数,一种是通过加了一个绝对定位的伪元素来伪造一个省略号放在文字的最后面。常用第二种,兼容性较好。 @前端开发博客 ​ ...展开全文c

#IT技术分享#【最佳HTML5/CSS3代码生成器推荐】网上有成千上万提供各种各样的代码生成器,我们经常被搞得稀里糊涂。本文精心挑选了一些经验丰富开发人员和设计人员常用的HTML5、CSS3代码生成器,总有一款适合你。全文:网页链接

有了代码生成器,做好网站so easy:网页链接

《一个例子上手 SVG 动画》CSS3动画已足够强大,不过还是有一些它做不到的地方。配合SVG,让Web动效有更多的可能性。这次要做的效果是一个loading动画(如图):其中旋转通过CSS来完成,但是旋转之后圆弧缩短变成笑脸的嘴巴需要借助SVG来实现。网页链接(by 凹凸实验室) ​

#前端技术#【一个例子上手 SVG 动画】详见:网页链接 虽说 CSS3 动画已足够强大,但配合 SVG 可让 Web 动效有更多的可能。在本文,作者将通过实现一个 Loading 动画示例,带大家上手 SVG 动画。[威武]

【重温CSS:Border属性】
边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西!

不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形。这是正确...
详见:网页链接
作者:@颜海镜

【20170526 #前端开发#日报】Vue.js 入门最佳项目实践-个人博客全栈应用从零到上线;JTaro:基于 Vue 2.0 的轻量级 SPA 框架;为什么我们需要 Vuex;【小程序可用】CSS3 animation 实现的跑马灯;Sessions by Pusher: 前端开发者演讲集;(Git 总...详情→网页链接

#云栖技术分享# 《干货:前端开发全面知识库》包括HTML5,CSS3和js的基本框架知识,以及DOM和BOM操作的基础知识和一些基本工具和IDE。非常全面的一篇文章,前端开发者不可错过-->网页链接

立春上班头一天推荐三本书:
1. 《网络是怎样连接的》网页链接:一如既往日系书浅显易懂的风格,计算机“科普”图书,当小菜吃感觉很清爽;
2. 《软件开发本质论》网页链接:建议团队管理者好好看看,里面不少观点和方法的视角很独特;
3. 《响应式Web设计:HTML5和CSS3实战(第 ​ ...展开全文c

如果你是设计师,恰好又懂前端,接了多终端适配的任务,刚好最近开始对CSS3里的媒体查询@media 有了兴趣,恭喜!你会着魔并体验到设计和代码真正美妙之处。在以后,你想让自己的设计作品适应任何屏幕都不会再害怕了。 ​

《移动端适配方案(下)》之前做过PC页面的人聊的最多的就是『兼容』,这是因为浏览器之间的差异引起的,不再多说。而移动端是基本没有『兼容』的问题的,全是CSS3,简直不要太开心。可是『适配』问题随之而来。网页链接(by @一波不是一波 ,欢迎加入伯乐在线专栏作者:网页链接 ​ ...展开全文c

#前端技术#【腾讯出品的 CSS3 动画手册】详见:网页链接 由腾讯 ISUX 出品的 CSS3 动画的手册。手册里着重介绍了 CSS3 三大动画相关属性 transform、transition,以及 animation 的基本语法与应用实例。另外,你还可以发现一个在线的动画制作工具。前端er,转需留存吧。[二哈]

#CSS3#【CSS3制作圆环进度动画效果】今天在微博上分享了一篇关于“CSS3进度圆环”的做法,然后回来搜了一下,发现了这个比较给力的做法和解说。分享给大家:网页链接 #前端开发博客#

【纯CSS3画出小黄人并实现动画效果】:网页链接
CSS3实现小黄人动画的博客,非常可爱,程序员撩妹必备!

除了撩妹,你最需要的仍然是一往无前的提升自己的技能,点下面链接必能让CSS技能的力量注入到自己的内心深处,从而实现巨大的提升!
前端网站响应式开发:网页链接

#前端技术#【详解用 CSS3 制作圆形滚动进度条动画效果】详见:网页链接 在本文中,作者将手把手教大家用 CSS3 制作圆形滚动进度条动画。前端er,抽时间可以试试。[哆啦A梦微笑]

CSS3参考手册,全网最新最全的CSS3参考手册,为你呈现最好的CSS3文档CSS3参考手册