首页 专题 H5案例 前端导航 UI框架

CSS API整理复习

作者:TG 日期: 2016-10-21 阅读: 3220

 一直以来,对CSS都没有进行过系统的学习了解,一开始是学了基本的属性,之后都是用到哪个属性才去百度哪个属性的用法,虽然慢慢的也了解了不少属性,但觉得还是有必要全面的复习一遍。


复习目录
  1. 选择器(基础选择器、组合选择器、伪元素、伪类)
  2. 定位、尺寸
  3. 内外边距(margin、padding)
  4. 边框
  5. 布局
  6. 背景、颜色、渐变
  7. 字体、文本、文本装饰、书写模式
  8. 列表、表格
  9. 内容
  10. 界面样式
  11. 多列
  12. 伸缩盒(新、旧)
  13. 转换、过渡、动画
  14. 裁剪(clip、clip-path)、遮罩(mask)
  15. 单位(长度、角度、时间、频率、分辨率、颜色)
  16. 函数
  17. 媒体查询
  18. 私有属性(IE、Firefox、Webkit)
  19. 其他

目录可能有所变动!会对部分复杂的属性进行深入了解!

所有属性的兼容性都可以到这里查询:Can I use... Support tables for HTML5, CSS3, etc

边学边记录:
绿色为CSS3新增)

1、选择器
(1)基础选择器

E : 元素选择器(以DOM元素名称来匹配:具体用法

.classname :类选择器(以类名来匹配:具体用法

#id :ID选择器(以唯一标识符id属性匹配:具体用法

* :通配选择器(可匹配任意类型的DOM元素:具体用法

(2)组合选择器

A + B :相邻兄弟选择器(匹配A元素后的兄弟B元素,B元素必须紧跟着A元素:具体用法

A ~ B :普通兄弟选择器(匹配A元素后的兄弟B元素,B元素只需在A元素后,不要求紧跟:具体用法

A > B :子选择器(匹配A元素内的直接后代B元素,不包含孙辈:具体用法

A B   :后代选择器(匹配A元素内的B元素,包含所有匹配的子孙后代:具体用法

(3)属性选择器

E[attr]        : 匹配具有attr属性的E元素

E[attr="val"]  : 匹配具有attr属性,且attr值为“val”的E元素

E[attr~="val"] : 匹配具有attr属性,且attr值是一个以空格作为分隔的值列表,其中至少一个值为“val”的E元素

E[attr^="val"] : 匹配具有attr属性,且attr值是以val开头的E元素

E[attr$="val"] : 匹配具有attr属性,且attr值是以val结尾的E元素

E[attr*="val"] : 匹配具有attr属性,且attr值包含“value”的E元素

E[attr|="val"] : 匹配具有attr属性,且attr值是一个以空格为分隔的值列表,其中至少一个值为“val”或至少一个值以“val-”开头的E元素。

具体用法

(3)伪元素

E::after / E:after  :两个等价,用来创建已选中元素的一个虚拟的最后子元素(行内元素),必须设置content属性:具体用法

E::before / E:before :两个等价,用来创建已选中元素的一个虚拟的第一个子元素(行内元素),必须设置content属性:具体用法

E::first-letter / E:first-letter : 匹配已选中元素内的文字的第一行的第一个字母(只作用于块元素):具体用法

E::selection : 设置文档被选择时的样式:具体用法

E::first-line / E:first-line :设置匹配元素内的第一行文字(只作用于块元素):具体用法

E::placeholder :设置表单输入框占位符:具体用法

(4)伪类


E:checked :匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时):具体用法

E:disabled :匹配页面上任何被禁用的元素:具体用法

E:enabled :匹配页面上任何启用的元素:具体用法

E:empty : 匹配没有子元素的元素:具体用法

E:first-child :匹配父元素的第一个子元素E,E必须是某个元素的子元素:具体用法

E:first-of-type : 匹配同类型中的第一个兄弟元素E,E必须是某个元素的子元素:具体用法

E:focus : 匹配一个成为焦点的元素(该元素的onfocus事件发生):具体用法

E:link  : 设置超链接a在未被访问状态的样式:具体用法

E:visited:匹配超链接a在其链接地址已被访问过的元素:具体用法

E:active : 匹配被用户激活的元素(在鼠标点击与释放之间发生