什么是css文件？
CSS文件是指一种纯文本文件，其中包含对HTML或XML等文档的可视化呈现进行样式定义的CSS规则集。CSS文件中的规则集包括选择器和声明块。选择器用于定位文档中要应用样式的元素，声明块则包含一系列属性和值，用于定义应用于这些元素的样式。
使用CSS文件作为网站的一部分可以使得样式的修改变得更加容易。通过将所有样式相关的代码放在一个单独的CSS文件中，您可以轻松地修改整个网站的外观和布局，而无需在每个HTML文件中逐个修改样式。
CSS文件通常具有.CSS文件扩展名，并通过<link>元素链接到HTML文档中。当浏览器加载HTML文档时，它会读取<link>元素，然后下载并解析链接到的CSS文件。一旦CSS文件被下载和解析完成，浏览器将使用其中的样式来呈现文档中的元素。
以下是一个基本的HTML文档和一个CSS文件的示例：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>Welcome to my website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h2>About this website</h2>
<p>This is a simple website created to demonstrate how CSS can be used to style web pages.</p>
</main>
</body>
</html>
在上面的示例中，<link>元素被用来链接一个名为style.css的CSS文件。在CSS文件中，我们可以定义各种样式规则，例如修改文本颜色、字体、大小、背景图像等。以下是一个可能的CSS文件示例：
body {
font-family: Arial, sans-serif;
background-color: #eee;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav li a {
color: #fff;
text-decoration: none;
padding: 5px;
}
nav li a:hover {
background-color: #555;
}
在上面的样式规则中，我们选择了不同的元素并为它们定义样式。例如，我们选择了<body>元素并为其定义了字体和背景颜色。我们还选择了<header>元素，并为其定义了背景颜色、字体颜色和填充等样式。最后，我们选择了<nav>元素以及嵌套的<ul>、<li>和<a>元素，并为它们定义了样式。
总之，CSS文件是一种用于定义HTML或XML文档的可视化呈现的样式的纯文本文件。通过使用CSS文件，我们可以将样式相关的代码和HTML代码分离，以使得在修改外观和布局时变得更加容易。
