�����Ű�CSS�ĵ�

�� �¾������ߣ�tagzine ����ʱ�䣺2006-09-27 | ���壺�� �� С��

[����]������ѧϰweb��׼������ѭ��׼���ƺ�����webҳ�档һֱ��д��ʲô������һ���Լ����ĵ����ᡣд��ƪ���£���Ҫ�����������Ű����ƣ�Ӣ���Ű���Ϊ�����������Բ��漰���Ƚ��������趨���塢��ɫ����С�������հ׵ȱ�...

������ѧϰweb��׼������ѭ��׼���ƺ�����webҳ�档һֱ��д��ʲô������һ���Լ����ĵ����ᡣд��ƪ���£���Ҫ�����������Ű����ƣ�Ӣ���Ű���Ϊ�����������Բ��漰��

�Ƚ��������趨���塢��ɫ����С�������հ׵ȱȽϼ򵥵�Ӧ�ã������ٽ����±��������³�������������������һЩ���õ�webҳ�������Ű棬���������ֵĽضϡ��̶����ȴ������У�word-wrap��word-break���ȵȡ���Ϊֻ��дһЩӦ�÷������ĵã�������Ҫ������CSS���Խ��ܣ����ο�CSS�ֲᡣ

1�������趨�������塢��ɫ����С ���� ʹ��font

font-style�趨б�壬����font-style: italic;
font-weight�趨���ִ�ϸ������font-weight: bold;
font-size�趨���ִ�С������font-size: 12px;������9pt����ͬ��λ��ʾ�����ο�CSS�ֲᣩ
line-height�趨�о࣬����line-height: 150%;
color�趨������ɫ��ע�ⲻ��font-color��������color: red;
font-family�趨���壬����font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, ����,sans-serif;������ͨ�õ�д����

���϶�����д��һ��font���������color������Ҫ����д����
font: italic bold 12px/150% "Lucida Grande", Verdana, Lucida, Arial, Helvetica, ����,sans-serif;

2�����ο��ƶ����Ű� ���� ʹ��margin��text-align

���Ķ���ʹ��<p>��ǩ�����ң��൱������������ǰ�κ��Ŀհף���������margin�����磺

���ֵĶ��뷽ʽ��text-align�����磺

���뷽ʽ����left��right��justify�����˶��룩

PS.̸��margin����ϰ������дCSS��ʱ��Ϊ���еı�ǩ����margin: 0; ��Ϊʱ����������Ĭ�ϵ�marginֵ����ҳ���Ű����⣬���Լ��Ҳ���ԭ�����ر�ע������ul/ol/p/dt/dd�ȱ�ǩ��

3���������� ���� ʹ��writing-mode

writing-mode����������ֵlr-tb��tb-rl��ǰ����Ĭ�ϵ���-�ҡ���-�£���������-�¡���-����
���磺

����������Ƭ�Σ� p{ writing-mode: tb-rl; }

���Խ���direction�Ű档

4����Ŀ���ŵ����� ���� ʹ��list-style

��CSS����Ŀ������disc��ʵ��Բ�㣩��circle������ԲȦ����square��ʵ�ķ��飩��decimal�����������֣���lower-roman��Сд�������֣���upper-roman����д�������֣���lower-alpha��СдӢ����ĸ����upper-alpha����дӢ����ĸ����none���ޣ��������趨һ���б���ul��ol������Ŀ����Ϊ���飬�磺

����������Ƭ�Σ� li{ list-style: square; }

����list-style����һЩֵ���������Բ���һЩСͼƬ��Ϊ��Ŀ���ţ���list-style��ֱ��дurl(��ͼƬ��ַ��)�Ϳ����ˡ�ע������һ����Ŀ�б������ⲹ����margin-left����Ϊ����ʱ����list-style-position: outside��Ĭ����outside������Ŀ���Ų�����ʾ����ϧ������������Ŀ�����ƺ��������趨��С��Բ���ͷ���ʼ������ô�㡣���Ҳ����趨��ֱ�����ϵĶ��롣

5�������³� ���� ʹ��:first-letter

α����:first-letter����font-size��float�������������³�Ч����
���磺

����������Ƭ�Σ� p:first-letter{ padding: 6px; font-size: 32pt; float: left; }

6���������� ���� ʹ��text-indent

text-indent����ʹ����������������һ����λ���������Ķ���һ��ÿ��ǰ���������֡�������ôд��
p{
text-indent: 2em; /*em�����Ե�λ��2em������һ���ִ�С������*/
}
����font-size��12px�Ļ�����ôtext-indent: 2em������24px��

7�����ں���ע�� ���� ʹ��ruby��ǩ��ruby-align����

����˵<ruby>ע��<rt style="font-size: 11px;">zhu yin</rt></ruby>����������ruby-align���ö��뷽ʽ��������CSS�ֲ����濴���ģ������������в���ruby-align�

8���̶����Ⱥ��ֽض� ���� ʹ��text-overflow

�ú�̨���Կ��ԶԴ����ݿ������ֶ��������ضϴ���������˵��12�����֣�֮����ʡ�Ժţ���������ʱ����Ҫhtml��ǩ�Ĺ��˵ȣ�����CSS��������û���������⡣�������б�Ӧ��������ʽ��

����������Ƭ�Σ� li{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

����ֻ�ܴ���������һ���ϵĽضϣ����ܴ������С�

9���̶����Ⱥ��֣��ʣ����� ���� ʹ��word-break

�ٸ����ӣ�����˵Ҫ��һ���̶���������������ʾ�ܶ������������Կո��ָ�����Ϊ�˱��������м��Ͽ�����һ��������������һ�����۶ϵ���һ��ȥ�ˣ���������ʹ��word-break�����磺

����������Ƭ�Σ� <div style="width:210px;height: 200px;background: #ccc;word-break:keep-all"> �Ͼ��Ϻ� �Ϻ��� �� �Ϻ��Ϻ� �Ͼ� �Ϻ��Ϻ��Ϻ� �Ͼ��Ϻ� �Ϻ� �Ͼ��Ϻ� �Ϻ� �Ͼ� �Ϻ� �Ͼ� �Ϻ� �Ͼ� �Ϻ� �Ͼ� �Ϻ� �Ͼ� �Ϻ� �Ͼ��Ϻ� �Ϻ� �Ͼ��Ϻ� �Ϻ� </div>

ֵ��ע�����������Ŀո�������&nbsp;���棨����Ҫ��һ�����ո񣩡�

• ת����ע����Դ��ITѧϰ�� ��ַ��http://www.t086.com/ �����������Ƽ�������
• �ر������� ��վ�������ر�������ֹת�ص�ר�������������¿�������ת�أ���������ע��������ԭʼ���ߡ����°�Ȩ������ԭʼ�������С����ڱ���վת�����µĸ��˺���վ�����DZ�ʾ������л�⡣������վת�ص������а�Ȩ��������ϵ���ǣ����ǻᾡ�����Ը�����

• ��һƪ����ҳ������Input�ĸ߼����Ƽ��÷�
• ��һƪ��2006�����綥��ɱ�������������й�ɱ��������һ�ϰ�
• �鿴2006��09�µ����¹鵵