CSS参考手册

  • 速查表

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媒体查询

Only IE

Only Firefox

Only Webkit

元素选择器

关系选择器

属性选择器

伪类选择器

伪元素

语法与规则

CSS 长度值与单位

角度值与单位

时间值与单位

频率值与单位

特殊布局值与单位

分辨率值与单位

颜色值

文本值

函数值

图像值

数字值

附录

常用CSS Hack

问题和经验

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

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

一个栗子上手CSS3动画

开启新的篇章~本篇文章不一一列举CSS3动画的属性,若需要了解API,可前往MDN。在开始栗子前,我们先补补基础知识。css3动画分类:补间动画...5月11日

网站设计中10个经典的CSS3动效库

深圳网站设计公司科慧设计一般会在网站中加入一些简单而一致的动效,我所用的技术则是用SASS+bourbon来生成出那些基于CSS3的动画效果来...5月11日

CSS3 Object-fit和Object-position

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

我们来做一个beautiful的css3鼠标悬停效果

其实一个冒号跟两个冒号没有本质的区别,都是表示在什么什么之前,他这么写主要只是为了区分css2和css3,也就是ie和主流浏览器...4月23日

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

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

CSS3 Flexbox属性视觉指南 | Scotch

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

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

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

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

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

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

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

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

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

CSS3 圆角

CSS3圆角使用CSS3border-radius属性,你可以给任何元素制作"圆角"。CSS3圆角制作器浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号...2016年12月20日

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日

HTML5+CSS3整体回顾

返回truepatternMismatch:输入值不满足pattern正则,返回truecusomErrorsetCustomValidity()第三课css3...2016年10月22日

css3 伪类:hover 特性小探索

浏览伪类在css3中相对还是很容易理解,也正是因为他很容易理解,所以我们往往也不会刻意花费脑力去记它,结果就导致我前两天看到它时就一脸愣逼,好像懂,可是又好像不懂...2016年9月5日

使用CSS3制作导航条和毛玻璃效果

毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理。这种效果对用户来说是十分具有视觉冲击力的。本次分享的主题:通过CSS3来制作类似下面的导航条和毛玻璃效果...2016年10月10日

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