《CSS设计彻底研究》读书笔记 第05章 文字与图像

1.在HTML中，文字的字体是通过<font face="字体名称">来设置的，而在CSS中字体的通过font-family属性来控制的。font-family属性可以同时声明多种字体，字体之间用逗号分隔开。如果字体的名称中间会出现空格，这时需要用引号将其引起来，如下所示                               
p {
     font-family: Arial, "Times New Roman";
   }
表示优先使用Arial字体如果没有则使用Times New Roman字体，如果都没有则使用系统默认字体。

2.可以通过font-size来控制字体的大小
px：浏览器上1个像素的大小
in：inch，英寸
cm：centimeter，厘米
mm：millimeter，毫米
pt：point，印刷的点数，在一般的显示器中1px相当于1/7zinch
pc：pica，1pc=12pt
em：1em表示的长度是其父元素中字母m的标准宽度
ex：1ex表示的是父元素中字幕x的标准高度
%：例如200%，表示文字的大小为原来的两倍

3.line-height属性表示的是两行文字之间基线的距离，与所有CSS中设定具体数值的属性一样，可以设定为相对数值，也可以设定为绝对数值。  

 
4.可以将文字的3个最基本的属性：字体、大小和行高组合在一条CSS规则中，例如：
     font:12px/18px Arial;
表示使用Arial字体，大小为12像素，行高18像素。

 

--------------------------------------------------
author: cs_cjl
website: http://blog.csdn.net/cs_cjl
--------------------------------------------------

5.CSS中color用于设置字体颜色而background-color用于设置背景颜色     
   CSS中颜色统一采用RGB格式，可以有以下几种表示方法：
   h3 { color: blue; }
   h3 { color: #0000ff; }
   h3 { color: #00f; }
   h3 { color: rgb(0, 0, 255); }
   h3 { color: rgb(0%, 0%, 100%); }
  其中第3中方式是第2中方式的简写形式，如#aabbcc可以简写为#abc

6.在CSS中可以通过font-weight属性来控制字体的粗细                    
     font-weight: normal;           /*正常*/
     font-weight: bold;               /*加粗*/
   可以通过font-style属性来控制字体的是否倾斜,取值可以为：normal、oblique、italic（Windows中并不能区分oblique和italic，它们都是按照italic方式来显示的）
   text-transform属性可以用来实现首字母大写（capitalize）、所有字母大写（uppercase）和所有字母小写（lowercase）

7.text-decoration可以用来实现文件的装饰效果，可以有以下取值:none(默认) underline overline line-through blink（闪烁，IE和Chrome中无效，在Firefox中有效）

                   
8.text-align：段落的对齐方式，可能的取值为:center left right justify（两端对齐）
   text-indent：段首缩进例如：text-indent:2em      

        
9.可以通过background-image来设置背景图片                          
    例如：
            body {
               background-image:url(bg.gif);
            }
    默认情况下，图像会自动向水平和竖直两个方向平铺，可以通过background-repeat来控制平铺的方向,可能的取值为：repeat（默认） no-repeat repeat-x repeat-y
    还可以同时设置背景图像和背景颜色，这样背景图像覆盖的地方就显示背景图像，背景图像没有覆盖的地方就按照设置的背景颜色显示。

10.可以通过background属性来间写背景样式
    background: [<background-color>] [<background-image>] [<background=repeat>] [<background-attachment>] [<background-position>]         

 
11.可以通过background-position来设置背景的平铺起点             
                background-position: <POS> [<POS>]
其中<POS>的取值为left right center top bottom，第二个值可以忽略，如果忽略则默认为center

12.为了不使网页的标题依赖于访问者的字体，常常使用图像来代替文本，可以通过“图像替换”来实现：使HTML中的文字仍以文本形式存在，再通过CSS使文字不显示在页面上，而使图片以背景图像的形式存在，有以下几种方案：
     FIT（Father Image Replacement）法，由美国设计师Todd Fahrner和英国设计师C/Z. Robertson开创的，通过display属性将文字隐藏起来，缺点是导致非屏幕浏览器无法正确表现相应的内容
     Phark法，它是由Mike Rundle发明的，做法是将标题的text-indent属性设置一个非常大的负值
     以上两种方法的共同缺点是如果浏览器关闭了CSS那么标题就不能显示出来了，为此可以使用如下的改进方法：
     <h1><span> </span>Head</h1>
     对span使用绝对定位，然后将图像覆盖在文字上面，这样即使关闭了CSS，仍然可以看到字体版的标题，缺点是不能使用透明的标题图像。

13.阴影的实现：使用阴影图像，滑动门技术，柔边阴影效果