1. 主页
  2. 文档
  3. 参考
  4. 样式表

样式表

样式表中文名称对应表

颜色

中文名英文名
浅绿aqua
black
blue
樱红fuch
gray
绿green
青柠lime
褐红maro
海军蓝nav
橄榄oliv
orange
purple
red
silver
蓝绿teal
white
yellow
wheat
transparent
三透rgba
相透hsla
rgb
hsl
var COLOR_T = {
 '浅绿': 'aqua',
 '黑': 'black',
 '蓝': 'blue',
 '樱红': 'fuchsia',
 '灰': 'gray',
 '绿': 'green',
 '青柠': 'lime',
 '褐红': 'maroon',
 '海军蓝': 'navy',
 '橄榄': 'olive',
 '橙': 'orange',
 '紫': 'purple',
 '红': 'red',
 '银': 'silver',
 '蓝绿': 'teal',
 '白': 'white',
 '黄': 'yellow'
};

var REPEAT_T = {
 '重复': 'repeat',
 '不重复': 'no-repeat',
 '横重复': 'repeat-x',
 '竖重复': 'repeat-y',
}
var ATTACHMENT_T = {
 '滚动': 'scroll',
 '固定': 'fixed',
 '本地': 'local',
}

var POSITION_T = {
 '左': 'left',
 '中': 'center',
 '右': 'right',
 '上': 'top',
 '下': 'bottom',
}

var PAGE_BREAK_T = {
 '总是': 'always',
 '避免': 'avoid',
}

var BLEND_MODE_T = {
 '正片叠底': 'multiply',
 '滤色': 'screen',
 '叠加': 'overlay',
 '变暗': 'darken',
 '变亮': 'lighten',
 '颜色减淡': 'color-dodge',
 '颜色加深': 'color-burn',
 '强光': 'hard-light',
 '柔光': 'soft-light',
 '差值': 'difference',
 '排除': 'exclusion',
 '色相': 'hue',
 '饱和度': 'saturation',
 '颜色': 'color',
 '亮度': 'luminosity',
}

var INHERIT_T = {
 '继承': 'inherit',
}

var INVERT_T = {
 '反转': 'invert',
}

var INITIAL_T = {
 '初始': 'initial',
}

var NONE_T = {
 '无': 'none',
}
var ALL_T = {
 '全部': 'all',
}
var NORMAL_T = {
 '默认': 'normal',
}
var UNSET_T = {
 '复位': 'unset',
}
var APPEARANCE_T = {
 "图标": "icon",
 "窗口": "window",
 "按钮": "button",
 "菜单": "menu",
 "字段": "field",
}

var BREAK_WORD_T = {
 "断词": "break-word",
}

var TRANSFORM_STYLE_T = {
 '扁平': 'flat',
 '保留三维': 'preserve-3d',
}

var BOX_SIZING_T = {
 "边框方框": "border-box",
 "内容方框": "content-box",
 "内衬方框": "padding-box",
}

var BACKGROUND_SIZE_T = {
 "覆盖": "cover",
 "包含": "contain",
 "填充": "fill",
 "缩小": "scale-down",
}

var FLEX_DIRECTION_T = {
 "行": "row",
 "行反": "row-reverse",
 "列": "column",
 "列反": "column-reverse",
}

var DENSE_T = {
 "密度":"dense"
}

var RESIZE_T = {
 "双方": "both",
 "横": "horizontal",
 "竖": "vertical",
}

var UNIT_T = {
 '像素': 'px',
 '厘': 'cm',
 '毫': 'mm',
 '点': 'pt',
 '英寸': 'in',
 '相对': 'em',
 '根': 'rem',
 '秒': 's',
 '毫秒': 'ms',
 '度': 'deg',
 '%': '%',
 '弧度': 'rad',
}

var DIRECTION_T = {
 '左右': 'ltr',
 '右左': 'rtl',
}

var TEXT_ALIGN_T = {
 '左': 'left',
 '右': 'right',
 '中': 'center',
 '两端': 'justify',
 '开始': 'start',
 '结束': 'end',
}

var TEXT_DECORATION_T = {
 '下线': 'underline',
 '上线': 'overline',
 '中线': 'line-through',
 '闪': 'blink',
}
var BLUR_T = {
 '模糊': 'blur',
}
var TEXT_TRANSFORM_T = {
 '首大写': 'capitalize',
 '大写': 'uppercase',
 '小写': 'lowercase',
}
var TEXT_OVERFLOW_T = {
 "剪切":"clip",
 "省略号":"ellipsis",
}
var UNICODE_BIDI_T = {
 '嵌入': 'embed',
 '双向-覆盖': 'bidi-override',
}

var VERTICAL_ALIGN_T = {
 '基线': 'baseline',
 '下标': 'sub',
 '上标': 'super',
 '上': 'top',
 '文上': 'text-top',
 '中间': 'middle',
 '下': 'bottom',
 '文下': 'text-bottom',
}

var WHITE_SPACE_T = {
 '保留': 'pre',
 '不换行': 'nowrap',
 '换行': 'wrap',
 '反向换行': 'wrap-reverse',
 '保留-换行': 'pre-wrap',
 '保留-行内': 'pre-line',
}

var FONT_NAME_T = {
 '宋': 'SimSun, STSong',
 '黑': 'SimHei, STHeiti',
 '楷': 'KaiTi, STKaiti',
 '仿宋': 'FangSong, STFangsong',
 '衬线': 'Serif',
 '乔治亚': 'Georgia',
}

var FONT_SIZE_T = {
 '更小': 'smaller',
 '更大': 'larger',
 '小': 'small',
 '中等': 'medium',
 '大': 'large',
 'x小': 'x-small',
 'xx小': 'xx-small',
 'x大': 'x-large',
 'xx大': 'xx-large',
}
var FONT_STYLE_T = {
 '斜': 'italic',
 '倾斜': 'oblique',
}
var FONT_VARIANT_T = {
 '小型-大写': 'small-caps',
}

var FONT_WEIGHT_T = {
 '粗': 'bold',
 '更粗': 'bolder',
 '更细': 'lighter',
}

var FONT_T = {
 '标题': 'caption',
 '图标': 'icon',
 '菜单': 'menu',
 '对话框': 'message-box',
 '小标题': 'small-caption',
 '状态栏': 'status-bar',
}
var PSEUDO_T = {
 '链接': 'link',
 '已访问': 'visited',
 '悬': 'hover',
 '激活': 'active',
 '焦点': 'focus',
 '后': 'after',
 '前': 'before',
 '第一子': 'first-child',
 '第一字母': 'first-letter',
 '第一行': 'first-line',
 '第一类型': 'first-of-type',
 '最后类型': 'last-of-type',
 '仅此类型': 'only-of-type',
 '唯一子': 'only-child',
 '最后子': 'last-child',
 '根': 'root',
 '空': 'empty',
 '靶': 'target',
 '启用': 'enabled',
 '禁用': 'disabled',
 '选中': 'checked',
 '选择': 'selection',
 '出界': 'out-of-range',
 '界内': 'in-range',
 '读写': 'read-write',
 '只读': 'read-only',
 '可选': 'optional',
 '必须': 'required',
 '有效': 'valid',
 '无效': 'invalid',
 '非': 'not',
 '第几子': 'nth-child',
 '倒数第几子': 'nth-last-child',
 '类型第几': 'nth-of-type',
 '类型倒数第几': 'nth-last-of-type',
}

var LIST_STYLE_POSITION_T = {
 '里': 'inside',
 '外': 'outside',
}

var LIST_STYLE_TYPE_T = {
 '实心圆': 'disc',
 '空心圆': 'circle',
 '实心方块': 'square',
 '数字': 'decimal',
 '数字0打头': 'decimal-leading-zero',
 '小罗马': 'lower-roman',
 '大罗马': 'upper-roman',
 '小英文': 'lower-alpha',
 '大英文': 'upper-alpha',
 '小希腊': 'lower-greek',
 '小拉丁': 'lower-latin',
 '大拉丁': 'upper-latin',
 '希伯来': 'hebrew',
 '亚美尼亚': 'armenian',
 '乔治亚': 'georgian',
 '中文国字数字': 'cjk-ideographic',
 '平假名': 'hiragana',
 '片假名': 'katakana',
}

var BORDER_WIDTH_T = {
 '薄': 'thin',
 '中等': 'medium',
 '厚': 'thick',
}

var BORDER_STYLE_T = {
 '隐藏': 'hidden',
 '点线': 'dotted',
 '虚线': 'dashed',
 '波浪线': 'wavy',
 '实线': 'solid',
 '双线': 'double',
 '凹槽': 'groove',
 '脊': 'ridge',
 '陷入': 'inset',
 '突出': 'outset',
}

var BORDER_COLLAPSE_T = {
 '分开': 'separate',
}

var COLLAPSE_T = {
 '合并': 'collapse',
}

var BORDER_IMAGE_SLICE_T = {
 '填满': 'fill',
}

var SPAN_T = {
 '跨越': 'span',
}

var MAX_MIN_CONTENT_T = {
 '最大内容': 'max-content',
 '最小内容': 'min-content',
}

var AUTO_T = {
 '自动': 'auto',
}

var BALANCE_T = {
 '平衡': 'balance',
}

var EMPTY_CELLS_T = {
 '藏': 'hide',
 '展示': 'show',
}

var BORDER_IMAGE_REPEAT_T = {
 '拉伸': 'stretch',
 '重复': 'repeat',
 '缩放': 'round',
 '扩展': 'space',
}

var VISIBILITY_T = {
 '可见': 'visible',
 '隐藏': 'hidden',
}
var OVERFLOW_T = {
 '滚动': 'scroll',
}
var OVERFLOW_XY_T = {
 '无示显': 'no-display',
 '无内容': 'no-content',
}

var DISPLAY_T = {
 '块': 'block',
 '内联': 'inline',
 '内联块': 'inline-block',
 '列表项': 'list-item',
 '磨合': 'run-in',
 '表格': 'table',
 '内联表格': 'inline-table',
 '表格行组': 'table-row-group',
 '表格头组': 'table-header-group',
 '表格脚组': 'table-footer-group',
 '表格行': 'table-row',
 '表格列组': 'table-column-group',
 '表格列': 'table-column',
 '表格单元': 'table-cell',
 '表格标题': 'table-caption',
 '弹性': 'flex',
 '内联弹性': 'inline-flex',
}

var POSITION_STYLE_T = {
 '绝对': 'absolute',
 '固定': 'fixed',
 '相对': 'relative',
 '静': 'static',
 '粘': 'sticky',
}
var WORD_BREAK_T = {
 "全断": "break-all",
 "全保留": "keep-all",
}
var WRITING_MODE_T = {
 "水平上下": "horizontal-tb",
 "垂直右左": "vertical-rl",
 "垂直左右": "vertical-lr",
 "侧面右左": "sideways-rl",
 "侧面左右": "sideways-lr",
}
var CURSOR_T = {
 '默认': 'default',
 '十': 'crosshair',
 '指针': 'pointer',
 '移动': 'move',
 '右改': 'e-resize',
 '右上改': 'ne-resize',
 '左上改': 'nw-resize',
 '上改': 'n-resize',
 '右下改': 'se-resize',
 '左下改': 'sw-resize',
 '下改': 's-resize',
 '左改': 'w-resize',
 '文': 'text',
 '等': 'wait',
 '帮助': 'help',
};
var ANIMATION_ITERATION_COUNT_T = {
 '无限': 'infinite',
};
var ANIMATION_TIMING_FUNCTION_T = {
 '线性': 'linear',
 '低速': 'ease',
 '低速开始': 'ease-in',
 '低速结束': 'ease-out',
 '低速开始结束': 'ease-in-out',
};
var ANIMATION_DIRECTION_T = {
 '反向': 'reverse',
 '交替': 'alternate',
 '交替反向': 'alternate-reverse',
};
var ANIMATION_FILL_MODE_T = {
 '向前': 'forwards',
 '向后': 'backwards',
 '双方': 'both',
};
var ANIMATION_PLAY_STATE_T = {
 '暂停': 'paused',
 '运行': 'running',
};

var AT_COUNTER_STYLE_SYSTEM_T = {
 '循环': 'cyclic',
 '固定': 'fixed',
 '符号': 'symbolic',
 '字母': 'alphabetic',
 '数字': 'numeric',
 '添加': 'additive',
 '扩展': 'extends',
};

var JUSTIFY_CONTENT_T = {
 "弹性开始":"flex-start",
 "弹性结束":"flex-end",
 "中":"center",
 "间隔空间":"space-between",
 "均匀空间":"space-evenly",
 "周边空间":"space-around",
 '拉伸': 'stretch', // for align-content
 '基线': 'baseline',  // for align-self
}

var CONTENT_T = {
 "开引号": "open-quote",
 "关引号": "close-quote",
 "无开引号": "no-open-quote",
 "无关引号": "no-close-quote",
}

名称

中文名英文名
背景色background-color
背景图background-image
背景重复background-repeat
背景附件background-attachment
背景位置background-position
背景混合模式background-blend-mode
背景裁剪background-clip
背景原点background-origin
背景尺寸background-size
背景background
字体族font-family
字体号font-size
字体样式font-style
字体变形font-variant
字体粗细font-weight
字体font
列表样式图list-style-image
列表样式位置list-style-position
列表样式标记list-style-type
列表样式list-style
框宽border-width
框样式border-style
框颜色border-color
框圆角border-radius
框合并border-collapse
border
框底宽border-bottom-width
框底样式border-bottom-style
框底颜色border-bottom-color
框底左圆角border-bottom-left-radius
框底右圆角border-bottom-right-radius
框底border-bottom
框上宽border-top-width
框上样式border-top-style
框上颜色border-top-color
框上左圆角border-top-left-radius
框上右圆角border-top-right-radius
框上border-top
框左宽border-left-width
框左样式border-left-style
框左颜色border-left-color
框左border-left
框右宽border-right-width
框右样式border-right-style
框右颜色border-right-color
框右border-right
框图源border-image-source
框图内移border-image-slice
框图宽border-image-width
框图突出border-image-outset
框图重复border-image-repeat
框图border-image
框间距border-spacing
轮廓颜色outline-color
轮廓样式outline-style
轮廓宽outline-width
轮廓偏移outline-offset
轮廓outline
边缘margin
边缘下margin-bottom
边缘左margin-left
边缘右margin-right
边缘上margin-top
内衬padding
内衬下padding-bottom
内衬左padding-left
内衬右padding-right
内衬上padding-top
颜色color
方向direction
字母间距letter-spacing
行高line-height
文对齐text-align
文最后对齐text-align-last
文修饰text-decoration
文修饰样式text-decoration-style
文缩进text-indent
文阴影text-shadow
文转换text-transform
文溢出text-overflow
文双向unicode-bidi
垂直对齐vertical-align
空白white-space
字间距word-spacing
height
最大高max-height
最大宽max-width
最小高min-height
最小宽min-width
width
可见visibility
显示display
定位position
bottom
剪裁clip
光标cursor
left
right
top
溢出overflow
溢出横overflow-x
溢出竖overflow-y
叠序z-index
浮动float
清除clear
动画名称animation-name
动画时长animation-duration
动画时间函数animation-timing-function
动画延迟animation-delay
动画播放次数animation-iteration-count
动画方向animation-direction
动画填充模式animation-fill-mode
动画播放状态animation-play-state
动画animation
转换transform
转换原点transform-origin
转换样式transform-style
鼠标事件pointer-events
系统system
负数negative
折行word-wrap
方框尺寸box-sizing
弹性flex
弹性扩展flex-grow
弹性收缩flex-shrink
弹性基准flex-basis
弹性流flex-flow
弹性方向flex-direction
改尺寸resize
横向内容排列justify-content
纵向项目排列align-items
内容content
透明度opacity
过渡属性transition-property
过渡时长transition-duration
过渡时间函数transition-timing-function
过渡延迟transition-delay
过渡transition
纵向内容排列align-content
纵向自己排列align-self
全部all
外观appearance
背面可见backface-visibility
方框阴影box-shadow
标题位置caption-side
弹性换行flex-wrap
列数column-count
列填充column-fill
列颜色规则column-rule-color
列样式规则column-rule-style
列宽度规则column-rule-width
列规则column-rule
列跨越column-span
列宽column-width
columns
计数器递增counter-increment
计数器重置counter-reset
空单元格empty-cells
滤镜filter
混合模式mix-blend-mode
对象适应object-fit
对象位置object-position
顺序order
后分页符page-break-after
前分页符page-break-before
中分页符page-break-inside
透视perspective
透视原点perspective-origin
引号quotes
表格布局table-layout
断词word-break
书写模式writing-mode
列间隙column-gap
行间隙row-gap
间隙gap
网格列开始grid-column-start
网格列结束grid-column-end
网格列grid-column
网格行结束grid-row-end
网格行开始grid-row-start
网格区域grid-area
网格自动列宽grid-auto-columns
网格自动行高grid-auto-rows
网格自动布局grid-auto-flow
网格列间隙grid-column-gap
网格行间隙grid-row-gap
网格间隙grid-gap
网格模板行grid-template-rows
网格模板列grid-template-columns
网格模板区域grid-template-areas
网格模板grid-template
网格grid

动画时间函数

贝塞尔cubic-bezier
步数steps
开始start
结束end

关键帧

from
to

转换

矩阵matrix
矩阵3维matrix3d
转化translate
转化3维translate3d
转化横translateX
转化竖translateY
缩放scale
缩放3维scale3d
缩放横scaleX
缩放竖scaleY
缩放深scaleZ
旋转rotate
旋转3维rotate3d
旋转横rotateX
旋转竖rotateY
旋转深rotateZ
倾斜skew
倾斜横skewX
倾斜竖skewY
透视perspective
矩行rect

选择器

after
before

元素选择器

视图view
页面page
@字符集@charset
@计数样式@counter-style
@字体@font-face
@字体特征值@font-feature-values
@导入@import
@关键帧@keyframes
@媒体@media
@名称空间@namespace
@页面@page
@支持@supports
a
文本域textarea
表单form
按钮button