Ŀ¼
ijЩ����£����߿���ϣ���û�����Ⱦ��Щ�����ĵ����е����ݡ�����Ϥ��һ�������Ǽ������б������߲�����ʽ�ظ�����������ϣ���û����Զ����������ǡ����Ƶأ����߿���ϣ���û�����һ��ͼ�εı���ǰ����뵥�ʡ�ͼ�Ρ������ڵ����±���ǰ���롰�����¡����ر��Ƕ�����Ƶ��ä�ģ��û���Ӧ���ܹ������������ַ�����
CSS2�У��������ݵĻ���������������
�����������ۺ�'content'������صĻ��ơ�
������: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�����У�������������ֵ��
�����Ժ�:before��:afterαԪ�����������ĵ��в������ݡ�ȡֵ�ĺ������£�
'display'���Կ��������Ƿ�����һ���飬���ڻ����ڱ�ǿ��С�
������ݺ�ý����أ�����Ӧ�ý�'content'����������@media�����С����磬�ı����������κ�ý���飬��ͼ�ν�������ͼ�κ͵���ͼ��ý���飬�������ļ�ֻ��������Ƶý���顣
����Ĺ���ʹ����һ�����õĽ�β������һ�������ļ����μ�������ʽ��һ�ڣ������и���Ļ��ƣ���
@media aural {
BLOCKQUOTE:after { content: url("beautiful-music.wav") }
}
����Ĺ�����ͼ��ǰ����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αԪ�ص����ݵ���ʽ����ͬ��
���ܷ������µ������
������һ��'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
CSS2�У����߿�����һ������ʽ�������������صķ�ʽָ���û���Ӧ�������Ⱦ���š�'quotes'����ָ����ÿһ��Ƕ�����õ����Ŷԡ�'content'���Ը�������Щ���ŵ����ã���ʹ����һ������֮ǰ��֮���롣
������ָ��������������Ƕ�����õ����š�ȡֵ�ĺ������£�
���磬ʹ�����µ���ʽ����
/* 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] |
������ǡ����λ�ò��뵽һ���ĵ��У��������'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: "“" "”" "‘" "’" }
CSS2�е��Զ��������������Կ��ƣ�'counter-increment'��'counter-reset'����Щ���Զ���ļ�������'content'���Ե�counter()��counters()�������á�
| ֵ�� | [ <identifier> <integer>? ]+ | none | inherit |
| ��ʼֵ�� | none |
| �����ڣ� | ����Ԫ�� |
| �ɷ�̳У� | �� |
| �ٷֱȣ� | N/A |
| ý�飺 | ���� |
| ֵ�� | [ <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 }
�������ǡ�����Ƕ�ס��ģ��������һ����Ԫ��������һ�������������Զ����ɸü�������һ���µ�ʵ���������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 }
ȱʡ����£�����������ʮ��������ʽ���ģ���������������'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) }
һ������ʾ��Ԫ�أ�'display'����Ϊ'none'�����������ӻ�����һ����������
���磬�����������ʽ��������Ϊ"secret"��H2Ԫ�ز�����'count2'��ֵ��
H2.secret {counter-increment: count2; display: none}
��һ���棬Ԫ�ص�'visibility'����Ϊ'hidden'�����������Ӽ���ֵ�ġ�
��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.
������ѡ��������ѡ�������ã����Ը����б�Ƕ����������岻ͬ�ı�����͡�
��ǵĴ�����ͨ������: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.
| ֵ�� | <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 ...
�б����������б��Ļ������Ӹ�ʽ�������ڸ�һ��ı�ǣ�Ԫ��������'display: list-item'��������һ��ԭʼ��������Ԫ�ص����ݣ��Լ�һ����ѡ�ı�ǿ������б�������������ָ��������ͣ�ͼ�Σ����λ����֣��Լ��������ԭʼ���λ�ã��ڿ�֮����֮�ڣ�����֮ǰ�������Dz���������Ϊ�б����ָ���������ʽ����ɫ�����壬����ȣ���Ҳ���������ԭʼ�����������λ�á�
���⣬���һ�����M����'display: marker'����������һ�����б����Դ������б��M����˱����б����ǡ�
�����б����ԣ���������ֻ������ԭʼ��һ��'outside'�ı�ǿ������ġ�����ṩ�˱�ǿ���ʽ����Ŀ��ơ�
| ֵ�� | 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'��
ע�⡣���ĵ������涨ÿһ������ϵͳ��ȷ�л��ƣ��磬����������μ��㣩���Ժ��W3Cע������ṩ����ϸ��������
��ĸϵͳ��ָ�����£�
���淶����������ĸϵͳ����ĸ��֮����λ��ơ����磬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�����ṩ���������Ļ����������������ֱ���ϵͳ��
| ֵ�� | <uri> | none | inherit |
| ��ʼֵ�� | none |
| �����ڣ� | ����'display: list-item'��Ԫ�� |
| �ɷ�̳У� | �� |
| �ٷֱȣ� | N/A |
| ý�飺 | ͼ�� |
������ָ�������б����ǵ�ͼ�Ρ����ͼ���ǿ��Եõ��ģ������滻��'list-style-type'������õı�ǡ�
�����������ӽ�ÿһ���б��ͷ�ı������Ϊͼ��"ellipse.png"��
UL { list-style-image: url("http://png.com/ellipse.png") }
| ֵ�� | inside | outside | inherit |
| ��ʼֵ�� | outside |
| �����ڣ� | ����'display: list-item'��Ԫ�� |
| �ɷ�̳У� | �� |
| �ٷֱȣ� | N/A |
| ý�飺 | ͼ�� |
��ֵָ����ǿ����ԭʼ����λ�á�ȡֵ�ĺ������£�
���磺
<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>
�������ܱ���ʽ��Ϊ��
���ҵ������е��ı��У���ǻ�����ڿ���ұߡ�
| ֵ�� | [ <'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���ʾ�κ��б����ǡ�