css排雷第一部分

css选择器

• 引入外部样式表的方法，如果一个css文件想要引入一个外部样式表。

@import url(basic.css);

• 多类选择器，选择同时包含这两个类的：

.warning.urgent{}

• 根据属性或者根据属性的具体的值来选择元素

plant［moons]{}
plant［moons="1"]{}
a[href="*****"]{}

• 根据属性的部分值来选择

span[title~="feature"]{}
*[lang|="en"]{color:white} //选出属性等于lang或者以lang开头的所有元素。

• 后代选择器

选择h1 > strong 可以解释为选择h1字元素中的所有strong元素。

• 选择相邻兄弟元素

h1 + p {margin-top:0}//选择h1后面的第一个p元素

选择器的结构和层叠

• 关于选择器的结构和层叠，自己没必要看书上的废话, 主要记住顺序 标签内的style>id>class>h1等类 ，然后如果某一个地方有important那么就是最重要的，比标签里的还重要。

字体

• 字体变形：small-caps是小型大写字母。

font-variant:small-caps|normal|inherit

文本属性

• 对齐vertical-align:

vertical-align:baseline //要求一个元素的基线和他父元素的基线对齐。
vertical-align:super //相当于作为上标。
vertical-align:sub //相当于作为了下标。
vertical-align:bottom //将元素行内框的低端和元素框的低端对齐。
vertical-align:top //和上一个相反，是顶端对齐。
vertical-align:middle //居中对齐，往往应用于图像
vertical-align:100% //会把元素的基线相对于父元素的基线升高100%
vertical-align:－100% //会把元素的基线相对于父元素的基线降低100%
vertical-align:5px//会把元素的基线相对于父元素的基线升高5px
vertical-align:－5px //会把元素的基线相对于父元素的基线降低－5px

• 字间隔和字母间隔

word-spacing: 0.5em //字间扩大进0.5em
word-spacing: －0.5em //字间隔缩进0.5em
word-spacing: 0 ｜ normal // 不变
letter-spacing 和以上相同。

• 文本转换

text-transform: uppercase | lowercase | capitalize | none | inherit //分别是： 全大写 全小写 首字母大写 不变 继承

• 文本装饰

text-decoration: none | [underline || overline || line-through || blink]| inherit  //分别是 无 下划线 上画线 贯穿线 闪烁[现在不支持了。]

背景和颜色

background-repeat: repear | repeat-x | repeat-y | no-repeat | inherit
background-position: left | center | right

插入生成内容

• 用before或者after插入生成内容

插入属性值：
a[href]:after{content:attr(href);}
a[href]:after{content:"["attr(href)"]";}
结合生成引号显示生成数据：
以下是列表中的一项：
<quotation>
<quote>questions</quote>
</quotation>
然后：
quotation:{display:block}
quote{quotes:'"','"'}
quote:before{content:open-quote;}
quote:after{content:open-quote;}
相当于在questions前后加上引号。

• 计数器
  初始化CSS计数器为了好理解，我们使用<OL> 和 <LI> 元素来做演示。首先我们要重置计数器，让它归零，并给它指定一个名称：

ol.slides {
    counter-reset: slideNum;
}

这个计数器叫slideNum，下面的例子都都要使用它。
CSS计数器的自增
为了是计数器能够自增，我们需要使用counter-increment，并把计数器的名称跟到后面：

ol.slides > li {
    counter-increment: slideNum;
}

这样，在CSS选择器下，每遇到一个符合条件li元素，counter-increment就会被调用一次，计数就是增加1。需要注意的是，这里的CSS选择器里使用了>符号，这样是为了滤掉有可能多重嵌套的li元素。否者你的计数值就会不是你想要的。
使用计数值
如果只计数而无法显示，那这个计数器也没多大用处，所以就有了counter()命令来输出计数器里的值，可以用在content属性里：

ol.slides li:after {
    content: "[" counter(slideNum) "]";
}

有趣的是，这个counter()命令还可以接受第二个参数，当作同时计算多个元素时数据的分隔符：

/* 假设有这样的HTML:

<ol class="toc">
    <li>Intro</li>
    <li>Topic
        <ol>
            <li>Subtopic</li>
            <li>Subtopic</li>
            <li>Subtopic</li>
        </ol>
    </li>
    <li>Topic
        <ol>
            <li>Subtopic</li>
            <li>Subtopic</li>
            <li>Subtopic</li>
        </ol>
    </li>
    <li>Closing</li>        
</ol>
*/

ol.toc, ol.toc ol {
    counter-reset: toc;
}
ol li {
    counter-increment: toc;
}
.toc li:before {
    content: "(Item " counters(toc, ".") ")";
}

/* 会输出下面的结果

<ol class="toc">
    <li>(Item 1)Intro</li>
    <li>(Item 2)Topic
        <ol>
            <li>(Item 2.1)Subtopic</li>
            <li>(Item 2.2)Subtopic</li>
            <li>(Item 2.3)Subtopic</li>
        </ol>
    </li>
    <li>(Item 3)Topic
        <ol>
            <li>(Item 3.1)Subtopic</li>
            <li>(Item 3.2)Subtopic</li>
            <li>(Item 3.3)Subtopic</li>
        </ol>
    </li>
    <li>(Item 4)Closing</li>        
</ol>
*/

你可以发现，当需要显示这种联级嵌套序号时，这种技术是非常的有用的。很像微软WORD里面文档的多重序号。
大多时候，CSS计数器都是配合:after和:before伪元素使用，我曾看到过有人在幻灯片、视频页面和文档里用过CSS计数器。相信你会找到其它可以使用它的地方。