Ŀ¼
CSS�У�ģʽƥ�����涨�ĵ����е�Ԫ��Ӧ��������Щ��ʽ������Щģʽ����Ϊѡ�����������Ǽ�Ԫ���������Ǹ��ӵ���������ص�ģʽ�����ģʽ�е�����������ijһ��Ԫ�ض�Ϊ�棬��ѡ���Ӿ�ƥ���Ǹ�Ԫ�ء�
ѡ�����е��ĵ�����Ԫ�����Ĵ�Сд������ȡ�����ĵ����ԵĴ�Сд�����ԡ����磬��HTML�У�Ԫ�����Ǵ�Сд�صģ�����XML�У��Ǵ�Сд��صġ�
����ı��������CSS2ѡ���ӵ����
ģʽ | ���� | ������ |
---|---|---|
* | ƥ������Ԫ�ء� | ȫ��ѡ���� |
E | ƥ������EԪ�أ�������ΪE��Ԫ�أ��� | ����ѡ���� |
E F | ƥ��EԪ�غ��������FԪ�ء� | ����ѡ���� |
E > F | ƥ��EԪ����Ԫ�ص�����FԪ�ء� | ��ѡ���� |
E:first-child | ��Ԫ��E���丸Ԫ�صĵ�һ����Ԫ��ʱ��ƥ��EԪ�ء� | :first-childα�� |
E:link E:visited | ��Ԫ��E��һ�������ӵ���ʱ�����Ŀ�껹δ�����ʣ�:link�����Ѿ����ʣ�:visited��ʱ��ƥ��Ԫ��E�� | ����α�� |
E:active E:hover E:focus | ���ض����û���Ϊʱ��ƥ��E�� | ��̬α�� |
E:lang(c) | ƥ��E���͵�Ԫ�أ�������ԣ����ࣩ����cд�ɣ��ĵ����Թ涨���ȷ�����ԣ��� | :lang()α�� |
E + F | ƥ������FԪ�أ����������ǰ����EԪ�ء� | ����ѡ���� |
E[foo] | ƥ������EԪ�أ������������"foo"���ԣ�����ֵ��ʲô���� | ����ѡ���� |
E[foo="warning"] | ƥ������EԪ�أ������������"foo"���ԣ���������ֵΪ"warning"�� | ����ѡ���� |
E[foo~="warning"] | ƥ������EԪ�أ��������"foo"����ֵ��һ���Կո�ָ���б���������֮һΪ"warning"�� | ����ѡ���� |
E[lang|="en"] | ƥ������EԪ�أ�����"lang"����ֵ��һ�������ֺŷָ���б���������"en"��ͷ���������㣩�� | ����ѡ���� |
DIV.warning | ����HTML���á���DIV[class~="warning"]�� | ��ѡ���� |
E#myid | ƥ���κ���IDΪ"myid"��EԪ�ء� | IDѡ���� |
һ����ѡ����������һ������ѡ������������һ��ȫ��ѡ�����������ں���������������ѡ������IDѡ������α�����������⡣��������������ݶ�ƥ�䣬���ѡ����ƥ�䡣
һ��ѡ������һ��������ѡ��������Ϸ����ɵ�������Ϸ��������հף�">"��"+"���հ��Գ�����һ����Ϸ��ͼ�ѡ����֮�䡣
�ĵ�����ƥ��һ��ѡ���ӵ�Ԫ�س�Ϊ�Ǹ�ѡ���ӵ�����������һ����ѡ���ӵ�ѡ���ӣ�ƥ�����������Ҫ���Ԫ�ء�����ѡ���Ӻ���Ϸ���ϳ����������˶����ƥ�����������ѡ���ӵ�����������Щ�������Ҷ˵ļ�ѡ���ӵ�Ԫ�ص��Ӽ���
��һ�����е����һ����ѡ����֮���Լ�һ��αԪ������ʱ������ʽ��ϢӦ�õ�ÿһ���������ɲ��֡�
�������ѡ����������ƣ����Խ����Ƿ���Ϊһ���Զ��ŷָ���б���
�����У����ǽ�������ͬ�������鲢Ϊһ������ˣ�
H1 { font-family: sans-serif } H2 { font-family: sans-serif } H3 { font-family: sans-serif }
�͵�ͬ�ڣ�
H1, H2, H3 { font-family: sans-serif }
CSS���ṩ��������д�����ƣ�����������������д������
ȫ��ѡ������д��"*"��ƥ������Ԫ������������ƥ�����ĵ����е�����һ��Ԫ�ء�
���ȫ��ѡ���Ӳ���һ����ѡ������Ψһ���ݣ�"*"����ʡ�ԡ����磺
*[LANG=fr]
��[LANG=fr]
��һ���ġ�
*.warning
��.warning
��һ���ġ�
*#myid
��#myid
��һ���ġ�
����ѡ����ƥ���ĵ�����Ԫ����������һ������ѡ����ƥ���ĵ����и�Ԫ�����͵�ÿһ��ʵ����
���µĹ���ƥ���ĵ��������е�H1Ԫ�أ�
H1 { font-family: sans-serif }
��ʱ�����߿���ϣ��ѡ������һ��Ԫ�����ĵ���������һ��Ԫ�صĺ��ʱ��ƥ���Ǹ�Ԫ�أ����磬��ƥ����Щ������һ��H1Ԫ���ڵ�EMԪ�ء���������ѡ����������ģʽ�������Ĺ�ϵ������ѡ��������������ѡ������ɣ������հ���ָ����ѡ���ӵ���ʽΪ"A B
"����ƥ��һ��Ԫ��B
����Ԫ��B
����ǰ��Ԫ��A
��������ʱ��
���磬�������¹���
H1 { color: red } EM { color: red }
������Щ�����������ͨ���ı��ı�����ɫ�����ı�����ǿ�������������������оͻ�ʧȥǿ��Ч����
<H1>������<EM>�dz�</EM>��Ҫ</H1>
�����������Ľ���һ��������Ƕ�ǰ���Ĺ���һ��������һ��������H1֮���κ�λ�õ�EMԪ�ص��ı���ɫ����Ϊ��ɫ��
H1 { color: red } EM { color: red } H1 EM { color: blue }
����������ƥ����������е�EMԪ�أ�
<H1>��<SPAN class="myclass">����<EM>�dz�</EM>��Ҫ</SPAN></H1>
�����ѡ���ӣ�
DIV * P
ƥ��һ��PԪ�أ������PԪ����DIVԪ�ص���Ԫ�ػ�����Ԫ�ء���ע��"*"���ߵĿհס�
��������е�ѡ���ӽ��������ѡ���Ӻ�����ѡ��������ƥ���κ�Ԫ�أ����(1)��Ԫ��������"href"���ԣ���(2)������һ��PԪ���ڣ���PԪ���ְ�����һ��DIVԪ���ڣ�
DIV P *[href]
��ѡ����ƥ��һ��Ԫ�أ�����Ԫ��������һ��Ԫ�ص���Ԫ��ʱ����ѡ��������������ѡ���ӹ��ɣ�����">"�ָ
����Ĺ�������������BODYԪ����Ԫ�ص�PԪ�ص���ʽ��
BODY > P { line-height: 1.3 }
��������ӽ��������ѡ���Ӻ���ѡ���ӣ�
DIV OL>LI P
��ƥ��һ��LIԪ�صĺ��PԪ�أ���LI������OLԪ�ص���Ԫ�أ���OLԪ�ر�����DIVԪ�صĺ������ע�⣬��">"��Ϸ����˿�ѡ�Ŀհ��Ѿ���ʡ�ԡ�
����ѡ��һ��Ԫ�صĵ�һ����Ԫ�ص����⣬��μ����µ�:first-childα��һ�ڡ�
����ͬ��ѡ���ӵ��Ϊ��E1 + E2������E2��ѡ���ӵ����⡣��ѡ����ƥ��������ǣ����E1��E2���ĵ����и�Ԫ����ͬ����E1������E2֮ǰ����ѡ����ƥ��Ԫ��E2��
��ijЩ�龰�У�����Ԫ�ز����ĸ�ʽ���������ǵij������Զ������ģ����磬���ڿ��ƿ�֮��Ĵ�ֱ�߾���غϣ���"+"ѡ�����������߶�����Ԫ��ָ�����ӵ���ʽ��
��ˣ�����Ĺ���ָ������һ��PԪ�ؽ�����һ��MATHԪ��֮��ʱ������Ӧ��������
MATH + P { text-indent: 0 }
�����һ�����ӣ���С�˽�����H1֮���H2Ԫ�صĴ�ֱ���룺
H1 + H2 { margin-top: -5mm }
����Ĺ���ͬ��һ�����ƣ�����������������ѡ���ӡ����ֻ�е�H1����class="opener"��ʱ�������ر�ĸ�ʽ����
H1.opener + H2 { margin-top: -5mm }
CSS2��������ָ��������ƥ��Դ�ĵ��ж�������ԡ�
����ѡ����������ƥ�䷽ʽ��
[att]
[att=val]
[att~=val]
[att|=val]
����ֵ�����DZ�ʶ�����ַ�����ѡ��������������ֵ�Ĵ�Сд������ȡ�����ĵ����Ե������ԡ�
���磬���µ�����ѡ����ƥ����Щָ����"title"���Ե�H1Ԫ�أ���������ֵΪʲô��
H1[title] { color: blue; }
����������ӣ�ѡ����ƥ������ָ��"class"����Ϊ"example"��SPANԪ�أ�
SPAN[class=example] { color: blue; }
��������ѡ���ӿ�����������һ��Ԫ�صļ������ԣ���ͬһ���Եij��֡�
���ѡ����ƥ����ЩSPANԪ�أ���"hello"��������Ϊ"Cleveland"��"goodbye"��������Ϊ"Columbus"��
SPAN[hello="Cleveland"][goodbye="Columbus"] { color: blue; }
�����ѡ������ʾ��"="��"~="���������磬��һ��ѡ����ƥ��"rel"���Ե�"copyright copyleft copyeditor"ֵ�����ڶ���ѡ����ֻƥ��"href"����ֵΪ"http://www.w3.org/"��
A[rel~="copyright"] A[href="http://www.w3.org/"]
����Ĺ�������"lang"��������Ϊ"fr"��������Ϊ�����Ԫ�ص���ʾ���Թرա�
*[LANG=fr] { display : none }
����Ĺ���ƥ�������"en"��ͷ��"lang"����ֵ������Ԫ�أ�����"en"��"en-US"��"en-cockney"��
*[LANG|="en"] { color : red }
���Ƶأ������������ʽ����������һ�����ָ��ݲ�ͬ�Ľ�ɫ�Բ�ͬ������������
DIALOGUE[character=romeo] { voice-family: "Lawrence Olivier", charles, male } DIALOGUE[character=juliet] { voice-family: "Vivien Leigh", victoria, female }
ƥ�����ĵ����е�����ֵ������ء�����HTML���ԣ������ĵ����Ե�ȱʡ���Կ��Զ�����DTD�л��ĵط�����ʽ�������Ӧ�ñ�֤��ʹ���ĵ�����û�а���ȱʡֵ������Ҳ��������������
�ٶ����ǿ���һ��Ԫ��ELEMENT��������һ��"notation"���ԣ���ȱʡֵΪ"decimal"����DTD��ʾ�����ǣ�
<!ATTLIST EXAMPLE notation (decimal,octal) "decimal">
�����ʽ���������¹���
EXAMPLE[notation=decimal] { /*... default property settings ...*/ } EXAMPLE[notation=octal] { /*... other settings...*/ }
��ôΪ�˿���������ȱʡ�����ö�������ʽ�����õ���������Լ�������Ĺ���
EXAMPLE { /*... default property settings ...*/ }
������һѡ����������ѡ������ȣ�����ô��ȷ����ֻ��������ȱʡ������¡�ע�⣬�������Ժ�ȱʡ���Ե���ʽ��ͬ�����DZ��뱻��ʽ�ذ�����
��HTML��ʽ���У���ƥ��"class"����ʱ�����߿���ʹ�õ㣨.����������Ϊ"~="���ŵ��������ˣ�HTML��"DIV.value"��"DIV[class~=value]"��˼��һ���ġ�����ֵ���������"."֮��
���磬���ǿ���Ϊ����class~="pastoral"��Ԫ��ָ����ʽ��Ϣ���£�
*.pastoral { color: green } /* all elements with class~=pastoral */���ߣ�
.pastoral { color: green } /* all elements with class~=pastoral */
����Ĺ���ֻ��class~="pastoral"��H1Ԫ��ָ����ʽ��
H1.pastoral { color: green } /* H1 elements with class~=pastoral */
����Щ���������£����������еĵ�һ��H1Ԫ�ز�����ɫ���֣����ڶ�������ɫ���֣�
<H1>Not green</H1> <H1 class="pastoral">Very green</H1>
Ҫƥ��"class"ֵ��һ���ּ��ϣ�ÿһ��ֵ��������"."�ָ�������⡣
���磬����Ĺ���ƥ������PԪ�أ��������"class"���Ա�ָ��Ϊһ���ո�ָ���б����������а���"pastoral"��"marine"��
P.pastoral.marine { color: green }
�ù���ƥ��class="pastoral blue aqua marine"����ƥ��class="pastoral blue"��
ע�⣡CSS����"class"���Ժ�ǿ������������û�г������ݵ�Ԫ�أ���HTML�е�DIV��SPAN�����û�������������Լ��ġ��ĵ����ԡ�����ͨ��"class"������ָ����ʽ��Ϣ������Ӧ�ñ�����һ���ԡ�������Ϊ�ĵ����ԵĽṹ��Ԫ��ͨ�����й��Ϻ��Ͽɵĺ��壬�������Զ������ȴ������ˡ�
�ĵ����Կ���������ΪID���͵����ԡ�ID�������Ե�����֮�����ڣ�û���������Կ�������ͬ��ֵ�������ĵ�������ʲô��ID���Կ���������һ��ָ������Ԫ�ء���HTML�У�ID���Զ�������Ϊ"id"��XMLӦ�ÿ��ܲ�ȡ��ͬ�ķ�������ID���ԣ�����Ҳ��ͬ�������ơ�
�ĵ������е�ID������������Ϊ�ĵ�����Ԫ�ص�һ��ʵ��ָ��һ����ʶ����CSS IDѡ���ӻ���Ԫ�صı�ʶ����ƥ��һ��Ԫ�ء�CSS IDѡ���Ӱ���һ��"#"�������ں����IDֵ��
�����IDѡ����ƥ��ID����ֵΪ"chapter1"��H1Ԫ�أ�
H1#chapter1 { text-align: center }
������������У���ʽ����ƥ��IDֵΪ"z98y"��Ԫ�ء���ˣ�����ƥ��PԪ�أ�
<HEAD> <TITLE>ƥ��PԪ��</TITLE> <STYLE type="text/css"> *#z98y { letter-spacing: 0.3em } </STYLE> </HEAD> <BODY> <P id=z98y>���ı�</P> </BODY>
��һ�������У���ʽ����ֻƥ��IDֵΪ"z98y"��H1Ԫ�أ�����ƥ�������е�PԪ�أ�
<HEAD> <TITLE>ֻƥ��H1</TITLE> <STYLE type="text/css"> H1#z98y { letter-spacing: 0.5em } </STYLE> </HEAD> <BODY> <P id=z98y>���ı�</P> </BODY>
IDѡ���ӱ�����ѡ���Ӿ��и��ߵ����ȼ������磬��HTML�У�������ĽǶ�˵��ѡ����#p123��[ID=p123]����ȷ��
ע�⣡��XML 1.0[XML10]�������ĸ���������Ԫ�ص�ID����Ϣ�������DTD�С�����XMLʱ���û��˲������Ķ�DTD����˿��ܲ�֪��Ԫ�ص�ID��ʲô�������ʽ���������֪���������������⣬��Ӧ�ø�Ϊʹ��һ�������ѡ���ӣ�[name=p371]
������#p371
��Ȼ����һ������ѡ���ӵIJ�������IDѡ���Ӳ�ͬ��������ҪΪ��������һ��"!important"����Ȩ��[name=p371]{color: red ! important}
����Ȼ��XML 1.0�ĵ��е�Ԫ�����û��DTD��Ҳ����û��ID��
CSS2�У���ʽ��Ԫ�ص�����һ���ǻ���Ԫ�����ĵ����е�λ�á���һ��ģ�Ͷ��ڴ�������㹻�ġ����������ĵ����ṹ�����ƣ�һЩ���õ�ӡˢЧ���������ﵽ�����磬��HTML 4.0���μ�[HTML40]���У�û��Ԫ�ؿ���������һ������ĵ�һ�У����Ҳû��һ����CSSѡ���ӿ�����������
CSS������αԪ����α���ĸ���������ĵ���֮�����Ϣ���и�ʽ����
������αԪ�ػ�α�࣬���Ƕ���������Դ�ĵ����ĵ����С�
α�������ѡ�����е��κ�λ�ó��֣���αԪ��ֻ���Գ�����ѡ���ӵ�����֮��
αԪ�غ�α������������Сд��صġ�
ijЩα������ų�ģ�������һЩ����ͬʱӦ�õ�ͬһԪ���ϡ�������ֹ����ͻ���������������������������
��CSSһ�µ�HTML�û��������������д���:first-line��:first-letter�Ĺ����ߣ�����ֻ֧����ЩαԪ�����Ե�һ���Ӽ���
:first-childα��ƥ��һ��������һ��Ԫ�صĵ�һ����Ԫ�ص�Ԫ�ء�
�����У�ѡ����ƥ���κ�һ����DIVԪ�صĵ�һ����Ԫ�ص�PԪ�ء��ù���ȡ����DIV�е�һ�������������
DIV > P:first-child { text-indent: 0 }��һѡ���ӽ�ƥ�������������DIV�ڵ�PԪ�أ�
<P>��ע��֮ǰ�����һ��PԪ�ء� <DIV class="note"> <P> ��ע��֮�еĵ�һ��PԪ�ء� </DIV>���Dz�ƥ����������еĵڶ���PԪ�أ�
<P> ��ע��֮ǰ�����һ��PԪ�ء� <DIV class="note"> <H2>ע��</H2> <P> ��ע��֮�еĵ�һ��PԪ�ء� </DIV>
����Ĺ���ƥ��������ǣ����PԪ����ij��Ԫ�صĵ�һ����Ԫ�أ���EMԪ�������ĺ������ô��EMԪ�ص�������������Ϊ'bold'��
P:first-child EM { font-weight : bold }
ע�⣬�����������ƿ����ĵ�����һ���֣��ڼ����һ����Ԫ��ʱ�����Dz��������ڡ�
���磬�����EMԪ�أ�
<P>abc <EM>default</EM>��PԪ�صĵ�һ����Ԫ�ء�
��������ѡ������һ���ģ�
* > A:first-child /* A������Ԫ�صĵ�һ����Ԫ�� */ A:first-child /* ͬ�� */
�û�����ʾδ���ʵ����Ӻ��ѷ��ʵ�����ʱ������һЩ��ͬ��CSS�ṩ��α��':link'��':visited'���������֣�
ע�⣡����һ���ض���ʱ����û��˿���ѡ���Ѿ����ʵ����ӻָ�����δ���ʵģ�':link'״̬��
������״̬�ǻ����ų�ġ�
�ĵ����Ծ�����ЩԪ���dz����ӵ�Դ�������磬��HTML 4.0�У�����α�������ڴ���"href"���Ե�AԪ�ء���ˣ����������CSS2����Ч��һ����
A:link { color: red } :link { color: red }
�����������ӣ�
<A class="external" href="http://out.side/">external link</A>�Ѿ������ʣ�����
A.external:visited { color: blue }��ʹ����Ϊ��ɫ��
�������û�����ʱ�����û��Ķ����ı���ȾЧ����CSSΪͨ�õ�����ṩ����α�ࣺ
��Щα����ų⡣һ��Ԫ��ͬʱ����ƥ�����е����ɸ���
CSS��û�й涨��ЩԪ�ؿ�����������״̬��������ν�����뿪��Щ״̬���ű����Ըı�Ԫ���Ƿ���Ӧ�û��¼�����ͬ���豸���û��˶���ָ��ͼ���Ԫ�صı��ַ�������������ͬ��
�û��˲�����Ϊα��ı任���������е�ǰ��ʾ���ĵ������磬һ����ʽ������ָ��һ��:active���ӵ�'font-size'Ҫ��һ��δ��������Ӵ�����������ܻ��ڶ���ѡ�������ʱ���ı���ĸ��λ�ã��û��˿��Ժ�����Ӧ����ʽ����
A:link { color: red } /* unvisited links */ A:visited { color: blue } /* visited links */ A:hover { color: yellow } /* user hovers */ A:active { color: lime } /* active links */
ע�⣬A:hover���������A:link��A:visited����֮��������������A:hover��'color'���ԡ�ͬ���ģ�����A:active������A:hover֮�������ɫ��lime�����û��ȼ�����ָ��AԪ��ʱӦ�á�
һ����϶�̬α������ӣ�
A:focus { background: yellow } A:focus:hover { background: white }
�ڶ���ѡ����ƥ����α��:focus��α��:hover�е�AԪ�ء�
Ҫ�˽⽹���������ֵ���Ϣ����μ���̬��������һ�ڡ�
ע�⣡��CSS1�У�':active'α���':link'��':visited'�ǻ����ų�ġ������Ѿ����������ˡ�һ��Ԫ�ؿ��Լ���':visited'����':active'�������':link'����':active'��������������һ��������һ��IJ�����������
����ĵ����Թ涨��һ��Ԫ�ص���Ȼ��������ζ���ģ��Ϳ��ܻ���Ԫ�ص����ԣ�д��CSS��ѡ������ƥ���������磬��HTML[HTML40]�У���������"lang"���ԡ�METAԪ�ء����ܻ��д�Э��õ�����Ϣ����HTTPͷ������Ͼ����ġ�XMLʹ��һ��XML:LANG���ԡ����ܻ�������ȷ���ĵ����Եķ�����
α��':lang(C)'ƥ��������C��ʾ��Ԫ�ء�����C��һ�����Դ�����������HTML 4.0[HTML40]�Լ�RFC 1766 [RFC1766]�С�����ƥ�䷽ʽ��'|='������һ����
������Щ����Ϊ�Է�������д�ɵ�HTML�ĵ��������ţ�
HTML:lang(fr) { quotes: '� ' ' �' } HTML:lang(de) { quotes: '�' '�' '\2039' '\203A' } :lang(fr) > Q { quotes: '� ' ' �' } :lang(de) > Q { quotes: '�' '�' '\2039' '\203A' }
�ڶ��Թ���ʵ�����Ǹ���QԪ�صĸ�Ԫ�ص����ԣ�������QԪ�ص�'quotes'���ԡ�������Ϊ���ŵ�ѡ��ͨ���ǻ���������ΧԪ�ص����ԣ����������ﱾ���������������Ƭ��“à l'improviste”�����������ı��У����ʹ�����ĵ����š�
:first-lineαԪ�ض�һ������ĵ�һ����ʽ������Ӧ���������ʽ�����磺
P:first-line { text-transform: uppercase }
��������������ζ�š���ÿһ�εĵ�һ�е���ĸ��Ϊ��д����������ѡ����"P:first-line"����ƥ���κ�ʵ�ʵ�HTMLԪ�ء���ƥ������CSSһ�µ��û�����ÿһ�ο�ʼ�����һ��αԪ�ء�
ע�⣬��һ�еij���ȡ���ںܶ����أ���ҳ��Ŀ��ȣ�����ߴ�ȵȡ���ˣ����µ�һ������ͨ��HTML���䣺
<P>This is a somewhat long HTML paragraph that will be broken into several lines. The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.</P>���ܵķ������£�
THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT will be broken into several lines. The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.�û��˿��ܼ��ԡ���д������:first-line���鹹�����������һ�鹹���������ʾ����������μ̳еġ�
<P><P:first-line> This is a somewhat long HTML paragraph that will </P:first-line> be broken into several lines. The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.</P>
���һ��αԪ�ؽض���һ��ʵ�ʵ�Ԫ�أ�����Ҫ��Ч��ͨ������ͨ��һ���鹹����������ﵽ�������йرղ����´���һ���ضϵ�Ԫ�ء���ˣ��������������������м���һ��SPANԪ�أ�
<P><SPAN class="test"> This is a somewhat long HTML paragraph that will be broken into several lines.</SPAN> The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.</P>�û��˿�����Ϊ:first-line�����鹹�������ʱ��ΪSPAN���뿪ʼ�ͽ�����ǣ�
<P><P:first-line><SPAN class="test"> This is a somewhat long HTML paragraph that will </SPAN></P:first-line><SPAN class="test"> be broken into several lines.</SPAN> The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.</P>
:first-lineαԪ��ֻ���ԺͿ���Ԫ�����á�
:first-lineαԪ�غ�����Ԫ�����ƣ�������һЩ�ض������ơ�ֻ���������Կ���Ӧ����:first-lineαԪ�أ�������������ɫ����������������'word-spacing'��'letter-spacing'��'text-decoration'����'vertical-align'��'text-transform'��'line-height'��'text-shadow'�Լ�'clear'��
:first-letterαԪ�ؿ������������״�д���Լ�����д��ĸ�³�������Щ���dz��õ�ӡˢЧ������һ�������ĸ��һ������Ԫ�����ƣ��������'float'������'none'����������һ������Ԫ�����ơ�
��Щ�ǿ���Ӧ����:first-letterαԪ���ϵ����ԣ�������������ɫ����������������'text-decoration'��'vertical-align'������'float'Ϊ'none'ʱ����'text-transform'��'line-height'���߾��������߰��������߿�������'float'��'text-shadow'�Լ�'clear'��
���µ�CSS2����ʹ����ĸ�³���չΪ���У�
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Drop cap initial letter</TITLE> <STYLE type="text/css"> P { font-size: 12pt; line-height: 12pt } P:first-letter { font-size: 200%; font-style: italic; font-weight: bold; float: left } SPAN { text-transform: uppercase } </STYLE> </HEAD> <BODY> <P><SPAN>The first</SPAN> few words of an article in The Economist.</P> </BODY> </HTML>
��һ���ӵĸ�ʽ��Ч������Ϊ��
�鹹�������Ϊ��
<P> <SPAN> <P:first-letter> T </P:first-letter>he first </SPAN> few words of an article in the Economist. </P>
ע�⣬:first-letterαԪ�ر�������ݣ��ȵ�һ���ַ������ڣ���:first-lineαԪ�صĿ�ʼ��Dz�����αԪ��������Ԫ�صĿ�ʼ���֮��
Ϊ�˵õ��������ĸ�³���ʽ���û�Ҫ������ߴ���н��ƣ����������ߡ�ͬ���ģ���ʽ��ʱ��ҲҪ��������������
�����ţ�������ΪUnicode [UNICODE]��"open" (Ps)�� "close" (Pe)��"other" (Po)���������е��ַ������������������ĸǰ��ҲҪ�������ڣ�
:first-letterαԪ��ֻƥ������Ԫ�ص�һ���֡�
ijЩ���Զ�����δ����ض�����ĸ��Ͽ������ر�Ĺ������磬�ڵ����У������ĸ���"ij"������һ�����ʵĿ�ͷ����������ĸ������Ϊ����:first-letterαԪ��֮�ڡ�
�����������ʾ�˻����ص���αԪ���������á�ÿһ��PԪ�صĵ�һ����ĸ����ɫ�ģ�����ߴ�Ϊ'24pt'����һ����ʽ�е�������������ɫ�ģ���������������ֵ���ɫ��'red'��
P { color: red; font-size: 12pt } P:first-letter { color: green; font-size: 200% } P:first-line { color: blue } <P>Some text that ends up on two lines</P>
�ٶ���"ends"ǰ��һ�����У���ô��һƬ�ε��鹹�������Ϊ��
<P> <P:first-line> <P:first-letter> S </P:first-letter>ome text that </P:first-line> ends up on two lines </P>
ע�⣬:first-letterԪ����:first-lineԪ��֮�ڡ�������:first-line�ϵ����Խ�Ϊ:first-letter�̳У��������:first-letter��������ͬ�����ԣ���̳е����Ա���Խ��
':before'��':after'αԪ��������һ��Ԫ�ص�����֮ǰ��֮��������ɵ����ݡ����ǵ������μ����ɵ�����һ�ڡ�
H1:before {content: counter(chapno, upper-roman) ". "}
��:first-letter��:first-lineαԪ����:before��:after����ʱ������Ӧ���ڰ���������ı��ĵ�һ����ĸ���һ�С�
P.special:before {content: "Special! "} P.special:first-letter {color: #ffd800}
����"Special!"�е�"S"����ɫ����Ϊ��ɫ��