# */作者: sunhw0725 时间: 2007-10-8 14:04
The selector in the following rule matches all
p
elements that have a
title
attribute, regardless of which value it has:
p[title] { color:#f00; }
The selector matches all div elements that have a class attribute with the value error:
div[class=error] { color:#f00; }
Multiple attribute selectors can be used in the same selector. This makes it possible to match against several different attributes for the same element. The following rule would apply to all blockquote elements that have a class attribute whose value is exactly “quote”, and a cite attribute (regardless of its value):
blockquote[class=quote][cite] { color:#f00; }
使用降阶同类项descendant selectors. “Descendant selectors can help you eliminate many class attributes from your markup and make your CSS selectors much more efficient. ” [Roger Johansson]
2.3. 技术窍门: 链接样式化
如果使用锚点, 你要小心. “如果在你的编码中使用锚点 (
<a name="anchor">
) 你要注意, 他会使用
:hover
和
:active
这些伪类. 为避免这些问题, 你要使用ID 来定义这些锚点,或使用内部约束 slightly more arcane 语法:
:link:hover, :link:active
” [Dave Shea]
定义链接关系 “The rel attribute is supposed to indicate a semantic link relationship from one resource to another.
a[rel~="nofollow"]::after {
}
“These make use of the attribute selector for space separated lists of values. Any a element with a relationship containing those values will be matched. Links with the nofollow relationship will be followed by a dark red skull and crossbones (?) and those with the tag relationship will be followed by the Technocrati icon.” [Handy CSS]
You can mark external links automatically. Many people make use of the non-standard
rel="external"
relationship to indicate a link to an external site. However, adding that to each and every link is time consuming and and unnecessary. This style rule will place an north east arrow after any link on your site to an external site. [Handy CSS]
a[href^="http://"]:not([href*="smashingmagazine.com"])::after {
}
2.4. 技术窍门: CSS-技术
付给<body> 标记一个 ID. “大多数情况下, 给body 放置一个 ID , 可以逐页控制CSS, 而不必要不断更换模板” [Ryan Parr, Invasion of Body Switchers]
用CSS创建相同高度的列. Equal Height Technique: a method to make all columns appear to be the same height. But without the need for faux column style background images. Faux Columns: with background images.
用 CSS做垂直布局. “假设你有一个导航菜单高度是2em. 解决方案: 在CSS中把线高设定成和显示模块一样的高度.在这个案例中,字符可以在显示模块中间浮动. ” [Evolt.org]
使用伪元素 pseudo-elements 和类 classes 创建动态内容. Pseudo-classes and pseudo-elements. Pseudo-classes and pseudo-elements can be used to format elements based on information that is not available in the document tree. For example, there is no element that refers to the first line of a paragraph or the first letter of an element’s text content. You can use :first-child, :hover, :active, :focus, :first-line, :first-letter, :before, :after and more.
通过设置
<hr>
分割的更漂亮. “把水平分割线 (<hr>) 用图形代替可以增加页面的美观性. [CSS: Best Practices]
在每个页面使用相同的导航条 (X)HTML-编码. “许多网站都想强化导航条, 但你需要在每个页面优化导航条代码, 我们如何把两者完美的处理好呢?” [Ten More CSS Tricks you may not know]
XHTML:
<ul>
</ul>
Insert an
id
into the
<body>
tag. The id should be representative of where users are in the site and should change when users move to a different site section.
CSS:
#home .home, #about .about, #contact .contact
or
<style type=”text/css” media=”print”> @import url(print.css); </style>
This ensures that the CSS will only apply to printed output and not affect how the page looks on screen. With your new printed stylesheet you can ensure you have solid black text on a white background and remove extraneous features to maximise readability. More about CSS-based print-Layouts. [20 pro tips]
2.5. 技术窍门: IE 改进
强制 IE 透明化处理 PNG图像. “理论上, PNG 文件支持不同的透明度; 但是. 一个Explorer 6 缺陷让这种方法很难跨浏览器使用” [CSS Tips, Outer-Court.com]
#regular_logo
<![endif]-->
Workflow: 获得灵感
玩转 CSS. “玩. 用背景图玩. 用浮动玩.” [Play with positive and negative margins. 充分利用继承性和瀑性去玩. [Chric Casciano]
多学习别人的经验 努力学习哪些大网站的经验.
[20 pro tips]
参考和推荐内容:
CSS Tips and Tricks by Roger Johansson
(The Only) Ten Things To Know About CSS by John Manoogian
CSS Crib Sheet by Dave Shea
My Top Ten CSS Tricks [CSS Tutorials] by Trenton Moss
CSS Tips by Philipp Lenssen
Top CSS Tips by Jonathan Snook
Ten CSS tricks — corrected and improved by Tantek Çelik
Ten More CSS Trick you may now know by Trenton Moss
CSS techniques I use all the time by Christian Montoya
CSS Tip Flags by Douglas Bowman
My 5 CSS Tips by Mike Rundle
5 Steps to CSS Heaven by Ping Mag
Handy CSS by Lachlan Hunt
Erratic Wisdom: 5 Tips for Organizing Your CSS by Thame Fadial
15 CSS Properties You Probably Never Use (but perhaps should) by SeoMoz
10 CSS Tips You Might Not Have Known About by Christopher Scott
A List Apart: Articles: 12 Lessons for Those Afraid of CSS and Standards by Ben Henick
Tips for a better design review process by D. Keith Robinson
20 pro tips - .net magazine by Jason Arber
CSS Best Practices by Richard K Miller
10 Quick Tips for an Easier CSS Life by Paul Ob
10 CSS Tips from a Professional CSS Front-End Architect by 72 DPI in the shade team blog
Web Design References: Cascading Style Sheets by Laura Carlson
Getting Into Good Coding Habits by Adrian Senior作者: sunhw0725 时间: 2007-10-8 14:04
使用通用命名空间. 一套好的命名体系, 会在修复缺陷时, 节省大量时间. 我建议使用
parent_child
结构. [10 CSS Tips]
按语法定义类和编号. “错误的名称会引起岐义, 不便于沟通协作, 也会导致重复定义". [Garrett Dimon]
用通用的CSS定义给同类项编组. “当一些元素的类型,类,或ID:s 使用相同的属性, 你可以把这些同类项编组, 以便一起定义, 而不是分开重复定义” [Roger Johansson]
如果一个独立属性需要复用, 就把它独立出来. “如果你发现一个属性的定义被广泛使用, 不妨把它单拿出来定义” [5 Steps to CSS Heaven]
尽可能树状化表达你的编号和类. 文档的层次化 contextual selectors 十分必要. 这样可以使文档更容易阅读和使用. [Chric Casciano]
学会充分利用CSS的瀑性(继承性)特征. “如果你的网站中有两个类似的显示区(box),你愿意定义两个样式, 还是定义一个样式后, 用一个外部样式对它进行修正?” [5 Steps to CSS heaven]
使用工具化标记(Tag):
<small>
,
<em>
和
<strong>
. “可以充分使用这些工具化标记, 对XHTML来说, 它具有更好的语意结构性, 过多的利用类来定义类似的要素, 会让文档结构本身的语法环境遭到破坏". [Mike Rundle’s 5 CSS Tips]
1.4. Workflow: 使用缩写标注
缩写十六进位色彩标注. “在颜色定义中:
#000 等同于 #000000, #369 等同于 #336699
[Roger Johansson]
用 LoVe/HAte-次序定义链接伪类 Link, Visited, Hover, Active. “可以确保你看到所有的链接样式.” [Eric Meyer]
a:link { color: blue; }
你可以使用子同类项. “A child selector targets an immediate child of a certain element. A child selector consists of two or more selectors separated by a greater than sign, “>”. The parent goes to the left of the “>”, and whitespace is allowed around the combinator. This rule will affect all strong elements that are children of a div element. [Roger Johansson]
div > strong { color:#f00; }
使用多血缘同类项(adjacent sibling selector ). An adjacent sibling selector is made up of two simple selectors separated by a plus sign, “+”. Whitespace is allowed around the adjacent sibling combinator. The selector matches an element which is the next sibling to the first element. The elements must have the same parent and the first element must immediately precede the second element. [Roger Johansson]
p + p { color:#f00; }
使用特性同类项 一个特性同类项, 可以通过四种方式找到要定义的对象:
[att]
Matches elements that have an att attribute, regardless of its value.
[att=val]
Matches elements that have an att attribute with a value of exactly “val”.
[att~=val]
Matches elements whose att attribute value is a space-separated list that contains “val”. In this case “val” cannot contain spaces.
[att|=val]
Matches elements whose att attribute value is a hyphen-separated list that begins with “val”. The main use for this is to match language subcodes specified by the lang attribute (xml:lang in XHTML), e.g. “en”, “en-us”, “en-gb”, etc.