CSS 概念介绍

2016-05-20 Friday FrontEnd, Program

简介

Cascading Style Sheets, CSS 层叠样式表，定义了如何显示 HTML 中的元素，为了方便管理，通常会将样式表单独保存在 CSS 文件中，利用 CSS 可以很方便控制网页的样式和布局，会大大提升网页开发效率。

示例

以一个很简单的示例开始。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello CSS</title>
    <style>
    body {
      background-color:#d0e4fe;
    }
    h1 {
      color:orange;
      text-align:center;
    }
    p {
      font-family:"Times New Roman";
      font-size:20px;
    }
    </style>
  </head>
  <body>
  <h1>CSS 实例!</h1>
  <p>这是一个段落。</p>
  </body>
</html>

基本语法

CSS 规则由选择器以及声明组成，声明可以有多条，通过 ; 分割；每条声明由一个属性和一个值组成。

css format

另外，可以通过 /* 和 */ 进行注释。

样式种类

插入样式表方法有三种：A) 外部样式表；B) 内部样式表；C) 内联样式。

外部样式表

在需要多个页面时使用，可以通过改变一个文件来改变整个站点，需要在每个页面使用 <link> 标签链接到样式表文件。

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

在浏览器渲染页面时，会从文件 style.css 中读到样式声明，例如如下的示例。

p {margin-left:20px;}
body {background-image:url("/images/backgroud.gif");}

注意，在属性值和单位之间不要留空格，例如 margin-left: 20 px 是有问题的。

内部样式表

对单个页面需要特殊样式时，就可以使用内部样式表，也就是在头部使用 <style> 标签进行声明。

<head>
  <style>
    p {margin-left:20px;}
    body {background-image:url("images/backgroud.gif");}
  </style>
</head>

内联样式

在具体的元素上添加，不过会损失灵活性，所以，不建议使用。

<p style="margin-left:20px;color:red">Hello World</p>

优先级

如果样式被多次定义，那么属性会从多个样式中继承过来；当存在重复时，会按照内联样式、内部样式、外部样式、浏览器默认样式的优先级覆盖。

h3 { /* 外部样式 */
    color:red;
    font-size:8pt;
}

h3 { /* 内部样式 */
    font-size:20pt;
}

那么最终得到的样式为。

color:red;
font-size:20pt;

也就是说，颜色继承于外部样式表，而字体大小会被内部样式表中的规则覆盖。

另外，注意，在上述的继承顺序中，需要保证外部样式在内部样式之前引入，否则，外部样式的优先级要高于内部样式。

<head>
  <link rel="stylesheet" type="text/css" href="style.css"/>
  <style type="text/css">
    h3{color:green;}
  </style>
</head>

选择器

最常见的就是元素选择器，也就是 DOM 中所使用的最原始元素。

html {color:black;}
h1 {color:blue;}

如果样式表中有很多样式的元素，那么可以使用分组选择器，每个选择器用逗号分隔。

h1, h2, p {color: green;}

还有一个比较特殊的通配符选择器，会直接匹配所有元素，例如 *{color: red} 会使每个元素都为红色。

类选择器

类选择器可以独立于文档元素存在，只要在元素中通过 class="XXX" 进行了标识，那么就可以通过类选择器修饰，当然，也可以在元素中指定多个类选择器，例如如下。

<html>
  <head>
    <style type="text/css">
      .important {font-weight:bold;}
      .warning {font-style:italic;}
      .important.warning {background:silver;}
    </style>
  </head>
  <body>
    <p class="important">This paragraph is very important.</p>
    <p class="warning">This is a warning.</p>
    <p class="warning important ">This paragraph is a very important warning.</p>
  </body>
</html>

其中元素中类的顺序没有关系，上述 important 类是粗体，warning 为斜体，而同时包含 important 和 warning 的所有元素添加一个红色背景。注意，除了这两个类之外，还可以有其它类，也是可以匹配的。

另外，通过 p.marked { } 为所有 class="marked" 的 p 元素指定一个样式。

ID 选择器

在元素中通过 id="XXX" 使用，样式表中则使用 # 标识。

<html>
  <head>
    <style type="text/css">
      #intro{font-weight:bold;}
    </style>
  </head>
  <body>
  <p id="intro">This is a paragraph of introduction.</p>
  </body>
</html>

虽然在使用方法上两者基本类似，但是有如下区别：

ID 只能使用一次，而且是仅一次，而类只要元素中存在，那么就会被渲染。
ID 无法使用列表，因为属性不允许以空格分割的词列表。

所以，通常来说，ID 具有特殊的含义，而且于无需直到具体元素，例如标识一个 important ID ，不需要关心其对应的是 p span h1 等等。

属性选择器

根据 HTML 的属性名称以及值进行匹配。

<html>
  <head>
    <style type="text/css">
    [title] { color:red; }
    </style>
  </head>
  <body>
    <h2 title="Hello world">Hello world</h2>
  </body>
</html>

如上，只匹配属性的 Key 为 title 的元素，另外，还可以针对属性 Key/Value 分别进行匹配，常见的有如下几种方式。

选择器	描述
`[attribute]`	选取带有指定属性的元素。
`[attribute=value]`	选取带有指定属性和值的元素。
`[attribute~=value]`	选取属性值中包含指定词汇的元素。
`[attribute\|=value]`	选取带有以指定值开头的属性值的元素，该值必须是整个单词。
`[attribute^=value]`	匹配属性值以指定值开头的每个元素。
`[attribute$=value]`	匹配属性值以指定值结尾的每个元素。
`[attribute*=value]`	匹配属性值中包含指定值的每个元素。

后代/包含选择器

可以用来选择某元素后代的元素，例如只希望对 h1 元素中的 em 元素应用样式，那么可以写成 h1 em {color:red;} ，中间通过空格分开。

子元素选择器

通过大于号 > 分割，相比后代选择器，子元素选择器的范围更小，仅严格对某个元素的子元素生效。

<html>
  <head>
    <style type="text/css">
      h1 > strong {color:red;}
    </style>
  </head>
  <body>
    <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
    <h1>This is <em>really <strong>very</strong></em> important.</h1>
  </body>
</html>

其中只有第一行的内容，在 <h1> 之后会紧跟着 <strong> ，也就是子元素，那么会变红；而第二行，因为中间隔着 <em> ，所以 <strong> 实际是孙子元素，也就不会被渲染为红色。

也可以将后代和子选择器结合，例如 table.company td > p 。

相邻兄弟选择器

用来选择紧接某一元素后的元素，且二者有相同父元素，通过加号 + 标识。

<html>
  <head>
    <style type="text/css">
      h1 + p {color:red;}
    </style>
  </head>
    
  <body>
    <h1>Heading</h1>
    <p>Paragraph A</p>
    <p>Paragraph B</p>
    <p>Paragraph C</p>
  </body>
</html>

如上，只有 Paragraph A 作为相邻兄弟元素，会变为红色。

伪类

用于向某些选择器添加特殊的效果，最常用的就是超链接。

a:link    {color: #FF0000}   /* 未访问的链接     */
a:visited {color: #00FF00}   /* 已访问的链接     */
a:hover   {color: #FF00FF}   /* 鼠标移动到链接上 */
a:active  {color: #0000FF}   /* 选定的链接       */

其它

@media

通常用在编写响应式应用的时候，在 css2 中已经支持 @media 属性，但实现功能比较少，通常仅用做打印时定制化。

@media screen {
  body{ font-size:12pt; }
}

@media print {
  @import "print.css"
  body{ font-size:8pt; }
}

而在 CSS3 中，增加了 media queries 功能，这样就可以根据具体的设备进行适配。

/* 宽度小于 500px 时显示绿色 */
@media screen and (max-width:500px) {
  body{ background:green; }
}
/* 宽度大于 800px 时显示红色 */
@media screen and (min-width:800px) {
  body{ background:red; }
}

详细可以查看 Using Media Queries 中的介绍。

如果喜欢这里的文章，而且又不差钱的话，欢迎打赏个早餐 ^_^