《CSS3实战》读书笔记第2章层叠样式表（CSS）

层叠样式表

本章将阐述CSS的基本规则。

解构CSS

所谓CSS，由选择器（selector）和声明块（declaration block）组成。再进一步细分，每个声明包括了属性和值。

selector：{

    property:value;

}

内联还是外链？

大多时候显然是外链更高效。样式文件可以缓存到用户电脑，如果你一个网站用一套css，当用户访问同一个网站其它页面时，就不用再次加载样式。

然而，缓存对于开发者来说是个坏东西。在本地调试时，修改样式表之后可能无法马上看到变化这时应该通过ctrl+F5来强制刷新清空缓存。

内联样式

同在在head标记内建一个style标记，样式在里面写。在H5以前的规范中，style必须加上属性type="text/css",现在已经不作要求。如果head内还有javascript，需要把script标记放到样式的后面。

单个网页而言，内联样式相对较快，但是可维护性较差。

外链样式

外链样式起名随意，但是最好是相关的。全站的表单用同一套样式时，可以命名为form.css。

对于外链css还可以使用在线工具进行验证。http://jigsaw.w3.org/css-validator/

外链css必须关联。可以选择<link>标记也可以用@import来指向想要被引用的css，浏览器对此二者的解释并无区别。

link

h5的link调用格式为：

<link rel="stylesheet" href="css/styles.css">

xhtml的格式为：

<link type="texxt/css" rel="stylesheet" href="....."/>

h5省略了type="texxt/css"

通过`@import`调用：

<style>

    @import url(css/style.css)/*路径加不加引号都可以*/

</style>

@import的不同之处：link语法属于html，而@import属于css语言，作为css语言，意味着你还可以在后面继续写其它css。这样一来，style内的css就是一个关联了其它样式的样式文件。可以认为是内联样式的一种变体。需要在网页加载之后才开始加载。最大的问题：不支持javascript控制DOM修改样式。

小结：有研究指出，在某些时候，采用@import方式引入的css会拖慢速度，因此建议只使用link。

两者都是外部引用CSS的方式，但是存在一定的区别：

第一个样式

比如说一个html5文档信息如下：

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>CSS:The Missing Manual -- Chapter 2</title>

</head>

<body>

<h1>CSS: The Missing Manual</h1>

<p>...(假文) </p>

<h2>标题2</h2>

<p>...(假文)</p>

<p>...(假文)</p>

<h2>Nisi Ut Aliquid </h2>

<p>...(假文)</p>

<p>...(假文)</p>

<address>

Copyright 2016, Dang Jingtao

</address>

</body>

</html>

行间样式

行间样式并非一无是处：比如邮件等明确要有的信息。

比如：

<h1 style="color:#666:font-size:3em;">

内联样式

<style>

    /*格式化h1*/

    h1{

        color:#666;

        font-size:3em;

        margin-top:10px;

        margin-left:80px;

    }

    /*格式化段落*/

    p{

        color:#616161;

        line-height: 150%;

        margin-top:10px;

        margin-left: 80px;

    }

</style>

外链css

在网页文件head元素中关联：

<link rel="stylesheet" href="styles.css">

在根目录下的styles.css文件写入CSS：

/*格式化页面*/

html{

    /*上内间距25px*/

    padding-top:25px;

    background-image:url(images/bg_page.png);

}

body{

    width: 80%;

    padding:20px;

    margin:0 auto;

    box-shadow: 10px 10px 10px rgba(0,0,0,.5);

    background-color: #e1edeb;

}

/*格式化h1*/

h1{

    font-family: 'Gravitas One','Arial Black',serif;

    font-weight: normal;

    color:#666;

    font-size:3em;

    margin-top:10px;

    margin-left:80px;

}

/*格式化段落*/

p{

    color:#616161;

    line-height: 150%;

    margin-top:10px;

    margin-left: 80px;

}

初步效果如下：

对于用户的系统字体不满意的话可以采用谷歌字体：

<link rel="stylesheet" href="http://fonts.googleleaps.com/css?family=Gravitas+One">

根据同样的机制，可以给文档加上更丰富的样式（字体，色彩，边距）

html {

    padding-top: 25px;

    background-image: url(images/bg_page.png);

}

body {

  width: 80%;

  padding: 20px;

  box-shadow: 10px 10px 10px rgba(0,0,0,.5);

  margin: 0 auto;

  background-color: #E1EDEB;

}

h1 {

    color: #666666;

    font-size: 3em;

    font-family: 'Gravitas One', 'Arial Black', serif;

    font-weight: normal;

    margin: 0;

}

p {

    font-family: "Palatino Linotype", Baskerville, serif;

    color: #616161;

    line-height: 150%;

    margin-top: 10px;

    margin-left: 60px;

}

h2 {

  color: #B1967C;

  font-family: 'Gravitas One', 'Arial Black', serif;

  font-weight: normal;

  font-size: 2.2em;

  border-bottom: 2px white solid;

  background: url(images/head-icon.png) no-repeat 10px 10px;

  padding: 0 0 2px 60px;

  margin: 0;

}

.intro {

  color: #6A94CC;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 1.2em;

  margin-left: 0;

  margin-bottom: 25px;

}

最后效果：（在线字体引用失败时可翻墙试试）

技巧总结：

响应式居中可以直接用body百分比宽度，居中实现，可以加阴影。html文档的背景可以实现网页背景纹理，不需要body上做文章。