基础 CSS 揭示基础

CSS是层叠样式表(Cascading Style Sheets)的缩写，用于控制网页的样式，包括布局、颜色、字体、大小、边距、背景等各种效果。

CSS的基础语法

CSS的基本语法由选择器和声明块组成。选择器指定要应用样式的 HTML 元素，声明块则包含一个或多个属性值对。

selector {
  property: value;
  property: value;
  property: value;
}

• 选择器：是一组字符，用于标识 HTML 文档中的一个或多个元素。
• 声明块：由一对花括号 {} 包围，其中包含一个或多个属性值对，每个属性值对以分号 ; 分隔。
• 属性值对：属性（property）指定要修改的样式属性，值（value）指定要应用于该属性的值。

CSS的选择器

标签选择器

标签选择器指定要应用样式的 HTML 元素标签名。

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

类选择器

类选择器指定应用样式的 HTML 元素的class属性。

.my-class {
  color: green;
  font-size: 18px;
}

ID选择器

ID选择器指定应用样式的 HTML 元素的id属性。

#my-id {
  color: blue;
  font-size: 20px;
}

子元素选择器

子元素选择器指定应用样式的 HTML 元素的子元素。

.parent > .child {
  color: purple;
  font-size: 22px;
}

CSS的盒子模型

HTML中的每个元素都可以看作是一个盒子，它由四个部分组成：外边距（margin）、边框（border）、内边距（padding）和内容区域（content）。

盒子模型对于设计布局和排版非常重要。

CSS的定位属性

CSS的定位属性可以让页面元素沿着不同的轴线进行移动和定位，包括相对定位、绝对定位、固定定位和粘性定位。

.relative {
  position: relative;
  left: 50px;
  top: 50px;
}

.absolute {
  position: absolute;
  right: 50px;
  bottom: 50px;
}

.fixed {
  position: fixed;
  right: 0;
  bottom: 0;
}

.sticky {
  position: sticky;
  top: 0;
}

以上就是基础 CSS 的一些组成部分，掌握了这些内容，就能够基本掌握 CSS 的基础知识了。