CSS | 速记属性

CSS是前端必须掌握的基础知识之一，但是CSS代码太长会让人感到疲惫。为了让CSS代码更加简洁，我们需要掌握一些速记属性。

选择器

基本选择器

• *：通配符选择器，匹配任何元素。
• #id：id选择器，匹配id属性为id的元素。
• .class：class选择器，匹配class属性包含class的元素。
• element：元素选择器，匹配所有element元素。

组合选择器

• a, b：多元素选择器，选择a和b元素。
• a b：后代选择器，选择a元素下所有的b元素。
• a > b：子代选择器，选择a元素下所有直接子元素b。
• a + b：相邻兄弟选择器，选择a元素后的兄弟元素b。
• a ~ b：通用兄弟选择器，选择后面的所有兄弟元素b，而不是直接兄弟元素。

属性选择器

• [attr]：属性选择器，选择具有attr属性的元素。
• [attr=value]：属性值选择器，选择属性attr值为value的元素。
• [attr^=value]：前缀匹配选择器，选择属性attr值以value开头的元素。
• [attr$=value]：后缀匹配选择器，选择属性attr值以value结尾的元素。
• [attr*=value]：子串匹配选择器，选择属性attr值包含value的元素。

常用速记属性

background

background速记属性可设置元素的背景颜色、图片、重复方式和位置。

/* background-color | background-image | background-repeat | background-position */
background: #f00 url(bg.jpg) no-repeat top left;

font

font速记属性可设置字体的样式、粗细、大小和行高等。

/* font-style | font-variant | font-weight | font-size | line-height | font-family */
font: italic small-caps bold 12px/1.5 Arial, sans-serif;

padding和margin

padding和margin速记属性可设置元素的内边距和外边距。

/* padding-top | padding-right | padding-bottom | padding-left */
padding: 10px 20px 30px 40px;

/* margin-top | margin-right | margin-bottom | margin-left */
margin: 10px 20px 30px 40px;

border

border速记属性可设置元素的边框样式、粗细、颜色等。

/* border-width | border-style | border-color */
border: 1px solid #ccc;

结语

以上是CSS中常用的速记属性，掌握这些速记属性能够让我们更快更方便地书写CSS代码，提高开发效率。