增加字体和颜色样式-------CSS

通过使用CSS，控制文本的字体，风格和颜色

1.基本操作：

 

 1 body{
 2     font-family: Verdana, Geneva, Tahoma, sans-serif
 3 }
 4 
 5 body{
 6     font-size: 14px
 7 }
 8 
 9 body{
10     color: silver
11 }
12 
13 body{
14     font-weight: bold
15 }
16 
17 body{
18     text-decoration: underline
19 }

注释：

  • font-family：定制页面中使用的字体
  • font-size：控制字体大小
  • color：为文本设置颜色
  • font-weight：影响字体的粗细
  • text-decoration：为文本增加更多风格

 

2.字体系列：

 

系列分类：

  • sans-serif
  • serif
  • monospace
  • cursive
  • fanstasy
  • 衬线：是字母末端的装饰性的小线

示例：

  • sans-serif：没有衬线，适合阅读

     

 

  • Serif：有衬线，看起来传统，多出现在报纸

    

    

  • Monospace：字体包含固定宽度的字符，例如：一个“i”水平的宽度和一个“m”相同，主要用于显示软件代码示例

      

 

  • Cursive：有些看似手写，有时会在标题上使用

    

 

  • Fantasy：含有某种风格的装饰性字体：

    

总结特点：

  • serif字体看起来很高雅，传统。
  • sans-serif字体外观清晰，可读性好
  • monospace 像打字机打出来的
  • Cursive和fantasy字体给人有趣或者很有分格的感觉

 

3.使用CSS指定字体系列：

 

 

浏览器的幕后工作：

 

1 body{
2     font-family: Verdana, Geneva, Tahoma, sans-serif
3 }

 

注释：

  • 我们为body指定了4个候选字体
  • 浏览器会从左往右进行选择
  • 如果浏览器检查到用户没有定制的第一个字体，会接着检查第二个
  • 直到查找到用户有的字体
  • 如果前面3种特定的字体都没找到，浏览器就会使用默认的sans-serif字体

示图：

    

 

4.Wed字体的使用

 

我们都会有这样一个想法，

自己辛苦设计的页面，有很酷的字体，

不希望到了用户手里，却全都变成了默认。。。

因此：有了@font-face规则

 

 使用步骤：

  1. 找到一个字体，可以是自己所有的，也可以使用提供字体网站授权给你使用的
  2. 确保有所需字体的格式，一般建议使用web开放字体格式（.woff）
  3. 把字体文件放在web上，或者利用在线字体服务为你托管这些文件。但无论哪种，你都需要字体文件的URL
  4. 在CSS中增加@font-face属性
  5. 在CSS中使用@font-face属性

示例代码：

 1 @font-face{
 2     /*我们为我们的字体设立一个名字*/
 3     font-family: "JJStyle One";
 4     /*浏览器会加载src指定的字体文件，直到找到他能支持的一个文件*/
 5     src: ur1("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff")
 6          ur1("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf")
 7 }
 8 
 9 
10 h1{
11     /*使用我们指定的字体名*/
12     font-family: "JJStyle One",sans-serif;
13 }

 注意：

  • 可以定制多个字体，但需要保证服务器上有相应的字体文件，
  • 而且要分别创建一个单独的@font-face规则，且名字唯一

 

5.调整字体大小

大多数默认的字体都不太美观，

为此，作为设计者，

都需要知道如何指定字体大小。

 

指定font-size的一些方法：

  1. PX
  2. %
  3. em
  4. 关键字

示例代码：

 1 body{
 2     /*字体的高度为14像素*/
 3     font-size: 14px
 4 }
 5 
 6 h1{
 7     /*字体大小为相对于另一个字体大小的150%，这里是相对于body字体的大小*/
 8     font-size:150%
 9 }
10 
11 h2{
12     /*相对于另一个字体1.2倍*/
13     font-size: 1.2em;
14 }
15 
16 h3{
17     font-size: small
18     /*关键字有：xx-small,x-small,small,medium,large,x-large,xx-large*/
19 }

指定字体大小的建议：

  1. 选择一个关键字（推荐samll或mediun），指定它为body规则的字体大小。相当于页面默认大小
  2. 使用em或百分数，相对于body字体大小指定其它元素的字体大小（使用em还是百分数由你决定，因为效果都一样）
 1 body{
 2     font-family: Verdana, Geneva, Tahoma, sans-serif;
 3     /*字体的高度为14像素*/
 4     font-size: small
 5 }
 6 
 7 h1{
 8     font-family: sans-serif;
 9     /*字体大小为相对于另一个字体大小的150%，这里是相对于body字体的大小*/
10     font-size:150%
11 }
12 
13 h2{
14     /*相对于另一个字体1.2倍*/
15     font-size: 1.2em;
16 }

示图：

     

 

 

 

6.改变字体粗细：

 

  • font-weight：bold
  • font-weight：normal

 

7.为字体增加风格：

 

斜体：

  1. not italic
  2. italic（文本向右倾斜，另外衬线还有弯曲）

倾斜：

  1. not oblique
  2. oblique（普通文本向右倾斜）

注意：

  • 一般来说，不论你指定什么风格，结果都不确定，有时是斜体，有时是倾斜。
  • 所以，除非真的对你很重要，不然完全可以就用斜体，不用担心差别

 

8.颜色样式：

 

指定颜色的方法：

  • 颜色名
  • 按红绿蓝对百分比指定
  • 十六进制码

 

1.按名字指定

1 body{
2     background-color: silver;
3 }

2.用红绿蓝值指定颜色

1 body{
2     /*rgb：红绿蓝 颜色的缩写*/
3     background-color: rgb(80%, 40%, 0%);
4 }
5 h1{
6     background-color: rgb(204,102,0);
7 }

3.用16进制码指定

1 h2{
2     background-color: #cc6600
3 }

注释：

  • 十六进制码以#开头
  • 前两位数字表示红色的分量，中间两位是绿色，后面两位是蓝色

    

  • 上图代码的“CC”的分量的计算步骤与解释如下图

                       

文本装饰：

  

 1 em{
 2     /*使<em>元素有一个从文本中间穿过的横线*/
 3     text-decoration: line-through;
 4 }
 5 
 6 
 7 em{
 8     /*使<em>元素有一个上画线和下划线*/
 9     text-decoration: underline overline;
10 }
11 
12 em{
13     /*使<em>元素没有任何装饰*/
14     text-decoration: none;
15 }
16 
17 h1,h2{
18     color: #cc6600;
19     /*在下滑框上加一条细的虚线*/
20     border-bottom:thin dotted #aabbcc;
21 }

 

 

The end--

 

posted @ 2015-11-01 19:40  kelion  阅读(2923)  评论(0)  编辑  收藏  举报