From Head First HTML CSS

7 CSS入门

选择元素

p { background-color: red; }
选择p元素为段落加上背景颜色；上面的语句称为一个规则；{前的p也称为一个选择器，这个样式应用到选择器选择的元素，这里就是p元素。

多个规则

h1,h2 {
color: gray;
}
h1,h2标题的字体颜色都设置为黑色。元素的共同样式归组在一起，把一个元素的特定样式写在另一个规则中。

.css文件

上面的css语句都可以放在head的<style>元素中，但是面对大量html文件时，这绝不是理想化的方式。可以将css语句存放到.css文件，而只在html文件<head>中创建链接指向css文件。css注释？/* */
<link type="text/css" rel="stylesheet" href="lounge.css">
link：使用link元素链接外部信息
type：指明这个信息的类型是“text/css”，也就是说这是一个css样式表。在HTML5中，不再需要这个属性。
rel：这个属性指定了HTML文件和要链接的文件之间的关系。

继承

在一个段落里可能还会有<a> 等元素，作用于p上的样式同样会作用到a和em元素上，但注意不是所有的样式都会继承。因此想修改页面整体的字体一致，可以选择body选择器在规定字体样式，但如果想对某个元素指定，也可以对它新建规则--覆盖继承。

在html文件要修改的元素中加入class属性，如，greentea是类名。

在css文件中加入规则，如 p.greentea{ color:green; }

同样的，如果上面的规则blockquote也要用，可以归为一组，把blockqutoe加入greentea类。如果希望greentea类中所有元素都有同一种样式，可以简写为：.greentea{ color:green; }

一个元素加入多个类：

应用样式的简单说明

要想知道一个元素的font-family属性值

首先检查css文件中有没有选择器选中这个元素，如果有就可以直接查看；没有，就依赖于继承，查看元素的父元素以及父元素的父元素；如果没有继承，就使用浏览器的默认值。

多个选择器选中同一个元素

应用这三个类中的哪个color规则呢？首先是判断规则的特定程度，如果一样就选CSS文件中最后列出的那个规则。
首先看css文件中，这三个类对color的定义：

p.blueberry{
	color:purple;
}
p.greentea {
	color: green;
}
p.raspberry{
	color: blue;
}

这三个规则都是选择一个类中的段落，所以他们的特定程度一样。故此时color为蓝色。

验证css文件正确性

网站：jigsaw.w3.org/css-validat…

8 增加字体和颜色样式

font-family 属性

字体系列，指定页面中各元素使用的字体类型。每个font-family包含一组有共同特征的字体。共有5个字体系列：

sans-serif：它包括没有衬线（字母末端的装饰性小细线）的字体 eg：Arial。特点：高雅传统

serif：包括有衬线的字体 eg：Times，Times New Roman，Georgia。特点：外观清晰，可读性好。

monospace：此系列中字体包含固定宽度的字符。特点：像打字机打印的。

cursive ：类似手写体。特点：有趣或者很有风格

fantasy：某种风格的装饰性字体。特点：有趣或者很有风格

body{
    font-family: Verdana, Geneva, Arial, sans-serif;
}

上面指定的font-family包含一个字体列表，它们都来自sans-serif字体系列。浏览器会按照从前到后的顺序选取字体，如果都不可用，就用浏览器默认的"sans-serif"字体。
注：若一个字体名包含多个单词，表示时需要加上双引号。

@font-face

允许你定义一种字体的名字和位置，然后在web页面中使用。.woff文件，web open font format即web开放字体格式，存储在服务器上。假如我们的html文件引用了这种格式，那么可以通过服务器下载使用。

如何为web页面增加web字体

找到一个字体

确保有所需字体的所有格式：.ttf, .tof, .eot(Microsoft专用), .svg, .woff

把字体放在web上，或者利用网上的在线字体服务。我们需要字体文件的URL

在CSS中增加@font-face属性：在.css文件中，把这个规则增加到文件最上方。

在CSS中使用font-family字体名。

加载页面。

@font-face{
    font-family: "Emblema One";
    src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"),  
         url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf"); 
} 

/* 与正常的规则不用，正常规则会选择一组元素并指定样式，  
而@font-face规则会建立一个字体，将指定一个font-family名，以便以后使用。 
font-family属性可以为这个字体创建一个名字，但最好和字体名相同。src属性告诉浏览器在哪可以得到这个字体。
*/

font-size 属性

body{
    font-size: 14px;
}
h1{
    font-size: 140%;
}
p{
    font-size: 1.2em;
}
body{
    font-size: small;
}

按像素指定字体大小。或者按百分比，百分比的含义是相对于另一个字体这个字体多大。由于font-size属性是继承父级元素，所以就是相对于父元素的140%。em表示字体的大小比例，与百分数类似，p的大小是父级body字体的1.2倍。small是关键字指定，从小到大依次可以为：xx-small, x-small, small, medium, large, x-large, xx-large, small大小在12px左右，每一个大小之间约比前一个大20%。

color 属性

按名指定颜色

按红绿蓝指定颜色 eg:background-color: rgb(80%, 40%, 0%);,or background-color: rgb(204, 102, 0);

按十六进制码指定颜色 eg:#cc6600,cc表示红，66表示绿，00表示蓝，如果每一组分量中两位数字都相同，可以使用简写。#c60

font-weight 属性

属性值可取：normal，bold

font-style 属性

属性值：italic（斜体），oblique（倾斜）

text-decoration 属性

属性值：line-through, underline(下划线), overline(上划线), none(若文本继承了不想要的，可以去除)

前端语言 | HTML CSS 7-8

7 CSS入门

8 增加字体和颜色样式