阅读 4617

CSS的常用属性速查表

前言

要想写出优美的CSS作品,想象力固然很重要,然而基础也是不可忽略的。相信大部分人怕写CSS的原因是被它庞大的基础知识体系给吓到了,在此笔者推荐一个叫freecodecamp的网站,通过闯关的方式来学习前端三剑客,用它入门CSS是最佳的选择!

当你成功地入了门之后,便可以开始探索CSS的全貌了。本文是CSS属性的速查表,配合在线API文档使用即可

属性速查表

以下列出的属性知识点都是笔者用到过的

千万不要被数量吓到,其实常用的也就这些:选择-定位-布局-盒模型-字体-背景-动画-其他

选择器

element

元素本身,p

class

类,p.class

id

id,p#id

child

子元素,ul li

attribute

属性,input[type="checkbox"]

sibling

相邻元素,input ~ label

pseudo class

伪类,button:hover

常用伪类:

  • hover:鼠标悬浮
  • focus:本身获得焦点
  • focus-within:本身及子元素获得焦点
  • nth-child:第n个子元素
  • not:非某元素
  • target:URL的锚点

表单伪类:

  • checked:单/复选框开关on的状态
  • disabled:被禁用的元素
  • valid:表单校验通过时的情况
  • invalid:表单校验不通过时的情况
  • placeholder-shown:有占位符时的情况(也就是用户还未输入时的情况)

pseudo element

伪元素,button::before

常用伪元素:

  • before
  • after
  • selection,代表被用户选中的部分

*

全选

定位

position

  • relative:相对定位,元素占据文档位置,可以有偏移
  • absolute:绝对定位,元素不占位置,相对于父元素定位
  • fixed:固定在视窗某一位置
  • sticky:“粘”在视窗某一位置

top | left | bottom | right

上下左右的偏移距离

z-index

层叠关系

布局

display

  • block:块级元素
  • inline:内联元素
  • flex:弹性盒子布局
  • grid:网格布局

盒模型

width | height

宽高

padding | margin

内外边距

overflow

  • visible:超出部分可见
  • hidden:超出部分不可见

字体

font-weight

字体粗细

font-size

字体大小

font-family

字体种类

line-height

字体行高

文本

text-align

文本对齐

text-shadow

文本阴影

text-transform

文本大小写

text-decoration

文本装饰样式

-webkit-text-stroke

文本描边

white-space

空格处理

颜色

color

文本颜色

opacity

颜色透明度

transparent

透明色

currentColor

当前元素color的值

背景

background-color

背景颜色

background-image

背景图片

background-size

背景大小

background-position

背景定位

background-repeat

背景是否重复

background-clip

背景裁剪

边框

border-width

边框宽度

border-style

边框样式

border-color

边框颜色

border-radius

边框圆角

box-shadow

阴影

图片

linear-gradient

线性渐变

radial-gradient

径向渐变

conic-gradient

圆锥渐变

object-fit

处理替换元素(如img)的变形问题

滤镜

filter

作用于元素本身的滤镜

常用滤镜:

  • blur:高斯模糊
  • contrast:对比度
  • drop-shadow:投影
  • greyscale:灰度
  • hue-rotate:色调变换

backdrop-filter

作用于元素背景的滤镜

混合模式

mix-blend-mode

常用混合模式

  • multiply:正片叠底
  • screen:滤色
  • difference:插值

svg

clip-path

裁剪路径,用来裁剪出各种形状

letter-spacing

字母间距

pointer-events

鼠标事件(通常都设为none,表示消除对象的鼠标事件)

列表

list-style-type

列表的marker样式(通常都设为none,表示消除列表样式)

counter-reset

重置某个计数器为某一值

counter-increment

给某个计数器增加特定的值

UI

appearance

元素的默认样式(通常都设为none,表示消除默认外观)

box-sizing

盒模型类型

  • content-box:默认,标准盒模型
  • border-box:IE盒模型(将border和·padding一并算作长宽)

cursor

光标类型,最常用的是pointer,也就是一只手

outline

轮廓

user-select

用户是否能选择文本(通常都设为none,表示用户无法选中此文本)

滚动行为

scroll-behavior

  • auto:默认滚动行为
  • smooth:丝滑滚动行为

scroll-snap-type

定义在滚动容器中的一个临时点(snap point)如何被严格的执行

scroll-snap-align

控制将要聚焦的当前滚动子元素在滚动方向上相对于父容器的对齐方式

变换

transform

常见的几何变换:

  • translate:平移
  • scale:缩放
  • rotate:旋转
  • skew:斜切

transform-origin

变换中心

transform-style

  • flat:默认
  • preserve-3d:3d场景

perspective

透视距离

backface-visibility

物体后方是否可视

过渡和动画

transition

过渡

transition-property

过渡属性名

transition-duration

过渡时间

transition-delay

过渡延迟

transition-timing-function

过渡时间函数

animation

动画

animation-name

动画名称

animation-duration

动画时间

animation-delay

动画延迟

animation-timing-function

动画时间函数

animation-iteration-count

动画播放次数

animation-fill-mode

动画填充模式

animation-play-state

动画播放状态

@keyframes

关键帧

运动路径

offset-path

路径的定义

offset-distance

对象在路径上的位置

其他

attr()

获取自定义属性的值作为content生成的内容

var()

CSS自定义变量

calc()

计算值

@media

媒体查询,用于适配不同设备

-webkit-box-reflect

投影

关注下面的标签,发现更多相似文章
评论