Ŀ¼
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'֮����һ��ʵ�ء�