CSS学习之css代码的简写的十条规则

当我们编写CSS样式代码的时候，有许多简写的方法可以使用，这些简写的方法可以让我们的CSS代码更加简洁、简单易懂。下面我将介绍CSS简写的十条规则，帮助大家更好地理解和应用CSS简写。

1. margin 和 padding 简写规则

margin 和 padding 可以分别用 4 个值的方式指定上、右、下和左边距或填充。他们的顺序是:

上 右 下 左

比如，我们要给一个元素设置上下相等的外边距，左右相等的内边距，可以这样写：

margin: 20px auto;
padding: 10px 20px;

2. font 简写规则

font 可以分别用多个属性值来指定字体的样式、大小、行高、颜色等。这些属性值的顺序是:

font-style font-variant font-weight font-size/line-height font-family

比如，我们要设置字体样式为斜体、大小为16像素、行高为 1.5 倍、颜色为红色、字体为 Arial，可以这样写：

font: italic normal bold 16px/1.5 Arial, sans-serif;

3. background 简写规则

background 可以分别用多个属性值来指定背景颜色、背景图片、背景重复方式、背景位置等。这些属性值的顺序是：

background-color background-image background-repeat background-position

比如，我们要设置背景颜色为红色，背景图片为 bg.png，平铺方式为横向铺满、纵向不平铺、背景位置为右上角，可以这样写：

background: #ff0000 url('bg.png') repeat-x no-repeat top right;

4. border 简写规则

border 可以分别用多个属性值来指定边框的样式、宽度、颜色等。这些属性值的顺序是：

border-width border-style border-color

比如，我们要设置边框宽度为 1 像素、样式为实线、颜色为红色，可以这样写：

border: 1px solid #ff0000;

5. border-radius 简写规则

border-radius 可以分别用 1～4 个属性值来指定圆角的半径大小、位置等。这些属性值的顺序是：

top-left top-right bottom-right bottom-left

比如，我们要设置四个角的圆角半径为 5 像素，可以这样写：

border-radius: 5px;

同样的，我们也可以分别设置上左、上右、下右、下左四个角的圆角半径：

border-radius: 5px 10px 15px 20px;

6. list-style 简写规则

list-style 可以分别用多个属性值来指定列表项的符号类型、位置、颜色等。这些属性值的顺序是：

list-style-type list-style-position list-style-image

比如，我们要设置列表项符号为圆点、位置为内部、使用 bullet.png 图片作为列表项符号，可以这样写：

list-style: disc inside url('bullet.png');

7. text-decoration 简写规则

text-decoration 可以分别用多个属性值来指定文本装饰线的类型、位置、颜色等。这些属性值的顺序是：

text-decoration-line text-decoration-style text-decoration-color

比如，我们要设置文本装饰线类型为下划线、位置在文本下方、颜色为红色，可以这样写：

text-decoration: underline below #ff0000;

8. transition 简写规则

transition 可以分别用多个属性值来指定 CSS 属性过渡的时长、速度曲线、延迟时间等。这些属性值的顺序是：

transition-property transition-duration transition-timing-function transition-delay

比如，我们要让一个元素的背景颜色在 1 秒钟内逐渐变为红色，可以这样写：

transition: background-color 1s ease-in-out;

9. animation 简写规则

animation 可以分别用多个属性值来指定动画名称、时长、速度曲线、延迟时间等。这些属性值的顺序是：

animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state

比如，我们要制作一个简单的旋转动画，可以这样写：

@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

div {
  animation: spin 2s linear infinite;
}

10. flex 简写规则

flex 可以分别用多个属性值来指定 flex 容器或 flex 子项的弹性布局属性。这些属性值的顺序是：

flex-grow flex-shrink flex-basis

比如，我们要制作一个三列布局，左右两列宽度固定，中间列宽度自适应，可以这样写：

.container {
  display: flex;
}

.item-1 {
  flex: 0 0 200px;
}

.item-2 {
  flex: 1 1 auto;
}

.item-3 {
  flex: 0 0 200px;
}

以上就是 CSS 简写的十条规则，希望对大家有所帮助。