Head first HTML与CSS笔记 part8

增加字体和颜色样式

字体的样式

用font-family 定制页面中使用的字体

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

用font-size控制字体大小

body{
		font-size:14px;
}

用color属性为文本设置颜色

body{
		color：silver;
}

属性值可以是：blue,red,yellow,black,purple,gray，green等

用font-weight设置字体粗细

body{
		font-weight:bold;
}

属性值可以是：lighter,normal,bold,bolder

用text-decoration属性为文本增加更多风格

body{
		text-decoration：underline;
}

属性值可以是：none,underline,overline,line-through，italic(倾斜风格）,oblique(倾斜文本）

用font-style属性为字体增加风格

body{
		font-style：underline;
}

属性值可以是：none,underline,overline,line-through，italic(倾斜风格）,oblique(倾斜文本）

字体系列

每个font-family包含一组有共同特征的字体，共有五个字体系列

1. sans-serif:包括没有衬线的字体，与serif字体相似，通常认为sans-serif字体在计算机上面更容易识读，如verdana,Arial black,Trebuchet MS,Arial,Geneva
2. serif：包括有衬线的字体，衬线就是字母末端的一些装饰性的笔画，看到衬线会想到新闻报刊的字体，如times,times new roman,georgia
3. monospace:包含固定宽度的字符，即字母在水平方向所占宽度一样，这些字体主要用于软件代码显示，如courier,courier new,andale mono
4. sursive:包括看似手写的字体，有时标题中会用到这些字体，如comic sans,apple chancery
5. fantasy:包含有某种风格的装饰性字体，如last ninja,impact

用CSS指定字体系列

使用font-family可以指定多个属性的字体，只需要输入这些字体名，并用空格隔开
字体名区分大小写，要严格按照其正确格式输入字体名
最后总是放一个通用的字体系列名

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

浏览器解释font-family规范中列出的字体
首先查看计算机上是否有Verdana字体，如果有，这个元素（这里具体为body元素）就会使用这个字体。如果Verdana不可用，再查找Geneva字体，如果这个字体可用，这个元素就会使用这个字体，否则再查看Arial字体，如果可用就使用，不可用，就使用浏览器默认的sans-serif字体
利用font-family属性，可以创建一个首选字体列表，我们希望大多数浏览器都能有第一个选择的字体，不过，如果没有，至少可以确保浏览器能提供同一字体系列中的一个通用字体。
如果一个字体名中含有多个单词，需要在字体名两边添加引号

font-family:"Courier New",Courier;

引入web字体

可以使用Web字体向用户浏览器提供一种字体。为此要用到css的一个特性：@font-face规则，这个规则允许定义一种字体的名字和位置，然后在页面中使用。

Web字体的工作原理

• 浏览器首先获取一个引用这些字体的HTML页面
• 浏览器再获取这个页面所需要的Web字体文件
• 获取这个字体后浏览器显示页面时就会使用这个字体

如何为页面增加Web字体

• 找到一个字体
• 确保有所需字体的全部格式
  
  大多数现代浏览器上支持最广泛的格式是Web开放字体格式
• 将字体文件放在Web上。可以将Web文件放在Web上，也可以利用网上的很多在线字体服务。不管哪种情况，都需要字体文件的URL
• 在CSS中增加@font-face属性。在CSS文件中增加@font-face规则，把这个规则增加到文件的最上面，放在body规则上面

@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-face规则会建立一个字体，将指定一个font-family名，以便以后使用
在@font-face规则中，我们使用font-family属性为这个字体创建一个名字。可以使用你喜欢的任何名字，不过通常最好与字体名一致
src属性告诉浏览器在哪里可以得到这个字体，对于浏览器可以识别的每一个字体文件，我们要分别指定一个src值
@font-face规则告诉浏览器，要加载src URL指定的字体文件，浏览器会加载每一个src文件，知道找到它能支持的文件

• 在CSS中使用font-family名

h1{
		font-family:"Emblema One",sans-serif;
}

• 加载页面

调整页面大小

可以按像素指定页面大小，具体有四种表示方式

body{
		font-size:14px;
}
h1{ 
		font-size:150%;
}
h2{ 
		font-size:1,.2em;
}

由于font-size是从父元素继承的一个属性，指定一个百分数字体的大小时，就是相对于父元素的字体大小
em类似于百分数，是一个比例因子
一级标题的大小是14px的150%，而二级标题是指为14px的1.2倍（大多数浏览器会四舍五入为17px)

body{
		font-size:small;
}

这是一种关键词法，有xx-small,x-small,small,medium,large,x-large,xx-large
一般将body的字体用关键词来指定其大小，而其他大小有em或者百分数指定，这样可以灵活的更改字体大小
标题的默认大小：一般来说h1是默认文本字体大小的200%，h2是150%，h3是120%，h4是100%，h5是90%,h6是60%

指定web颜色

按名指定颜色

body{
		background-color：silver;
}

属性值可以是：blue,red,yellow,black,purple,gray，green等其中颜色的属性值不区分大小写

用红绿蓝值指定颜色

三原色红，绿，蓝

body{
		background-color：rgb(80%，40%，0%);
}

也可以用0-255间的数值表示

body{
		background-color：rgb(3，27，222);
}

使用十六进制码指定颜色

#cc6600
其中前两位 cc表示的是红色的分量，66指的是绿色的分量，00表示蓝色的分量

补充

当对对同一元素，同一属性指定不同规则只会执行一个规则，除非两个规则在同一选择器中