2 CSS2���

    Ŀ¼

2.1 HTML�е�CSS2����ָ��

    �ڱ�ָ���У�չʾ�˶���򵥵���ʽ���Ǻ����׵ġ�Ҫ�˽���һָ�ϣ�����Ҫ��HTML��һ���˽⣨�μ�[HTML40]��������һЩ����������������

    ������һ��С��HTML�ĵ���Ϊ��ʼ��

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

    Ҫ��H1Ԫ�ص��ı���ɫ����Ϊ��ɫ�������д�����µ�CSS����

  H1 { color: blue }

    һ��CSS�������������Ҫ�IJ��֣�ѡ������'H1'���Լ�������'color: blue'�������������������֣����ԣ�'color'����ֵ��'blue'������Ȼ�����������У�ֻ��Ӱ����������ȾHTML�ĵ�����������е�һ�����䱾���Ѿ�������һ����ʽ��������������ʽ�����ϣ���ʽ���Ľ����CSS�Ļ������ԣ����Ϳ���ȷ���ĵ����յij��֡�

     HTML 4.0�淶������HTML�ĵ������ָ����ʽ�����򣺿�������HTML�ĵ��У�����ͨ��һ���ⲿ��ʽ��������ʽ�������ĵ��У�����ʹ��STYLEԪ�أ�

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <STYLE type="text/css">
    H1 { color: blue }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

    Ϊ�˻�����̶��ϵ�����ԣ������Ƽ�����ָ���ⲿ��ʽ���������޸�HTML�ĵ��Ϳ��Զ���ʽ�������޸ģ�������ʽ������Ϊ�����ĵ�������Ҫ�����ⲿ��ʽ��������ʹ��LINKԪ�أ�

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <LINK rel="stylesheet" href="bach.css" type="text/css">
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

    LINKԪ�ع涨�ˣ�

    Ϊ����ʾ��ʽ���ͽṹ����ǵĽ�����ϵ�����ǽ������ڱ�ָ����ʹ��STYLEԪ�ء�����������������ɫ��

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <STYLE type="text/css">
    BODY { color: red }
    H1 { color: blue }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

    ���ڵ���ʽ�������������򣺵�һ����BODYԪ�ص���ɫ����Ϊ'red'�����ڶ�����H1Ԫ�ص���ɫ����Ϊ'blue'�����ڲ�û��ָ��PԪ�ص���ɫ�����������ĸ�Ԫ�أ���BODYԪ������̳���ɫֵ��H1Ԫ��Ҳ��BODYԪ�ص�һ����Ԫ�أ����ڶ��������������Խ�˼̳�ֵ�� ��CSS�У��������в�ֵ֮ͬ��ij�ͻ�����淶��������ν����Щ��ͻ��

    CSS2��100�����ϲ�ͬ�����ԣ�����'color'����������һ�����е�һЩ���ԣ�

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <STYLE type="text/css">
    BODY { 
      font-family: "Gill Sans", sans-serif;
      font-size: 12pt;
      margin: 3em; 
    }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

    ����ע�⵽��������������һ�����У����Ի����ŷָ{...}��������֮���Էֺŷָ���һ������Ҳ���Ը�һ���ֺš�

    BODYԪ�صĵ�һ�������������������Ϊ"Gill Sans"��������û��ˣ�ͨ����ָ������������Ǹ����岻���ڣ��û��˽�ʹ��'sans-serif'���壬����һ���������е��û��˶�֧�ֵ�����ͨ������֮һ��BODYԪ�ص���Ԫ�ؽ��̳�BODYԪ�ص�'font-family'����ֵ��

    �ڶ���������BODYԪ�ص�����ߴ�����Ϊ12�㡣���㡱�����λ�㷺��Ӧ���ڳ�����ӡˢ��ҵ��������ʾ����ߴ����������ֵ������һ�����Ե�λ��ʾ���������Ż����IJ�ͬ����Ա仯��

    ����������ʹ������Ե�λ�������ݻ�������Ա仯����em����λ��ָԪ�ص�����ߴ硣�ڱ����У������BODYԪ����Χ�ı߾�������ߴ��������

2.2 XML�е�CSS2����ָ��

    CSS����Ӧ�����κνṹ���ĵ��У������չ�������Ӧ�ã�[XML10]����ʵ�ϣ�XML��HTML����������ʽ������Ϊ���߿��Դ��������Լ���Ԫ�أ����û��˲�֪�������ʾ���ǡ�

    ������һ���򵥵�XML���䣺

<ARTICLE>
  <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
  <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
  <PARA>
    One evening, just as he was getting his 
    <INSTRUMENT>flute</INSTRUMENT> ready and his
    musicians were assembled, an officer brought him a list of
    the strangers who had arrived.
  </PARA>
</ARTICLE>

    Ҫ����һ�������ĵ���ʽ���֣����DZ�������������ЩԪ��������Ԫ�أ���������е�Ԫ�أ�������Щ�ǿ���Ԫ�أ�������е�Ԫ�أ���

INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }

    ��һ����������INSTRUMENT������Ԫ�أ����ڶ��������Զ��ŷָ���б���ʽ�г���һϵ��ѡ���ӣ������Ƕ��ǿ���ġ�

    ����ʽ������XML�ĵ���һ��������ʹ�ô���ָ�

<?XML:stylesheet type="text/css" href="bach.css"?>
<ARTICLE>
  <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
  <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
  <PARA>
    One evening, just as he was getting his 
    <INSTRUMENT>flute</INSTRUMENT> ready and his
    musicians were assembled, an officer brought him a list of
    the strangers who had arrived.
  </PARA>
</ARTICLE>

    һ��ͼ���û��˿��ܽ�������ʽ��Ϊ��

    Example rendering   [D]

    ע�⵽"flute"һ����ʾ�ڶ����ڣ���Ϊ��������Ԫ��INSTRUMENT�����ݡ�

    ��������Щ�ı��ĸ�ʽ�����������������ġ����磬���������ߴ�Ӧ�ñ��ı������ಿ��Ҫ�󣬶�������뽫���ߵ�������б���ʾ�ȣ�

INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
HEADLINE { font-size: 1.3em }
AUTHOR { font-style: italic }
ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5em }

    һ��ͼ���û��˿��ܽ�������ʽ��Ϊ��

    Example rendering   [D]

    Ҫ��һ���ظĽ��ĵ��ij��֣���������ʽ���м������Ĺ���

2.3 CSS2����ģ��

    ����������֧��CSS���û�����ι�����һ�����ܵ�ģ�͡���ֻ��һ������ģ�ͣ�ʵ�ʵ�Ӧ�ÿ����в��

    �ڸ�ģ���У��û��˰������²���������һ��Դ�ļ���

  1. ����Դ�ĵ��������ĵ�����
  2. ȷ��Ŀ��ý������.
  3. �����ض�Ŀ��ý����������ȡ���ĵ���ص�������ʽ����
  4. ����Ŀ��ý���������õ�ÿһ��������ָ��һ����һֵ���Դ˶�ÿһ��Ԫ�ؼ���ע�͡�����ֵ�ĸ���Ҫ����һ���Ļ��ƣ��û���������ͼ̳��м������ۡ�

    ֵ�ļ��㲿����������Ŀ��ý�����������õĸ�ʽ���㷨���ȷ�˵���ٶ�Ŀ��ý������Ļ�����û���Ӧ�����ӻ���ʽģ�������Ŀ��ý���Ӵ�ӡֽ���û���Ӧ��ҳ��ģ�������Ŀ��ý������Ƶ��Ⱦ�豸���������ϳ��������û��˾�Ӧ��������Ⱦģ����

  5. ����ע�͵��ĵ����У�����һ����ʽ���ṹ��ͨ������£���ʽ���ṹ���ĵ���ʮ�ֽӽ�����Ҳ�������ܴ��ر��ǵ����߲���αԪ�غ��������ݵ�ʱ�����ȣ���ʽ���ṹ������ȫ���ǡ����νṹ�������ṹ�ı���ȡ���������ʵ�֡��ڶ�����ʽ���ṹ�а�������Ϣ���ܱ��ĵ����а����Ķ࣬Ҳ���ܱ����١����磬�ĵ�����һ��Ԫ�ص�'display'����ֵ����Ϊ'none'����ô��Ԫ�ز����ڸ�ʽ���ṹ�в����κ����ݡ���һ���棬һ���б�Ԫ�ؿ����ڸ�ʽ���ṹ�����ɸ������Ϣ���б�Ԫ�ص����ݺ��б���ʽ��Ϣ���磬���ڱ�ǵ�ͼ�Σ���

    ע�⣬����һ�׶Σ�CSS�û��˲���ȥ�ı��ĵ������ر�أ���������ʽ�������������ݲ��ᷴ�����ĵ����Դ��������Խ����ٷ����ȣ���

  6. ����ʽ���ṹ���ݵ�Ŀ��ý�飨�磬��ӡ���������Ļ����ʾ������������Ⱦ�ȣ���

    ��һ�������˱��淶�����۷�Χ�����Բμ�[DOM]����

    �ڶ��������岽�ڱ��淶�еõ���ϸ������

    ������Ҳ�����˱��淶�����۷�Χ��

2.3.1 ��Ⱦ����

    �������е�ý����ԣ�������Ⱦ���������ˡ���ʽ���ṹ��������Ⱦ�Ŀռ䡱����Ⱦ�����ڿռ������ά�϶������޵ģ�������Ⱦͨ������Ⱦ�����һ�����޵������н��С����������û��˸���Ŀ��ý�����������������Ⱦ����Ļʱ���û���ͨ��ָ��һ����С�Ŀ��Ȳ������ӵ��ijߴ�ѡ��һ����ʼ�Ŀ��ȡ���Ⱦ��ҳ��ʱ���û���ͨ����ָ�����Ⱥ͸߶ȵ����ơ���Ƶ�û��˻�ָ����Ƶ�ռ�����ƣ���û��ʱ�䷽������ơ�

2.3.2 CSS2��ַģ��

     CSS2ѡ����������������ʽ�������ĵ����û����е����²��֣�

2.4 CSS���ԭ��

    CSS2��֮ǰ��CSS1���ƣ�Ҳ����һ�����ԭ��