前端学习笔记6 CSS操作样式表和定义选择器

2017-02-10 14:31
287


操作样式表

  我们可以通过外部样式表(首选方法)、嵌入样式表和内联表(最不可取的方法)三种方法实现将CSS应用到多个网页(包括整个网站)、单个页面或单独的HTML元素。


创建外部样式表

  外部样式表非常适合给网站上的大多数页面或者所有页面设置一致的外观。可以在一个外部样式表中定义全部样式,然后让网站上的每个页面加载这个外部样式表,从而确保每个页面都有相同的设置。

  • 在编辑器中创建.css文件
  • 为网页定义样式规则,同时根据需要在CSS中添加注释

创建嵌入式链表

  我们在HTML页面的head部分创建一个style元素,其中包含了样式表,由于这些样式表只在本网页存在,因此不会像外部样式表中的规则那样应用到其他的页面,同时缓存的好处也不存在了,这种方法只是作为备选。style元素及其包围的样式规则通常位于文档的head部分。浏览器对页面的呈现方式与使用外部样式表时是一样的。
  当且仅当style元素出现在;link元素后面的时候,嵌入式样式表中的样式才会覆盖外部样式表中的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>El Palau de la Música</title>
    <style>
    img {
        border: 4px solid red;
    }
    </style>
</head>
<body>
<article>
    <h1>El Palau de la Música</h1>
    ![](img/palau.jpg)
    ![](img/tickets.jpg)
    <p>I love the <span lang="es">Palau de la Música</span>. It is ornate and gaudy and everything that was wonderful about modernism. It's also the home of the <span lang="es">Orfeó Català</span>, where I learned the benefits of Moscatell.</p>
</article>
</body>
</html>


应用内联样式

  这种方式一般不使用,因为它将HTML和CSS混在了一起,严重地违背了最佳实践。这种方法一般用于对某种样式的快速测试,以便随后将这种样式应用于外部样式表中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>El Palau de la Música</title>
</head>
<body>
<article>
    <h1>El Palau de la Música</h1>
    ![](img/palau.jpg)
    ![](img/tickets.jpg)
    <p>I love the <span lang="es">Palau de la Música</span>. It is ornate and gaudy and everything that was wonderful about modernism. It's also the home of the <span lang="es">Orfeó Català</span>, where I learned the benefits of Moscatell.</p>
</article>
</body>
</html>

  这段程序的第11行即为一个内联样式的例子,内联样式规则只影响单个元素。内联样式的优先级高于其他所有样式,除非其他地方与之冲突的样式标记了!important。如果要在内联样式声明中指定字体,对于多个单词的字体名称要用单引号包围,以避免与style元素的双引号发生冲突。


样式的层叠和顺序

  有时候多个样式规则指定的是一个元素,但是当规则特殊性相同的情况下,样式的顺序就成了关键。基本规则是:在其他田间相同的情况下,越晚出现的样式优先级越高。以下几条解释了顺序如何决定样式规则的优先级。
  嵌入样式表(位于style元素内)与任何链接的外部样式表之间的关系取决于它们在HTML中的相对位置。在两者发生冲突时,如果link元素在HTML代码中出现的早,style元素就会覆盖链接的样式表,如果出现的晚,其中的样式及其包含的任何导入样式表就会覆盖style元素的规则。
  内联样式(实际上直接应用于元素)在外部样式表和嵌入样式表之后。由于顺序最靠后,其优先级最高。一旦应用到任何地方,就会覆盖与之冲突的其它样式。
  !important优先级最高。


使用与媒体相关的样式列表

  可以指定一个只用于特定输出的样式表,例如打印等。方法为新建单独的.css文件,并在里面写入相应的规则。在linkstyle元素的开始标签中添加media="output"其中output可以是printscreenallauralbrailehandheldprojectionttytv共九种类型,但是常用到的只有printscreenall三种。

<link rel="stylesheet" href="style.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">

也有另一种方式:

/* Styles for all media */
img {
    border: 4px solid red;
}
p {
    color: orange;
    font-style: italic;
}
/* Print Style Sheet */
@media print {
    body {
        /* 
        make text larger. 
        notice the use of the pt (point) unit. using pt is appropriate for print style sheets.
        */
        font-size: 25pt;
    }
    p {
        color: #000; /* hex for black */
    }
    img {
        display: none; /* don't show images */
    }
}

  样式表中的@media规则是指定其他媒体类型的另一种方式在上面那个例子中,上面是影响所有媒体类型(包括打印)的样式,下面是专门用于打印的样式,样式规则放在@media print {}


借鉴他人的灵感

  查看别人CSS代码的方法:首先查看页面的HTML代码,如果CSS代码是嵌入样式表,那么就可以直接看到了。如果CSS是外部样式表,就在HTML中找到对它的引用,再点击文件名,样式表就可以显示在浏览器窗口中了。


定义选择器

CSS样式规则有两个主要部分。选择器决定将格式化应用到哪些元素,而声明则定义要应用的格式化。


构造选择器(推荐使用class选择器)

选择器可以定义五个不同的标准来选择要进行格式化的元素:

  • 元素的类型或名称:
    h1 {
      color: red;
    }


  • 元素所在的上下文:这个样式只应用于h1元素中的em元素,其它地方的em元素不受影响。
    h1 em {
      color: red;
    }


  • 元素的类或ID:第一个选择器选择所有属于error类的元素。第二个选择器选择idgaudi的那个元素。回忆一下,一个id在每个页面中只能出现一次,而一个class可以出现任意次数。这是我们推荐class选择器而不推荐ID选择器的主要原因。
/* ---类--- */
.error {
    color: red;
}
/* ---ID--- */
#gaudi {
    color: red;
}

  通过在classid选择器前面添加目标元素的名称,可以增强选择器的特殊性。在下面这个例子中,选择器仅选择属于error类的strong元素,而不属于error类的任何元素。除非的确有必要,否则不选择这种方法。

strong.error {
    color: red;
}


  • 元素的伪类或伪元素:在下面这个例子中,选择器选择属于link伪类的a元素(即页面上还未访问的链接)。
    a:link {
      color: red;
    }


  • 元素是否有某些属性和值:可以在选择器中使用方括号添加关于目标元素的属性或值的信息,第一个例子针对的是所有具有title属性的a元素,第二个例子针对的只是指向维基百科页面的a元素。
a[title] {
    color: red;
}
a[href="http://www.wikipedia.org"] {
    color: red;
}


按上下文选择元素

  • 一种设置的三种方法
    /* 这里组合使用了类选择器和类型选择器,`.architect`和`p`之间的空格表示这个选择器会寻找任何作为architect类元素后代(无论是第几代)的p元素。 */
    .architect p {
      color: red;
    }
    /* 是任意article祖先的所有p元素,这是三个钟特殊性最低的一个 */
    article p {
      color: red;
    }
    /* 属于architect类article元素的祖先的任意p元素,是三个中特殊性最高的一个 */
    article.architect p {
      color: red;
    }


  • 按祖先元素选择要格式化的元素(CSS3中称为后代结合符):
    首先输入希望格式化的元素的祖先元素的选择器,然后输入一个空格,如果需要可以对后续的每个祖先元素重复前两个步骤。然后输入希望格式化的元素的选择器。


  • 按父元素选择要格式化的元素(CSS3中称为子结合符):
    /* 这是一个例程 
    这个选择器仅选择architect类元素的子元素(而非子子元素、子子子元素等)的p元素。包含于其他任何其他元素的p元素均不会被选中。 */
    .architect > p {
      color: red;
    }


  • 按相邻同胞元素选择要格式化的元素
    同胞(sibling)元素是拥有同一父元素的任何类型的子元素。相邻同胞元素(adjacent sibling)是直接相互毗邻的元素,即它们之间没有其他的同胞元素。如下面的例程,h1和p是相邻同胞元素,p和h2是相邻同胞元素,而h1和h2则不是相邻同胞元素。不过他们都是同胞元素(也是body元素的子元素)。
    ...
    <body>
      <h1>...</h1>
      <p>...</p>
      <h2>...</h2>
    </body>
    </html>


/* 这是按相邻同胞元素选择要格式化的元素的例程。相邻同胞结合符只选择直接跟在同胞p元素之后的元素 */
.architect p+p {
    color: red;
}


选择第一个或最后一个子元素

  上面解释了如何选择作为另一个元素的子元素的元素,举了.architect > p的例子。那么有的时候我们需要选择仅作为某元素第一个或最后一个子元素的元素,这时就要用到:first-child:last-child伪类。例程如下:

/* HTML */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Select by :first-child</title>
    <link rel="stylesheet" href="css/first-child.css" />
</head>
<body>
<p>A partial list of Gaudí's projects follows:</p>
<ul>
    <li lang="es">La Casa Milà</li>
    <li lang="es">La Sagrada Família</li>
    <li>College of the Teresians <span lang="es">(Colegio Teresiano)</span></li>
    <li>Park Güell</li>
</ul>
</body>
</html>


/* CSS 这个选择器会选择作为父元素的第一个子元素的li元素
   This body rule doesn't appear in the chapter. */
body {
    font: 100%/1.3 sans-serif;
    /* The shorthand notation above is the same as these three individually:
    font-family: sans-serif;
    font-size: 100%;
    line-height: 1.3;
    */
}
li:first-child {
    color: red;
}


选择元素的第一个字母或者第一行

  我们可以分别使用:first-letter:first-line伪元素只选择元素的第一个字母或第一行。

p:first-letter {
    color: red;
    font-size: 1.4em;
    font-weight: bold;
}


p:first-line {
    color: red;
}


  可以将first-letterfirst-line伪元素与比这个例子中的选择器更复杂的选择器结合使用。例如,如果要选择包含在project类元素中的每个段落的第一个字母,可以使用.project p:first-letter。只有某些特定的CSS属性可以应用于:first-letter伪元素,包括fontcolorbackgroundtext-decorationvertical-align(只要:first-letter不是浮动的)、text-transformline-heightmarginpaddingborderfloatclear
  第一个字母前面的标点符号会被当做第一个字母的一部分,一同被格式化。然而IE8之前的版本并不支持。
  在CSS3中,:first-line的语法为::first-line:first-letter的语法为::first-letter。这样修改的目的是将伪元素(有四个包括::first-line``::first-letter``::before``::after)与伪类(:first-child:link:hover)区分开。


按状态选择链接元素

  CSS允许根据链接的当前状态对他们进行格式化。链接的状态包括访问者是否将鼠标停留在链接上,链接是否被访问过,等等。可以通过一系列伪类实现这一特性。

/* This body rule doesn't appear in the chapter. */
body {
    font: 100%/1.3 sans-serif;
    /* The shorthand notation above is the same as these three individually:
    font-family: sans-serif;
    font-size: 100%;
    line-height: 1.3;
    */
}
// 程序中的a是链接元素的名称,在实际应用中,替换成需要格式化的链接元素的名称
// 设置从未被激活或指向,当前也没有被激活或指向的链接的外观
a:link {
    color: red;
}
// 设置访问者已激活过的链接的外观
a:visited {
    color: orange;
}
// 前提是链接是通过键盘选择并已准备好激活的(注意:如果链接处于活跃状态也会获得焦点)
a:focus {
    color: purple;
}
// 设置光标指向链接时链接的外观
a:hover {
    color: green;
}
// 设置激活过的链接的外观
a:active {
    color: blue;
}
  • 应该始终按照这种顺序(缩写为LVFHA)定义链接的样式,以避免链接处于多种状态(如已访问和鼠标停留)时覆盖属性。
  • 也可以为其他类型的元素使用:active:hover伪类。例如设置P:hover { color: red; }以后,鼠标停留在任何段落都会显示为红色。


按属性选择元素

  可以对具有给定属性或属性值得元素进行格式化。CSS提供了多种方式匹配属性和属性值,包括只检查属性名、检查全部或者部分属性值等。

/* 方括号包围目标属性和目标属性值。这个例子中没有属性值,它选择的是所有具有class属性的段落。*/
p[class] {
    color: red;
}
选择器 属性值
[attrobute] 匹配指定属性,不论具体值是什么
[attrobute="value"] 完全匹配制定属性
[attrobute~="value"] 属性值是以空格分隔的多个单词,其中有一个完全匹配指定值
[attrobute竖杠="value"] 属性值以value-打头
[attrobute^="value"] 属性值以value打头,value为完整的单词或单词的一部分
[attrobute$="value"] 属性值以value结尾,value为完整的单词或单词的一部分
[attrobute*="value"] 属性值为指定值的子字符串

  属性选择器看起来都长得差不多,但是它们使用起来非常灵活,可以以多种方式匹配元素的属性及其值,下面给出更多实用的例子,演示属性选择器的几种不同的使用方式。


  • 这个选择器选择任何rel属性值等于external(必须完全匹配)的a元素。对任何连接到站外页面的a元素(即站外链接)添加rel="external"是非常好的习惯。使用下面的样式规则,可为外部链接添加独特的样式,从而告诉访问者点击该链接将离开你的网站。
    a[rel="external"] {
      color: red;
    }


  • 假设某article元素有两个类,如<article class="project barcelona">,另一个article有一个类,如<article class="barcelina">~=语法可以测试单词的部分匹配,即匹配以空格相隔的多个单词中的一个。
    article[class~="barcelona"] {
      color: red;
    }
    /* 这个选择器也能匹配,因为这个选择器匹配部分字符串(不需要完整的单词) */
    article[class*="barc"] {
      color: red;
    }
    /* 这个选择器无法匹配,因为barc并不是空格分隔的单词列表中的某个完整的单词。 */
    article[class~="barc"] {
      color: red;
    }


  • 这个选择器选择任何带有lang属性且属性值以es开头的h2(如es-ESes-PE,前面代表西班牙西班牙语,后面代表秘鲁西班牙语)。
    h2[lang|="es"] {
      color: red;
    }


  • 通过使用通用选择器,这个选择器选择任何带有lang属性且属性值以es开头的元素。
    *[lang|="ess"] {
      color: red;
    }


  • 通过联合使用多种方法,这个选择器选择所有既有任意href属性,又有任意属性值包含单词howdytitle属性的a元素。
    a[href][title~="howdy"] {
      color: red;
    }


  • 作为上一选择器的精确度低一些的变体,这个选择器选择所有既有任意href属性,又有任意属性值包含how(作为完整的单词或单词的一部分,它匹配howhowdyshow等,无论how出现在属性值的什么位置)的title属性的a元素。
    a[href][title*="how"] {
      color: red;
    }


  • 这个选择器匹配任何href属性值以http://开头的a元素。
    a[href^="http://"] {
      color: orange;
    }


  • 这个选择器匹配任何src属性值完全等于logo.png的img元素。
    img[src="logo.png"] {
      border: 1px solid green;
    }


  • 这个选择器的精确度比前一个低一些,它匹配任何src属性值以.png结尾的img元素。

    img[src$=".png"] {
      border: 1px solid green;
    }
  • 以上例子很难全面概括使用选择器能够实现的效果,这里只是希望用实际例子激发兴趣,然后继续探索。


  • 按属性选择元素这一小节的CSS样式设置的例子是针对下面这段HTML例程的:
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <title>Antoni Gaudí - Introduction</title>
      <link rel="stylesheet" href="css/groups.css" />
    </head>
    <body>
    <article class="architect">
      <h1>Antoni Gaudí</h1>
      <p>Many tourists are drawn to Barcelona to see Antoni Gaudí's incredible architecture.</p>
      <p>Barcelona <a href="http://www.gaudi2002.bcn.es/english/" rel="external">celebrated the 150th anniversary</a> of Gaudí's birth in 2002.</p>
      <h2 lang="es">La Casa Milà</h2>
      <p>Gaudí's work was essentially useful. <span lang="es">La Casa Milà</span> is an apartment building and <em>real people</em> live there.</p>
      <h2 lang="es">La Sagrada Família</h2>
      <p>The complicatedly named and curiously unfinished Expiatory Temple of the Sacred Family is the <em>most visited</em> building in Barcelona.</p>
    </article>
    </body>
    </html>


指定元素组

  我们经常需要将相同的样式规则应用于多个元素。可以为每个元素重复地设置样式规则,也可以组合选择器,一次性地设置样式规则。当然后一种方法效率更高,通常也会让样式表更易维护。

/* 可以列出任意数量的单独的选择器(无论他们包含的是元素名称、类还是伪元素),只需要用逗号分隔它们即可 */
h1,
h2 {
    color: red;
}

  可以组合使用任何类型的选择器,从最简单的到最复杂的都可以。例如,可以使用h2, .project p:first-letter来选择二级标题以及包含在class等于project的所有元素中的p元素的第一个字母。
  有时,为应用于多个选择器的共同样式创建一个样式规则,再为没有共同点的样式分别创建单独的样式规则是很有用的。要记住一点,在样式表中后指定的规则会覆盖先指定的规则。


组合使用选择器

  以上的例子都比较简单,这是为了更清晰的了解这些选择器,然而在实际使用中,常常要组合这些技术,才能找到要格式化的元素,这也是选择器的功能强大之所在。

/* 这个例子展示了可实现相同效果的几种方式(不过此处不推荐使用这几种方法), 它们是按照特殊性由低到高排列的。没必要搞一堆吓唬人的选择器来实现网页中的大部分设计,应该只在必要的时候组合使用选择器,并且最好将特殊性控制在刚好需要的程度  */
em {
    color: red;
}
.project em {
    color: red;
}
.architect .project em {
    color: red;
}



HTML and CSS 读书笔记



我的空间

| Linkedin | Levi.Blog | oschina | CSDN | 掘金 | JEESNS | 知乎主页 | 知乎专栏 | 微博 | 豆瓣 |
| GitHub | GitBook | Segmentfault | 微信公众号:心源呓码 (账号: xyyima) |


帖子评论

关注 / 粉丝

我无话可说