我的css框架——base.css(重设浏览器默认样式)

时间：2023-12-15

第一步：创建项目文件夹

在本地的文件夹中新建一个文件夹，该文件夹为该项目的文件夹，文件夹名称可以自行命名。在该文件夹中新建两个文件夹，一个为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>

第二个示例是为表格添加样式。我们可以在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>

这样，我们就可以使表格具有统一的样式，达到更好的可读性。

上一篇：兼做美工之导航条制作过程分享 下一篇：简单但很实用的5个css属性

我的css框架——base.css(重设浏览器默认样式)

相关文章