CSS参考手册

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

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

最近更新时间:

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的transform属性可以缩放、倾斜和旋转任何元素。在没有任何浏览器前缀的前提下,这个属性已经被所有的现代浏览器所支持...6月27日

8款强大的CSS3/HTML5动画及应用源码

虽然基于目前浏览器的支持情况HTML5还未能在PC端普及,但是未来HTML5还是看好的。今天我们来分享8款强大的CSS3/HTML5动画及应用...5月28日

精选10款超酷的HTML5/CSS3菜单

款超酷的HTML5/CSS3菜单,给你的网页添加不一样的精彩,一起来围观一下吧。1、CSS3手风琴菜单下拉展开带弹性动画利用CSS3技术可以实现各种各样的网页菜单...5月24日

纯CSS3做炫酷环形星星发光动画,在简单没思路你也做不出来

这个特效是用CSS3制作的,虽然录制的图片出来看起来很卡,但是实际上还是很顺畅的。想要更多的企业求职加分项目,案例,学习方法可以来一下我的前端群611256580...5月23日

从矩阵与空间操作的关系理解CSS3的transform

不得不提到CSS3的transform,也就是变换。这篇文章概括了在实现时对transform的理解与总结。注:文中的图片多数截取自视频:线性代数的本质...5月13日

一个栗子上手CSS3动画

列举CSS3动画的属性,若需要了解API,可前往MDN。作者:伯乐在线来源:前端大全|2017-05-1115:20最近杂七杂八的事情很多,很多知识都没来得及总结...5月11日

CSS3_选择器_边框_背景_蒙版mask__第九天

将在微信公众号直接推送给各位,非常感谢。如果您觉得这篇文章还不错,可以去H5专题中查看更多相关文章。CSS3这里写图片描述今日课程预览这里写图片描述这里写图片描...5月22日

纯CSS3画出小黄人并实现动画效果

前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分...5月3日

CSS3 Flexbox属性视觉指南 | Scotch

用它来构建一个适用所有平台的应用程序吧,包括Web网站,服务端,移动端以及桌面端。弹性盒布局官方称作,这是一种新的css3布局模块,用于改善在容器中列表排列,方向和顺序,...4月23日

移动前端开发可不是拼h5和css3!

然而你在pcweb上那一套在多数情况下并不适用于手机web,你必须知道这其中的注意点。当然移动web给人的感觉是一个拼h5和css3的阵地,这里面有足够高大上的技术等着你去驾驭。1...6月14日

关于css3中linear-gradient中的百分比

Csssecret》第二章《背景与边框》第五节《条纹背景》正文在第二章《背景与边框》中第五节《条纹背景》中,谈到了css3的新属性值linear-gradient...5月5日

HTML5+CSS3技术(二)CSS使用方法和选择器

css->基础知识HTML负责网页的内容,CSS负责网页的样式,可以减少网页代码量,更能提高网络访问网页的速度...5月26日

精美CSS3聊天窗口 实用的Tooltip和自定义滚动条

这次我们要分享一款基于CSS3和HTML5的自定义聊天窗口,这里要声明的是它并不能完成聊天的功能,只是提供了聊天窗口的UI,包括,聊天语句的Tooltip样式...3月10日

详解用CSS3制作圆形滚动进度条动画效果

家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客《CSS实现进度条和订单进度条》,但是呢...2月9日

实现CSS3炫酷的效果可以借助哪些工具

要了解CSS3首先要了解各种浏览器对CSS3支持的情况及目前浏览器的市场占有率情况。截止2016年12月,Chrome(webkit)40.52%、IE814...3月5日

实现CSS3炫酷的效果可以借助哪些工具

要了解CSS3首先要了解各种浏览器对CSS3支持的情况及目前浏览器的市场占有率情况。截止2016年12月,Chrome(webkit)40.52%、IE814...3月5日

CSS3形变——transform与transform-origin画时钟

css3属性transform和transform-origin“画”时钟效果图前言八哥:哈喽,大家好!好攻城狮就是我就是你们的小八,欢迎收听你的月亮。。。哦不...3月10日

基于CSS3 column多栏布局实现水平滑页翻页交互

星期三,00:10,归类于css相关。阅读74次,今日74次byzhangxinxufromhttp://www...2月15日

CSS3 Object-fit和Object-position

当然也有修复的方法,但所有人都在说:媒体调整的行为将会失控!是的,现在我们将要解决这个问题。CSS标准提出属性object-fit和object-positio...4月6日

HTML5/CSS3日历应用 华丽的日期选择器

CSS3日历应用,这款日历应用的特点是拥有非常酷的日期选择效果,鼠标滑过日期时即会有立体的背景展现出来,相比之前分享的HTML5/CSS3带日期区间的日期选择插件...3月8日

我之前做了一些css3动画的效果,对css3流畅而又实现简单的动画效果深深着迷,遂决定探究下css3动画的来世今生,本文如有疏漏,请各位看官及时指出...2月12日

jQuery/CSS3简单分页插件 有3D立体外观

之前我们分享过一款很不错的jQuery分页插件jQuery分页插件带滑动条分页,今天我们要再来分享一款简单的jQuery分页插件,这款分页插件不仅可以设置无限页码...3月1日

关于CSS3的变形、过渡、动画、关联属性

CSS·关联,动画,变形,过渡分享到:一、变形transform:可以对元素对象进行旋转rotate、缩放scale、移动translate、倾斜skew...3月9日

9款样式迷人的CSS3自定义checkbox复选框

常不错的CSS3自定义checkbox复选框纯CSS3美化Checkbox和Radiobox按钮,外观非常时尚。今天蓝鸥广州web前端培训分享9款样式迷人的CSS3漂亮的自定义checkbox复选框...2月10日

真正了解CSS3背景下的@font face规则

星期四,23:28,归类于css相关。阅读70次,今日67次byzhangxinxufromhttp://www...3月30日

用CSS3制作3D图片环

章讲了利用css3制作3D图片爆炸效果,现在我们同样用css3制作3D图片环,我们先看一下实现的效果图:刚加载出来时每张图片从中间旋转出来:Paste_Image...2016年12月22日

CSS·导航条分享到:导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些。简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理...2016年12月19日

CSS3 多列

CSS3可以将文本内容设计成像报纸一样的多列布局,如下实例:我们学的不仅是技术,更是梦想!我的头条里介绍了HTML、CSS、Javascript、Python...2016年12月22日

高仿Mac桌面(HTML5+CSS3+Bootstrap)

Bootstrap是基于HTML、CSS、JAVASCRIPT的,它简洁灵活,使得Web开发更加快捷。Bootstrap是基于HTML5和CSS3开发的...2016年12月5日

谈谈CSS3的长度单位(vh、vw、rem)

在CSS3中,新增了很多长度单位,今天就来谈谈:vw、vh、vmin、vmaxrem与em1、vw、vh、vmin、vmaxvh、vw、vmin...2016年11月14日

HTML5 & CSS3初学者指南(2) – 样式化第一个网页

如何改善这种很平淡的页面呢?让我们开始使用网页的基本样式来改善页面效果,我们将会使用到CSS的功能。正式开始CSS是层叠样式表的缩写...2016年12月27日

CSS3与页面布局学习笔记(四)——页面布局大全

可以在前面的文章中查看到细节,基本原理如下图所示:1.1.3、负边距+定位,实现水平垂直居中具体请参考《CSS3与页面布局学习总结(三)——BFC、定位、浮动...2016年12月9日

纯CSS3实现不错的表单验证效果

HTML5--Web表单今天继续学习Web表单相关的内容,不过今天重点落实到实战中,利用HTML5表单与CSS3-UI实现一款不错的表单效果。效果可看下面动图...1月18日

学习css|css3:推荐两本书和三个网站

在2016年,CSS3已是网站的主流应用技术。每一个想学习网页制作或从事web前端相关工作的人,都应该熟悉甚至精通css|css3...2016年11月1日

js+html5+css3实现的滑动下拉刷新效果实例

tml5+css3实现在移动端滑动下拉就刷新数据的效果,有点类型于淘宝手机站,本文有源代码,感兴趣的朋友可以参考一下。今天想说的是如何自己操刀做一个js的下拉刷新...2016年7月31日

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