water.css
1.0.0
？ CSS样式的摘要集合，以使简单的网站变得更好一些
我通常会制作简单内容的快速演示页或网站。为此，我不想花时间来对它们进行样式，但不喜欢默认样式的丑陋。
water.css是一个不需要任何类的CSS框架。您只将其包含在<head>中，然后忘记它，而它会使一切变得更好。
如果您正在制作一个简单的静态页面或演示网站，则可能需要使用water.css。
尽管它最初不是为更复杂的网站构建的，但许多开发人员将water.css用作基础样式表，并创造性地应用了自定义样式来构建整个应用程序。没有什么可以阻止您做同样的事情！
只需将其粘在您的<head>中：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.min.css">
演示页面上可以提供不同主题的预览！ ⚡
主water.css文件自动在光和黑暗模式之间根据用户设备的系统偏好进行切换。通过称为prefers-color-scheme的CSS媒体查询，该检测成为可能。在无法检测到偏好的浏览器中， water.css会坚持光主题。
如果要避免这种行为，请使用dark.css或light.css 。
CSS的所有三个分布都支持Internet Explorer 11，但是主要的water.css文件不尊重用户的配色方案，并且由于缺乏prefers-color-scheme支持，将锁定到光模式。
请注意，IE也不支持运行时主题，并且将使用固定的后备值。如果您想以与IE兼容的方式覆盖water.css主题，我们建议您编译自己的主题。
所有版本也可作为未经启示的样式表使用，在开发过程中可以方便。
只需从文件名中删除.min 。
您是否想进行一些调整或建立自己的主题与官方的黑暗或轻型主题完全不同？由于water.css是使用CSS变量构建的，这非常容易做到！这是您可以更改为喜欢的所有变量的列表：
--background-body--background--background-alt--selection--text-main--text-bright--text-muted--links--focus--border--code--animation-duration--button-hover--scrollbar-thumb--scrollbar-thumb-hover--form-placeholder--form-text--variable--highlight--select-arrow如果您使用版本支持Internet Explorer等旧浏览器，请跳过以编译自己的主题！
water.css使用自定义属性（ “ CSS变量” ）来定义其基本样式，例如颜色。这些可以在浏览器中更改和覆盖。
因此，您可以简单地将自己的样式表添加到页面上，并在此处设置自己的CSS变量。只要您的样式表在html中的water.css之后出现，您的价值将覆盖默认的值，并应用主题！
这个简短的示例将使用water.css，但是将所有链接变色为红色：
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/water.css@2/out/water.min.css " />
< style >
:root {
--links: red;
}
</ style >如果您只想更改黑暗或光模式的值，请使用这样的媒体查询：
< style >
:root {
--links: blue; /* Always applied */
}
@media (prefers-color-scheme: dark) {
:root {
--links: yellow; /* Only applied in dark mode (overrides blue) */
}
}
</ style >如果您针对浏览器而不支持CSS自定义属性（例如Internet Explorer），则运行时主题不是一个选项。要应用自己的主题，您需要在源文件本身中进行更改，然后重新编译CSS文件。这样的工作如下：
yarn以安装依赖项src/variables-*.css中进行主题更改yarn build以编译CSS文件out/ Directory中的编译文件您可能还需要查看贡献指南，因为它包含有关构建设置的更多信息。
当像您这样的人帮助使它变得更好时，Water.css对每个人都会变得更好！
查看我们的贡献指南，了解如何入门。
感谢您抽出宝贵的时间贡献！ :)
