yui学习笔记（二）----使用css工具保持一致性

最新推荐文章于 2025-08-18 20:44:42 发布

原创最新推荐文章于 2025-08-18 20:44:42 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #工具 #yui #border #stylesheet #浏览器

javascript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍四个关键CSS工具：fonts.css, grids.css, reset.css 和 base.css。这些工具用于标准化元素样式、提供基本样式设定并实现自动居中布局及底部脚部自适应。reset.css用以消除浏览器间的默认样式差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

四个css工具：fonts,grids,reset,base

使元素标准化的reset.css

以下普通而常用的元素都将margin和padding值标准化到0

the document body

div and p

所有list 元素：dl,dt,dd,ul,ol,li

标题级元素：h1,h2,h3,h4,h5,h6

pre和blockquote元素

某些表单元素：form,fieldset,input,textarea

table元素：th，td

接下来要标准化的元素是table元素，将其border设为0，图像元素的border也设为0.

防止在某些浏览器中字体会变斜体或粗体，一下元素将font-style和font-weight设为normal:

address

caption

cite

code

dfn

strong

var

接下来的规则是对有序和无序的html list元素，设置list-style为 none。将caption和th元素的对齐方式都严格设为左对齐

所有的标题级元素的font-size设为100%，font-weight:normal，有效地将所有标题类型设为相同的尺寸和粗细。

最后提供的样式规则是针对:before和:after，他将伪元素前后插入的内容设为空。

关于:before伪元素，在元素内容之前插入内容。这个伪元素允许创作人员在元素内容最前插入生成内容。默认地，这个伪元素是行内元素，不过可以使用display改变这一点。

<style>

div:after{content:'Hello';}

</style>

<div>World</div>

base.css

reset.css统一了不同浏览器中的默认css样式，base.css在此基础上提供了对常用元素的基本样式设置。

标题级

lists

table

清除文字样式的fonts.css

body上：

*font-size:small以及*font:x-small 为了在ie中设置font-size，纠正font-size在css1标准中的特点。

table上：

ie hack方法，ie中总显得有些小，将字体设置为108%，而其他浏览器为100%。对于A级浏览器都兼容。

使用grids.css进行布局

一个特点是自动居中布局中的内容。另一个特点是脚部，如果你想使用它，它会自动清除并且居于页面底部，无论你使用何种布局模板。

<!DOCTYPE HTML PUBLIC "-//W#C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html" charset="utf-8"> <title>Mark-up Example</title> <link rel="stylesheet" type="text/css" href="../build/reset-fonts-grids/reset-fonts-grids.css" mce_href="build/reset-fonts-grids/reset-fonts-grids.css"> </head> <body> <div id="doc3" class="yui-t1"> <div id="hd" style="border:1px solid red;" mce_style="border:1px solid red;">this is your head</div> <div id="bd" style="border:1px solid blue;" mce_style="border:1px solid blue;">body <div class="yui-b">this is the secondary block</div> <div class="yui-main"> <div class="yui-b">this is the main block</div> </div> </div> <div id="ft" style="border:1px solid green;" mce_style="border:1px solid green;">footer</div> </div> </body> </html>

doc,750像素为800*600

doc2,950 ,1024*768

doc3,100%所有解决方案

doc4,974像素，比较流行的舒适的宽度