CSS快速入门

CSS（层叠样式表）是一种用来为网页添加样式的语言。以下是一些CSS的基本概念和示例代码：

1. 选择器：用于选定需要应用样式的HTML元素。

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

2. 属性和值：定义如何显示选择的元素。

/* 设置段落的字体大小和颜色 */
p {
  font-size: 16px;
  color: red;
}

3. 类和ID：用于定义可重用的样式。

/* 类可以被应用于任何元素 */
.button {
  padding: 8px 16px;
  border: 1px solid black;
  background-color: green;
}
 
/* ID是唯一的，通常用于页面内的元素 */
#nav {
  list-style-type: none;
}

4. 层叠：当多个样式应用于同一元素时，具体性越具体的选择器优先级越高。

/* 通配选择器 */
* {
  color: black;
}
 
/* ID选择器将覆盖通配选择器 */
#header {
  color: white;
}

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

/* 简单的布局 */
.container {
  width: 80%;
  margin: 0 auto;
}
 
.header {
  height: 100px;
  background-color: #333;
}
 
.content {
  padding: 20px;
}
 
.footer {
  text-align: center;
  background-color: #555;
  color: white;
}

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

/* 在屏幕宽度小于600px时，应用这些样式 */
@media (max-width: 600px) {
  .container {
    width: 100%;
  }
}

CSS是网页设计的基础，有了它，你就可以创建美观的网页，而不需要在HTML中编写大量的样式代码。