CSS-CheatSheet
CSS CheatSheet | CSS 语法速览与实践清单
/* 注释 */
/* ####################
## 选择器
####################*/
/* 一般而言,CSS的声明语句非常简单。*/
选择器 {
属性: 值; /* 更多属性...*/
}
/* 选择器用于指定页面上的元素。
针对页面上的所有元素。*/
* {
color: red;
}
/*
假定页面上有这样一个元素
<div class='some-class class2' id='someId' attr='value' />
*/
/* 你可以通过类名来指定它 */
.some-class {
}
/* 给出所有类名 */
.some-class.class2 {
}
/* 标签名 */
div {
}
/* id */
#someId {
}
/* 由于元素包含attr属性,因此也可以通过这个来指定 */
[attr] {
font-size: smaller;
}
/* 以及有特定值的属性 */
[attr="value"] {
font-size: smaller;
}
/* 通过属性的值的开头指定 */
[attr^="val"] {
font-size: smaller;
}
/* 通过属性的值的结尾来指定 */
[attr$="ue"] {
font-size: smaller;
}
/* 通过属性的值的部分来指定 */
[attr~="lu"] {
font-size: smaller;
}
/* 你可以把这些全部结合起来,注意不同部分间不应该有空格,否则会改变语义 */
div.some-class[attr$="ue"] {
}
/* 你也可以通过父元素来指定。*/
/* 某个元素是另一个元素的直接子元素 */
div.some-parent > .class-name {
}
/* 或者通过该元素的祖先元素 */
div.some-parent .class-name {
}
/* 注意,去掉空格后语义就不同了。
你能说出哪里不同么?*/
div.some-parent.class-name {
}
/* 你可以选择某元素前的相邻元素 */
.i-am-before + .this-element {
}
/* 某元素之前的同级元素(相邻或不相邻)*/
.i-am-any-before ~ .this-element {
}
/* 伪类允许你基于页面的行为指定元素(而不是基于页面结构)*/
/* 例如,当鼠标悬停在某个元素上时 */
:hover {
}
/* 已访问过的链接*/
:visited {
}
/* 未访问过的链接*/
:link {
}
/* 当前焦点的input元素 */
:focus {
}
/* ####################
## 属性
####################*/
选择器 {
/* 单位 */
width: 50%; /* 百分比 */
font-size: 2em; /* 当前字体大小的两倍 */
width: 200px; /* 像素 */
font-size: 20pt; /* 点 */
width: 5cm; /* 厘米 */
width: 50mm; /* 毫米 */
width: 5in; /* 英尺 */
/* 颜色 */
background-color: #f6e; /* 短16位 */
background-color: #f262e2; /* 长16位 */
background-color: tomato; /* 颜色名称 */
background-color: rgb(255, 255, 255); /* rgb */
background-color: rgb(10%, 20%, 50%); /* rgb 百分比 */
background-color: rgba(255, 0, 0, 0.3); /* rgb 加透明度 */
/* 图片 */
background-image: url(/path-to-image/image.jpg);
/* 字体 */
font-family: Arial;
font-family: "Courier New"; /* 使用双引号包裹含空格的字体名称 */
font-family: "Courier New", Trebuchet, Arial; /* 如果第一个
字体没找到,浏览器会使用第二个字体,一次类推 */
}
Syntax | 语法
Selector
:root {
--red: #ff6f69;
}
#title {
color: var(--red);
}
.quote {
color: var(--red);
}
Layout & Position | 布局与定位
Position | 定位
需要注意的是,如果父元素包含了
{
"top": "元素顶部相对于视口顶部的距离",
"bottom": "元素底部相对于视口底部的距离",
"left": "元素左边相对于视口左边的距离",
"right": "元素右边相对于视口左边的距离",
"height": "元素高度",
"width": "元素宽度"
}
Center | 居中
Scroll | 滚动
在-webkit-overflow-scrolling
属性,以使用户感觉懒滚动式地顺滑。
省略
多行文本省略
p {
position: relative;
line-height: 18px;
height: 36px;
overflow: hidden;
}
p::after {
content: "...";
font-weight: bold;
position: absolute;
bottom: 0;
right: 0;
padding: 0 20px 1px 45px;
/* 为了展示效果更好 */
background: -webkit-gradient(
linear,
left top,
right top,
from(rgba(255, 255, 255, 0)),
to(white),
color-stop(50%, white)
);
background: -moz-linear-gradient(
to right,
rgba(255, 255, 255, 0),
white 50%,
white
);
background: -o-linear-gradient(
to right,
rgba(255, 255, 255, 0),
white 50%,
white
);
background: -ms-linear-gradient(
to right,
rgba(255, 255, 255, 0),
white 50%,
white
);
background: linear-gradient(
to right,
rgba(255, 255, 255, 0),
white 50%,
white
);
}
Properties
content
可以使用
.data-spmd-container:before {
content: attr(data-udata-value);
background: #7fbf2d;
position: absolute;
font-size: 12px;
top: 0;
padding: 0px 3px;
line-height: 20px;
color: #333;
left: 0;
white-space: nowrap;
}
对于
.data-spmd-container:hover:before {
content: url(http://www.mjdemo.com/search.png); //搜索图标
position: absolute;
color: #333;
left: 0;
white-space: nowrap;
}
还可以添加图标点击事件,首先明确一点,对于
dom.on("click", e => {
if (e.offsetX < 20 && e.offsetY < 20) {
//do something for udata info
return false;
}
});
CSS Animation
transition
当你的
.position {
left: 100px;
top: 100px;
}
.animate {
-webkit-transition: left 0.5s ease-out;
left: 500px;
top: 500px;
}
首先你的元素的
transition-property : _ //指定过渡的性质,比如 transition-property:backgrond 就是指 backgound 参与这个过渡
transition-duration: _//指定这个过渡的持续时间
transition-delay: _ //延迟过渡时间
transition-timing-function: _//指定过渡类型,有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
transform
.trans_skew {
transform: skew(35deg);
}
.trans_scale {
transform: scale(1, 0.5);
}
.trans_rotate {
transform: rotate(45deg);
}
.trans_translate {
transform: translate(10px, 20px);
}
.trans_effect {
transition: all 2s ease-in-out;
}
.trans_effect:hover {
transform: rotate(720deg) scale(2, 2);
}
-
translate3d(x,y,z) 是用来控制元素的位置在页面上的三轴的位置的; -
rotate(deg) 是用来控制元素旋转角度的; -
skewx,y 这个属性是用来制作倾斜度的,做过设计的人可能会知道,这个是用来在
2d 里面创建3d 透视图的时候必须的属性; -
scale3d(x,y,z) 用来放大缩小效果,属性是比值; -
matrix3d,
css 矩阵。通过这个矩阵属性,涵盖了上面所有的属性值,但是个人觉得可读性极差(全都是数字和单位,背起来有点模糊) ,目前没有理由推荐使用。
animation
@keyframes wobble {
0% {
left: 100px;
}
30% {
left: 300px;
}
100% {
left: 500px;
}
}
.animate {
left: 100px;
animation: wobble 0.5s ease-out;
animation-fill-mode: backwards;
}
上面这个代码展示了一个 keyframes 'wobble'
,其中
动画只播放一次。加入
div:hover {
animation: 1s rainbow infinite;
}
// 完整的 animation 属性
div:hover {
animation: 1s 1s rainbow linear 3 forwards normal;
}
div:hover {
animation-name: rainbow;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 1s;
animation-fill-mode: forwards;
animation-direction: normal;
animation-iteration-count: 3;
}
另外在
-
none:默认值,回到动画没开始时的状态。
-
forwards 表示让动画停留在结束状态 -
backwards:让动画回到第一帧的状态。
-
both: 根据animation-direction 轮流应用forwards 和backwards 规则。
有时,动画播放过程中,会突然停止。这时,默认行为是跳回到动画的开始状态;如果想让动画保持突然终止时的状态,就要使用
div {
animation: spin 1s linear infinite;
animation-play-state: paused;
}
div:hover {
animation-play-state: running;
}
Preprocessors
SCSS
Less
@sectionHeight: calc(~"100vh - 130px");
CSS Modularization | CSS 模块化
CSS Modules
import styles from "./style.css";
// import { className } from "./style.css";
element.innerHTML = '<div class="' + styles.className + '">';
:global {
.global-class-name {
color: green;
}
}
.className {
color: green;
background: red;
}
// 合并其他样式类
.otherClassName {
composes: className;
color: yellow;
}
// 合并来自其他文件的样式
.otherClassName {
composes: className from "./style.css";
}