CSS Reset 是指为了消除浏览器默认样式而在样式表最前面插入一段样式的技术。通常情况下，这段样式会覆盖掉大部分元素的所有默认样式，以达到更好的重置样式的目的。但是在进行 CSS Reset 时，我们需要手描一些万年不变的规则，以确保样式表的一些基本设置不会丢失。
在本文中，我们将讨论在 CSS Reset 时手描不描万年不变的规则的方法、原因和示例代码。
为什么要手描万年不变的规则
CSS Reset 有许多优点，如更好的跨浏览器一致性、更好的样式控制等。然而，在进行 CSS Reset 时，我们需要谨慎地处理一些基本样式，以确保页面样式正常显示。这些基本样式通常包括：
- 字体设置
- 链接样式
- 表单元素样式
- 图片样式
- 列表样式
- 标题样式
如果在 CSS Reset 时没有手描这些基本样式，那么在页面重置样式后，这些样式都将丢失，从而导致页面样式出现问题。因此，为了确保页面样式正常显示，我们需要手描这些万年不变的规则。
如何手描万年不变的规则
手描万年不变的规则并不困难，只需要在 CSS Reset 的基础上添加一些必要的样式即可。下面是一个简单的 CSS Reset 样例：
-----
-----
----
-----
-------
-------
-------
---
---
---
---
---
---
--
-----------
----
--
-----
--------
--------
----
-----
-----
----
----
---
-----
----
----
----
--
--
-----
------
-------
-------
----
----
---
----
--
--
--
-------
---
---
---
---
---
---
---------
-----
------
-------
------
--------
------
------
------
---
---
-- -
------- --
-------- --
------- --
---------- -----
----- --------
--------------- ---------
-在这个样例中，我们重置了页面中大部分元素的样式。然而，我们需要手描以下样式：
1. 字体设置
在 CSS Reset 时，字体设置非常重要。如果我们没有正确地设置字体类型和大小，那么页面可能会显得很奇怪。因此，我们需要手描以下字体设置：
---- - ------------ ---------- ------ ---------- ------ ----------- ---------- ----- ------------ ---- -
在这个样例中，我们设置了页面的默认字体为 "Helvetica Neue"，当这个字体不可用时，默认会使用 Helvetica、Arial 或 sans-serif。我们还设置了页面的默认字体大小为 16px，并设置了行高为 1.5。
2. 链接样式
在 CSS Reset 时，链接样式也非常重要。如果我们没有正确地设置链接的样式，那么用户可能无法清楚地了解页面中的链接。因此，我们需要手描以下链接样式：
- - ------ -------- ---------------- ----- ----------------- ------------ - -- ----- -- ------- - ------ -------- ---------------- ---------- - -- ------ -- -------- - ------ -------- - -- ------- -- --------- - ------ -------- ---------------- ----- -
在这个样例中，我们设置了链接的默认颜色为 #007aff，去掉了默认的下划线，使链接背景透明。当用户悬停在链接上时，我们对链接进行了下划线的样式。当用户点击链接时，我们将链接颜色设置为 #ff3b30。最后，我们还设置了访问过的链接的默认颜色为 #007aff。
3. 表单元素样式
在 CSS Reset 时，我们需要处理表单元素的样式，以确保页面样式正常显示。因此，我们需要手描以下表单元素样式：
------------------- ----------------------- -------- - ---------- ----- ------------ ---- -------- ----- -------------- ---- ------- ----- --- -------- -------- -- ----------- ------------ ---- ------------ - -- ----- -- ------------------------- ----------------------------- -------------- - ------------- -------- - -- ----- -- ------------------------- ----------------------------- -------------- - ------------- -------- -
在这个样例中，我们设置了输入框、密码框和文本框的默认字体大小、行高和内边距。我们还设置了这些元素的默认边框颜色、样式和半径。在用户悬停在这些元素上时，我们将边框颜色设置为 #34495e。当用户点击这些元素时，我们将边框颜色设置为 #1abc9c。
4. 图片样式
在 CSS Reset 时，我们也需要处理图片的样式，以确保页面样式正常显示。因此，我们需要手描以下图片样式：
--- - ---------- ----- ------- ----- --------------- ------- ------- -- ------------------------ ---------- ----------------------- ------------ ---------- -------------- -
在这个样例中，我们设置了图片的默认最大宽度为 100%，自适应高度并垂直居中。我们还取消了图片默认的边框样式，并对其进行了兼容性处理。
5. 列表样式
在 CSS Reset 时，我们也需要处理列表的样式，以确保页面样式正常显示。因此，我们需要手描以下列表样式：
--- -- - -------------------- ------- ------- - - ---- -- -------- -- -
在这个样例中，我们设置了默认列表项的位置为内部，并设置了列表的默认外边距和内边距。
6. 标题样式
在 CSS Reset 时，标题样式也非常重要。如果我们没有正确地设置标题的样式，那么用户可能无法清楚地理解页面中的重要信息。因此，我们需要手描以下标题样式：
--- --- --- --- --- -- - ------- - - ---- -- ------------ ---- ------------ ---- -
在这个样例中，我们设置了默认标题的外边距、字体粗细和行高。
示例代码
下面是一个完整的手描万年不变规则的样例代码：
-----
-----
----
-----
-------
-------
-------
---
---
---
---
---
---
--
-----------
----
--
-----
--------
--------
----
-----
-----
----
----
---
-----
----
----
----
--
--
-----
------
-------
-------
----
----
---
----
--
--
--
-------
---
---
---
---
---
---
---------
-----
------
-------
------
--------
------
------
------
---
---
-- -
------- --
-------- --
------- --
---------- -----
----- --------
--------------- ---------
-
---- -
------------ ---------- ------ ---------- ------ -----------
---------- -----
------------ ----
-
- -
------ --------
---------------- -----
----------------- ------------
-
-- ----- --
------- -
------ --------
---------------- ----------
-
-- ------ --
-------- -
------ --------
-
-- ------- --
--------- -
------ --------
---------------- -----
-
-------------------
-----------------------
-------- -
---------- -----
------------ ----
-------- -----
-------------- ----
------- ----- --- --------
-------- --
----------- ------------ ---- ------------
-
-- ----- --
-------------------------
-----------------------------
-------------- -
------------- --------
-
-- ----- --
-------------------------
-----------------------------
-------------- -
------------- --------
-
--- -
---------- -----
------- -----
--------------- -------
------- --
------------------------ ----------
----------------------- ------------
---------- --------------
-
---
-- -
-------------------- -------
------- - - ---- --
-------- --
-
---
---
---
---
---
-- -
------- - - ---- --
------------ ----
------------ ----
-结论
在进行 CSS Reset 时，我们需要手描一些万年不变的规则，以确保页面样式正常显示。这些规则包括字体设置、链接样式、表单元素样式、图片样式、列表样式和标题样式等。我们可以在 CSS Reset 的基础上添加这些规则，以构建一个更加完善的网站样式表。
希望本文的解释对新手来说足够清晰，并对那些想找到更好的 CSS Reset 的 Web 开发人员有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67209a922e7021665e030588