CSS（层叠样式表）是一种用来描述HTML或XML文档样式的样式表语言。它允许你将文档的内容和格式分离，使得网页更加美观和易于维护。

CSS 基础

选择器

CSS 选择器用于选择页面中的元素。以下是一些常用的选择器：

  • 元素选择器：选择所有指定类型的元素，例如 p 选择所有 <p> 元素。
  • 类选择器：选择所有具有指定类的元素，例如 .class 选择所有具有 class="class" 的元素。
  • ID 选择器：选择具有指定ID的元素，例如 #id 选择具有 id="id" 的元素。

属性

CSS 属性定义了元素的样式。以下是一些常用的属性：

  • color：设置文本颜色。
  • background-color：设置元素的背景颜色。
  • font-size：设置文本大小。
  • padding：设置元素的内边距。
  • margin：设置元素的外边距。

选择器与属性结合

以下是一个简单的例子：

p {
    color: red;
    font-size: 16px;
}

这段代码会将所有 <p> 元素的文本颜色设置为红色，字体大小设置为16像素。

CSS 进阶

媒体查询

媒体查询允许你根据不同的屏幕尺寸或设备类型应用不同的样式。

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

这段代码会在屏幕宽度小于或等于600像素时，将背景颜色设置为蓝色。

响应式设计

响应式设计是指网页能够适应不同的屏幕尺寸和设备类型。这通常通过使用媒体查询和灵活的布局来实现。

扩展阅读

想要了解更多关于CSS的知识，可以访问本站CSS教程。

CSS Example