Web Tools 网络前端工具
选择器
伪元素
| 伪元素名称 | 说明 |
| ::first-letter | 用来选择文本块的第一个字母，除非在同一行中包含一些其他元素。 |
| ::first-line | 用来匹配元素的第一行文本， 可以应用一些特殊的样式。 |
| ::before | 不是指存在于标记中的内容，而是可以插入额外内容的位置。 |
| ::after | 不是指存在于标记中的内容，而是可以插入额外内容的位置。 |
| ::selection | 用来匹配突出显示的文本。常用属性background | color |
属性选择器
| 选择器 | 说明 |
| E[attr] | 选择匹配具有属性attr的E元素，其中E可以省略，表示选择定义了attr属性的任意类型元素。 |
| E[attr=val] | 选择匹配具有属性attr的E元素，并且attr的属性值为val，同样E元素省略时表示选择定义了attr属性值为val的任意类型元素。 |
| E[attr|=val] | 选择匹配E元素， 且E元素定义了属性attr, attr属性值是一个具有val或者以val- 开始的属性值， 常用于lang属性（例如 lang="en-us"） |
| E[attr~=val] | 选择匹配E元素， 且E元素定义了属性attr, attr属性值具有多个空格分隔的值，其中一个值等于val。 |
| E[attr*=val] | 选择匹配E元素， 且E元素定义了属性attr, 其属性值任意位置包含了 “val”。 |
| E[attr^=val] | 选择匹配E元素， 且E元素定义了属性attr, 其属性值以val开头的任何字符串 |
| E[attr$=val] | 选择匹配E元素， 且E元素定义了属性attr, 其属性值以val结尾的任何字符串 |
CSS3 边框
| 属性 | 说明 | 语法及参数 |
| border-width | 设置元素边框的粗细 | |
| border-color | 设置元素边框的颜色 | |
| border-style | 设置元素边框的类型 | |
| border-image | 设置元素边框的背景图片 | |
| border-radius | 设置元素边框的圆角效果 | |
| border-shadow | 设置元素边框的阴影 | box-shadow: none | [inset x-offset y-offset blur-radius spread-radius color], [inset x-offset y-offset blur-radius spread-radius color] |
边框类型
| 属性 | 说明 | 示例代码 | 效果 |
| none | 定义无边框 | .elm{border: none} | none |
| hidden | 与none相同，应用于表格时除外，对于表格，hidden用于解决边框冲突 | .elm{border:hidden;} | hidden |
| dotted | 定义点状边框 | .elm{border:3px dotted red;} |
dotted
|
| dashed | 定义虚线边框 | .elm{border:3px dashed red;} |
dashed
|
| solid | 定义实线边框 | .elm{border:3px solid red;} |
solid
|
| double | 定义双线。 双线的宽度等于border-width的值 | .elm{border:3px double red;} |
double
|
| grovve | 定义3D凹槽边框，其效果取决于border-color的值 | .elm{border:3px groove red;} |
groove
|
| ridge | 定义3D垄状边框，其效果取决于border-color的值 | .elm{border:3px ridge red;} |
ridge
|
| inset | 定义3D inset边框，其效果取决于border-color的值 | .elm{border:3px inset red;} |
inset
|
| outset | 定义3D outset边框， 其效果取决于border-color的值 | .elm{border:3px outset red;} |
outset
|
| inherit | 继承父元素边框的样式 |
CSS 背景
| 属性 | 说明 | 语法 |
| background-color | 设置元素的背景颜色 | backgroud-color: [color][rgb][hls][16进制] |
| background-image | 设置元素的背景图片 | background-image: none || url |
| background-repeat | 设置背景图片在元素中的铺放格式 | background-repeat: repeat || repeat-x || repeat-y || no-repeat |
| background-attachment | 设置背景图片是否固定或随着页面滚动 | background-attachment: scroll || fixed |
| background-position | 设置背景图片的位置 | background-position: % || length || [left | center | right] [, top | center | bottom] |
| background-origin | 设置绘制背景图片的起点(决定背景图片是边框，padding内外开始显示) | background-origin: padding-box || border-box || content-box |
| background-clip | 设置背景图片的显示范围 | background-clip: border-box || padding-box || contnt-box || text |
| background-size | 设置背景图片的尺寸大小 | background-size: auto || length || % || cover || contain |
| background-break | 设置内联元素的背景图片进行平铺式的循环方式 | background-break: bounding-box || each-box || continuous: |
从CSS3开始，设计师可以在单一容器中使用符合的背景图片了。CSS3的多背景语法和原来的语法基本没有变化， 只是在给容器添加的多背景之间必须使用逗号分开。
CSS 文本
| 属性 | 说明 | 语法 |
| font-family | 定义字体的类型 | |
| font-style | 定义字体样式 | font-style: normal || italic || oblique |
| font-weight | 定义字体粗细 100~900 | font-weight: normal || bold || bolder || lighter |
| font-size-adjust | 定义是否强制对文本使用同一尺寸 | |
| font-stretch | 定义是否横向拉伸变形字体 | |
| font-variant | 定义字体大小写 | |
| font | 字体的复合型属性 | |
| word-spacing | 定义词与词之间的间距 | normal（默认值）, length（设置词与词之间的距离值，可以为负数） |
| letter-spacing | 定义字符之间的间距 | normal（默认值）, length（设置字符之间的间距，可以为负数） |
| vertical-align | 定义文本的垂直对齐方式 | baseline（默认值）, sub（上标对齐）, super（下标对齐）, bottom（行框底端对齐）, text-bottom（行内文本底端对齐）, top（顶端对齐）, middle（居中对齐）, 百分比数字，长度 |
| text-decoration | 定义文本的修饰线 | none（默认值）, underline（下划线）, overline（上划线）, line-through（删除线）和blink（闪烁线） |
| text-indent | 定义文本首行缩进 | 长度和百分比 |
| text-align | 定义文本水平对齐方式 | left（左对齐）, center（水平居中）, right（右对齐）, justify（两端对齐） |
| line-height | 定义文本行高 | normal（默认值）, 长度， 百分比，数字 |
| text-transform | 定义文本大小写 | normal（默认值）, length（设置字符之间的间距，可以为负数） |
| text-shadow | 定义文本阴影效果 | text-shadow: 颜色 x轴 y轴 模糊半径, * |
| white-space | 定义文字之间和文本之间的空白符间距 | normal（默认值）, nowrap（空白符合并，换行符忽略）, pre（空白符，换行符保留）, pre-wrap（空白符，换行符保留）, pre-line（空白符合并，换行符保留） |
| direction | 控制文本流入的方向 | ltr（默认值）, rtl（文本从右到左流入）, inherit（文本流入方向由继承获得） |
| text-overflow | 控制文本溢出，截取字符串 | clip（裁切不显示省略标记...）， ellipsis（文本溢出时显示省略标记）为了实现效果还需要white-space:nowrap; overflow:hidden;来配合 |
| word-wrap | 实现长单词与URL地址的自动换行 | normal （默认值）, break-word（将内容在边界内换行） pre 和 table中没有效果 |
| word-break | 实现在恰当的断字点进行换行 | normal （默认值）, break-all（强行截断单词）, keep-all（不允许字断开） |
CSS 颜色
| 属性 | 说明 | 语法 |
| opacity | 设置元素的背景透明效果 | 取值范围0 ~１ 例如：opacity: 0.5 |
从CSS3开始，增加了RGBA, HSL, HSLA 颜色模式
- rgba(红色值, 绿色值, 蓝色值, 透明度)
- hsl(色调(-360~360), 饱和度(0~100%), 亮度(0~100%))
- hsla(色调(-360~360), 饱和度(0~100%), 亮度(0~100%), 透明度(0~1))
CSS 盒模型
| 属性 | 说明 | 语法 |
| box-sizing | 设置盒模型属性 | content-box（默认值）|| border-box（ 为元素设定的宽度和高度决定了元素的边框盒。固定好大小后，设置内边距，边框等都不会影响元素大小）|| inherit（继承父元素的盒模型模式） |
| overflow | 设置元素的溢出属性 | visible（默认值）|| auto（在需要时剪切内容并添加滚动条）|| hidden（内容溢出时，溢出部分将会被隐藏，不显示滚动条）|| scroll（不管内容是否溢出，都会显示滚动条）|| no-display（当内容溢出时不显示元素）|| no-content（当内容溢出时不显示内容） |
| overflow-x, overflow-y | 设置元素的溢出属性 | visible（默认值）|| auto（在需要时剪切内容并添加滚动条）, hidden（内容溢出时，溢出部分将会被隐藏，不显示滚动条）|| scroll（不管内容是否溢出，都会显示滚动条）|| no-display（当内容溢出时不显示元素）|| no-content（当内容溢出时不显示内容） |
| resize | 设置用户是否可以调整元素尺寸 | none（用户不可以修改尺寸）|| both（用户可以拖动元素调整尺寸，高宽都可以调整）|| horizontal（用户可以调整元素的宽度）|| vertical（用户可以调整高度）|| inherit（继承父元素的resize值） |
| outline | 为元素设置轮廓线 | outline-color（颜色） outline-style（样式） outline-width（宽度） outline-offset（边框偏移） |
| display(box) | 伸缩流概念 | 将元素设置为伸缩容器 |
| display(inline-box) | 伸缩流概念将元素设置为内联级伸缩容器 | |
| box-orient | 设置元素的伸缩流主轴 | horizontal（伸缩项目在容器中从左到右排列）|| vertical（伸缩项目在容器中从上到下排列） || inline-axis（伸缩项目沿着内联轴排列）|| block-axis（伸缩项目沿着块轴排列） |
| box-direction | 设置元素伸缩流方向 | normal（正常显示顺序）|| reverse（反向显示） |
| box-lines | 设置伸缩容器项目是单行还是多行显示 | single（伸缩容器一行或一列显示）|| multiple（伸缩容器多行或多列显示） |
| box-pack | 设置伸缩容器当前伸缩项目在主轴方向的对齐方式 | start（向一行的起始位置靠齐）|| end（向结束位置靠齐）|| center（向中间位置靠齐）|| justify（平均分布） |
| box-align | 设置伸缩容器的当前行的侧轴上的对齐方式 | start（伸缩项目的顶部边缘放置在伸缩项目容器的顶端）|| end（伸缩项目底部边缘放置在伸缩项目容器底端）|| center（伸缩项目紧靠在一起，垂直居中于伸缩容器）|| baseline（伸缩项目根据他们的基线对齐）|| stretch（伸缩项目填充整个伸缩容器） |
| box-flex | 控制伸缩项目在伸缩容器中的显示空间（溢出部分，或是多余部分调整比例） | 数值（整数或小数） |
| box-ordinal-group | 设置伸缩项目在页面中的显示顺序 | 数值（排序顺序） |
| display(flexbox || inline-flexbox) | 混合版Flexbox模型 | flexbox（设置元素为块级伸缩容器 ) || inline-flexbox（设置元素为内联块伸缩容器） |
| flex-direction | 设置元素的伸缩布局主轴 | row（默认值）|| row-reverse（伸缩项目从右向左排列）|| column（伸缩项目按照从上到下的顺序排列）|| column-reverse（伸缩项目从下到上排列） |
| flex-wrap | 设置溢出伸缩容器的伸缩项目自动换行到下一行或下一列 | nowrap（默认值）|| wrap（伸缩容器无法容纳时自动换行换列）|| wrap-reverse（伸缩容器无法容纳时，反方向自动换行换列） |
| flex-flow | 设置伸缩布局中伸缩流方向与伸缩项目的换行（flex-direction和flex-wrap的简写版本） | flex-flow: flex-direction | flex-wrap |
| flex-pack | 设置伸缩容器当前伸缩项目在主轴方向的对齐方式 | start（向一行的起始位置靠齐）|| end（向结束位置靠齐）|| center（向中间位置靠齐）|| justify（平均分布）|| distribute（伸缩项目平均分布在同一行里） |
| flex-align | 设置伸缩容器的当前行的侧轴上的对齐方式 | start（伸缩项目的顶部边缘放置在伸缩项目容器的顶端）|| end（伸缩项目底部边缘放置在伸缩项目容器底端）|| center（伸缩项目紧靠在一起，垂直居中于伸缩容器）|| baseline（伸缩项目根据他们的基线对齐）|| stretch（伸缩项目填充整个伸缩容器） |
| flex-line-pack | 由于技术内容至今未实现停止说明 |
CSS3 多列布局
| 属性 | 说明 | 语法 |
| columns | 复合属性设置多列布局的列宽及列数 | column-width（定义列宽）|| column-count（定义列的个数） |
| column-width | 定义列的宽度 | auto（默认值）, length（固定值来设定列的宽度） |
| column-count | 指定元素想要的列数和允许的最大列数 | auto（默认值）| 数值（正整数，定义元素的列数） |
| column-gap | 设置元素分列的列间距 | normal（默认值）| length（数字和单位组成的长度值） |
| column-rule | 设置列与列之间额边框宽度，样式及颜色 | column-rule-width（边框的宽度）| column-rule-style（边框的样式）| column-rule-color（边框的颜色） |
| column-span | 设置跨列元素和跨多少列 | none（默认值）| all（元素跨所有列） |
| column-fill | 设置多列中的每一列的高度是否统一 | auto（默认值）| balance（各列的高度会根据内容最多的一列的高度进行统一） |
CSS3 渐变
| 属性 | 说明 | 语法 |
| linear-gradient | 设置线性渐变 | 起点（关键字【to top | to left | to bottom | to right | to top left | ...】或deg【度】）, 起点颜色, | 【多色】| 终点颜色 |
| radial-gradient | 设置径向渐变 | shape（定义径向渐变的形状circle | ellipse）, position（定义径向渐变的圆心位置length | % | left |center ... 如： 圆心位置在200px, 150px 半径为 50px. 150px 写法为 50px 150px at 200px 150px, 颜色）, size（定义结束形状的大小 closest-side | closest-corner | farthest-side | farthest-corner）, color-stop（渐变线上的停止颜色） |
| repeating-linear-gradient | 重复线性渐变 | 语法参数如linear-gradient |
| repeating-radial-gradient | 重复径向渐变 | 语法参数如radial-gradient |
CSS3 变形
| 属性 | 说明 | 语法 |
| transform | 让元素在一个坐标系统中变形，包含一系列变形函数，可以移动，旋转和缩放元素 | none（默认值）| transform-function |
| transform-origin | 指定元素的中心点位置 | % | length | left | center | right | top | bottom (x轴， Y轴， z轴) |
| transform-style | 3D空间中的重要属性，指定嵌套元素如何在3D空间中呈现 | flat（默认值所有子元素在2D平面呈现）, preserve-3d（所有子元素在3D空间中呈现） |
| perspective | 设置视距 | none | 数值 |
| perspective-origin | 决定perspective属性的源点角度 | % | length | left | center | right | top | bottom |
| backface-visibility | 决定元素旋转背面是否可见 | visible（默认值，反面可见）| hidden（反面不可见） |
transform-function的函数
| 函数 | 说明 | 语法 |
| translate() | 移动元素， 可以根据X轴和Y轴坐标重新定位元素位置 | 扩展函数 translateX() ， translateY() |
| scale() | 缩小或放大元素 | 扩展函数 scaleX()， scaleY() |
| rotate() | 旋转元素 | |
| skew() | 倾斜元素 | 扩展函数 skewX() , skewY() |
| matrix() | 定义矩阵变形，基于X轴和Y轴坐标重新定位元素位置 | |
| translate3d() | 移动元素，用来指定一个3D变形移动位移量 | |
| translateZ() | 指定3D位移在Z轴的位移量 | |
| scale3d() | 缩放一个元素 | |
| scaleZ() | 指定Z轴的缩放量 | |
| rotate3d() | 指定元素具有一个三维旋转的角度 | |
| perspective() | 指定一个透视投影矩阵 | |
| matrix3d() | 定义矩阵变形 |
CSS3 过度
| 属性 | 说明 | 语法 |
| transition | 复合属性，创建CSS3动画过渡 | transition-property（指定过渡或动态模拟的CSS属性） transition-duration（指定完成过度所需要的时间） transition-timing-function（指定过渡函数[ease 由快到慢， linear 始终恒速, ease-in 速度逐渐加速, ease-out 速度逐渐减速, ease-in-out 加速再减速]） transition-delay（指定过渡开始出现的延迟时间） |
CSS3 动画
animation属性通过@keyframes构建一些transition的动画效果, animation属于复合属性，它包含众多的子属性
| 属性 | 说明 |
| animation-name | 指定一个关键帧动画的名字，这个动画名称必须对应一个@keyframes规则 |
| animation-duration | 设置动画播放所需的时间，单位为秒 |
| animation-timing-function | 设置动画的播放方式。ease | linear | ease-in ... |
| animation-delay | 指定动画开始时间，单位为秒（延迟，提前） |
| animation-iteration-count | 指定动画播放的循环次数（infinite无限循环） |
| animation-direction | 制定动画的播放方向 normal（向前播放）| alternate（偶数向前播，奇数反方向播放）| |
| animation-play-state | 控制动画的播放状态 running（播放）| paused（暂停） |
| animation-fill-mode | 设置动画的时间外属性 none（按预期进行和结束）forwards（动画结束后继续应用最后关键帧的位置） backwards（向元素应用动画样式时迅速应用动画的初始帧） both （同时具有forwards和 backwards效果） |
animation-name: moveten; aniamtion-duration: 1s; animation-time-function: steps(10, end); animation-iteration-count: infinite; animation-direction: alternate; animation-delay: 3s; animation-fill-mode: backwards
@keyframes的语法
命名是由@keyframes开头，后面紧跟着 动画的名称 加上一对花括号"{....}"，括号中是不同时间段的样式规则。多由百分比组成，也可以由frome to组合创建动画属性
winbug © 2004-2024
