Ŀ¼
CSS������ģ���������ĵ�����Ԫ�ز����ij����ΰ��������Ǹ������ӻ���ʽģ�������֡�ҳ�����һ������Ŀ�����������ҳ�����һ�¡�
ÿһ������һ�������������ı���ͼ�εȵȣ��Լ���ѡ�Ļ�������Χ���߰����߿��Լ��߾�����ÿ������ijߴ����������۵����Թ涨����������ͼչʾ����Щ���������������Լ��������ñ߾࣬�߿�ͱ߰Ȳ��ֵ����
�߾࣬�߿�ͱ߰���ϸ��Ϊ���Ҷ����IJ��֣����磬��ͼ���У�"LM"������߾࣬"RP"�����ұ߰ף�"TB"�������߿ȵȣ���
�ĸ��������ݣ��߰ף��߿�ͱ߾ࣩ��ÿһ���߽��Ϊһ�����ߡ�����ˣ�ÿһ�����������ߣ�
ÿһ���߿���ϸ��Ϊ���Ҷ������ࡣ
����������ߴ硪�����ݿ��������ݸ߶�����ȡ�������ɸ����أ��������Ԫ���Ƿ�������'width'��'height'���ԣ����Ƿ�����ı����������Ƿ���һ������ȵȡ���Ŀ��Ⱥ߶����ۣ��μ����ӻ���ʽģ�͵�ϸ��һ�¡�
��Ŀ��������ұ߾ࡢ���ұ߿����ұ߰����ݵĿ�����ӵõ����߶��ɶ��ױ߾ࡢ���ױ߿��ױ߰����ݵĸ߶���ӵõ���
��IJ�ͬ����ı�����ʽ�����������ģ�
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Examples of margins, padding, and borders</TITLE> <STYLE type="text/css"> UL { background: green; margin: 12px 12px 12px 12px; padding: 3px 3px 3px 3px; /* No borders set */ } LI { color: black; /* text color is black */ background: gray; /* Content, padding will be gray */ margin: 12px 12px 12px 12px; padding: 12px 0px 12px 12px; /* Note 0px padding right */ list-style: none /* no glyphs before a list item */ /* No borders set */ } LI.withborder { border-style: dashed; border-width: medium; /* sets border width on all sides */ border-color: black; } </STYLE> </HEAD> <BODY> <UL> <LI>First element of list <LI class="withborder">Second element of list is longer to illustrate wrapping. </UL> </BODY> </HTML>
�����һ���ĵ��������У���������ϵ�У�һ��ULԪ�أ���������LI��Ԫ�ء�
����ĵ�һ��ͼ��ʾ�˱����ij��ֽ�����ڶ���ͼ��ʾ��ULԪ�ؼ�����Ԫ��LIԪ�صı߾ࡢ�߰ͱ߿�֮��Ĺ�ϵ��
ע�⣺
�߾�����������һ������߾����Ŀ��ȡ�'margin'��д�������������ıߵı߾࣬�������ı߾�����ֻ�������Ǵ�������һ�ߵı߾ࡣ
���ڶ������������<margin-width>ֵ�����ͣ�����������ֵ֮һ��
�߾����������и�ֵ��������������ʵ����ص����ơ�
ֵ�� | <margin-width> | inherit |
��ʼֵ�� | 0 |
�����ڣ� | ����Ԫ�� |
�ɷ�̳У� | �� |
�ٷֱȣ� | ����ڰ�����Ŀ��� |
ý�飺 | ͼ�� |
��Щ�������ÿ�Ķ����ң��ף���߾ࡣ
H1 { margin-top: 2em }
ֵ�� | <margin-width>{1,4} | inherit |
��ʼֵ�� | ������д����δ���� |
�����ڣ� | ����Ԫ�� |
�ɷ�̳У� | �� |
�ٷֱȣ� | ����ڰ�����Ŀ��� |
ý�飺 | ͼ�� |
'margin'������ʽ����ͬһ������'margin-top'��'margin-right'��'margin-bottom'�Լ�'margin-left'����д���ԡ�
�������һ��ֵ������Ӧ���������ıߡ����������ֵ�����ױ߾�����Ϊ��һ��ֵ�����ұ߾�����Ϊ�ڶ���ֵ�����������ֵ�����߾�����Ϊ��һ��ֵ�����ұ߾�����Ϊ�ڶ���ֵ���ױ߾�����Ϊ������ֵ��������ĸ�ֵ�����Ƿֱ����ö����ң��ף���߾ࡣ
BODY { margin: 2em } /* ���еı߾����Ϊ2em */ BODY { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */ BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
���������һ�������ͬ�����µ����ӣ�
BODY { margin-top: 1em; margin-right: 2em; margin-bottom: 3em; margin-left: 2em; /* ����Աߣ��ұߣ��������� */ }
�ڱ��淶�У������߾��غ���ζ������������������Ҳ����Ƕ�ף������ڵı߾ࣨ���û�б߰�߿������غ���һ����γ�һ����һ�ı߾ࡣ
CSS2�У�ˮƽ�߾���Զ�����غϡ�
��ֱ�߾��������ض��Ŀ�֮���غϣ�
��μ��߾࣬�߰ͱ߿��ʾ��һ�£����˽�߾��غϵ����ӡ�
�߰����Թ涨��һ������߰����Ŀ��ȡ�'padding'��д�������������ıߵı߰ף��������ı߰�����ֻ�������Ǵ�������һ�ߵı߰ס�
�������������������<padding-width>ֵ���ͣ�����ȡ����ֵ��
�ͱ߾����Բ�ͬ���߰�ֵ�������Ǹ������ͱ߾��������ƣ��߰İٷֱ�ֵҲ�������ɵĿ�İ�����Ŀ��ȡ�
ֵ�� | <padding-width> | inherit |
��ʼֵ�� | 0 |
�����ڣ� | ����Ԫ�� |
�ɷ�̳У� | �� |
�ٷֱȣ� | ����ڰ�����Ŀ��� |
ý�飺 | ͼ�� |
��Щ��������һ����Ķ����ң��ף���ı߰ס�
BLOCKQUOTE { padding-top: 0.3em }
ֵ�� | <padding-width>{1,4} | inherit |
��ʼֵ�� | ������д����δ���� |
�����ڣ� | ����Ԫ�� |
�ɷ�̳У� | �� |
�ٷֱȣ� | ����ڰ�����Ŀ��� |
ý�飺 | ͼ�� |
'padding'����������ʽ���е�ͬһ������'padding-top'��'padding-right'��'padding-bottom'��'padding-left'����д���ԡ�
���ֻ��һ��ֵ���������������ıߡ����������ֵ�����ױ߰�����Ϊ��һ��ֵ�����ұ߾�����Ϊ�ڶ���ֵ�����������ֵ�����߰�����Ϊ��һ��ֵ�����ұ߰�����Ϊ�ڶ���ֵ���ױ߰�����Ϊ������ֵ��������ĸ�ֵ�����Ƿֱ����ö����ң��ף���߰ס�
�߰�����ı�����ɫ��ͼ����'background'����ȷ����
H1 { background: white; padding: 1em 2em; }
������ָ����ֱ�߰ף�'padding-top'��'padding-bottom'��Ϊ'1em'��ˮƽ�߰ף�'padding-right'��'padding-left'��Ϊ'2em'��'em'��λ�������Ԫ�ص�����ߴ�ĵ�λ��'1em'����ʹ�õ�����ijߴ硣
�߿��������ÿ���߿����Ŀ��ȣ���ɫ����ʽ����Щ����ʹ�������е�Ԫ�ء�
ע�⡣����HTML���ԣ��û��˶���ijЩԪ�أ��簴ť���˵��ȣ��߿����Ⱦ��������һ�㡱Ԫ�ؿ���������ͬ��
�߿���������߿����Ŀ��ȡ������ж������������<border-width>ֵ���ͣ�����ȡ����ֵ��
ǰ����ֵ�Ľ���ȡ�����û��ˡ�����������ѭ���¹�ϵ��
'thin' <='medium' <= 'thick'.
���⣬��һ���ĵ��У���Щ���ȱ��뱣��һ�¡�
ֵ�� | <border-width> | inherit |
��ʼֵ�� | medium |
�����ڣ� | ����Ԫ�� |
�ɷ�̳У� | �� |
�ٷֱȣ� | N/A |
ý�飺 | ͼ�� |
��Щ�������ÿ�Ķ������ұ߿�Ŀ��ȡ�
ֵ�� | <border-width>{1,4} | inherit |
��ʼֵ�� | ���������� |
�����ڣ� | ����Ԫ�� |
�ɷ�̳У� | �� |
�ٷֱȣ� | N/A |
ý�飺 | ͼ�� |
������������ʽ����ͬһ������'border-top-width'��'border-right-width'��'border-bottom-width'��'border-left-width'����д���ԡ�
���ֻ��һ��ֵ���������������ıߡ����������ֵ�����ױ߿���õ�һ��ֵ�����ұ߿���õڶ���ֵ�����������ֵ�����߿���õ�һ��ֵ�����ұ߿���õڶ���ֵ�����ױ߿���õ�����ֵ��������ĸ�ֵ�����Ƿֱ������ڶ����ң��ף����ıߡ�
�����У�ע���б���˽���Ķ����ң��ף���߿�Ŀ��ȣ�
H1 { border-width: thin } /* thin thin thin thin */ H1 { border-width: thin thick } /* thin thick thin thick */ H1 { border-width: thin thick medium } /* thin thick medium thick */
�߿���ɫ����ָ���˿�ı߿����ɫ��
ֵ�� | <color> | inherit |
��ʼֵ�� | 'color'���Ե�ֵ |
�����ڣ� | ����Ԫ�� |
�ɷ�̳У� | �� |
�ٷֱȣ� | N/A |
ý�飺 | ͼ�� |
ֵ�� | <color>{1,4} | transparent | inherit |
��ʼֵ�� | ���������� |
�����ڣ� | ����Ԫ�� |
�ɷ�̳У� | �� |
�ٷֱȣ� | N/A |
ý�飺 | ͼ�� |
'border-color'���������ĸ��߿����ɫ������ֵ�ĺ������£�
'border-color'���Կ�����һ�����ĸ�ֵ����Щֵ���ò�ͬ�ıߣ�������'border-width'��ͬ��
���û���ñ߿�����ָ��һ��Ԫ�صı߿���ɫ���û��˱����ø�Ԫ�ص�'color'��������Ϊ�߿���ɫ������ֵ��
�����У��߿��Ǻ�ɫʵ�ߡ�
P { color: black; background: white; border: solid; }
�߿���ʽָ����ı߿�����ͣ�ʵ�ߣ�˫�ߣ����ߵȣ��������ж������������<border-style>ֵ���ͣ�ȡֵΪ��
���еı߿��ڿ�ı���֮�ϡ�'groove'��'ridge'��'inset'��'outset'���͵ı߿����ɫȡ����Ԫ�ص�'color'���ԡ�
��CSSһ�µ��û������ܽ�'dotted'��'dashed'��'double'��'groove'��'ridge'��'inset'��'outset'Ϊ'solid'��
ֵ�� | <border-style> | inherit |
��ʼֵ�� | none |
�����ڣ� | ����Ԫ�� |
�ɷ�̳У� | �� |
�ٷֱȣ� | N/A |
ý�飺 | ͼ�� |
ֵ�� | <border-style>{1,4} | inherit |
��ʼֵ�� | �μ����������� |
�����ڣ� | ����Ԫ�� |
�ɷ�̳У� | �� |
�ٷֱȣ� | N/A |
ý�飺 | ͼ�� |
'border-style'���������ıߵ���ʽ����������һ�����ĸ�ֵ���ֱ����ò�ͬ�ıߣ�����ͬ'border-width'��
#xy34 { border-style: solid dotted }
�����У�ˮƽ�߿���'solid'����ֱ�߿���'dotted'��
���ڱ߿���ʽ�ij�ʼֵ��'none'����ˣ����������˱߿���ʽ��û���κα߿�ɼ���
ֵ�� | [ <'border-top-width'> || <'border-style'> || <color> ] | inherit |
��ʼֵ�� | ������������ |
�����ڣ� | ����Ԫ�� |
�ɷ�̳У� | �� |
�ٷֱȣ� | N/A |
ý�飺 | ͼ�� |
����һ�����ÿ�Ķ������ұ߿�Ŀ��ȣ���ʽ����ɫ����д���ԡ�
H1 { border-bottom: thick solid red }
������һ��������H1Ԫ�����߿�Ŀ��ȣ���ʽ����ɫ��ʡ�Ե���ֵ������Ϊ���Ǹ��Ե���ʼֵ������������һ����û��ָ���߿���ɫ���߿����ɫ����'color'����ָ����
H1 { border-bottom: thick solid }
ֵ�� | [ <'border-width'> || <'border-style'> || <color> ] | inherit |
��ʼֵ�� | ������������ |
�����ڣ� | ����Ԫ�� |
�ɷ�̳У� | �� |
�ٷֱȣ� | N/A |
ý�飺 | ͼ�� |
'border'���������ÿ���ĸ��߿�Ϊ��ͬ�Ŀ��ȣ���ɫ����ʽ����д���ԡ�����д����'margin'��'padding'��ͬ��'border'���Բ����Զ��ı����ò�ͬ��ֵ��Ҫ�ﵽ��һĿ�ģ�����ʹ������һ�������߿����ԡ�
���磬����ĵ�һ�������ͬ�ڸ��������ĸ�����
P { border: solid red } P { border-top: solid red; border-right: solid red; border-bottom: solid red; border-left: solid red }
������ij�̶ֳ��ϣ����Ծ��и��ǵ����ԣ����ָ�������˳�����Ҫ��
��������һ�����ӣ�
BLOCKQUOTE { border-color: red; border-left: double; color: black }
�������У���߿����ɫ�Ǻ�ɫ���������߿����ɫ�Ǻ�ɫ��������Ϊ'border-left'�����˿��ȣ���ʽ����ɫ������'border-left'���Բ�û�и�����ɫֵ��������'color'�����л��ֵ������'color'����������'border-left'֮����һ��ʵ�ء�