基础 CSS 标注基础知识

什么是 CSS

CSS （Cascading Style Sheets）是一种用于描述文档样式的语言，用于将页面表现和内容分离，使得样式的修改不需要改变页面代码。

CSS 的语法格式

CSS 是由属性和属性值组成的键值对形式，通过选择器来选择 HTML 元素，给元素设置 CSS 样式。CSS 的基本语法格式如下：

selector {
   property1: value1;
   property2: value2;
   ...
}

• selector 用于选择 HTML 元素
• property 是要设置的 CSS 属性
• value 是 CSS 属性的值

例如：

h1 {
   color: red;
   font-size: 24px;
}

这段 CSS 代码的含义是：选择所有 <h1> 元素，并将它们的文字颜色设置为红色，并将字体大小设置为 24 像素。

CSS 的基本选择器

CSS 选择器可以选择 HTML 文档中的元素，并对其进行样式设置。以下是 CSS 的基本选择器：

• 元素选择器：通过元素名称选择 HTML 元素
• 类选择器：通过 class 属性选择 HTML 元素
• ID 选择器：通过 id 属性选择 HTML 元素
• 属性选择器：通过元素的属性选择 HTML 元素
• 通配符选择器：选择 HTML 文档中的所有元素
• 组合选择器：可以同时使用多个选择器

例如：

/* 元素选择器 */
h1 {
   color: blue;
}

/* 类选择器 */
.warning {
   color: red;
}

/* ID 选择器 */
#main-content {
   font-size: 16px;
}

/* 属性选择器 */
input[type="text"] {
   border: 1px solid gray;
}

/* 通配符选择器 */
* {
   margin: 0;
   padding: 0;
}

/* 组合选择器 */
div p {
   font-size: 18px;
}

层叠和继承

CSS 样式可以同时应用于多个元素，但是如果多个样式对同一个元素应用不同的 CSS 样式，那么该元素将具有多个样式。这个问题被称为层叠。

CSS 样式也可以继承，即子元素可以继承父元素的样式属性。

例如：

/* 颜色层叠 */
h1 {
   color: blue;
}

h1 {
   color: red;
}

/* 字体继承 */
.parent {
   font-size: 16px;
}

.child {
   font-size: inherit;
}

CSS 盒模型

CSS 盒模型定义了 HTML 元素的大小和位置。它包括以下几个部分：

• Content（内容）：显示在盒子中的内容，例如文字、图像等。
• Padding（内边距）：包围内容的空白区域，透明。
• Border（边框）：包围内边距的区域，可以有颜色、宽度等属性。
• Margin（外边距）：包围边框的区域，用于控制盒子与其他元素之间的距离。

默认情况下盒模型是 content-box，它的大小取决于设置的内容区域大小。但是可以通过 box-sizing 属性来设置为 border-box，它的大小包括了 padding 和 border。

例如：

/* content-box */
.box1 {
   width: 200px;
   height: 100px;
   border: 1px solid gray;
   padding: 10px;
   margin: 20px;
}

/* border-box */
.box2 {
   width: 200px;
   height: 100px;
   border: 1px solid gray;
   padding: 10px;
   margin: 20px;
   box-sizing: border-box;
}

总结

本文介绍了 CSS 的基础知识，包括 CSS 的语法格式、选择器、层叠和继承、CSS 盒模型等。学会这些基础知识将有助于您更好地理解 CSS 并能够编写出更加优秀的网页样式。