初步总结CSS

CSS (Cascading Style Sheets) 是用于描述网页样式的语言。以下是一些关键概念和示例：

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

p { color: blue; } /* 所有段落文本变蓝色 */

2. 属性和值：改变元素的样式。

p { font-size: 16px; } /* 段落字体大小为16像素 */

3. 层叠：多个样式规则可以应用于同一元素。

p { color: red; }
p { font-size: 16px; } /* 段落文本为红色，大小为16像素 */

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

body { font-family: Arial; }

5. 类和ID：为元素定义特定的类名或ID，可以通过CSS选择器应用样式。

<style>
  .highlight { background-color: yellow; }
</style>
<p class="highlight">这段文本背景为黄色。</p>

6. 盒模型：描述如何组合各个盒子。

div {
  width: 300px;
  padding: 20px;
  border: 1px solid black;
  margin: 10px;
}

7. 布局：使用浮动、定位等技术进行布局。

<style>
  .float-right { float: right; }
</style>
<div>
  <img src="image.jpg" class="float-right">
  <p>图片浮动到右边。</p>
</div>

8. 媒体查询：响应式设计，根据屏幕大小应用不同样式。

@media (max-width: 600px) {
  body { background-color: lightblue; }
}

9. 伪类和伪元素：用于特定状态的元素。

a:hover { color: red; } /* 鼠标悬停时超链接变红 */

10. 字体和文本：控制字体、大小、样式和颜色。

body {
  font-family: 'Arial', sans-serif;
  color: #333333;
}

这些是CSS的基础概念，实际应用中还会涉及到更高级的特性，如盒子阴影、转换、动画等。