CSS调用的基础知识与应用

在网页设计中，CSS（层叠样式表）是一种用于描述HTML元素在屏幕上如何显示的语言，通过CSS，我们可以控制网页的布局、颜色、字体等视觉效果，本文将介绍CSS调用的基础知识与应用，帮助大家更好地理解和使用CSS。

CSS的基本概念

1、选择器：选择器是用来选取HTML元素的模式，它可以是一个标签名、类名、ID名或者属性名等。

2、声明块：声明块是由一对大括号包围的一组CSS规则，用于设置选中元素的样式。

3、属性和值：每个CSS规则由一个或多个属性-值对组成，属性是我们要设置的样式名称，值是我们要设置的样式效果。

4、优先级：当多个CSS规则应用于同一个元素时，优先级高的样式会覆盖优先级低的样式。

1、内联样式：在HTML元素的标签内使用“style”属性直接写入CSS规则，这种方法适用于单个元素的样式设置。

<p style="color: red; font-size: 16px;">这是一个红色的段落。</p>

2、内部样式：在HTML文档的<head>标签内使用<style>标签编写CSS规则，这种方法适用于多个元素的样式设置。

<!DOCTYPE html>
<html>
<head>
<style>
  p {
    color: red;
    font-size: 16px;
  }
</style>
</head>
<body>
<p>这是一个红色的段落。</p>
</body>
</html>

3、外部样式：将CSS规则编写在一个单独的.css文件中，然后在HTML文档中使用<link>标签引入该文件，这种方法适用于多个页面共享同一套样式的情况。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>这是一个红色的段落。</p>
</body>
</html>

1、文本样式：通过设置字体、字号、颜色、行高等属性，可以改变文本的外观。

p {
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #333;
  line-height: 1.5;
}

2、容器样式：通过设置宽度、高度、边框、背景等属性，可以改变容器的外观。

div {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
}

3、布局样式：通过设置浮动、定位、弹性盒等属性，可以实现复杂的页面布局。

.container {
  display: flex; /* 使用弹性盒布局 */
}
.item {
  flex: 1; /* 子项平均分配剩余空间 */
}