blocks|key|1702967|text|不完全是初学者的材料，但A+List+Apart是一个非常有趣的关于CSS及其错综复杂的博客。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1702968|我发现W3学校的pages+on+CSS非常值得参考。|1702969|entityMap|0|LINK|mutability|MUTABLE|url|http://www.alistapart.com/|1|http://www.w3schools.com/css/^0|C|C|0|0|8|C|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

Not exactly beginner material, but <a href="http://www.alistapart.com/" rel="nofollow noreferrer">A List Apart</a> is a very interesting blog about CSS and its intricacies.

I find the W3 School's <a href="http://www.w3schools.com/css/" rel="nofollow noreferrer">pages on CSS</a> great for reference.

blocks|key|1487942|text|这是一个很好的概述：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1487943|http://www.onlinetools.org/articles/cssguides.html|offset|length|1487944|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1E|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

This is a decent overview:

<a href="http://www.onlinetools.org/articles/cssguides.html" rel="nofollow noreferrer">http://www.onlinetools.org/articles/cssguides.html</a>

blocks|key|1487993|text|初学者经常犯的一个错误：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1487994|CSS也是语义的。试着表达概念，而不是格式。人为设计的例子：|1487995|错误：|1487996|div.red
{
++++color:+red;
}|code-block|syntax|javascript|1487997|与此相对的是：|1487998|好：|1487999|div.error
{
++++color:+red;
}|1488000|CSS应该是你在网站上使用的概念的格式伴随，所以它们应该在其中反映出来。这样你会变得更加灵活。|1488001|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|H|7|10|8|@]|9|@]|A|$I|J]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

An error that beginners make quite often:
CSS is semantic as well. Try to express concepts, not formats. Contrived example:
<h3>Wrong:</h3>
<pre><code>div.red
{
 color: red;
}
</code></pre>
as opposed to:
<h3>Good:</h3>
<pre><code>div.error
{
 color: red;
}
</code></pre>
CSS should be the formatting companion for the concepts you use on your web site, so they should be reflected in it. You will be much more flexible this way.

blocks|key|1488059|text|Complete+CSS+Guide+on+westciv.com上有大量关于CSS的详尽信息。这是一个开始潜水的好地方。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1488060|entityMap|0|LINK|mutability|MUTABLE|url|http://www.westciv.com/style_master/academy/css_tutorial/index.html^0|0|X|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

The <a href="http://www.westciv.com/style_master/academy/css_tutorial/index.html" rel="nofollow noreferrer">Complete CSS Guide on westciv.com</a> has an exhaustive amount of information on CSS. It's a great place to start diving in.

blocks|key|1703239|text|我的第一个技巧是始终只使用外部样式表-尽量避免内联或标题样式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1703240|尽可能多地使用类和ids。|1703241|我赞同A+List+Apart的建议。|offset|length|1703242|虽然不是很漂亮，有时还有点老，但HTML+Help+by+WDG有一些很好的参考资料。|1703243|Quirksmode.org有一个很棒的css兼容性表。|1703244|entityMap|0|LINK|mutability|MUTABLE|url|http://www.alistapart.com/|1|http://htmlhelp.com/reference/css/style-html.html|2|http://www.quirksmode.org/css/contents.html^0|0|0|3|C|0|0|G|G|1|0|0|E|2|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Z|8|@]|9|@$F|10|G|11|1|12]]|A|$]]|$1|H|3|I|5|6|7|13|8|@]|9|@$F|14|G|15|1|16]]|A|$]]|$1|J|3|K|5|6|7|17|8|@]|9|@$F|18|G|19|1|1A]]|A|$]]|$1|L|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]|T|$5|O|P|Q|A|$R|U]]|V|$5|O|P|Q|A|$R|W]]]]

My first tip would be to always use only external style sheets - try to avoid inline or header styles.

Use classes and ids as much as possible.

I second the suggestion for <a href="http://www.alistapart.com/" rel="nofollow noreferrer">A List Apart</a>

Although not very pretty, and sometimes a little old, <a href="http://htmlhelp.com/reference/css/style-html.html" rel="nofollow noreferrer">HTML Help by WDG</a> has some good references.

<a href="http://www.quirksmode.org/css/contents.html" rel="nofollow noreferrer">Quirksmode.org</a> has a great css compatibility table.

blocks|key|1488211|text|你已经得到了关于你的问题的一组很好的答案，这里是你可能会发现有用的一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1488212|使用Firefox和Firebug扩展。如果你没有firefox，我建议你安装它，即使它只是为了这个目的。Firebug允许您从页面中选择元素，并向您显示应用的css。然后，您可以使用fire+bug编辑此css，而无需重新加载任何页面。一旦你对一种风格感到满意，你就可以很容易地将定义从firbug复制到你的css编辑器中。|1488213|至少对我来说，在使用样式时，firebug是绝对必要的。|1488214|关于css本身的几个技巧。在定义您的样式时，仅当所讨论的元素唯一时才使用id。这样你的样式是可重用的。使用分层定义，例如。#header+.navigationElement+a{color:red;}和#footer+.navigationElement+a{color:black;}，这样你就可以移动你的html代码，并自动应用正确的样式。|offset|length|style|CODE|1488215|entityMap^0|0|0|0|1P|14|2U|16|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|P|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Q|8|@$H|R|I|S|J|K]|$H|T|I|U|J|K]]|9|@]|A|$]]|$1|L|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|M|$]]

You've already gotten a good set of answers regarding your question put here is a point you may find usefull.

Use Firefox with Firebug extension. If you don't have firefox I recommend you install it even if it's just for this. Firebug allows you to select element from the page and shows you th applied css. Then you can edit this css with the fire bug without any page reloads. Once you're happy with a style you can easily copy the definitions from firbug to your css editor.

At least for me firebug is an absolute necessity when working with styles.

Couple of tips for the css itself. When defining your styles use id's only when the element in question is unique. That way your styles are reusable. Use hierarchical definitions eg.
<code>#header .navigationElement a{color:red;}</code> and <code>#footer .navigationElement a{color:black;}</code> That way you can move youre html code around and the correct style is applied automaticly.

blocks|key|1703395|text|看看ClearLeft的Natalie+Downe写的CSS+Systems+for+writing+maintainable+CSS。在她的演示文稿中有很多很棒的概念(我推荐下载PDF，因为她的笔记非常详细)。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1703396|我认为她的演讲是针对全职CSS开发人员的，所以比初学者更多，但即使是初学者也能从中学到很多。|1703397|entityMap|0|LINK|mutability|MUTABLE|url|http://clearleft.com/|1|http://natbat.net/2008/Sep/28/css-systems/^0|2|9|0|R|14|1|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]|$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

Have a look at 
<a href="http://natbat.net/2008/Sep/28/css-systems/" rel="nofollow noreferrer">CSS Systems for writing maintainable CSS</a> by Natalie Downe of <a href="http://clearleft.com/" rel="nofollow noreferrer">ClearLeft</a>. There are a lot of great concepts in her presentation (I recommend downloading the PDF because her notes are pretty detailed).

I think her presentation is aimed at full time CSS devs more so than beginners, but even beginners could take a lot away from it.

blocks|key|1703419|text|我不得不提一下css+Zen+Garden作为灵感的源泉。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1703420|entityMap|0|LINK|mutability|MUTABLE|url|http://www.csszengarden.com/^0|7|E|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

I just have to mention <a href="http://www.csszengarden.com/" rel="nofollow noreferrer">css Zen Garden</a> as a source of inspiration.

blocks|key|1703470|text|克制过度指定类或id名称的冲动。使用上下文选择器或派生选择器。这让您可以轻松地定义页面区域的样式，但省去了管理和记住大量名称的麻烦。例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1703471|<ul+id="nav">
+++<li+class="navItem"><span+class="itemText">Nav+Item</li>
+++<li+class="navItem"><span+class="itemText">Nav+Item</li>
</ul>

#nav+{+}
#nav+.navItem+{+}
#nav+.itemText+{+}|code-block|syntax|javascript|1703472|这是不必要的复杂，您会发现自己很快就会用完良好的语义描述。你最好像这样做：|1703473|<ul+id="nav">
++<li>Nav+Item</li>
++<li>Nav+Item</li>
</ul>

#nav+{}
#nav+li+{}
#nav+li+span+{}|1703474|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Resist the urge to over-specify class or id names. Use contextual or descendent selectors. This let's you easily define styles for areas of your page, but save on the sanity of having to manage and remember tons of names. For example:

<pre><code>&lt;ul id="nav"&gt;
 &lt;li class="navItem"&gt;&lt;span class="itemText"&gt;Nav Item&lt;/span&gt;&lt;/li&gt;
 &lt;li class="navItem"&gt;&lt;span class="itemText"&gt;Nav Item&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;

#nav { }
#nav .navItem { }
#nav .itemText { }
</code></pre>

This is needlessly complex, and you'll find yourself quickly running out of good semantic descriptions. You'd be better off with something like:

<pre><code>&lt;ul id="nav"&gt;
 &lt;li&gt;&lt;span&gt;Nav Item&lt;/span&gt;&lt;/li&gt;
 &lt;li&gt;&lt;span&gt;Nav Item&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;

#nav {}
#nav li {}
#nav li span {}
</code></pre>

blocks|key|1488456|text|我从Mc+Farland的Missing+Manual+(Oreilly书)和sample+rails'+app's样式表中学到了我需要知道的东西。这很有效，谷歌“示例/示例项目/应用程序/存储库”的PHP，ASP.net，无论你在使用什么。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1488457|entityMap|0|LINK|mutability|MUTABLE|url|http://oreilly.com/catalog/9780596527440/index.html^0|13|J|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

i learned what i need to know from Mc Farland's Missing Manual (Oreilly book), and by staring at a <a href="http://oreilly.com/catalog/9780596527440/index.html" rel="nofollow noreferrer">sample rails' app's</a> stylesheet. That works pretty well, google "example / sample projects / app / repositories" for PHP, ASP.net, whatever you're using.

blocks|key|1703573|text|如果你使用一个重置脚本，它会解决不同浏览器之间的一些问题。这样做让我的生活变得更容易。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1703574|我见过一些人用简单的|1703575|*+{+padding:+0;+margin:+0;+}|code-block|syntax|javascript|1703576|但您也可以使用更全面的实现-比如YUI库中的实现……http://developer.yahoo.com/yui/reset/|offset|length|1703577|当测试你的站点渲染时，browsershots.org是非常有用的。|1703578|webdev+firefox插件非常棒--+CTRL%2BSHIFT%2BE可以让你编辑css，并在运行中看到变化。如果你使用CTRL%2BF，你也可以将鼠标悬停在一个元素上来找出它是什么。|1703579|添加到其他人提到的站点--我发现http://css-discuss.incutio.com很有用。Freenode+#css也很方便。|1703580|entityMap|0|LINK|mutability|MUTABLE|url|http://developer.yahoo.com/yui/reset/|1|http://css-discuss.incutio.com/^0|0|0|0|Q|11|0|0|0|0|G|U|1|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|15|8|@]|9|@$K|16|L|17|1|18]]|A|$]]|$1|M|3|N|5|6|7|19|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@$K|1C|L|1D|1|1E]]|A|$]]|$1|S|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]|10|$5|V|W|X|A|$Y|11]]]]

If you use a reset script - it'll iron out some of the quirks between different browsers. Doing so has made my life easier.

I've seen some people swear by simply using 

<pre><code>* { padding: 0; margin: 0; }
</code></pre>

But you can also use more thorough implementations - like the one in the YUI library... <a href="http://developer.yahoo.com/yui/reset/" rel="nofollow noreferrer">http://developer.yahoo.com/yui/reset/</a>

When it comes to testing your site renders - browsershots.org is pretty useful.

The webdev firefox plugin is brilliant - CTRL+SHIFT+E allows you to edit css, and see changes on the fly. If you CTRL+F, you can also hover yr mouse over an element to find out what it is.

To add to the sites other people have mentioned - I've found <a href="http://css-discuss.incutio.com" rel="nofollow noreferrer">http://css-discuss.incutio.com</a> useful. Freenode #css is handy too.

blocks|key|1488603|text|很多人都有一些很好的建议。我想对整个second说的话表示赞同。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1488604|我强烈建议使用reset.css样式表：|offset|length|1488605|*{margin:0;padding:0}iframe,a+img,fieldset,form,table{border:0}h6,h5,h4,h3,h2,h1,caption,th,td{font-size:100%25;font-weight:normal}dd,dt,li,dl,ol,ul{list-style:none}legend{color:#000}button,select,textarea,input{font:100%25+serif}table{border-collapse:collapse}caption,th,td{text-align:left}p,+h1{margin:0;padding:0;bording:0}|code-block|syntax|javascript|1488606|要么复制并粘贴，要么直接保存我链接到的内容。|1488607|此外，我在早期使用的一个错误是过度使用<div+id="">而不是<div+class="">。一个id="“应该只被使用一次(永远不能有两个<div+id="content">)，而你可以有成千上万个class="”(如<div+class="box">)。|style|CODE|1488608|此外，具有多个同名的id不是有效的html。|1488609|entityMap|0|LINK|mutability|MUTABLE|url|http://massiveatom.com/factoider/css/reset.css^0|0|7|9|0|0|0|0|J|B|X|E|1Z|I|33|H|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@$D|12|E|13|1|14]]|A|$]]|$1|F|3|G|5|H|7|15|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|17|8|@$D|18|E|19|O|P]|$D|1A|E|1B|O|P]|$D|1C|E|1D|O|P]|$D|1E|E|1F|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1G|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

Alot of people have some excellent suggestions. I would like to second what codeinthewhole said.

I would strongly recommend using a <a href="http://massiveatom.com/factoider/css/reset.css" rel="nofollow noreferrer">reset.css</a> style-sheet:

<pre><code>*{margin:0;padding:0}iframe,a img,fieldset,form,table{border:0}h6,h5,h4,h3,h2,h1,caption,th,td{font-size:100%;font-weight:normal}dd,dt,li,dl,ol,ul{list-style:none}legend{color:#000}button,select,textarea,input{font:100% serif}table{border-collapse:collapse}caption,th,td{text-align:left}p, h1{margin:0;padding:0;bording:0}
</code></pre>

Either copy and paste or just save the one i linked to.

Also, a mistake i used in my early days was over use of <code>&lt;div id=""&gt;</code> apposed to <code>&lt;div class=""&gt;</code>. An id="" is only supposed to be used once (never have two <code>&lt;div id="content"&gt;</code>'s), whereas you can have thousands of class="" (like <code>&lt;div class="box"&gt;</code>). 

And besides, having more than one id with the same name isnt valid html

blocks|key|1488675|text|我已经建了5年的网站，通过经常阅读这篇文章，我仍然学到了很多：http://code.google.com/speed/page-speed/docs/rendering.html|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1488676|也可以在CSS上查看http://www.zeldman.com的博客。这家伙是网络世界的传奇人物。|1488677|entityMap|0|LINK|mutability|MUTABLE|url|http://code.google.com/speed/page-speed/docs/rendering.html|1|http://www.zeldman.com/^0|V|1N|0|0|A|M|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

I have been building websites for 5 years now and still learn a lot by reading this every so often: <a href="http://code.google.com/speed/page-speed/docs/rendering.html" rel="nofollow">http://code.google.com/speed/page-speed/docs/rendering.html</a>

Also check out <a href="http://www.zeldman.com" rel="nofollow">http://www.zeldman.com</a> blog on CSS. This guy is a legend in the web world.

I am currently working on my first website. I have no idea where to start on the CSS page, or if there are any standards that I should be following.

I would appreciate any links or first-hand advise.

Are there any CSS standards that I should follow while writing my first stylesheet?

我目前正在开发我的第一个网站。我不知道从哪里开始CSS页面，或者是否有任何我应该遵循的标准。我将感谢任何链接或第一手建议。

问在编写我的第一个样式表时，有没有什么CSS标准需要我遵循？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在编写我的第一个样式表时，有没有什么CSS标准需要我遵循？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在编写我的第一个样式表时，有没有什么CSS标准需要我遵循？
EN