CSS 入门：设计你的网页样式

# Web 开发# 初学者# CSS

CSS（层叠样式表）是网页设计的基石。它允许您控制网站的外观和感觉，从颜色、字体到布局和动画。

1.什么是CSS？

CSS 是一种用于描述 HTML 文档呈现方式的语言。它定义了 HTML 元素在屏幕、纸张或其他媒体上的显示方式。

2.基本语法

CSS 规则由选择器和声明块组成：

selector {
  property: value;
}

例如：

body {
  background-color: lightblue;
}

这会将页面的背景颜色更改为浅蓝色。

3. 选择器

选择器允许您定位特定的 HTML 元素以应用样式。您可以通过以下方式选择元素：

  • 类型：p{} 针对所有段落。
  • 类： .my-class {} 针对具有类“my-class”的元素。
  • ID：#my-id {} 目标元素 ID 为“my-id”。

    • 4.盒子模型

    每个 HTML 元素都可以看作一个框，由以下部分组成：

  • 内容：里面的实际文本或媒体。
  • 填充：内容和边框之间的空间。
  • 边框：元素周围的轮廓。
  • 边距：边框外的空间，用于分隔元素。

    • 5. 通用属性

    颜色：颜色：红色；改变文本颜色。

  • 字体：font-size:16px；设置文字大小。
  • 背景：background-color: lightgray；改变背景颜色。
  • 宽度/高度：宽度：100%；和高度：200px；定义元素尺寸。

    • 6.响应式设计

    使用媒体查询让您的网页在所有设备上都看起来不错。例如：

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

    当屏幕宽度为 600px 或更小时，背景颜色会变为浅黄色。