reset.css文件_高级CSS –使用Reset.css文件获得完全控制

最新推荐文章于 2023-05-04 15:05:51 发布

culuo8053

最新推荐文章于 2023-05-04 15:05:51 发布

阅读量236

点赞数

文章标签： css python html js 人工智能 ViewUI

原文链接：https://davidwalsh.name/reset-css

版权

reset.css文件

It took me about a year to feel as though I completely owned cascading style sheets. For a language (yes, it IS a language) with simple syntax, CSS optimization techniques can take quite a while to learn. Formulating your style sheets to do exactly what you want starts with a good foundation, which is why I eventually started using a reset.css file.

我花了大约一年的时间才觉得自己完全拥有级联样式表。对于具有简单语法的语言(是的，它是一种语言) ，CSS优化技术可能需要花费相当长的时间才能学习。制定样式表以完全满足您的要求，要有一个良好的基础，这就是为什么我最终开始使用reset.css文件的原因。

Why a reset.css file? Simple -- control. I don't want any formatting on my websites that I didn't specify. Here's my base reset.css file with some quick points following the code:

为什么要使用reset.css文件？简单-控制。我不希望网站上没有指定的任何格式。这是我的基本reset.css文件，其中的一些快速代码如下：

/*  all media  */

	/* global */
	* 								{ margin:0; padding:0; }
	body			{ background:#fff; padding:15px 0 30px 0; font:11px arial, helvetica, sans-serif; }

	/* tags */
	h1								{ padding:0 0 15px 0; }
	h2								{ padding:5px 0 0 0; }
	label,select 	 { cursor:pointer; }
	li								{ line-height:15px; margin:5px 0 0 0; }
	ol, ul						{ padding:0 0 10px 35px; }
	p								{ line-height:15px; padding:0 0 10px 0; }
	textarea,input				{ font:11px arial, helvetica, sans-serif; padding:2px; }

	/* custom */
	.clear						{ clear:both; }
	.input						{ border:1px solid #ccc; padding:2px; }
	.page-break,.print-only	{ display:none; }
	.point						{ cursor:pointer; }

	/* links */
	a								{ color:inherit; }
	a:link, a:visited			{ color:#00f; text-decoration:underline; }
	a:hover, a:active			{ color:#00f; text-decoration:none; }
	a img							{ border:0; }

/*  print media  */
@media print
{
	/* global */
	body				{ color:#000; font-size:9pt; }

	/* layout */
	#wrap						{ width:600px; }

	/* custom */
	.print-only					{ display:block; }
	.page-break					{ page-break-before:always; }

	/* links */
	a					{ text-decoration:underline; color:#999; }
}

全局设置 (Global Settings)

There are some settings that you can set globally so you might as well do so. Be wary, however, of what you put in the "*" setting as opposed "body" setting. For example, setting the font-size property in the '*' selector will change the font-size of the '<b>' tag -- you will only want the bold tag to change the font-weight to bold, not change the font size. Place the global font-size in the <body> tag.

您可以全局设置一些设置，因此也可以这样做。但是，请注意在“ *”设置中放置的内容而不是在“ body”设置中放置的内容。例如，在'*'选择器中设置font-size属性将更改'<b>'标签的字体大小-您只希望粗体标签将font-weight更改为粗体，而不更改字体大小。将全局字体大小放在<body>标记中。

没有保证金和填充 (No Margin & Padding)

Microsoft Internet Explorer and Firefox use a very different set of rules for margin and padding and I'd much rather not take the chance that margin look different in either browser.

Microsoft Internet Explorer和Firefox在边距和填充方面使用了非常不同的规则集，我宁愿不要冒险在两种浏览器中使用边距看起来都不同。

一起丝网印刷 (Screen & Print Together)

Putting my basic print needs in the reset.css file saves a request to the server, no good reason besides that.

将我的基本打印需求放入reset.css文件中，可以将请求保存到服务器，除此之外，没有充分的理由。

What are your thoughts? Do you use a reset.css file? What differs between your CSS and mine?

你觉得呢？你有没有什么想法？您是否使用reset.css文件？您CSS和我CSS有什么不同？

翻译自: https://davidwalsh.name/reset-css

reset.css文件

culuo8053

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
reset.css文件_高级CSS –使用Reset.css文件获得完全控制

It took me about a year to feel as though I completely owned cascading style sheets. For a language (yes, it IS a language) with simple syntax, CSS optimization techniques can take quite a while to l...
复制链接

扫一扫