第一步：创建项目文件夹
在本地的文件夹中新建一个文件夹，该文件夹为该项目的文件夹，文件夹名称可以自行命名。在该文件夹中新建两个文件夹，一个为css文件夹，另一个为img文件夹。
第二步：创建base.css文件
在css文件夹中创建base.css文件，并编写基本的代码，如下所示：
/* 重设浏览器默认样式 */
/* 通用样式 */
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
/* 链接 */
a {
color: #333;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* 图片 */
img {
max-width: 100%;
height: auto;
}
/* 表格 */
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
/* 表单 */
input, button, textarea, select {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
border-radius: 0;
}
这段代码是一个基本的CSS重置样式，可以重设浏览器默认样式，使页面在不同浏览器中表现基本一致。其中，box-sizing用来设置盒模型为border-box，这样可以方便地设置元素的width和height属性。通用样式的设置可以使元素使用相同的盒模型。
第三步：在HTML文件中引入base.css文件
在HTML文件的
标签中引入base.css文件，代码如下所示：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网站标题</title>
<link rel="stylesheet" href="./css/base.css">
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
通过这样的方式，就可以在HTML中使用base.css文件中的样式了。
示例：
假设我们要设置所有的H1标题的字体颜色为红色，可以在base.css文件中添加以下代码：
h1 {
color: red;
}
在HTML文件中添加H1标题时，只需要添加
标签即可，无需添加style属性或者内联样式。如下所示：
<h1>这是一个H1标题</h1>
<h1>这是一个H1标题</h1>
第二个示例是为表格添加样式。我们可以在base.css文件中添加以下代码：
/* 表格 */
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
在HTML文件中添加表格：
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>女</td>
</tr>
</table>
这样，我们就可以使表格具有统一的样式，达到更好的可读性。
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！