Ruby 备忘单 - CSS

1. CSS 选择器

1.1 元素选择器

元素选择器用于选取指定元素类型的所有元素。

/* 选择所有段落元素 */
p {
  /* 样式规则 */
}

1.2 类选择器

类选择器用于选取具有特定类名的元素。

/* 选择所有类名为 "btn" 的元素 */
.btn {
  /* 样式规则 */
}

1.3 ID 选择器

ID 选择器用于选取具有特定 ID 的元素。

/* 选择 ID 为 "header" 的元素 */
#header {
  /* 样式规则 */
}

1.4 属性选择器

属性选择器用于选取具有特定属性的元素。

/* 选择所有有 "href" 属性的链接元素 */
a[href] {
  /* 样式规则 */
}

/* 选择所有 `target="_blank"` 的链接元素 */
a[target="_blank"] {
  /* 样式规则 */
}

1.5 后代选择器

后代选择器用于选取某个元素的后代元素。

/* 选择所有 `div` 元素中的所有 `p` 元素 */
div p {
  /* 样式规则 */
}

2. CSS 盒模型

2.1 内容区

内容区是一个元素中的实际内容部分。

2.2 内边距

内边距是包围内容区的空白区域。

2.3 边框

边框是内边距外部的边界。

2.4 外边距

外边距是边框外部的空白区域。

3. CSS 布局

3.1 相对定位

相对定位通过相对于元素自身的位置来定位元素。

/* 将元素相对于它的正常位置移动 */
.positioned {
  position: relative;
  top: 10px;
  left: 20px;
}

3.2 绝对定位

绝对定位通过相对于最近的已定位祖先元素或文档的位置来定位元素。

/* 将元素相对于其最近的已定位祖先元素定位 */
.positioned {
  position: absolute;
  top: 10px;
  left: 20px;
}

3.3 浮动布局

浮动布局通过将元素从正常文档流中脱离，使其向左或向右浮动到容器的左侧或右侧。

/* 将元素向左浮动 */
.float-left {
  float: left;
}

/* 将元素向右浮动 */
.float-right {
  float: right;
}

4. CSS 动画

4.1 过渡

过渡用于在元素的状态之间创建平滑的过渡效果。

/* 定义元素的过渡效果 */
.transition {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
}

/* 设置过渡效果的起始和结束状态 */
.transition:hover {
  width: 200px;
}

4.2 关键帧动画

关键帧动画通过在指定的关键帧上定义元素的样式来创建动画效果。

/* 定义关键帧动画 */
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* 应用关键帧动画 */
.fade {
  animation-name: fade-in;
  animation-duration: 2s;
}

以上是一些常用的 Ruby 备忘单 - CSS 的内容，更多的 CSS 特性和技巧可以参考官方文档或其他资源。