CSS快速入门

在CSS中，可以通过多种方式快速入门。以下是一些基本概念的示例：

1. 选择器：选择页面元素。

/* 选择所有的段落 */
p {
  color: blue;
}
 
/* 选择ID为"header"的元素 */
#header {
  background-color: yellow;
}
 
/* 选择所有的类名为"important"的元素 */
.important {
  font-weight: bold;
}

2. 属性：修改元素的样式。

/* 设置元素的宽度和高度 */
div {
  width: 100px;
  height: 100px;
}
 
/* 设置边框的样式 */
p {
  border: 1px solid black;
}
 
/* 设置背景颜色 */
div {
  background-color: #f0f0f0;
}

3. 层叠：多个样式规则可以叠加。

/* 在其他CSS样式后叠加文本颜色 */
p {
  color: red;
}
 
/* 如果两个选择器选中了同一个元素，以最后的规则为准 */
p {
  color: blue;
}

4. 继承：子元素可以继承父元素的某些样式。

/* 链接的默认颜色是继承自父元素的 */
a {
  color: red;
}

5. 优先级：当多个选择器选中同一元素时，决定哪个规则被应用。

/* 内联样式优先级最高 */
p {
  color: red;
}
 
<p style="color: blue;">这是蓝色的文本。</p>

6. 布局：使用CSS进行页面布局。

/* 简单的浮动布局 */
.left {
  float: left;
  width: 100px;
}
 
.right {
  float: right;
  width: 100px;
}
 
.content {
  margin: 0 100px;
}

7. 媒体查询：响应式设计，根据屏幕大小调整样式。

/* 当屏幕宽度小于600px时，应用这些样式 */
@media screen and (max-width: 600px) {
  .left, .right {
    float: none;
    width: auto;
  }
 
  .content {
    margin: 0;
  }
}

这些是CSS的基础概念，可以帮助你快速了解CSS的基本使用方法。随着学习的深入，你可能还需要了解更高级的特性，如Flexbox布局、Grid布局、动画、变换等。