Ŀ¼
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���ʾ�κ��б����ǡ�