<< 返回CSS教程

CSS 语法

#beijing, .tour.xiamen, .tour li:first-child {
  background-color: #eee;
}

CSS 语句

@charset

@charset "utf-8";

@import

@import 'custom.css';

@media

@media (min-width: 801px) {
  body {
    margin: 0 auto;
    width: 800px;
  }
}

@font-face

@support

@document

CSS 风格

空格

body {
  font: 1em/150% Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}
 
@media (min-width: 70em) {
  body {
    font-size: 130%;
  }
}
 
div p, #id:first-line {
  background-color: red;
  background-style: none;
}

注释

/* 
  从 https://stackoverflow.com/questions/12686065/set-line-height-as-a-percentage-relative-to-the-parent-element
  复制过来的，有人可以告诉我什么原理吗？🤔
*/
.block::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

缩写

padding: 10px 15px 15px 5px;

等价于

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

参考链接

• https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Syntax

• https://discourse.wicg.io/t/is-css-import-still-considered-as-an-anti-pattern/1967