让浏览器默认样式变得好看的一款 CSS 框架

让浏览器默认样式变得好看的一款 CSS 框架

doudou.css

浏览器自带的标签样式实在是太难看了，不手动编写 CSS 是根本没法看的！

doudou.css 提供了一系列全局级别的样式定义。只需引用这个 CSS 文件，不用做任何额外的事情，就能让浏览器渲染出漂亮的页面。

* 开发目的

和 Bootstrap 等传统 CSS 框架最大的不同之处在于，doudou.css 使用标签选择器定义样式。也就是说，覆盖了浏览器对标签默认的表现方式。

曾经在开发 Java Swing 程序时，用过一款界面美化组件 BeautyEye，导入至工程后，只需在入口处添加数条代码就能让原本丑陋的默认界面变得美观。doudou.css 和该项目的定位相似，当然，在这里你除了导入 CSS 文件外并不需要再添加任何代码。

功能和定位

消除各浏览器渲染标签时的差异。重写浏览器自带的标签样式，使其变得美观好看。直接按照 HTML 规范进行开发即可，无需顾虑 CSS 框架的使用方法。

这是一个美化版的 "Reset CSS"。

作为一个 web 页面第一个导入的 CSS 样式，开发的起点。（可代替 normalize.css）

准则

编写符合大众审美的样式。简约风格，能适用于所有类型的网站，便于二次开发。

* 使用方法

特别说明：由于 doudou.css 提供的是全局样式，所以你不能在导入它之后又导入其他的 CSS 框架，例如 Bootstrap。

直接链接

将下面的代码添加在 HTML 页面的 标签中，即可引用最新版本的 doudou.css：

-源文件

请使用上面代码中的链接- CSS 文件，然后在本地引用，更稳定，并且通常会获得更快的加载速度。

https://github.com/h2y/doudou.css/archive/1.x.zip

NPM

npm i github:h2y/doudou.css#1.x --save

* 效果展示

图右为标签的浏览器原始样式，左图为使用 doudou.css 之后的效果。

* 开发须知

doudou.css 重写的标签仅为 HTML 规范内的标签，遵循 MDN 提供的 HTML5 标签列表。

本项目采用 glup 构建，Less 来编写样式。/lib 为源代码目录，/dist 为输出目录。

你可能需要以下的命令进行开发：

# clone the projectgit clone https://github.com/h2y/doudou.css.gitcd doudou.css/# install dependenciesnpm i --dev# code in /lib ...# build cssnpm run start

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。