css 初始化设置

前端之光照耀着我前进
325 阅读3分钟

基本初始化代码

以下是一份比较常见的初始化 CSS 代码，可以帮助清除浏览器默认样式并为不同的 HTML 元素设置一些通用的样式：

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
  margin: 0;
}

/* Remove default padding */
body,
p {
  padding: 0;
}

/* Remove list styles on ul, ol elements */
ul,
ol {
  list-style: none;
}

/* Set default font family and font size */
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

/* Set a default background color */
body {
  background-color: #fff;
}

这段代码中，我们采用了一些通用的样式规则来初始化 CSS，例如：

  • 设置所有元素的盒模型为 border-box。
  • 移除 body 元素和一些常见的文本元素的 margin 和 padding。
  • 移除无序列表和有序列表的默认样式（如圆点或数字）。
  • 设置默认的字体家族（Arial, sans-serif）和字体大小（16px）。
  • 设置默认的背景颜色为白色。

需要注意的是，这份初始化 CSS 只是一个基础模板，根据具体的项目需求和设计规范，你可能需要添加或修改一些样式规则。

:root 选择器

在 CSS 中，:root 选择器用于选取文档根元素（即 HTML 元素），可以用于定义全局的 CSS 变量或者设置文本的默认字体大小等样式。

一般来说，:root 选择器是用于设置全局的 CSS 变量的。CSS 变量是一种比较新的 CSS 特性，它允许你定义一个变量，然后在代码中多处使用这个变量，从而方便地管理和更新样式。例如：

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
}

.button {
  background-color: var(--primary-color);
  color: #fff;
}

.button-secondary {
  background-color: var(--secondary-color);
  color: #fff;
}

在上面的代码中，我们使用 :root 选择器定义了两个 CSS 变量 --primary-color 和 --secondary-color，然后在 .button 和 .button-secondary 类中使用了这两个变量来定义背景色和文字颜色。这样，如果我们需要修改主题色或者颜色方案，只需要修改这两个变量的值即可，而不用修改每一个使用到这个颜色的地方。

除了定义 CSS 变量之外，:root 选择器也可以用于设置文本的默认字体大小等样式，例如：

:root {
  font-size: 16px;
}

p {
  font-size: 1.2em;
}

在上面的代码中，我们使用 :root 选择器设置了默认的字体大小为 16px，然后在 p 元素中使用了相对单位 em 来设置字体大小为默认大小的 1.2 倍。这样，如果我们需要修改默认字体大小，只需要修改 :root 中的 font-size 即可，而不用修改每一个使用到字体大小的地方。

font-family

font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;

这段代码定义了一个字体族（font-family），表示在渲染文本时应该使用哪些字体。

具体来说，这段代码指定了一组字体，按照顺序依次尝试使用。如果第一个字体不可用，则使用第二个字体，以此类推，直到找到可用的字体为止。

在这个例子中，字体族的优先级从高到低依次为：

  1. Inter
  2. system-ui
  3. Avenir
  4. Helvetica
  5. Arial
  6. sans-serif

其中，Inter 是一个自定义的字体，它可能是通过 @font-face 规则定义的，或者是从某个外部字体库引入的。如果 Inter 字体不可用，则尝试使用系统自带的默认字体（system-ui），如果还不行，则依次尝试使用 Avenir、Helvetica、Arial 等常见字体，最后使用 sans-serif 作为备用字体。

这种字体族的设置方式可以保证文本在各种设备和浏览器中都能得到较好的渲染效果，即使某些字体在某些设备上不可用，也可以使用备用字体来保证文本的可读性。

avatar
文章
阅读
粉丝