精通CSS-高级web标准解决方案（第2版）--读书笔记01

第一章 基础知识

1、ID还是类   

    ·只有在目标元素非常独特，绝不会对网站上其他地方别的东西使用这个名称时，才会使用ID。

    ·告别“多类症”：不需要用许多类来区分各个元素，可以用“组件化”放在一个部分中，加一个类名。用“层叠”来识别里层部分。

2、div和span

    ·告别“多div症”：为了将不必要的标记减少到最少，应该只在“没有元素能够实现区域分割”的情况下使用div元素。

        例如：若使用主导航列表，就不需要用div，可直接在列表

上应用类。

    ·div可以分组块级元素，span分组或标识行内元素。

3、微格式

    ·用标准的命名约定和标记模式在html中表示显示人、地点、日期等信息。

    
Durian Pudding
        organization
        [email protected]
    
    

        BeiJing
        China
    

4、文档类型

    ·DTD（文档类型定义）是一组机器可读的规则，定义XML或HTML的特定版本中允许有什么，不允许有什么。解析网页时用于检查页面的有效性并且采取相应的措施。

    ·DOCTYPE声明是指HTML文档开头处的一两行代码，描述使用哪个DTD，由此知道要使用HTML哪个版本。

 

第二章 为样式找到应用目标

1、最常用选择器

    ·类型选择器：用来寻找特定类型的元素。也称元素或简单选择器。

        例如：h1,p

    ·后代选择器：寻找特定元素或元素组的后代。用其他两个选择器之间的空格表示。

        例如：blockquote p {padding-left:2em;}

    ·ID选择器：用#表示。

    ·类选择器：用.表示。

    ·摆脱“多类症”：将一个类或ID应用于祖先，用后代选择器定位子孙。

        例如：

#main-content h2 {font-size:1.5em;}
.secondary-content h2 {font-weight:bold;}

    
北京


    
南京

2、伪类

    ·伪类选择器：根据文档结构之外的其他条件（如表单元素或链接的状态）对元素应用样式。

    ·链接伪类：:link（链接未被点击）和:visited（链接被访问过），只能应用于锚元素，即。

    ·动态伪类：:hover（鼠标悬停时），:active（激活状态，鼠标在元素按下未松开时）和:focus（鼠标松开时，主要应用于文本框输入文字），理论上可应用于任何元素。

/* 让所有未访问的链接蓝 */
a:link {color:blue;}

/* 让所有访问过的链接绿 */
a:visited {color:green;}

/* 当悬停或点击链接变红 */
a:hover,a:focus,a:active {color:red;}

/* 当聚焦时使输入元素变黄 */
input:focus {background-color:yellow;}

    ·伪类的顺序（缩写love-hate）：link//visited--focus--hover--active

        应用：通过把伪类链接在一起，创建复杂行为，例如在已访问链接和未访问链接上实现不同的鼠标悬停效果：

/* 悬停访问过的链接时变黄 */
a:visited:hover {color:yellow;}

3、高级选择器

    ·子选择器 >，选择元素的直接后代，即子元素。

        注意：后代选择器是选择一个元素的所有的后代。

/* 让儿子们颜色变绿，孙子不变 */
nav>li{color:green;}

    
儿子1
    
儿子2
        

            
孙子2-1
            
孙子2-2
            
孙子2-3
        
    
    
儿子3

    ·相邻兄弟选择器 + ，定位同一个父元素下某个元素之后的元素。

一般兄弟选择器 ~

    ·属性选择器：根据某个属性是否存在或属性的值来寻找元素。

        例如：1)属性是否存在：给title属性的acronym元素应用样式。

/* acronym用法：当鼠标悬停在“标题”时出现“鼠标悬停时出现的信息” */
标题

/* 在标题下加点 */
acronym[title] {border-bottom:1px dotted #999;}

/* 当鼠标悬停在此元素时将鼠标指针改为问号(cursor:help) */
acronym[title]:hover,acronym[title]:focus {cursor:help;}

        2)属性的值：使用rel属性值nofollow链接的站点无法从Google获得评级收益。

/* rel="nofollow"用法：告诉爬虫该页面无需追踪。 */
登录
/* 属性的值 */
a[rel="nofollow"]{
  background:url(nofollow.gif) no-repeat right center;
  padding-right:20px;
}