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

CSS API整理复习

阅读 2840 评论 0

 一直以来,对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 : 匹配被用户激活的元素(在鼠标点击与释放之间发生的事件):具体用法

E:hover : 匹配鼠标悬停在其上面的元素:具体用法

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

E:not(x) :否定伪类,匹配不符合参数选择器X描述的元素。X不能包含另外一个否定选择器:具体用法

E:nth-child(n) :匹配父元素的第n个子元素E,假设该子元素不是E,则选择符无效:具体用法

E:nth-last-child(n) :匹配父元素的倒数第n个子元素E,假设该子元素不是E,则选择符无效:具体用法

E:nth-last-of-type(n) :匹配同类型中的倒数第n个同级兄弟元素E:具体用法

E:nth-of-type(n):匹配同类型中的第n个兄弟元素E:具体用法

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

E:only-of-type:匹配代表了任意一个元素,这个元素E没有其他相同类型的兄弟元素:具体用法

E:root:匹配文档树的根元素,即html

E:target:匹配URL中的锚点指向的E元素:具体用法

E:invalid :当元素的内容无法通过输入的类型设置的验证时匹配

E:valid:当元素的内容通过输入的类型设置的验证时匹配

E:fullscreen:匹配位于全屏状态下的元素

E:lang(en):匹配lang属性的起始值是en的E元素

E:optional:匹配可选(没有设置“required”)的输入元素:具体用法

E:in-range:匹配输入的值在指定区间内的元素:具体用法

E:out-of-range:匹配输入的值在指定区间外的元素:具体用法

E:read-only:匹配设置 "readonly"(只读) 属性的元素:具体用法

E:read-write:匹配没有设置“readonly”属性的元素:具体用法

E:required: 匹配设置了 "required" 属性的元素:具体用法


//下面的尚未搞清楚

E:left

E:right

E:scope

E:any 

E:default

E:indeterminate


2、定位、尺寸

(1)定位

position:设置元素的定位方式:具体用法

top:设置一个定位元素的上外边距边界与其包含块(父元素)上边界之间的偏移:具体用法

right:设置定位元素右外边距边界与其包含块右边界之间的偏移:具体用法

bottom:设置定位元素下外边距边界与其包含块下边界之间的偏移:具体用法

left:设置定位元素左外边距边界与其包含块左边界之间的偏移:具体用法

z-index:设置一个元素的堆叠顺序,可为负数(只作用于定义了position为非static的元素):具体用法



(2)尺寸

width:设置元素的宽度:具体用法

min-width:设置元素的最小宽度:具体用法

max-width:设置元素的最大宽度:具体用法

height:设置元素的高度:具体用法

min-height:设置元素的最小高度:具体用法

max-height:设置元素的最大高度:具体用法


3、内外边距(margin、padding)

(1)margin

margin:设置元素周围的空间,也就是给定元素的四个(上右下左)方向的外边距属性(可使用 margin: 0 auto 水平居中):具体用法

margin-top:设置元素的上边距

margin-right:设置元素的右边距

margin-bottom:设置元素的下边距

margin-left:设置元素的左边距


margin折叠:某些相邻的margin会发生合并:具体用法


(2)padding

padding:设置元素的内边距(元素边框与元素内容之间的空间):具体用法

padding-top:设置元素的顶部内边距

padding-right:设置元素右边内边距

padding-bottom:设置元素底部内边距

padding-left:设置元素左边内边距


4、边框

border:设置元素的边框(width style color):具体用法

border-width:设置元素边框的宽度:具体用法  

border-style:设置元素边框的样式:具体用法  

border-color:设置元素边框的颜色:具体用法


单独设置元素上边框  

border-top  

border-top-width  

border-top-style  

border-top-color


单独设置元素的有边框  

border-right  

border-right-width  

border-right-style  

border-right-color


单独设置元素的下边框  

border-bottom  

border-bottom-width  

border-bottom-style  

border-bottom-color


单独设置元素的左边框  

border-left  

border-left-width  

border-left-style  

border-left-color

  

border-radius:设置边框(左上、右上、右下、左下)四个圆角:具体用法   

border-top-left-radius:设置边框左上角的圆角  

border-top-right-radius:设置边框的右上角的圆角  

border-bottom-right-radius:设置边框的右下角的圆角  

border-bottom-left-radius:设置边框的左下角的圆角  


box-shadow:设置阴影(可以设定多组效果,每组参数值以逗号分隔):具体用法  


border-image:设置边框的图像(属性:source slice width outset repeat):具体用法  

border-image-source:设置边框的图像路径  

border-image-slice:设置图标边框向内偏移量  

border-image-width:设置图像边框的宽度  

boerder-image-outset:设置图像边框的扩展:具体用法  

border-image-repeat:设置图像边框是否平铺:具体用法



5、布局

display:设置元素渲染出来的盒类型(如何显示):具体用法

float:设置元素是否及如何浮动:具体用法

clear:用来清除浮动:具体用法

visibility:设置元素是否显示(占的位置依旧存在):具体用法

overflow:设置元素处理溢出内容的方式:具体用法

overflow-x:设置元素处理横向溢出内容的方式

overflow-y:设置元素处理纵向溢出内容的方式

overflow-wrap:设置当内容溢出时,是否允许换行(和word-wrap一样):具体用法

相关文章:CSS实现单行、多行文本溢出显示省略号(…)


6、背景、颜色、渐变

(1)背景

background:设置背景(属性:color position size repeat origin clip attachment image)(可设置多个背景,每组属性间用逗号分隔):具体用法  

background-color:设置背景色  

background-image:设置背景路径(可设置多个背景,每组属性间用逗号分隔)  

background-repeat:设置背景是否平铺及平铺方式:具体用法  

background-attachment:设置背景图像是否固定或者随着页面的其余部分滚动:具体用法  

background-position:设置背景图像的位置:具体用法  

background-origin:设置背景图像的定位区域:具体用法  

background-clip:设置背景图像的绘画区域:具体用法  

background-size:设置背景图像的大小:具体用法


url():定义背景路径


mix-blend-mode:设置元素与背景如何混合

background-blend-mode:设置元素的背景或背景色如何混合

更多关于background,可看这篇文章:CSS3 Background

更多关于mix-blend-mode和background-blend-mode,可以看这篇文章:瞧瞧CSS3的混合模式


(2)颜色

color:设置文本颜色  

opacity:设置元素的不透明度(0~1)


(3)渐变

linear-gradient():创建线性渐变:具体用法

radial-gradient():创建径向渐变:具体用法

repeating-linear-gradient():创建重复的线性渐变:具体用法

repeating-radial-gradient():创建重复的径向渐变:具体用法

可看这篇文章:CSS3 Gradient渐变


7、字体、文本、文本装饰、书写模式

(1)字体

font:设置元素的文本特性(style variant weight size lineHeight family):具体用法

font-style:设置文本字体样式:具体用法

font-variant:设置文本是否为小型的大写字母:具体用法

font-weight:设置文本的字体粗细:具体用法

font-size:设置文本的字体大小:具体用法

font-family:设置文本的字体名称列表:具体用法

font-stretch:设置文字是否横向拉伸变形:具体用法

font-size-adjust:设置字体大小取决于小写字母,而不是大写字母:具体用法


@font-face:设置自定义字体:具体用法


(2)文本

text-transform:设置文本的大小写:具体用法

white-space:设置元素中的空格的处理方式:具体用法

tab-size:设置制表符的长度:具体用法

word-break:设置怎样在单词内断行:具体用法

word-wrap/overflow-wrap:两者等价,设置内容溢出时是否断行:具体用法

text-align:设置行内内容相对它的块父元素的水平对齐方式:具体用法

text-align-last:设置内容最后一行的水平对齐方式:具体用法

text-justify:设置文本怎样对齐及对齐间距:具体用法

word-spacing:设置字与字之间的间距:具体用法

letter-spacing:设置字符间的间距:具体用法

text-indent:设置文本的缩进:具体用法

vertical-align:设置内联元素在行框内的垂直对齐方式:具体用法

line-height:设置文本的行高:具体用法

text-size-adjust:设移动端页面中元素文本的大小调整:具体用法


(3)文本装饰

text-decoration:设置文本的排版(line style color):具体用法

text-decoration-line:设置文本的排版种类:具体用法

text-decoration-color:设置文本的排版颜色

text-decoration-style:设置文本的排版样式:具体用法

text-underline-position:设置文本的下划线的位置(支持度不高)

text-shadow:设置文本的阴影:具体用法


(4)书写模式

direction:设置文本流的方向:具体用法

unicode-bidi:用于同一个页面里存在从不同方向读进的文本显示:具体用法

writing-mode:设置内容块固有的书写方向:具体用法


8、列表、表格

(1)列表

list-style:设置列表项目的属性(type position image):具体用法

list-style-image:设置列表项标记的图像:具体用法

list-style-position:设置列表项标记的排列位置:具体用法

list-style-type:设置列表项标记的类型:具体用法


(2)表格

table-layout:设置表格布局算法:具体用法

border-collapse:设置表格的边框是分开还是合并:具体用法

border-spacing:设置相邻单元格边框之间的距离:具体用法

caption-side:设置表格标题的位置:具体用法

empty-cells:设置当表格的单元格内无内容时,是否显示该单元格的边框:具体用法


9、内容

content:用来插入生成内容(一般和:before及:after伪元素配合使用):具体用法

counter-increment:设置当一个selector发生时计数器增加的值:具体用法

counter-reset:创建或重置一个或多个计数器:具体用法

quotes:设置嵌套引用的引号类型:具体用法


10、界面样式

appearance:设置外观按照本地默认样式(使用时要加前缀):具体用法

text-overflow:设置当文本溢出时,如何处理:具体用法

outline:设置元素周围的轮廓(width style color):具体用法

outline-width:设置轮廓的宽度

outline-style:设置轮廓的样式:具体用法

outline-color:设置轮廓的颜色

outline-offset:设置轮廓在border边缘外的偏移:具体用法

cursor:设置鼠标悬浮在元素上的外观:具体用法

zoom:设置元素的缩放比例:具体用法

box-sizing:设置元素的盒模型组成模式:具体用法

resize:设置元素是否允许用户缩放:具体用法

user-select:设置是否允许用户选中文本:具体用法

pointer-events:设置在何时成为鼠标事件的target:具体用法


//下面的兼容性不高,后续添加

ime-mode

nav-index  

nav-up  

nav-right  

nav-down  

nav-left


11、多列

columns:设置列宽和列数(width count):具体用法

column-width:设置列宽

column-count:设置列数

column-gap:设置列与列之间的间距:具体用法

column-rule:设置列与列之间的边框(width style color):具体用法

column-rule-width:设置列与列之间的边框宽度

column-rule-style:设置列与列之间的边框样式:具体用法

column-rule-color:设置列与列之间的边框颜色

column-span:设置元素是否横跨所有列:具体用法

column-fill:设置所有列的高度是否统一(以最高为主):具体用法

column-break-before:设置元素之前是否断行:具体用法

column-break-after:设置元素之后是否断行:具体用法

column-break-inside:设置元素内部是否断行:具体用法


12、伸缩盒(新、旧)

(1)伸缩盒(旧)

box-orient:设置伸缩盒元素的子元素的排列方式:具体用法

box-pack:设置伸缩盒元素的子元素的对齐方式:具体用法

box-align:设置伸缩盒元素的子元素的对齐方式:具体用法

box-flex:设置伸缩盒元素的子元素如何分配剩余空间:具体用法

box-flex-group:设置伸缩盒元素的子元素的所属组:具体用法

box-ordinal-group:设置伸缩盒元素的子元素的显示顺序:具体用法

box-direction:设置伸缩盒元素的子元素的排列顺序是否反转:具体用法

box-lines:设置伸缩盒元素的子元素是否可以换行显示:具体用法


(2)伸缩盒(新)

flex:设置弹性盒元素的子元素如何分配空间(grow shrink basis):具体用法

flex-grow:设置弹性盒的扩展比率:具体用法

flex-shrink:设置弹性盒的收缩比率:具体用法

flex-basis:设置弹性盒伸缩基准值:具体用法

flex-flow:设置弹性盒元素的子元素排列方式(direction wrap):具体用法

flex-direction:设置内部元素如何在弹性盒内布局,定义了主轴的方向:具体用法

flex-wrap:设置弹性盒内的子元素是单行或多行,同时横轴的方向决定了新行堆叠方向:具体用法 

align-items:设置子元素在弹性盒的当前行的侧轴(纵轴)方向上的对齐方式:具体用法

justify-content:设置弹性盒子元素在主轴(横轴)方向上的对齐方式:具体用法

align-content:设置弹性盒在侧轴方向上右额外空间时,如何排列每一行:具体用法

align-self:设置子元素在侧轴(纵轴)方向上的对齐方式:具体用法

order:设置弹性盒元素的子元素出现的顺序,可为负数:具体用法

相关文章:Flex布局


13、转换、过渡、动画

(1)转换

transform:设置元素的2D或3D转换:具体用法

transform-origin:设置元素进行转换的位置:具体用法

transform-style:设置嵌套元素是怎样在三维空间中呈现:具体用法

perspective:设置透视效果:具体用法

perspective-origin:设置透视点的位置:具体用法

backface-visibility:设置元素背面面向用户时是否可见:具体用法

相关文章:CSS3 Transform 2D和3D转换


(2)过渡

transition:设置元素变换时的过渡(property duration timing-function delay):具体用法

transition-property:设置元素中的过渡属性:具体用法

transition-duration:设置元素的过渡持续时间:具体用法

transition-timing-function:设置元素的过渡动画类型:具体用法

transition-delay:设置元素延迟过渡的时间:具体用法

相关文章:CSS3 Transition


(3)动画

animation:设置元素所应用的动画特效(keyframes):具体用法

animation-name:设置元素所应用的动画名称:具体用法

animation-duration:设置元素动画的持续时间:具体用法

animation-timing-function:设置元素动画的过渡类型:具体用法

animation-delay:设置元素动画的延迟时间:具体用法

animation-iteration-count:设置元素动画的循环次数:具体用法

animation-direction:设置元素动画在循环中是否反向运动:具体用法

animation-play-state:设置元素动画的状态:具体用法

animation-fill-mode:设置当动画不播放时,要应用到元素的样式:具体用法


cubic-bezier():设置贝塞尔曲线,生成速度曲线(一般和animation使用)

相关文章:CSS3 Animation动画

CSS3的贝塞尔曲线(cubic-bezier)


14、裁剪(clip、clip-path)、遮罩(mask)

(1)裁剪

clip:设置元素的可视区域,区域外的部分是透明的:具体用法

clip-path:设置元素的可视区域。

相关文章:clip 和 clip-path


(2)遮罩

//熟悉了解中


15、单位(长度、角度、时间、频率、分辨率)

(1)长度

em:相对于当前对象内文本的字体尺寸

ex:相对于字符“x”的高度,通常为字体高度的一半

ch:数字“0”的宽度

rem:相对于根元素(html元素)font-size计算值的倍数


vw:相对于视口的宽度,视口宽度的 1/100。

vh:相对于视口的高度,视口高度的1/100

vmax:相对于视口的宽度或高度,取宽度与高度之间的最大值。

vmin:相对于视口的宽度或高度,取宽度与高度之间的最小值。


cm:里面

mm:毫米

q:1/4毫米

in:英寸

pt:点

pc:派卡

px:像素

具体用法


(2)角度值

deg:度

grad:梯度

rad:弧度

turn:转、圈


(3)时间值

s:秒

ms:毫秒


(4)频率值

Hz:赫兹

kHz:千赫兹


(5)分辨率

dpi:每英寸包含点的数量

dpcm:每厘米包含点的数量

dppx:每像素包含点的数量


(6)颜色值

color name:颜色名称

HEX:十六进制记法

RGB:rgb记法

RGBA:rgba记法

HSL:hsl记法

HSLA:hsla记法

transparent:全透明

currentColor:当前颜色


16、函数

calc():用于动态计算长度值(+、-、*、/):具体用法

attr():返回属性值:具体用法


image():设置图像:具体用法

image-set():设置根据用户设备的分辨率匹配合适的图像:具体用法


17、媒体查询

width:定义输出设备中的页面可见区域宽度:具体用法

height:定义输出设备中的页面可见区域高度:具体用法

device-width:定义输出设备的屏幕可见宽度:具体用法

device-height:定义输出设备的屏幕可见高度:具体用法

orientation:定义输出设备中的页面可见区域高度是否大于或等于宽度:具体用法

aspect-ratio:定义输出设备中的页面可见区域宽度与高度的比率:具体用法

device-aspect-ratio:定义输出设备的屏幕可见宽度与高度的比率:具体用法

color:定义输出设备每一组彩色原件的个数。如果不是彩色设备,则值等于0:具体用法

color-index:定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0:具体用法

monochrome:定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0:具体用法

resolution:定义设备的分辨率:具体用法

scan:定义电视类设备的扫描工序:具体用法

grid:用来查询输出设备是否使用栅格或点阵:具体用法

相关文章:媒体查询(Media Queries)


18、私有属性(IE、Firefox、Webkit)

(1)IE

scrollbar-3dlight-color

scrollbar-darkshadow-color

scrollbar-highlight-color

scrollbar-shadow-color

scrollbar-arrow-color

scrollbar-face-color

scrollbar-track-color

scrollbar-base-color

filter

behavior


(2)Firefox

borer-colors

border-top-colors

border-right-colors

border-bottom-colors

border-left-colors


element()


(3)Webkit

text-fill-color

text-stroke

text-stroke-width

text-stroke-color

box-reflect

tap-highlight-color

user-darg


19、其他

will-change:允许开发者提前告知浏览器要对元素做什么动画,这样浏览器可以提前准备合适的优化设置:具体用法

touch-action:设置某个给定的区域是否允许用户操作,以及如何响应用户操作:具体用法

box-reflect:设置元素的倒影

filter:设置滤镜:具体用法


initial:如果你想重置某个属性为UA默认设置,那么就可以使用该值

inherit:继承父元素的属性

unset:一个属性定义了unset值,如果该属性是默认继承属性,该值等同于inherit,如果该属性是非继承属性,该值等同于initial

相关文章:用CSS3来制作倒影(box-reflect)

CSS3 滤镜


如有错误,欢迎指正!


参考资料:

CSS参考手册

MDN CSS参考

菜鸟教程


关注”全栈技术杂货铺“

全栈技术杂货铺