前端之旅：《Head First HTML & CSS》7、8章

July 11 2016

下面是今天学习《Head First HTML & CSS》第7、8章的学习笔记

第7章. CSS入门

内嵌样式：可以直接在标签里面写样式 <p style="color:red;..."></p>
内联样式：在head标签里 <style> css样式 </style>
外部样式：在head标签里以文件方式包含进来 <link type="text/css" rel="stylesheet" href="css样式文件">，在html5中已经不需要type属性，因为样式表目前只有css

以上3种方法优先级依次从高到低，但是推荐顺序从低到高

继承是指从父元素那里继承样式，不是所有样式都能继承，一部分如font-family等可以继承，而border就不可继承。一般来说会影响文本外观的样式都能继承。
覆盖继承是指在子元素中使用了和父元素重复的样式规则，那么子元素的样式就会覆盖父元素的样式。

CSS使用/*这是注释*/这样的格式来注释
多个选择器应用同样的样式用,号隔开
一个元素可以加入多个类(class)，只需要把各个类名放在class属性中，并且用空格隔开即可，而且顺序并不重要，因为就算规则冲突，也是根据css文件中出现的顺序而不是这个顺序。如果你希望一个元素拥有不同类中定义的不同样式，那么就要使用多个类。
如果多个选择器选择一个元素，就会发生冲突，如果一个规则比其他规则更“特定”，就胜出。
如果由于两个选择器有相同的特定性而无法解决冲突，就要利用CSS文件中规则的先后顺序(就近原则)来解决问题，往往是越靠后越优胜。
W3C CSS验证工具：http://jigsaw.w3.org/css-validator

font-family 指定页面中使用的字体，可以指定特定的字体，也可以指定某一字体系列。font-family字体系列有：

Fantasy字体系列包含有某种风格的装饰性字体

作者推荐方法：

body {
    /*字体生效的顺序是从前往后*/
    /*推荐使用sans-serif系列字体的方法，先提供候选字体，最后提供字体系列，浏览器会选择该系列的默认字体来显示*/
    font-family: Verdana, Geneva, Arail, sans-serif;  
}

如果字体名中间包含空格，则需要用双引号"将其包围起来，如"Microsoft Yahei"

font-size 控制字体大小，可以使用的方式
- px：实际上是指字体高度（字体最高部分和最低部分之间的距离）
- %：相对于父元素的字体的百分比
- em：和%一样，只是用倍数表示，如1.2em=120%
- 关键字：xx-small、x-small、small、medium、large、x-large、xx-large，他们之间是20%的关系，但是具体值基于浏览器默认值
作者推荐指定字体方法：
1. 选择一个关键字，指定它作为body规则的字体大小，这相当于页面默认字体大小（如果使用像素，老版本的IE不支持）
2. 使用em或%，相对于body字体大小指定其他元素的字体大小
  作者认为这样做的好处是，所有字体都会基于浏览器字体大小进行相对调整。
color 设置字体颜色，实际上它控制着一个元素的前景色，包括边框等…
font-style 指定字体倾斜，none、italic和oblique，italic和oblique在不同浏览器可能会有不同表现
font-weight 影响字体粗细，lighter、normal、bold、bolder、100~900之间100的倍数数值（未广泛支持）
text-decoration 增加更多文本风格，none、underline、overline、line-through。除了第一个外的在同一条规则中可以叠加使用，如text-decoration: underline overline;，如果写在多个样式中，则会覆盖显示

由于不确定用户是否安装了指定字体，所以如果希望用户使用统一字体，则可以采用Web字体。

Web开放字体格式：简称woff（Web Open Font Format），文件后缀.woff，woff是作为Web字体的标准字体格式出现的。
常用web字体：
- TureType字体: .ttf
- OpenType字体: .otf(建立在TureType基础之上)
- Embedded OpenType字体: .eot(OpenType的一种压缩形式，仅IE支持)
- SVG字体: .svg(通用图像格式)
- Web开放字体: .woff(建立在TureType基础之上，已经发展为标准)
为页面添加web字体：
1. 在服务器上保存你想使用的字体(或用托管服务)
2. 在css文件中添加@font-face规则，这是css一个比较新的特性。@font-face是一个内置的css规则，而不是一个选择器规则。
  1
  2
  3
  4
  5
  6
  @font-face {
  font-family: "指定字体名";
  src: url(http://x.svg),
  url(http://x.woff);
  /*src可以指定多个字体位置的url，用逗号分隔*/
  }
3. 在你想使用该字体的地方用font-family规则指定 { font-family: "你指定的字体名"; }，这个名字是你在font-face规则中定义的字体名。
  
  如果要使用多个字体，则要创建多个@font-face，而且要分别指定唯一的名字。
  
  注意：移动设备和小型设备并不支持web字体
@font-face是一个内置规则，@import和@media也是内置的规则，@import允许导入其他CSS文件，@media允许创建特定于某些“媒体”类型的CSS规则

rgb（red green blue）是3基色，可以按不同比例混合出任何一种其他颜色
有4种方法给css规则指定颜色
1. 颜色名：color: orange;
2. 3基色百分比：color: rgb(80%, 40%, 0%);
3. 3基色数值（0-255之间）：color: rgb(204, 102, 12);
4. 十六进制码：color: #cc6600;（每2位代表rgb的0-255的数值的十六进制，从左至右依次是红、绿、蓝，如果每组分量中两位数字都相同，则可以简写，#cc6600可以简写#c60，而#cc6610就不可以）