12 ���ɵ��������Զ�����Լ��б�

    Ŀ¼

    ijЩ����£����߿���ϣ���û�����Ⱦ��Щ�����ĵ����е����ݡ�����Ϥ��һ�������Ǽ������б������߲�����ʽ�ظ�����������ϣ���û����Զ����������ǡ����Ƶأ����߿���ϣ���û�����һ��ͼ�εı���ǰ����뵥�ʡ�ͼ�Ρ������ڵ����±���ǰ���롰�����¡����ر��Ƕ�����Ƶ��ä�ģ��û���Ӧ���ܹ������������ַ�����

    CSS2�У��������ݵĻ���������������

    �����������ۺ�'content'������صĻ��ơ�

12.1 :before��:afterαԪ��

    ������:before��:afterαԪ��ָ�����ɵ����ݵ���ʽ��λ�á���������ʾ��:before��:afterαԪ��ָ����һ��Ԫ���ĵ�������֮ǰ��֮������ݡ�'content'���ԣ�����ЩαԪ�����ã�ָ���˲�������ݡ�

���ӣ�

    ���磬����Ĺ�����ÿһ��"class"����Ϊ"note"��PԪ�ص�����ǰ�涼�����ַ���"Note: "��

P.note:before { content: "Note: " }

    һ��Ԫ�����ɵĸ�ʽ�������磬���ƿ򣩰������ɵ����ݡ���ˣ��ٶ��ı��������ʽ��Ϊ��

P.note:before { content: "Note: " }
P.note        { border: solid green }

    ��������������ȾΪ��һ��ʵ����ɫ�߿��Χ��������ʼ���ַ�����

    :before��:afterαԪ���̳��������ĵ���������Ԫ�ص����пɼ̳е����ԡ�

���ӣ�

    ���磬����Ĺ�����ÿһ��QԪ��ǰ����һ�������š����ŵ���ɫ�Ǻ�ģ����������QԪ�ص���������һ����

Q:before {
  content: open-quote;
  color: red
}

    ��:before��:afterαԪ�������У��Ǽ̳е�����ȡ���ǵ���ʼֵ��

���ӣ�

    ��ˣ�����'display'���Եij�ʼֵΪ'inline'�������е�������Ϊһ�����ڿ���루����Ԫ�صij�ʼ�ı����ݱ�����ͬһ�У�����һ����ʽ������'display'����Ϊ'block'����˲�����ı���Ϊһ���飺

BODY:after {
    content: "The End";
    display: block;
    margin-top: 2em;
    text-align: center;
}

    ע�⣬һ����Ƶ�û��˻���BODY������Ⱦ֮���������"The End"��

    �û����������:before��:afterαԪ���������������ԣ�'position'��'float'��list���ԣ��Լ��������ԡ�

    :before��:afterαԪ���������µ�'display'����ֵ��

     ע�⡣�ڽ�����CSS�����У�������������ֵ��

12.2 'content'����

'content'
ֵ��  [ <string> | <uri> | <counter> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
��ʼֵ��  ���ַ���
�����ڣ�  :before��:afterαԪ��
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  ����

    �����Ժ�:before��:afterαԪ�����������ĵ��в������ݡ�ȡֵ�ĺ������£�

<string>
�ı����ݣ��μ��ַ���һ�ڣ���
<uri>
��ֵΪһ��URI��ָ����һ���ⲿ����Դ������û�����������֧�ֵ�ý�����������ƶ���֧�ָ���Դ����������Ը���Դ��ע�⡣ CSS2�����ṩһ�ֻ������ı�Ƕ�����ijߴ磬���ṩһ���ı���������ͬHTML��ͼ�ε�"alt"��"longdesc"�����������������Ժ󼶱��CSS���ܻ�ı���һ����
<counter>
������������������ͬ�ĺ���ָ����'counter()'��'counters()'��ǰ����������ʽ��'counter(name)'��'counter(name, style)'�����ɵ��ı����ڸ�ʽ���ṹ�иõ�������������ֵ����ָ������ʽ��ȱʡΪ'decimal'����ʽ������һ����Ҳ��������ʽ��'counter(name, string)'��'counter(name, string, style)'�����ɵ��ı��Ǹ�ʽ���ṹ�иõ����и������ļ�������ֵ������ָ�����ַ����ָ��������ָ������ʽ��ȱʡΪ'decimal'����Ⱦ���������Ϣ�μ��Զ������ͱ��һ�ڡ�
open-quote��close-quote
��ֵ��'quotes'�����к��ʵ��ַ������档
no-open-quote��no-close-quote
�������κ����ݣ����ַ������������������ŵ�Ƕ�ײ�Ρ�
attr(X)
�ú������ַ�����ʽ����ѡ���������X����ֵ��CSS���������������ַ��������ѡ��������û��X���ԣ�����һ�����ַ������������Ĵ�Сд������ȡ�����ĵ����ԡ�ע�⡣CSS2�У�����������ѡ��������Ԫ�ص�����ֵ��

    'display'���Կ��������Ƿ�����һ���飬���ڻ����ڱ�ǿ��С�

    ������ݺ�ý����أ�����Ӧ�ý�'content'����������@media�����С����磬�ı����������κ�ý���飬��ͼ�ν�������ͼ�κ͵���ͼ��ý���飬�������ļ�ֻ��������Ƶý���顣

���ӣ�

    ����Ĺ���ʹ����һ�����õĽ�β������һ�������ļ����μ�������ʽ��һ�ڣ������и���Ļ��ƣ���

@media aural {
   BLOCKQUOTE:after { content: url("beautiful-music.wav") }
   }

Example(s):

    ����Ĺ�����ͼ��ǰ����HTML"alt"���Ե��ı������ͼ�β�����ʾ�����߻����Կ���"alt"�ı���

IMG:before { content: attr(alt) }

    �û����������ɵ������м������У������ͨ����'content'����֮���һ���ַ�����д��"\A"ת�����ж��ﵽ����������һ��ǿ�ƻ�����������HTML�е�BRԪ�ء��μ����ַ����������ַ��ʹ�Сд�����˽����"\A"ת�����еĸ�����Ϣ��

���ӣ�

    

H1:before {
    display: block;
    text-align: center;
    content: "chapter\A hoofdstuk\A chapitre"
}

    ���ɵ����ݲ��ı��ĵ������ر�أ����Dz����������ĵ����Դ��������磬�����ٽ�����������

    ע�⡣�ڽ��������CSS�У�'content'���Կ��ܽ��ܸ����ֵ���������ı��������ݵIJ��ֵ���ʽ��������CSS2�У�����:before��:afterαԪ�ص����ݵ���ʽ����ͬ��

12.3 :before��:after��'compact'��'run-in'Ԫ�ص���������

    ���ܷ������µ������

  1. һ��'run-in'��'compact'Ԫ�ؾ���һ��:beforeαԪ�أ�������Ϊ'inline'������Ԫ�ؿ�ߴ��ʱ��αԪ�ر��������ڣ�����'compact'��������Ԫ�ص�ͬһ�������Ⱦ��
  2. һ��'run-in'��'compact'Ԫ�ؾ���һ��:afterαԪ�أ�������Ϊ'inline'������ǰ������
  3. һ��'run-in'��'compact'Ԫ�ؾ���һ��:beforeαԪ�أ�������Ϊ'block'��αԪ����ΪԪ��֮�ϵ�һ�������ʽ�������Ҳ�����Ԫ�سߴ�ļ��㣨����'compact'����
  4. һ��'run-in'��'compact'Ԫ�ؾ���һ��:afterαԪ�أ�������Ϊ'block'��Ԫ�غ�����:afterαԪ�ض���ʽ��Ϊ��������Լ���:afterαԪ���У���Ԫ�ز�����ʽ��Ϊһ�����ڿ�
  5. 'run-in'��'compact'Ԫ��֮���Ԫ�ؾ���һ��:beforeαԪ�أ�������Ϊ'block'����θ�ʽ��'run-in'/'compact'Ԫ��ȡ����:beforeαԪ�����ɵĿ��
  6. 'run-in'��'compact'Ԫ��֮���Ԫ�ؾ���һ��:beforeαԪ�أ�������Ϊ'inline'����θ�ʽ��'run-in'/'compact'Ԫ��ȡ����:beforeԪ��������Ԫ�ص�'display'ֵ��

���ӣ�

    ������һ��'run-in'���⣬����һ��:afterαԪ�أ�����һ���������һ��:beforeαԪ�ء����������е�αԪ�ض������ڵģ�ȱʡ���������ʽ��Ϊ��

H3 { display: run-in }
H3:after { content: ": " }
P:before { content: "... " }

    ��Ӧ���ڸ�Դ�ĵ���

<H3>Centaurs</H3>
<P>have hoofs
<P>have a tail

    ��ʽ�����Ӿ�Ч��Ϊ��

Centaurs: ... have hoofs
... have a tail

12.4 ����

    CSS2�У����߿�����һ������ʽ�������������صķ�ʽָ���û���Ӧ�������Ⱦ���š�'quotes'����ָ����ÿһ��Ƕ�����õ����Ŷԡ�'content'���Ը�������Щ���ŵ����ã���ʹ����һ������֮ǰ��֮�󱻲��롣

12.4.1 ��'quotes'����ָ������

'quotes'
ֵ��  [<string> <string>]+ | none | inherit
��ʼֵ��  ȡ�����û���
�����ڣ�  ����Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  ͼ��

    ������ָ��������������Ƕ�����õ����š�ȡֵ�ĺ������£�

none
'content'���Ե�'open-quote'��'close-quote'ֵ���������š�
[<string>  <string>]+
'content'���Ե�'open-quote'��'close-quote'ֵ�Ӹ����Ŷ��б��еõ��������źͱ����ţ�����һ������ߵģ��Դ������������ã��ڶ��Դ�����һ���Ƕ�ף��Դ����ơ��û��˱������Ƕ�׵IJ��ʹ����Ӧ�����Ŷԡ�

���ӣ�

    ���磬ʹ�����µ���ʽ����

/* Specify pairs of quotes for two levels in two languages */
Q:lang(en) { quotes: '"' '"' "'" "'" }
Q:lang(no) { quotes: "? "? "<" ">" }

/* Insert quotes before and after Q element content */
Q:before { content: open-quote }
Q:after  { content: close-quote }

    �Լ����µ�HTMLƬ�Σ�

<HTML lang="en">
  <HEAD>
  <TITLE>Quotes</TITLE>
  </HEAD>
  <BODY>
    <P><Q>Quote me!</Q>
  </BODY>
</HTML>

    ����һ���û��˲�������Ч����

"Quote me!"

    �������µ�HTMLƬ���У�

<HTML lang="no">
  <HEAD>
  <TITLE>Quotes</TITLE>
  </HEAD>
  <BODY>
    <P><Q>Trøndere gråter når <Q>Vinsjan på kaia</Q> blir deklamert.</Q>
  </BODY>
</HTML>

    �������

�Trøndere gråter når <Vinsjan på kaia> blir deklamert.?

     ע�⡣������������'quotes'����ָ���������ڼ���������ϵ�λ���Ǻ���������ģ�����������������Ҫ��ͬ��ISO 10646�ַ���������������г���һЩISO 10646�������ַ���

���µ���ȾISO 10646�루ʮ�����ƣ�����
"0022���ţ�ASCII˫���ţ�
'0027ʡ�Ժţ�ASCII�����ţ�
<2039��������
>203A��������
?TD>00AB����˫����
?TD>00BB����˫����
`2018������ [single high-6]
'2019�ҵ����� [single high-9]
``201C��˫���� [double high-6]
''201D��˫���� [double high-9]
,,201E˫LOW-9���� [double low-9]

12.4.2 ��'content'���Բ�������

    ������ǡ����λ�ò��뵽һ���ĵ��У��������'content'���Ե�'open-quote'��'close-quote'ֵ������Ƕ�׵���ȣ�ÿһ��'open-quote'��'close-quote'�ij��ֶ���Ӧ�ر�'quotes'ֵ�е�һ���ַ������档

    'Open-quote'�������ŶԵĵ�һ���֣���'close-quote'���õڶ����֡�ʹ����һ������ȡ�������õ�Ƕ�ײ�Σ���ǰ'open-quote'֮ǰ�������������ɵ��ı��е�'open-quote'��������ȥ'close-quote'���ֵĴ�����������Ϊ0��ʹ�õ�һ�����ţ�������Ϊ1��ʹ�õڶ��ԣ��Դ����ơ������ȴ������ŶԵ����������һ�Խ��ظ�ʹ�á�

    ע�⣬��Ƕ�������Դ�ĵ���Ƕ�׻��ʽ���ṹ�޹ء�

    ��Щӡˢ��ʽҪ����һ����Խ������������õ�ÿһ��֮ǰ�ظ������ţ���ֻ�����һ���Ա����Ž�������CSS�У�����ͨ�����顱�ı��������ﵽ��һ�㡣�ؼ���'no-close-quote'�������Ų�Σ����Dz�����һ�����š�

���ӣ�

    �����������BLOCKQUOTE��ÿһ��ǰ����һ�������ţ���������һ�������ţ�

BLOCKQUOTE P:before     { content: open-quote }
BLOCKQUOTE P:after      { content: no-close-quote }
BLOCKQUOTE P.last:after { content: close-quote }

    �÷�����Ҫ���һ�ε�����Ϊ"last"����Ϊû��һ��ѡ���ӿ���ƥ��һ��Ԫ�ص����һ����Ԫ�ء�

    Ϊ�˶Գƣ�Ҳ��һ��'no-open-quote'�ؼ��֣����������κ����ݣ����ǽ������������1��

    ע�⡣������õ��ı����Ժ�����Χ���ı����Բ�ͬ��ϰ��������Χ�ı����Ե�������������Щ�ı������������������Ե����š�

���ӣ�

    ���磬Ӣ���еķ��

The device of the order of the garter is “Honi soit qui mal y pense.”
�����е�Ӣ�
Il disait: ?nbsp;Il faut mettre l'action en ‹ fast forward ›.?

    ���µ�һ����ʽ��������'quotes'���ԣ�ʹ'open-quote'��'close-quote' ��������Ԫ�ض�������ʹ�á���Щ����������ֻ����Ӣ�ģ����Ļ������ߵ��ĵ�������ж�������ԣ�����Ҫ��һ������ע�����������Ӧ�ã�">"������������Χ�ı����������������ţ�

[LANG|=fr] > *  { quotes: "? "? "\2039" "\203A" }
[LANG|=en] > *  { quotes: "\201C" "\201D" "\2018" "\2019" }

    ������ʾ��Ӣ������Ӧ���Ǵ󲿷��˿��Դ���ġ���������ֱ�Ӵ�������ǿ������ͻ���������

[LANG|=fr] > * { quotes: "? "? "‹" "›" }
[LANG|=en] > * { quotes: "“" "”" "‘" "’" }

12.5 �Զ������ͱ��

    CSS2�е��Զ��������������Կ��ƣ�'counter-increment'��'counter-reset'����Щ���Զ���ļ�������'content'���Ե�counter()��counters()�������á�

'counter-reset'
ֵ��  [ <identifier> <integer>? ]+ | none | inherit
��ʼֵ��  none
�����ڣ�  ����Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  ����
'counter-increment'
ֵ��  [ <identifier> <integer>? ]+ | none | inherit
��ʼֵ��  none
�����ڣ�  ����Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  ����

    'counter-increment'���Խ���һ�����������������ƣ���ʶ������ÿһ��֮���ѡ�ظ�һ����������һ����ָ���������ڸ�Ԫ��ÿ�γ���ʱ�ĵ�������ȱʡ��������1����͸�����Ҳ�������ġ�

    'counter-reset'����Ҳ����һ���������������Ƶ��б���ÿһ��֮���ѡ�ظ�һ��֤�顣������ָ����Ԫ��ÿ�γ���ʱ�����������õ�ֵ��ȱʡΪ0��

    ���'counter-increment'������һ�������������������κ�'counter-reset'����Χ�У��μ����ģ����ü���������Ϊ�ɸ�Ԫ������Ϊ0��

���ӣ�

    ������ʾ��һ�ַ������ºͽ���"Chapter 1"��"1.1"��"1.2"������ǣ�

H1:before {
    content: "Chapter " counter(chapter) ". ";
    counter-increment: chapter;  /* Add 1 to chapter */
    counter-reset: section;      /* Set section to 0 */
}
H2:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
}

    ���һ��Ԫ������/������һ��������������ʹ������������:before��:afterαԪ�ص�'content'�����У����ü�����������/����֮����ʹ�á�

    ���һ��Ԫ��ͬʱ���ú�����һ�����������������ȱ����ã�Ȼ�����ӡ�

    'counter-reset'������ѭ���������ˣ����ڲ�����������ʽ����

H1 { counter-reset: section -1 }
H1 { counter-reset: imagenum 99 }

    ��ֻ����'imagenum'��Ҫ�������������������DZ���һ��ָ����

H1 { counter-reset: section -1 imagenum 99 }

12.5.1 ������Ƕ�׺����÷�Χ

    �������ǡ�����Ƕ�ס��ģ��������һ����Ԫ��������һ�������������Զ����ɸü�������һ���µ�ʵ���������ijЩ�������HTML�е��б�����Ҫ����ΪԪ�ؿ���������֮��Ƕ�׵�������ȡ�������Ϊÿһ����ζ���һ�����������ļ�������

���ӣ�

    ��ˣ����µĴ���������ֱ����Ƕ���б�����˵���㹻�ˡ����������LIԪ�ص�'display:list-item'��'list-style: inside'���ƣ�

OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". "; counter-increment: item }

    ����Ƕ�׻���������׼�򣬼���ÿһ��Ԫ�������һ�����ڼ�����X��'counter-reset'��������һ���µļ�����X������Χ�Ǹ�Ԫ�أ�����ǰ��ͬ�����Լ����и�Ԫ�ص�����������ǰ��ͬ����

    �������У�һ��OL������һ����������������������Ԫ�ؽ����øü�������

    ������item[n]��ʾ"item"�������ĵ�n��ʵ������"("��")"��ʾ��Χ�Ŀ�ʼ�ͽ������������HTMLƬ�ν�ʹ������ָ���ļ������������Ǽٶ���ʽ�����������и�������

<OL>               <!-- (����item[0]Ϊ0      -->
  <LI>item         <!--  ����item[0] (= 1)   -->
  <LI>item         <!--  ����item[0] (= 2)   -->
    <OL>           <!--  (����item[1]Ϊ0     -->
      <LI>item     <!--   ����item[1] (= 1)  -->
      <LI>item     <!--   ����item[1] (= 2)  -->
      <LI>item     <!--   ����item[1] (= 3)  -->
        <OL>       <!--   (����item[2]Ϊ0    -->
          <LI>item <!--    ����item[2] (= 1) -->
        </OL>      <!--   )                  -->
        <OL>       <!--   (����item[3]Ϊ0    -->
          <LI>     <!--    ����item[3] (= 1) -->
        </OL>      <!--   )                  -->
      <LI>item     <!--   ����item[1] (= 4)  -->
    </OL>          <!--  )                   -->
  <LI>item         <!--  ����item[0] (= 3)   -->
  <LI>item         <!--  ����item[0] (= 4)   -->
</OL>              <!-- )                    -->
<OL>               <!-- (����item[4]Ϊ0      -->
  <LI>item         <!--  ����item[4] (= 1)   -->
  <LI>item         <!--  ����item[4] (= 2)   -->
</OL>              <!-- )                    -->

    'counters()'��������һ���ַ������������о����Ǹ����Ƶļ�������ֵ������ָ�����ַ����ָ

���ӣ�

    �������ʽ����Ƕ�׵��б����ݱ���Ϊ"1"��"1.1"��"1.1.1"�ȡ�

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, "."); counter-increment: item }

12.5.2 ����������

    ȱʡ����£�����������ʮ��������ʽ���ģ���������������'list-style-type'���Ե���ʽҲͬ�������ڼ�������ע�����£�

counter(name)

    ��ȱʡ��ʽ����

counter(name, 'list-style-type')

    ���е���ʽ���������ģ�����'disc'��'circle'��'square'�Լ�'none'��

���ӣ�

H1:before        { content: counter(chno, upper-latin) ". " }
H2:before        { content: counter(section, upper-roman) " - " }
BLOCKQUOTE:after { content: " [" counter(bq, hebrew) "]" }
DIV.note:before  { content: counter(notecntr, disc) " " }
P:before         { content: counter(p, none) }

12.5.3 ����'display: none'���Ե�Ԫ���еļ�����

    һ������ʾ��Ԫ�أ�'display'����Ϊ'none'�����������ӻ�����һ����������

���ӣ�

    ���磬�����������ʽ��������Ϊ"secret"��H2Ԫ�ز�����'count2'��ֵ��

H2.secret {counter-increment: count2; display: none}

    ��һ���棬Ԫ�ص�'visibility'����Ϊ'hidden'�����������Ӽ���ֵ�ġ�

12.6 ��Ǻ��б�

    �󲿷�CSS�еĿ���Ԫ������һ��ԭʼ�Ŀ�򡣱����У�������������CSS����ʹһ��Ԫ������������һ��ԭʼ��򣨰���Ԫ�ص����ݣ���һ�������ı�ǿ򣨰���������ţ�ͼ�Σ����ֵ�װ�Σ�����ǿ���ܶ�λ��ԭʼ����ڲ����ⲿ����:before��:after���ݲ�ͬ����ǿ�Ӱ��ԭʼ��Ķ�λ�������ܶ�λ������ʲô��

    �����������бȽ�ͨ�õ�һ����CSS2���µ����ݣ���Ϊ������Ƚ�ר�õĻ���ǣ�浽CSS1�е��б����ԡ��б����Զ��ڴ������õ������������б����ϣ���������һ�����ٵĽ����������Ǹ����û��ڱ�����ݺ�λ�÷��澫ȷ�Ŀ��ơ���ǿ��Ժ������������ã��Դ����µ��б���ʽ���߾�ע��ı�ţ��ȵȵȵȡ�

    ���磬���������չʾ�����Ӧ�ñ����ÿһ����ŵ��б���֮�����һ����㡣HTMLƬ�κ���ʽ����

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
   <HEAD>
     <TITLE>Creating a list with markers</TITLE>
     <STYLE type="text/css">
	  LI:before { 
	      display: marker;
	      content: counter(mycounter, lower-roman) ".";
	      counter-increment: mycounter;
	  }   
     </STYLE>
  </HEAD>
  <BODY>
    <OL>
      <LI> This is the first item.
      <LI> This is the second item.
      <LI> This is the third item.
    </OL>
  </BODY>
</HTML>

    �������µĽ����

   i. This is the first item.
  ii. This is the second item.
 iii. This is the third item.

    ������ѡ��������ѡ�������ã����Ը����б�Ƕ�׵���������岻ͬ�ı�����͡�

12.6.1 ��ǣ�'marker-offset'����

    ��ǵĴ�����ͨ������:before��:afterαԪ���е�'display'����Ϊ'marker'��ʵ�ֵġ�����'block'��'inline'��:before��:after�����Ǹ�Ԫ�����ɵ�ԭʼ����һ���֣�'marker'��������һ�������ı�ǿ��и�ʽ������ԭʼ��֮�⡣��ǿ��ʽ��Ϊһ�����У�����һ���߿�����������Dz���������ô����ǿ�ֻ���ڸ�αԪ�ص�'content'����ȷʵ��������ʱ���ű�������

    ��ǿ��б߰׺ͱ߿򣬵���û�б߾ࡣ

    ����:beforeαԪ�أ���ǿ������ֵĻ����ڴ�ֱ�������ԭʼ�����ݵ�һ���ı��Ļ��ߡ����ԭʼ����û���ı�����ǿ�Ķ���߶���ԭʼ��Ķ���ߡ�����:afterαԪ�أ���ǿ������ֵĻ����ڴ�ֱ�������ԭʼ���������һ���ı��Ļ��ߡ����ԭʼ����û���ı�����ǿ�ĵ���߶���ԭʼ��ĵ���ߡ�

    ��ǿ�ĸ߶���'line-height'���Ը�����:before��:after����ǿ����ԭʼ��ĵ�һ�������һ�����߿�߶ȵļ��㡣��ˣ���ʹ��ǿ�����ڶ������߿��У���Ǻ�Ԫ�����ݵĵ�һ�к����һ�ж��롣���ԭʼ���в����ڵ�һ�������һ���߿򣬱�ǿ���������߿�

    ��ǿ��������߿��ڵĴ�ֱ������'vertical-align'����ָ����

    ���'width'���Ե�ֵΪ'auto'����ǿ�����ݿ����������ݵĿ��ȣ���������'width'��ֵ�����'width'��ֵС�����ݿ��ȣ�'overflow'����ָ��������ı��֡���ǿ���ܸ���ԭʼ�����'width'ֵ�������ݿ��ȣ�'text-align'���Ծ��������ڱ�ǿ��е�ˮƽ���롣

    'marker-offset'����ָ���˱�ǿ����������ԭʼ��֮���ˮƽƫ�ơ���������������������߿����ľ��롣ע�⡣��������ҵĸ�ʽ�������У�һ�����������һ���������ұߣ�ԭʼ�������ڸ������ұߣ�����ǿ��ڳ����ڸ�������ߡ�����ԭʼ�����߿����ڸ�������ߣ��μ�������������������ǿ�����ԭʼ��߿�ߵ���ߣ���˱��Ҳ�����ڸ�������ߡ����Ƶ�����������ҵ���ĸ�ʽ�������У���������ڸ�����ߵij�����

    ����һ��������'display: list-item'��Ԫ�������ɵ����ݣ����'display'����ȡֵΪ'marker'��Ϊ':before'���ɵı�ǿ�ȡ��ͨ�����б����ǡ�

    �����У���һ���̶����ȵı�ǿ��У����ݾ������С�������ĵ���

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
 <HTML>
    <HEAD>
      <TITLE>Content alignment in the marker box</TITLE>
      <STYLE type="text/css">
           LI:before { 
               display: marker;
               content: "(" counter(counter) ")";
               counter-increment: counter;
               width: 6em;
               text-align: center;
           }
      </STYLE>
   </HEAD>
   <BODY>
     <OL>
       <LI> This is the first item.
       <LI> This is the second item.
       <LI> This is the third item.
     </OL>
   </BODY>
 </HTML>

    Ӧ�ò������µ�Ч����

  (1)    This is the 
         first item.
  (2)    This is the 
         second item.
  (3)    This is the 
         third item.

    ������������б���֮ǰ��֮�����ɱ�ǡ�

    ���ĵ���

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Markers before and after list items</TITLE>
    <STYLE type="text/css">
      @media screen, print {
         LI:before { 
   	      display: marker;
	      content: url("smiley.gif");
         LI:after {
	      display: marker;
   	      content: url("sad.gif");
         }
      }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>first list item comes first
      <LI>second list item comes second
    </UL>
  </BODY>
</HTML>

    Ӧ�ò������µ�Ч����������ASCII�ַ�������ͼ���ļ�����

  :-) first list item 
      comes first      :-(
  :-) second list item 
      comes second     :-(

    ����������ñ�������ע�ͣ����䣩��

    ������ĵ���

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Markers to create numbered notes4>/TITLE>
    <STYLE type="text/css">
      P { margin-left: 12 em; }
      @media screen, print {
         P.Note:before         { 
  	      display: marker;
	      content: url("note.gif") 
                       "Note " counter(note-counter) ":";
              counter-increment: note-counter;
              text-align: left;
              width: 10em;
         }
     }
    </STYLE>
  </HEAD>
  <BODY>
    <P>This is the first paragraph in this document.</P>
    <P CLASS="Note">This is a very short document.</P>
    <P>This is the end.</P>
  </BODY>
</HTML>

    Ӧ�ò������µ�Ч����

            This is the first paragraph 
            in this document.

  Note 1:   This is a very short 
            document.
           
            This is the end.
'marker-offset'
ֵ��  <length> | auto | inherit
��ʼֵ��  auto
�����ڣ�  ������'display: marker'��Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  ͼ��

    ������ָ���˱�ǿ���߿�������������֮������ԭʼ���ı߿�ߵľ��롣��ƫ�ƻ������û�ָ���ģ�<length>�������û���ѡ��'auto'�������ȿ����Ǹ��������ǿ�����ʵ���ϵ����ơ�

    ���������չʾ������ñ����ÿһ����ŵ��б���֮�����һ����㡣HTMLƬ�κ���ʽ�����£�

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <HTML>
    <HEAD>
      <TITLE>Marker example 5</TITLE>
      <STYLE type="text/css">
           P { margin-left: 8em } /* Make space for counters */
           LI:before { 
               display: marker;
               marker-offset: 3em;
               content: counter(mycounter, lower-roman) ".";
               counter-increment: mycounter;
           }   
      </STYLE>
   </HEAD>
   <BODY>
     <P> This is a long preceding paragraph ...
     <OL>
       <LI> This is the first item.
       <LI> This is the second item.
       <LI> This is the third item.
     </OL>
     <P> This is a long following paragraph ...
   </BODY>
 </HTML>

    Ӧ�ò������µ�Ч����

        This is a long preceding
        paragraph ...
      
   i.   This is the first item.
  ii.   This is the second item.
 iii.   This is the third item.

        This is a long following
        paragraph ...

12.6.2 ���'list-style-type'��'list-style-image'��'list-style-position'��'list-style'����

    �б����������б��Ļ������Ӹ�ʽ�������ڸ�һ��ı�ǣ�Ԫ��������'display: list-item'��������һ��ԭʼ��������Ԫ�ص����ݣ��Լ�һ����ѡ�ı�ǿ������б�������������ָ��������ͣ�ͼ�Σ����λ����֣��Լ��������ԭʼ���λ�ã��ڿ�֮����֮�ڣ�����֮ǰ�������Dz���������Ϊ�б����ָ���������ʽ����ɫ�����壬����ȣ���Ҳ���������ԭʼ�����������λ�á�

    ���⣬���һ�����M����'display: marker'����������һ�����б����Դ������б��M����˱�׼���б����ǡ�

    �����б����ԣ���������ֻ������ԭʼ��һ��'outside'�ı�ǿ���͸���ġ�����ṩ�˱�ǿ���ʽ����Ŀ��ơ�

'list-style-type'
ֵ��  disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit
��ʼֵ��  disc
�����ڣ�  ������'display: list-item'��Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  ͼ��

    ���'list-style-image'Ϊ'none'���ɸ�URIָ���ͼ���޷�����ʾʱ��������ָ�����б����ǵij��֡�'none'ָ��û�б�ǣ��������������͵ı�ǣ����Σ�����ϵͳ����ĸϵͳ��ע�⡣ͨ��ʹ�б��ĵ��������ף���ŵ��б��Ľ����ĵ��Ŀ��Ķ��� ��

    ������disc��circle��squareָ��������ȷ�е���Ⱦȡ�����û��ˡ�

    ����ϵͳ��ָ�����£�

decimal
ʮ����������1��ʼ��
decimal-leading-zero
ʮ������������ǰ��0��01��02��03��������98��99����
lower-roman
Сд�������֣�i��ii��iii��iv��v�ȣ���
upper-roman
��д�������֣�I��II��III��IV��V�ȣ���
hebrew
��ͳ��ϣ�������֡�
georgian
��ͳ�ĸ�³�������֡���an��ban��gan��������he��tan��in��in-an����������
armenian
��ͳ�������������֡�
cjk-ideographic
һ��������֡�
hiragana
a��i��u��e��o��ka��ki������
katakana
A��I��U��E��O��KA��KI������
hiragana-iroha
i��ro��ha��ni��ho��he��to������
katakana-iroha
I��RO��HA��NI��HO��HE��TO������

    ����û����޷�ʶ��һ������ϵͳ����Ӧ��ʹ��'decimal'��

    ע�⡣���ĵ������涨ÿһ������ϵͳ��ȷ�л��ƣ��磬����������μ��㣩���Ժ��W3Cע������ṩ����ϸ��������

    ��ĸϵͳ��ָ�����£�

lower-latin��lower-alpha
СдASCII��ĸ��a��b��c������ z����
upper-latin��upper-alpha
��дASCII��ĸ��A��B��C������ Z)��
lower-greek
Сд��׼ϣ����ĸalpha��beta��gamma��������έ��ή��ί��������

    ���淶����������ĸϵͳ����ĸ��֮����λ��ơ����磬26���б���֮��'lower-latin'����Ⱦδ�����塣��ˣ����ڳ����б��������Ƽ�����ָ����ʵ�����֡�

    ���磬���µ�HTML�ĵ���

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
   <HEAD>
     <TITLE>Lowercase latin numbering</TITLE>
     <STYLE type="text/css">
          OL { list-style-type: lower-roman }   
     </STYLE>
  </HEAD>
  <BODY>
    <OL>
      <LI> This is the first item.
      <LI> This is the second item.
      <LI> This is the third item.
    </OL>
  </BODY>
</HTML>

    ���ܲ������µ�Ч����

  i This is the first item.
 ii This is the second item.
iii This is the third item.

    ע�⣬�б���ǵĶ��루���������Ҷ��룩ȡ�����û��ˡ�

    ע�⡣�Ժ�汾��CSS�����ṩ���������Ļ����������������ֱ���ϵͳ��

'list-style-image'
ֵ��  <uri> | none | inherit
��ʼֵ��  none
�����ڣ�  ����'display: list-item'��Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  ͼ��

    ������ָ�������б����ǵ�ͼ�Ρ����ͼ���ǿ��Եõ��ģ������滻��'list-style-type'������õı�ǡ�

���ӣ�

    �����������ӽ�ÿһ���б��ͷ�ı������Ϊͼ��"ellipse.png"��

UL { list-style-image: url("http://png.com/ellipse.png") }
'list-style-position'
ֵ��  inside | outside | inherit
��ʼֵ��  outside
�����ڣ�  ����'display: list-item'��Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  ͼ��

    ��ֵָ����ǿ����ԭʼ����λ�á�ȡֵ�ĺ������£�

outside
��ǿ���ԭʼ�������档ע�⡣CSS1û��ָ����ǿ��ȷ��λ�ã�Ϊ�˼����ԵĿ��ǣ�CSS2������ͬ���ĺ�����Ҫ�õ���ǿ����ȷ�Ŀ��ƣ���ʹ�ñ�ǡ�
inside
��ǿ���ԭʼ���ĵ�һ�����ڿ����������Ԫ�ص����ݡ�

    ���磺

<HTML>
  <HEAD>
    <TITLE>Comparison of inside/outside position</TITLE>
    <STYLE type="text/css">
      UL         { list-style: outside }
      UL.compact { list-style: inside }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>first list item comes first
      <LI>second list item comes second
    </UL>

    <UL class="compact">
      <LI>first list item comes first
      <LI>second list item comes second
    </UL>
  </BODY>
</HTML>

    �������ܱ���ʽ��Ϊ��

    Difference between inside
and outside list style position   [D]

    ���ҵ������е��ı��У���ǻ�����ڿ���ұߡ�

'list-style'
ֵ��  [ <'list-style-type'> || <'list-style-position'> || <'list-style-image'> ] | inherit
��ʼֵ��  ������д����δ����
�����ڣ�  ����'display: list-item'��Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  ͼ��

    'list-style'������һ����д�����ԣ���������ʽ����ͬһ��һ���������������ԣ�'list-style-type'��'list-style-image'��'list-style-position'����

���ӣ�

    

UL { list-style: upper-roman inside }  /* Any UL */
UL > UL { list-style: circle outside } /* Any UL child of a UL */

    ��Ȼ���߿������б���Ԫ�أ��磬HTML�е�LI����ֱ��ָ��ָ��'list-style'��Ϣ������������ʱҪС�ġ�����Ĺ�����ȥ�����󣬵��ǵ�һ��������һ������ѡ�������ڶ���������һ����������Ե���ѡ������

OL.alpha LI   { list-style: lower-alpha } /* Any LI descendant of an OL */
OL.alpha > LI { list-style: lower-alpha } /* Any LI child of an OL */

    �������ֻʹ������ѡ���������ܴﲻ������ϣ����Ч�����������µ����ӣ�

<HTML>
  <HEAD>
    <TITLE>WARNING: Unexpected results due to cascade</TITLE>
    <STYLE type="text/css">
      OL.alpha LI  { list-style: lower-alpha }
      UL LI        { list-style: disc }
    </STYLE>
  </HEAD>
  <BODY>
    <OL class="alpha">
      <LI>level 1
      <UL>
         <LI>level 2
      </UL>
    </OL>
  </BODY>
</HTML>

    ��Ҫ��Ч���ǵ�һ���б���ı�ǩΪ'lower-alpha'���ڶ����ı�ǩΪ'disc'���������˳����ʹ��һ����ʽ���򣨰���һ���ض�������Ϣ�����ǵĵڶ���������Ĺ���ͨ��������ѡ�����������һ���⣺

OL.alpha > LI  { list-style: lower-alpha }
UL LI   { list-style: disc }

    ����һ�����������ֻ���б�����Ԫ����ָ��'list-style'��Ϣ��

OL.alpha  { list-style: lower-alpha }
UL        { list-style: disc }

    �̳н�OL��ULԪ�ص�'list-style'ֵת�Ƶ�LIԪ�ء�����ָ���б���ʽ��Ϣ���Ƽ�������

���ӣ�

    һ��URIֵ���Ժ�����ֵ���ã��磺

UL { list-style: url("http://png.com/ellipse.png") disc }

    �����У�����޷���ȡͼ�Σ���ʹ��'disc'��

    ���'list-style'����ȡֵΪ'none'������'list-style-type'��'list-style-image'������Ϊ'none'��

UL { list-style: none }

    ����Dz���ʾ�κ��б����ǡ�