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

第一章基础知识

1、ID还是类

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

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

2、div和span

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

例如：若使用主导航列表，就不需要用div，可直接在列表<ul>上应用类。

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

3、微格式

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

<div class="vcard">
    <p><a class="url fn" href="#">Durian Pudding</a>
        <span class="org">organization</span>
        <a class="email" href="#">[email protected]</a>
    </p>
    <p class="adr">
        <span class="locality">BeiJing</span>
        <span class="country-name">China</span>
    </p>
</div>

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;}
<div id="main-content">
    <h2>北京</h2>
</div>
<div class="secondary-content">
    <h2>南京</h2>
</div>

2、伪类

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

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

·动态伪类：: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;}
<ul id="nav">
    <li>儿子1</li>
    <li>儿子2
        <ul>
            <li>孙子2-1</li>
            <li>孙子2-2</li>
            <li>孙子2-3</li>
        </ul>
    </li>
    <li>儿子3</li>
</ul>

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

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

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

/* acronym用法：当鼠标悬停在“标题”时出现“鼠标悬停时出现的信息” */
<acronym title="鼠标悬停时出现的信息">标题</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 href="login.aspx" rel="nofollow">登录</a>
/* 属性的值 */
a[rel="nofollow"]{
  background:url(nofollow.gif) no-repeat right center;
  padding-right:20px;
}

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

猜你喜欢