《CSS Mastery》读书笔记（2）

第二章  目标的样式

 

要用CSS样式化一个HTML元素，必须要定位一个元素， CSS的选择器就是这样的手段。

这章中，你要学到的

• Common selectors 普通选择器
• Advanced selectors 高级选择器
• New CSS 3 selectors 新的CSS3选择器
• The wonderful world of specificity and the cascade 特征和层叠的奇妙世界
• Planning and maintaining your style sheets 规划维护样式表
• How to comment your code 注释代码

==普通选择器==

最常用的选择器是 类型选择器  type selector和 后代选择器 descendant selector。类型选择器用来选择某种类型元素.    

比如Paragraph, h1，只需要指定希望样式化的元素

p {color: black;}
h1 {font-weight: bold;}

后代选择器允许选择 某个特定的或一组元素的子元素，后代选择器使用两个选择器组合中间空格隔开。

blockquote p {padding-left: 2em;}

只有Blockquote跟着paragraph 才会被选中， 样式是缩进2em。 其他的paragraph不受影响。

另两种常见的选择器是ID和class选择器， ID选择器用Hash Character来表示 #， class选择器用Period来表示 .举例：

#intro {font-weight: bold;}
.date-posted {color: #ccc;}
<p id="intro">Happy Birthday Andy</p>
<p class="date-posted">24/3/2009</p>

之前说过，开发者过分依赖 class and ID 选择器. 如果想用某种方式样式化Main Content下面的H2， 又想用另一种方式样式化Secondary Content下面的H2， 一种倾向是两种样式各用一个Class名， 一个更简单的方式可能是用 类型， ID， class 和后代选择器的组合方式。

If they want to style headlines one way in the main content area and another way in the
secondary content area, there is the tendency to create two classes and apply a class to each
headline. A much simpler approach is to use a combination of type, descendant, ID, and/or class
selectors:

#main-content h2 {font-size: 1.8em;}
#secondaryContent h2 {font-size: 1.2em;}

<div id="main-content">
<h2>Articles</h2>
...
</div>
<div id="secondary-content">
<h2>Latest news</h2>
...
</div>

以上四种选择器差不多已经可以应付大多情况。

 

伪类

有时候你可能不是根据文档结构来选择元素， 例如表单元素和链接的状态， 这可以用伪类选择器来解决。

/* makes all unvisited links blue */
a:link {color:blue;}

/* makes all visited links green */
a:visited {color:green;}

/* makes links red when hovered or activated.
focus is added for keyboard support */
a:hover, a:focus, a:active {color:red;}

/* makes table rows red when hovered over */
tr:hover {background-color: red;}

/* makes input elements yellow when focus is applied */
input:focus {background-color:yellow;}

:link and :visited are known as link pseudo-classes and can only be applied to anchor
elements. :hover, :active, and :focus are known as dynamic pseudo-classes and can
theoretically be applied to any element. Most modern browsers support this functionality.

伪类可以被串接起来，形成更复杂的行为

/* makes all visited linkes olive on hover */
a:visited:hover {color:olive;}

全局选择器

最强大和最少用的是全局选择器，像一个通配符，匹配任何元素，用一个星号标识，

For instance, you can remove the default browser
padding and margin on every element using the following rule:

* {
padding: 0;
margin: 0;
}
When combined with other selectors, the universal selector can be used to style all the
descendants of a particular element or skip a level of descendants. You will see how this can be
put to practical effect a little later in this chapter.

==复杂选择器==

CSS2.1和CSS3有其他一些有用的选择器，不幸的是大部分现代浏览器都支持，但是IE6等老一代浏览器不支持， 幸运的是CSS回溯匹配，如果浏览器不理解，它忽略整个规则，你可以不用担心老一点的浏览器会出问题， 只要记住不要在关键的功能和布局使用这些选择器就好。

子选择器和相邻同胞选择器

第一个复杂选择器是子选择器，不同于后代选择器选择所有的后代， 子选择器只选择紧跟的后代，或儿子， 举例：

#nav>li {
background: url(folder.png) no-repeat left top;
padding-left: 20px;
}
<ul id="nav">
<li><a href="/home/">Home</a></li>
<li><a href="/services/">Services</a>
<ul>
<li><a href="/services/design/">Design</a></li>
<li><a href="/services/development/">Development</a></li>
<li><a href="/services/consultancy/">Consultancy</a></li>
</ul>
</li>
<li><a href="/contact/">Contact Us</a></li>
</ul>

 

IE7可能有小Bug，如果父子元素间出现了Comments注释？

It is possible to fake a child selector that works in IE 6 and below by using the universal selector.
To do this, you first apply to all of the descendants the style you want the children to have. You
then use the universal selector to override these styles on the children’s descendants. So to fake
the previous child selector example you would do this:

#nav li {
background: url(folder.png) no-repeat left top;
badding-left: 20px;
}
#nav li * {
background-image: none;
padding-left: 0;
}

有时候你可能会想根据相邻的另一个元素样式化， 那么相邻同胞选择器可以让你选择排在前面的同在一个父元素下的元素。

h2 + p {
font-size: 1.4em;
font-weight: bold;
color: #777;
}
<h2>Peru Celebrates Guinea Pig festival</h2>
<p>The guinea pig festival in Peru is a one day event to celebrate
these cute local animals. The festival included a fashion show where
animals are dressed up in various amusing costumes.</p>
<p>Guinea pigs can be fried, roasted, or served in a casserole. Around
65 million guinea pigs are eaten in Peru each year.</p>

属性选择器

As the name suggests, the attribute selector allows you to target an element based on the
existence of an attribute or the attribute’s value. This allows you to do some very interesting and
powerful things.

就像名字表示的那样，属性选择器根据属性的存在与否或属性值来命中目标， 这样可以做一些强大有趣的事情。

For example, when you hover over an element with a title attribute, most browsers will display a
tooltip. You can use this behavior to expand the meaning of things such as acronyms and
abbreviations:

 

<p>The term <acronym title="self-contained underwater breathing
apparatus">SCUBA</acronym> is an acronym rather than an abbreviation
as it is pronounced as a word.</p>

 

However, there is no way to tell that this extra information exists without hovering over the
element. To get around this problem, you can use the attribute selector to style acronym elements
with titles differently from other elements—in this case, by giving them a dotted bottom border.
You can provide more contextual information by changing the cursor from a pointer to a question
mark when the cursor hovers over the element, indicating that this element is different from most.

acronym[title] {
border-bottom: 1px dotted #999;
}
acronym[title]:hover, acronym[title]:focus {
cursor: help;
}

 

In addition to styling an element based on the existence of an attribute, you can apply styles
based on a particular value. For instance, sites that are linked to using a rel attribute of nofollow
gain no added ranking benefit from Google. The following rule displays an image next to such
links, possibly as a way of showing disapproval of the target site:

 

a[rel="nofollow"] {
background: url(nofollow.gif) no-repeat right center;
padding-right: 20px;
}

层叠和特殊性

更复杂的CSS样式表，有可能两个或多个规则命中同一个元素， CSS通过用层叠的过程来解决冲突，层叠给每个规则分配一个重要度， 作者编辑的样式表被认为最重要，其次是用户样式表，最后是浏览器和用户代理样式，为了给用户有更多控制，可以将任何规则制定为！important 来提高他的重要度，让它优先于任何规则， 下面是重要度排列规则

• User styles flagged as !important
• Author styles flagged as !important
• Author styles
• User styles
• Styles applied by the browser/user agent

根据选择器的特殊性决定规则的次序， 更特殊选择器的规则优先于比较一般的选择器规则， 如果两个规则特殊性相同，那么后定义的规则优先。

特殊性（specificity）

这里看书不解释

 

在样式表使用特殊性

特殊性在写CSS样式表的时候很有用， 它允许你为一般元素设定一般样式规则， 然后再特殊元素再去覆盖它，比如你要在全站使用黑色字，在Intro字体使用灰色，你可以这样做：

p {color: black;}
p.intro {color: grey;}

在body标签添加一个ID或一个Class

给Body标签添加一个ID和Class是使用特殊性的一个有趣方法，Class用来覆盖整站的样式， 比如所有News页面都有特别的样式。

body.news {
/* do some stuff */
}
<body class="news">
             <p>My, what a lovely body you have.</p>
</body>

有时候你需要在某特定页面覆盖这些样式， 比如Archive的News页面， 这种情况，添加ID到那个特定页面的Body标签就好了。

body.news {
/* do some stuff */
}
body#archive {
/* do some different stuff */
}
<body id="archive" class="news">
             <p>My, what a lovely body you have.</p>
</body>

这样页面的可维护性大大提高。

继承

继承和层叠看似相似，但其实很不同，继承其实很容易理解， 有些属性，比如color 或 font size， 被元素的后代继承，于是就作用到它们之上。

==规划，组织，维护样式表==

应用样式到你的文档

可以在文档顶部的Style标签内添加样式， 这个不是个明智的方法， 如果要在另个页面应用同样的样式，就不得不复制到另一也页面上，如果要修改样式，就要在两个地方修改。 幸运的是，CSS允许把所有的样式都放到一个或几个外部样式表中， 有两种方法把外部样式表附加到文档中。 链接link  或 导入import

<link href="/css/basic.css" rel="stylesheet" type="text/css" />
<style type="text/css">

最近的测试表明导入import可能带来性能问题。 所以下面仅作知识补充，不建议采用
<!--
@import url("/css/advanced.css");
-->
</style>

可以将一个样式表导入import到另一个样式表中，而不限于只导入到HTML文档中， 例如

@import url(/css/layout.css);
@import url(/css/typography.css);
@import url(/css/color.css);

However, recent browser benchmarking has shown that importing style sheets can be slower than linking to them.

为了维护性，最好能注释你的代码，便于维护和移交。 用 /* bla bla bla */  来注释，可以多行。例如：

/* Body Styles */
body {
font-size: 67.5%; /* Set the font size */
}

也可以在注释中添加特殊标记的形式，便于查找 比如@group

/* @group typography */

结构化代码

把样式表分割成合理的区块便于维护， 我们常以一般的样式开头， 包括Body标签的样式， 应该被整站继承的样式， 其次是全局重置的样式，

跟着是link， heading， 和其他元素。

一旦一般的样式都有了，就可以开始更特殊的 和帮助性的样式， 这些是一般性的跨站使用的，包括 form， 错误信息， 然后就是 结构元素像

布局 layout和 导航 navigation。

当往下走， 我们慢慢从头开始添加样式， 越来越特殊， 然后页面的装备就差不多齐备然后转移注意力到页面相关的元素。 最后是任何药覆盖和例外的底部元素， 文档结构像下面这样：

• General styles
    • Body styles
   • Resets
   • Links
   • Headings
   • Other elements

 

• Helper styles
   • Forms
   • Notifications and errors
   • Consistent items

• Page structure
   • Headers, footers, and navigation
   • Layout
   • Other page furniture

• Page components
   • Individual pages

• Overrides

给自己用的笔记

颜色值列表

/* Color Variables
@colordef #434343; dark gray
@colordef #f2f6e4; light green
@colordef #90b11f; dark green
@colordef #369; dark blue
*/

To make your comments more meaningful, you can use keywords to distinguish important
comments. I use @todo as a reminder that something needs to be changed, fixed, or revisited
later on, @bugfix to document a problem with the code or a particular browser, and @workaround
to explain a nasty workaround:
/* :@todo Remember to remove this rule before the site goes live */
/* @workaround: I managed to fix this problem in IE by setting a small
negative margin but it's not pretty */
/* @bugfix: Rule breaks in IE 5.2 Mac */

www.cssoptimiser.com 这个网站可以压缩优化CSS样式表