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 | 定位

需要注意的是，如果父元素包含了 transform 属性，那么子元素的 position 为 fixed 属性时会出现异常。

{
  "top": "元素顶部相对于视口顶部的距离",
  "bottom": "元素底部相对于视口底部的距离",
  "left": "元素左边相对于视口左边的距离",
  "right": "元素右边相对于视口左边的距离",
  "height": "元素高度",
  "width": "元素宽度"
}

Center | 居中

Scroll | 滚动

在 iOS 设备上可以添加 -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

可以使用 css content 来避免 dom 入侵。我们为查找到采集的元素添加了个性化的样式 data-spmd-container，并为该 dom 添加新属性 data-udata-value 用于记录该元素的点击数据，css 做如下定义

.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;
}

对于 Hover 图标：

.data-spmd-container:hover:before {
  content: url(http://www.mjdemo.com/search.png); //搜索图标
  position: absolute;
  color: #333;
  left: 0;
  white-space: nowrap;
}

还可以添加图标点击事件，首先明确一点，对于 css 添加的伪元素，并不真实存在于页面元素里，所以不能直接添加点击事件 $(’.class:before’)也不可能查到，不过针对于 udata 的使用情况，采用了迂回方案，即详细的图标大小是固定的，居左上角 20px * 20px，只要监听该元素的点击范围是不是在图标范围内就可以了，js 事件如下

dom.on("click", e => {
  if (e.offsetX < 20 && e.offsetY < 20) {
    //do something for udata info
    return false;
  }
});

CSS Animation

CSS3 动画相关的几个属性是：transition, transform, animation；分别理解为过渡，变换，动画。transition 指过渡，就是从 a 点都 b 点，是有时间的，是连续的，一般针对常规 CSS 属性；transform 指变换，包含几个固定的属性：旋转、缩放、偏移等等，但是，效果就是很干涩机械的旋转移动，如果配合 transition 属性，变换就会很平滑。

transition

当你的 left 属性发生变化的时候，执行动画效果（仅仅基于 left 的属性变化，其他的属性不会加入到动画变化里面去）。

.position {
  left: 100px;
  top: 100px;
}

.animate {
  -webkit-transition: left 0.5s ease-out;
  left: 500px;
  top: 500px;
}

首先你的元素的 css 为 position。当你将其 cssList 增加 animate 或者替换 position 为 animate 的时候，元素的属性变化，触发 webkit-transition，以指定属性变化前的值为起始值，变化后的属性为结束值，执行动画效果。这是一个简单的两点变化过程，大大简化了 animation 属性的复杂程度。

transition-property : _ //指定过渡的性质，比如 transition-property:backgrond 就是指 backgound 参与这个过渡
transition-duration: _//指定这个过渡的持续时间
transition-delay: _ //延迟过渡时间
transition-timing-function: _//指定过渡类型，有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

ease-in 表示先慢后快；ease-out 表示先快后慢；ease-in-out 表示先慢后快再慢，这里的 cubic-bezier 就是贝塞尔曲线，Easing functions 提供了更多的动画函数支持。

transform

transform 指变换，即拉伸、压缩、旋转、偏移等等。

.trans_skew {
  transform: skew(35deg);
}
.trans_scale {
  transform: scale(1, 0.5);
}
.trans_rotate {
  transform: rotate(45deg);
}
.trans_translate {
  transform: translate(10px, 20px);
}

transform 属性要可以加上 transition 的过渡特性:

.trans_effect {
  transition: all 2s ease-in-out;
}
.trans_effect:hover {
  transform: rotate(720deg) scale(2, 2);
}

transform 属性是静态属性，一旦写到 style 里面，将会直接显示作用，无任何变化过程。transform 的主要用途是用来做元素的特殊变形，对于做设计的人来说并不是很陌生，简单的来说就是 css 的图形变形工具。关于图形变形的基础条件当中的原点设定，在 css 里面使用的是 transform-origin 来定义的。这个定义的原点应该是该 css 作用的元素的左上角为 0,0 来计算的（有待研究）。其他的属性则根据这个属性来计算进行计算。

translate3d(x,y,z) 是用来控制元素的位置在页面上的三轴的位置的；
rotate(deg)是用来控制元素旋转角度的；
skewx,y 这个属性是用来制作倾斜度的，做过设计的人可能会知道，这个是用来在 2d 里面创建 3d 透视图的时候必须的属性；
scale3d(x,y,z) 用来放大缩小效果，属性是比值；
matrix3d，css 矩阵。通过这个矩阵属性，涵盖了上面所有的属性值，但是个人觉得可读性极差（全都是数字和单位，背起来有点模糊），目前没有理由推荐使用。

animation

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'，其中 0％代表在变化中不同时间点的属性值，你可以较精确的控制动画变化中任何一个时间点的属性效果。而 animation 则根据这个 keyframes 提供的属性变化方式去计算元素动画当中的属性。与 transition 不同的是，keyframes 提供更多的控制，尤其是时间轴的控制。

动画只播放一次。加入 infinite 关键字，可以让动画无限次播放:

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;
}

另外在 animation 属性里面还有一个最重要的就是：animation-fill-mode，这个属性标示是以(from/0%)指定的样式还是以(to/100%)指定的样式为动画完成之后的样式。这个很方便我们控制动画的结尾样式，保证动画的整体连贯。

none：默认值，回到动画没开始时的状态。
forwards 表示让动画停留在结束状态
backwards：让动画回到第一帧的状态。
both: 根据 animation-direction 轮流应用 forwards 和 backwards 规则。

有时，动画播放过程中，会突然停止。这时，默认行为是跳回到动画的开始状态；如果想让动画保持突然终止时的状态，就要使用 animation-play-state 属性:

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 + '">';

CSS Modules 中也支持设置全局样式：

:global {
  .global-class-name {
    color: green;
  }
}

.className {
  color: green;
  background: red;
}

// 合并其他样式类
.otherClassName {
  composes: className;
  color: yellow;
}

// 合并来自其他文件的样式
.otherClassName {
  composes: className from "./style.css";
}

最近更新于 0001-01-01