6 ָ������ֵ������ͼ̳�

    Ŀ¼

6.1 ָ��ֵ������ֵ��ʵ��ֵ

    һ���û��˽�����һ���ĵ������������ĵ�����������Ϊ�ĵ����е�ÿһ��Ԫ�أ�����Ŀ��ý�����������õ�ÿһ�����ԣ�ָ��һ��ֵ��

    һ�����Ե����յ�ֵ�ĵõ���Ҫ�����������㣺����ͨ���涨ȷ��ֵ����ָ��ֵ������Ȼ������Ҫ�������ת����һ�����Ե�ֵ��������ֵ�����������ݵ�ʱ�Ļ�������ת������ʵ��ֵ������

6.1.1 ָ��ֵ

    �û������Ȼ������µĻ��ƣ������ȼ�������Ϊһ�����Է���һ��ָ��ֵ��

  1. ���ֵ�а��������ʹ�ò����
  2. ��������������̳��ģ�ʹ������Ԫ�ص�ֵ��ͨ���Ǹ�Ԫ�صļ���ֵ��
  3. ����ʹ�����Ե���ʼֵ��ÿһ�����Ե���ʼֵ���������ԵĶ����С�

    �����ĵ����ĸ�Ԫ��û�и�Ԫ�أ���˲���ʹ�����Ը�Ԫ�ص�ֵ������������£�����б�Ҫ������ʹ�ó�ʼֵ��

6.1.2 ����ֵ

    ָ��ֵ�����Ǿ��Եģ������Dz������������һ��ֵ��ָ��ֵ����'red'��'2mm'����������Եģ������������������һ��ֵ��ָ��ֵ����'auto'��'2em'��'12%'�������ھ���ֵ������Ҫ�����������õ�����ֵ��

    ��һ���棬���ֵ����ת��Ϊ����ֵ���ٷֱ�Ҫ����һ���ο�ֵ��ÿһ�����Զ��ᶨ��ο�ֵ��ʲô����������Ե�λ��ֵ��em��ex��px�����������Ӧ��������ijߴ��Եõ�����ֵ��'auto'ֵ�����ɸ����Ը����Ĺ�ʽ���Լ��㣬ijЩ�ؼ��֣�'smaller'��'bolder'��'inherit'���������ǵĶ���������滻��

    �󲿷������£�Ԫ�ؼ̳м���ֵ��������һЩ���Ե�ָ��ֵҲ���Ա��̳У�����'line-height'���Ե�����ֵ������Ԫ�ز��̳м���ֵ����������Զ�������������

6.1.3 ʵ��ֵ

    ԭ����˵������ֵ�Ѿ�����ʹ�ã������û������ض��Ļ����п����޷�ʹ����Щֵ�����磬�û��˿���ֻ����Ⱦ��������ı߿���˿��ܶԼ���Ŀ��ȼ��Խ��ơ�ʵ��ֵ���Ǿ�������֮��ļ���ֵ��

6.2 �̳�

    �ĵ�����һԪ�ص�ijЩֵ���Ա�����Ԫ�ؼ̳С�ÿһ���������������ܷ񱻼̳С�

    �ٶ���һ��H1Ԫ������һ������Ԫ�أ�EM����

<H1>The headline <EM>is</EM> important!</H1>

    �������EMԪ��û��ָ����ɫ�������ص�"is"���̳и�Ԫ�ص���ɫ����ˣ����H1����ɫ����ɫ��EMԪ��Ҳ����ɫ��

    Ҫ�����ĵ��ġ�ȱʡ����ʽ���ԣ����߿������ĵ����ĸ����������ԡ����磬��HTML�У�HTML��BODYԪ�ؿ���ʵ����һ���ܡ���һ������ʹ������ʡ��HTML�е�BODY���ʱ����Ȼ���У���ΪHTML�������Ჹ��ȱ���ı�ǡ�

���ӣ�

    �ȷ�˵������'color'�����ǿɼ̳еģ�����BODYԪ�صĺ�����̳���ɫֵΪ'black'��

BODY { color: black; }

    ָ���İٷֱ�ֵ�����̳У����Ǽ���ֵ���Ա��̳С�

���ӣ�

    ���磬���������ʽ����

BODY { font-size: 10pt }
H1 { font-size: 120% }

    ���ĵ�Ƭ���У�

<BODY>
  <H1>A <EM>large</EM> heading</H1>
</BODY>

    H1Ԫ�ص�'font-size'���Եļ���ֵΪ'12pt'���丸Ԫ��ֵ10pt��120%��������'font-size'�ļ���ֵ���̳У�EMԪ��Ҳ�̳�'12pt'�ļ���ֵ������û���û��12pt�����壬��H1��EMԪ��'font-size'��ʵ��ֵ�����ǣ��ȷ�˵��'11pt'��

6.2.1 'inherit'ֵ

    ÿһ�����Կ�����һ��ָ��ֵΪ'inherit'���������ڸ�����Ԫ�أ������Ժ�����Ԫ��������Ե�����ֵȡһ����ֵ���̳�ֵͨ��ֻ������ֵ��������ͨ����ʽ������'inherit'���õ���ǿ��

���ӣ�

    �����У�'color'��'background'����������BODYԪ���С�������������Ԫ�أ�'color'ֵ�����̳У���������͸���ġ������Щ�������û���ʽ����һ���֣������ĵ���ִ�а׵׺��ֵ����á�

BODY { 
  color: black !important; 
  background: white !important;
}

* { 
  color: inherit !important; 
  background: transparent;
}

6.3 @import����

    '@import'���������û���������ʽ����������ʽ�����κ�@import��������������ʽ�������й���֮ǰ��'@import'�ؼ��ֱ������һ��Ҫ��������ʽ����URI��Ҳ�����ַ�������ʱ����������Ϊ��������url(...)�ڡ�

���ӣ�

    �����⼸�к�����һ���ģ���ʾ������'@import'�﷨��һ������"url()"������һ�����ַ�������

@import "mystyle.css";
@import url("mystyle.css");

    Ϊ��ʹ�û��˱������벻��֧�ֵ�ý����������Դ�����߿���ָ��ý����ص�@import������Щ����������URI֮��ָ����һ���Զ��ŷָ��ý�������б���

���ӣ�

    ����Ĺ������ͬ����ý���Ч���ͼٶ��������ʽ��������һ��@media��������һ���ģ�ֻ��������ʹUAʡ����Ч���صĹ��̺�ʱ�䡣

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;

    ���û��ָ���κ�ý�����ͣ�������ʹ�������ġ���ý��ָ��Ϊ'all'Ч��һ����

6.4 ���

    ��ʽ��������������ͬ����Դ�����ߣ��û����û��ˡ�

    ��������Դ������ʽ�������ڷ�Χ�����ص������Ǹ��ݲ�����������á�

    CSS�������ÿһ����ʽ����ָ��һ��Ȩ�ء����ҪӦ�����ɸ�������ôȨ�������Ǹ������������Ȩ��

    ȱʡʱ�����ߵ���ʽ��������û���ʽ���������ȼ��ߡ�����������"!important"���򣬱��������ȼ������е��û������ߵĹ����Ȩ�ض���UAȱʡ��ʽ���еĹ����Ȩ�ش�

    ����Ĺ���ͬ����������ǵ�Ȩ��ȡ�������������˳�򡣶�����һ����������ʽ���еĹ���Խ��������ʽ��������Ĺ������Ƶģ�����Ĺ������������벢��Խ������ʽ�������ȼ�����ͬ�����á�

6.4.1 ���˳��

    Ϊ���ҵ�Ԫ��/������ϵ�ֵ���û��˱���Ӧ�����µ�����˳��

  1. ����Ŀ��ý���������ҵ��������ʵ�Ԫ�غ����Ե���������������������ѡ����ƥ���������ʵ�Ԫ�أ����������á�
  2. ������ԭʼ�������Ȩ�غ���Դ������һ���������������ʽ����Խ�û���ʽ�����û���ʽ����Խȱʡ��ʽ��������"!important"�������û���ʽ����Խ������ʽ����������ʽ����Խȱʡ��ʽ�����������ʽ��������������ʽ��������ͬ����Դ��
  3. �����ĵڶ��������ѡ���ӵ��������������ѡ���ӳ�Խһ���ѡ���ӡ�αԪ�غ�α��ֱ���Ϊһ��Ԫ�غ�һ���ࡣ
  4. ��󣬸����Ⱥ���������У�����������������ͬ��Ȩ�أ���ͬ����Դ����ͬ�������ԣ������ֵĹ���Խ�ȳ��ֵĹ����������ʽ���еĹ�����Ϊ��������ʽ�����������й���֮ǰ��

    ���˸���������"!important"���ã��������Ը������ߵ���ʽ�����û���ʽ�������Ȩ�ء�����û��������û�ͨ��һ�������˵����ر�ijһ��ʽ����Ӱ��ͺ���Ҫ��

6.4.2 !important����

    CSS��ͼ��������ʽ�����û���ʽ����Ȩ��֮�䴴��һ��ƽ�͡�ȱʡ����£�������ʽ���Ĺ���Խ�û���ʽ���Ĺ��򣨼��������3����

    ������Ϊ��ƽ�⣬һ��"!important"�������ؼ���"!"��"important"����������֮�󣩽���һ��һ����������������ȼ������ߺ��û�����ʽ�������԰���"!important"������ �����û���"!important"����Խ���ߵ�"!important"������һCSS����ʹ�û����ڳ��ֿ��Խ�������Ҫ��Ŀ��ƣ����������壬��ɫ��ϵȣ����Ӷ��Ľ����ĵ��Ŀɶ��ԡ�

     ע�⣡������CSS1��������ı仯����CSS1�У����ߵ�"!important"����Խ�û���"!important"����

    ��һ����д��������'background'������Ϊ"!important"��ͬ�ڽ������е������Զ�����Ϊ"!important"��

���ӣ�

    �����У��û���ʽ���еĵ�һ���������һ��"!important"����������Խ��������ʽ������Ӧ���������ڶ�������Ҳ����Խ��Ӧ��������ʽ���е���������Ϊ��Ҳ�����Ϊ"!important"���������û���ʽ���еĵ�����������"!important"����������ܳ�Խ������ʽ���еĵڶ���������ǡ��������һ����д���Ե���ʽ����ͬ���ģ����������ߵĹ��򽫲��ܳ�Խ�ڶ������ߵĹ�����Ϊ�ڶ��������� "!important"���������"!important"������������ʽ����Ҳ�����á�

/* �����û���ʽ�� */
P { text-indent: 1em ! important }
P { font-style: italic ! important }
P { font-size: 18pt }

/* ����������ʽ�� */
P { text-indent: 1.5em !important }
P { font: 12pt sans-serif !important }
P { font-size: 24pt }

6.4.3 ѡ���������Եļ���

    һ��ѡ���ӵ�����������������ģ�

    �������������������ֽ���Ҫ�Դ��Ϊ׼�����õ������ԡ�

���ӣ�

    һЩ���ӣ�

*             {}  /* a=0 b=0 c=0 -> specificity =   0 */
LI            {}  /* a=0 b=0 c=1 -> specificity =   1 */
UL LI         {}  /* a=0 b=0 c=2 -> specificity =   2 */
UL OL+LI      {}  /* a=0 b=0 c=3 -> specificity =   3 */
H1 + *[REL=up]{}  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red  {}  /* a=0 b=1 c=3 -> specificity =  13 */ 
LI.red.level  {}  /* a=0 b=2 c=1 -> specificity =  21 */
#x34y         {}  /* a=1 b=0 c=0 -> specificity = 100 */ 

    HTML�У�һ��Ԫ�صġ�style�����Ե�ֵ����ʽ��������Щ����û��ѡ���ӣ�����Ϊ�˲���㷨��������Ҫ�����DZ���Ϊ����һ��IDѡ���ӣ������ԣ�a=1��b=0��c=0�������ǵ����IJ���Ҫ�����DZ���Ϊ�����������й���֮��

    

<HEAD>
<STYLE type="text/css">
  #x97z { color: blue }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: red">
</BODY>

    ������������У�PԪ�ص���ɫ�Ǻ�ɫ�ġ���Ȼ������������������һ���ģ��������ڲ������4��"style"�����е���������ԽSTYLEԪ���е�������

6.4.4 ��CSS������ʾ��������

    �û��˿��ܸ�����Щ����������ʽ���ij�����ʾ�����ȿ��ǣ�����HTML�е�FONTԪ�ػ�"align"���ԡ��������������Щ��CSS������ʾ���뱻ת������Ӧ��CSS��������������Ϊ�㡣��Щ������Ϊ��д��������ʽ���Ŀ�ͷ�����ҿ��ܱ���������ʽ������Խ��

    ע�⡣��ת��ʱ�ڣ���һ����ʹ����ʽ���Ժ���ʽ���Ĺ���������ס�

    ע�⡣��CSS1�У���CSS������ʾ��������Ϊ1��������0����һ�ı�����ΪCSS2������ȫ��ѡ���ӣ�������������Ϊ0��