前端之css层叠样式表一

作者：System 时间：2024年08月07日分类：所有,css 字数：1029

CSS层叠样式表（Cascading Style Sheets, CSS）是一种用来描述HTML或XML（包括各种XML方言，如SVG，MathML等）文档样式的语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS的主要目的是确定页面元素如何展示，包括颜色、布局、字体、边距、宽度、高度等。

CSS的基本语法规则包括选择器和声明，其中每条声明由一个属性和一个值组成。

以下是一些CSS的基本使用示例：




p {
  color: red;
  font-family: Arial, sans-serif;
}




div {
  width: 100px;
  height: 100px;
  background-color: blue;
}




h1 {
  border: 1px solid black;
  margin: 20px;
}




span {
  display: block;
}




body {
  background-image: url('background.jpg');
}

CSS可以通过多种方式应用到HTML文档中，包括外部样式表、内部样式表和内联样式。

例如，外部样式表可以通过以下方式链接：




<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

内部样式表可以直接在HTML的<head>部分编写：




<head>
  <style>
    p { color: red; }
  </style>
</head>

内联样式直接在元素的style属性中设置：




<p style="color: blue;">This is a paragraph.</p>

CSS是前端开发中一个非常重要的部分，可以实现页面的样式和布局，提高用户的体验。