css 基础知识

CSS（层叠样式表）是用于描述网页中元素样式和布局的一种标记语言。以下是一些CSS的基础知识：

1. 选择器：选择器用于选择HTML文档中的元素，并为其应用样式。常见的选择器有标签选择器、类选择器和ID选择器。

• 标签选择器：使用HTML标签名作为选择器，可以选择所有匹配该标签的元素。例如，p选择器会选择所有的<p>标签。
• 类选择器：使用.加上类名作为选择器，可以选择具有该类名的元素。例如，.my-class选择器会选择所有具有class="my-class"的元素。
• ID选择器：使用#加上ID名作为选择器，可以选择具有该ID的元素。例如，#my-id选择器会选择具有id="my-id"的元素。

2. 属性和值：CSS属性用于定义元素的样式，每个属性都有对应的值。

• 颜色属性：用于设置元素的文本颜色、背景颜色等。常见的颜色表示方式有具体的颜色名（如red）、RGB值（如rgb(255, 0, 0)）和十六进制值（如#FF0000）。
• 字体属性：用于设置元素的字体样式，如字体大小、字体族等。例如，font-size属性用于设置字体大小，可以使用像素值（如16px）或百分比值（如100%）。
• 边框属性：用于设置元素的边框样式，如边框宽度、边框颜色等。例如，border属性用于设置边框的样式，可以指定边框宽度、边框样式和边框颜色。
• 背景属性：用于设置元素的背景样式，如背景颜色、背景图片等。例如，background-color属性用于设置背景颜色，可以使用颜色值。
• 定位属性：用于设置元素的位置和布局方式。例如，position属性用于设置元素的定位方式，常见的值有static（默认值，按照文档流布局）、relative（相对定位）和absolute（绝对定位）。

3. 盒模型：盒模型描述了元素的尺寸和布局，由内容区域、内边距、边框和外边距组成。

• 内容区域：元素的实际内容所占据的空间。
• 内边距：内容区域与边框之间的空间。
• 边框：围绕内容区域和内边距的线条。
• 外边距：边框与相邻元素之间的空间。

通过设置属性，可以控制盒模型的各个部分的大小。

4. 布局：CSS可以用于控制网页的布局，常见的布局方式有流动布局、浮动布局和定位布局。

• 流动布局：元素按照文档流从上到下排列。默认情况下，块级元素会独占一行，行内元素则会在同一行显示。
• 浮动布局：元素可以向左或向右浮动，使得其他元素可以环绕在其周围。通过设置float属性可以实现浮动布局。
• 定位布局：通过设置position属性可以控制元素的位置。常见的定位方式有相对定位、绝对定位和固定定位。

5. 层叠和继承：CSS中的层叠指的是多个样式规则应用于同一个元素时，如何确定最终的样式。CSS中的继承指的是某些样式属性可以从父元素继承给子元素。

• 层叠样式：当多个样式规则应用于同一个元素时，会根据样式规则的优先级和特殊性来决定最终的样式。可以通过提高样式规则的优先级、使用!important关键字或修改样式规则的特殊性来控制层叠样式。
• 继承样式：某些样式属性可以从父元素继承给子元素。例如，字体样式和文本颜色可以从父元素继承给子元素。

6. 媒体查询：CSS中的媒体查询可以根据设备的特性来应用不同的样式，实现响应式布局。通过使用@media规则和媒体查询条件，可以根据设备的特性（如屏幕宽度、分辨率等）来应用不同的样式。例如，可以根据屏幕宽度来调整元素的大小和布局，以适应不同的设备。

下面是示例：

1. 选择器：

/* 标签选择器 */
p {
  color: red;
}

/* 类选择器 */
.my-class {
  font-size: 16px;
}

/* ID选择器 */
#my-id {
  background-color: blue;
}

2. 属性和值：

/* 设置字体颜色 */
h1 {
  color: #FF0000;
}

/* 设置边框 */
div {
  border: 1px solid black;
}

/* 设置背景图片 */
body {
  background-image: url("background.jpg");
}

3. 盒模型：

/* 设置元素宽度和高度 */
div {
  width: 200px;
  height: 100px;
}

/* 设置内边距和外边距 */
p {
  padding: 10px;
  margin: 20px;
}

/* 设置边框样式 */
img {
  border: 2px dashed gray;
}

4. 布局：

/* 流动布局 */
div {
  float: left;
}

/* 定位布局 */
h1 {
  position: absolute;
  top: 50px;
  left: 100px;
}

/* 弹性布局 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

5. 层叠和继承：

/* 层叠样式 */
p {
  font-size: 16px;
  color: red;
}

/* 继承样式 */
div {
  font-size: inherit;
  color: inherit;
}

6. 媒体查询：

/* 响应式布局 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

以上是一些基础的CSS代码示例，希望对你理解CSS有所帮助