13 ҳ�����

    Ŀ¼

13.1 ҳ��ý����

    ҳ��ý�飨�磬ֽ�ţ�͸����Ƭ����ʾ�ڼ������Ļ�ϵ�ҳ��ȣ�������ý����ͬ����Ҫ���ĵ������ݱ��ָ�Ϊһ������������ҳ��Ϊ�˴�����ҳ��CSS2��չ�����ӻ���ʽģ����

  1. ҳ����չ��������ģ������������ָ��ҳ��Ĵ�С�����ı߾�ȵȡ�
  2. ҳ��ģ����չ�����ӻ���ʽģ�����Լ������ҳ�Ŀ��ǡ�

    CSS2��ҳ��ģ���涨һ���ĵ������һ�����������򡪡�ҳ�������ڸ�ʽ������������Ⱥ͸߶��ǹ̶��ġ�ҳ�򲢲�һ����Ӧ���ĵ�����Ҫ��Ⱦ�����ϵ�ʵ�ʵ�ҳ����ֽ�ţ�͸����Ƭ����Ļ�ȣ���CSSҳ��ģ��ָ����ҳ���ڵĸ�ʽ����������Ҫ�û��˽�ҳ��ת��Ϊҳ�档���ܵ�ת��������

    ����CSS2û��ָ���û���Ӧ����ν�ҳ��ת��Ϊҳ�棬������ȷʵ�����ض��Ļ��Ƹ����û���Ŀ��ҳ����ߴ�ͷ�����

13.2 ҳ����@page����

    ҳ����һ�������εķ�Χ����������������

    ע�⡣CSS2�У��߿��������߰�������������ҳ�棻�ڽ�������ʵ�֡�

    ������һ��@page������ָ��ҳ��ijߴ磬���򣬱߾����Ϣ��һ��@page��������ؼ���"@page"��һ��ҳ��ѡ���ӣ�����ѡ�ظ���һ��ҳ��α�࣬�м�û�пո񣩣���һ�������飨����˵����ҳ�������У���

    ҳ��ѡ����ָ�������������õ�ҳ�档CSS2�У�ҳ��ѡ���ӿ���ָ����һҳ��������ҳ��������ҳ����һ���ض����ֵ�ҳ��

    ҳ��ijߴ���'size'���������á�ҳ������ijߴ���ҳ��ijߴ��ȥ�߾�����ijߴ硣

���ӣ�

    ���磬�����@page����ҳ��ijߴ�����Ϊ8.5 x 11Ӣ�磬����ҳ��ߺ�ҳ������֮���ÿһ�ߴ�����'2cm'�ı߾ࣺ

@page { size 8.5in 11in; margin: 2cm }
@page�����е�'marks'����ָ���˸�ҳ���ļ��к�ʮ���߱�ǡ�

13.2.1 ҳ�߾�

    �߾�������'margin-top'��'margin-right'��'margin-bottom'��'margin-left'��'margin'��������ҳ����������ͼ��ʾ��ҳ�棬ҳ���ҳ�߾�֮��Ĺ�ϵ��

    Illustration of sheet, page
box, margin, and page area.   [D]

    ҳ�������Ķ����ױ߾�ļ���ֵΪ'0'��

    ҳ��������û������ĸ����˲�����ʹ��'em'��'ex'��Ϊ��λ���߾����Եİٷֱ�ֵ�����ҳ���ijߴ磻�������ұ߾࣬���ǻ���ҳ��Ŀ��ȣ����ڶ��ױ߾࣬���ǻ���ҳ��ĸ߶ȡ���������Ӧ��CSS2����������ĵ�λ������ʹ�õġ�

    ���ڸ��ı߾�ֵ��������ҳ��Ļ�����Ԫ�صģ��������Զ�λ��Ե�ʣ����ݿ�����������ҳ��֮�⣬�������������ݻᱻ�����С��������������û��ˣ���ӡ�������ߣ�����ɲ�ֽ������ɡ�

13.2.2 ҳ��ߴ���'size'����

'size'
ֵ��  <length>{1,2} | auto | portrait | landscape | inherit
��ʼֵ��  auto
�����ڣ�  ҳ������
�ɷ�̳У�  N/A
�ٷֱȣ�  N/A
ý�飺  ͼ����ҳ��

    ������ָ����һ��ҳ��ijߴ�ͷ���

    ҳ��ijߴ�����ǡ����Գߴ硱���̶��ߴ磩����Գߴ硱���ɷ����ģ�������Ӧ���õ�ҳ��ߴ磩�����ҳ�������û��˷���һ���ĵ����������Ŀ��ߴ硣

    'size'����ȡ����ֵ֮һ������һ����Գߴ��ҳ��

auto
ҳ�򽫸���Ŀ��ҳ��ijߴ�ͷ������á�
landscape
��ԽĿ��ķ���ҳ���Ŀ��ijߴ�һ�����ϳ��ı�Ϊˮƽ�ߡ�
portrait
��ԽĿ��ķ���ҳ���Ŀ��ijߴ�һ�����϶̵ı�Ϊˮƽ�ߡ�

���ӣ�

    �����У�ҳ�����߽�����Ŀ��ҳ��ıߡ�'margin'���Եİٷֱ�ֵ�����Ŀ��ߴ磬������Ŀ��ҳ��ijߴ�Ϊ21.0cm x 29.7cm����A4���棩���߾�Ϊ2.10cm��2.97cm��

@page {
  size: auto;   /* auto is the initial value */
  margin: 10%;
}

    'size'���Եij���ֵ����һ������ҳ�����ֻ��һ������ֵ��ָ������ͬʱ�����˸�ҳ����Ⱥ͸߶ȣ������������һ�������Σ�������ҳ������ʼ��������������Ϊ'size'����ָ���ٷֱ�ֵ��

���ӣ�

    ���磺

@page {
  size: 8.5in 11in;  /* width height */
}

    ������ҳ��Ŀ�������Ϊ8.5in���߶�����Ϊ11in�������е�ҳ��Ҫ��Ŀ��ҳ��ijߴ�Ϊ"8.5x11"�����

    �û��˿��������û�����ҳ��ҳ���ת�������磬��תһ������ӡ�ľ���ҳ�򣩡�

ҳ���Ŀ��ҳ�治ƥ��ʱ����Ⱦ

    ���һ��ҳ��ƥ��Ŀ��ҳ��ijߴ磬�û��˿���ѡ��

    ��������֮ǰ���û���Ӧ��ѯ���û���

ҳ����ҳ��Ķ�λ

    ���ҳ��С��Ŀ��ߴ磬�û��˿������ɵ���ҳ���Ϸ���ҳ�򡣲������Ƽ��ķ����ǽ�ҳ�������ҳ������룬��Ϊ�����������˫���ҳ�棬Ҳ�����˴���ʧ��Щ��ӡ�ڿ���ҳ��ߵ���Ϣ��

13.2.3 �ü������'marks'����

'marks'
ֵ��  [ crop || cross ] | none | inherit
��ʼֵ��  none
�����ڣ�  ҳ������
�ɷ�̳У�  N/A
�ٷֱȣ�  N/A
ý�飺  ͼ����ҳ��

    �ڸ�������ӡ�У�������ҳ��֮������ǡ�������ָ����ʮ���߻�ü���ǻ������Ƿ�Ӧ����ҳ���ߵ�����õ���Ⱦ��

    �ü��������ҳ��Ӧ�������ﱻ�ü���ʮ���߱����Ҳ��Ϊע���ǣ������������ҳ�档

    ���ֻ�ھ���ҳ���пɼ����μ�'size'���ԣ������ҳ���У�ҳ�����Ŀ��ҳ�����ǽ��ڿɴ�ӡ������֮�⡣

    ʮ���߱�ǵijߴ磬��ʽ��λ��ȡ�����û��ˡ�

13.2.4 ��ҳ����ҳ����һҳ

    ��ӡ˫���ĵ�ʱ����ҳ����ҳ��ҳ��Ӧ�ò�ͬ��ͨ��������ҳ�������ж��������CSSα����Դﵽ��һҪ��

    ���е�ҳ���Զ��ر��û��˹�Ϊ:left��:rightα�ࡣ

���ӣ�

@page :left {
  margin-left: 4cm;
  margin-right: 3cm;
}

@page :right {
  margin-left: 3cm;
  margin-right: 4cm;
}

    ���������ҳ����ҳ�����˲�ͬ����������ô��ʹ�û��˲�����ҳ��ת��Ϊ��ҳ����ҳ�����磬һ����ӡ������ֻ��ӡ��ҳ�����û���ҲҪ��ѭ��Щ������

    ���߿���ͨ��:firstα����Ϊ�ĵ��ĵ�һҳָ����ʽ��

���ӣ�

    

@page { margin: 2cm } /* All margins set to 2cm */

@page :first {
  margin-top: 10cm    /* Top margin on first page 10cm */
}

    �ĵ��ĵ�һҳ��:left��:rightȡ���ڸ��ĵ�����Ҫ����д���򣬳����˱��ĵ������۷�Χ��������Ҫǿ�ȵ�һҳΪ:left��:right�����߿����ڵ�һ�����ɵĿ��磬��HTML�У�����BODYԪ��ָ�������ã�֮ǰ����һ����ҳ��

    ��:left����:right��@page������ָ�������Խ���Խû��ָ��α���@page������ָ�������ԡ���:first @page������ָ�������Գ�Խ��Щ��:left����:right��@page������ָ�������ԡ�

    ע�⡣��:left��:rightα����������������Ӱ���ĵ��Ӵ�ӡ���г�����˫��Ļ��ǵ���ģ������������۳����˱��淶�ķ�Χ����

    ע�⡣�Ժ�汾��CSS���ܰ��������ҳ��α�ࡣ

13.2.5 ҳ���������

    ��ҳ��ģ���и�ʽ������ʱ��ijЩ���ݿ������ճ�����ҳ��֮�⡣���磬һ��Ԫ�ص�'white-space'��������Ϊ'pre'�������ܲ���һ����ҳ����Ŀ�ͬ���ģ�����������Զ�λ�ģ��������Ҳ���ܳ����ڡ������ʡ���λ�á����磬ͼ�ο��ܷ�����ҳ����ϣ���������ҳ��֮��100,000Ӣ��ĵط���

    ��ЩԪ�����ȷ�еظ�ʽ���Ĺ淶�����˱��ĵ��ķ�Χ�������������Ƽ����ߺ��û����ڴ���ҳ���������ʱ����ѭ���µ�һ�����

13.3 ��ҳ

    ���¸���������CSS2�е�ҳ���ʽ������������Թ涨���û�����������Ի�Ӧ�÷�ҳ������һҳ����ҳ����ҳ���Ͻ�����̵����ݡ�ÿһ����ҳ��ֹ�˵�ǰҳ���IJ��֣������ĵ�����ʣ��IJ�����һ���µ�ҳ���н��в��֡�

13.3.1 ��Ԫ��ǰ/���ҳ��'page-break-before'��'page-break-after'��'page-break-inside'

'page-break-before'
ֵ��  auto | always | avoid | left | right | inherit
��ʼֵ��  auto
�����ڣ�  ����Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  ͼ����ҳ��
'page-break-after'
ֵ��  auto | always | avoid | left | right | inherit
��ʼֵ��  auto
�����ڣ�  ����Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  ͼ����ҳ��
'page-break-inside'
ֵ��  avoid | auto | inherit
��ʼֵ��  auto
�����ڣ�  ����Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  ͼ����ҳ��

    ��Щ����ȡֵ�ĺ������£�

auto
��ǿ��Ҳ����ֹ�����ɿ�֮ǰ��֮��֮�䣩��ҳ��
always
����ǿ�������ɿ�֮ǰ��֮�󣩷�ҳ��
avoid
���������ɿ�֮ǰ��֮��֮�䣩��ҳ��
left
ǿ�������ɿ�֮ǰ��֮�󣩷�һ��������ҳ��ʹ��һҳ��Ϊһ����ҳ��
right
ǿ�������ɿ�֮ǰ��֮�󣩷�һ��������ҳ��ʹ��һҳ��Ϊһ����ҳ��

    һ�����ܵķ�ҳλ��ͨ���ܵ�����Ԫ�ص�'page-break-inside'���ԣ���ǰ��Ԫ�ص�'page-break-after'���ԣ�������Ԫ�ص�'page-break-before'���Ե�Ӱ�졣�����Щ����ֵ��Ϊ'auto'����'always'��'left'��'right'��������'avoid'���μ������ķ�ҳһ�ڣ����˽���Щ�������ǿ�Ⱥ����Ʒ�ҳ��ȷ�еĹ���

13.3.2 ʹ��������ҳ��'page'

'page'
ֵ��  <identifier> | auto
��ʼֵ��  auto
�����ڣ�  ����Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  ͼ����ҳ��

    'page'���Կ�������ָ��һ��Ԫ��Ӧ����ʾ�����ϵ��ض���ҳ�����͡�

���ӣ�

    ���������еı�����ʾ�ں�ŵ���ҳ�ϣ���ҳ��Ϊ"rotated"����

@page rotated {size: landscape}
TABLE {page: rotated; page-break-before: right}

    'page'���Թ���������£����һ���������������ݵ�'page'���Բ�ͬ�ڰ����������ݵ�ǰ�̿����������֮�����һ��������ҳ����ҳ��Ŀ���Ⱦ��ij�������͵�ҳ���С��μ���ǿ�Ƶķ�ҳ����

���ӣ�

    �����У����������ں��ŵ�ҳ������Ⱦ��������ԵĻ�����ͬһҳ�ϣ�������DIV��ʹ���˸�ҳ�棬ҳ������"narrow"��������ʹ�ã�

@page narrow {size: 9cm 18cm}
@page rotated {size: landscape}
DIV {page: narrow}
TABLE {page: rotated}
�ĵ�Ϊ��
<DIV>
<TABLE>...</TABLE>
<TABLE>...</TABLE>
</DIV>

13.3.3 Ԫ���ڵķָ���'orphans'��'widows'

'orphans'
ֵ��  <integer> | inherit
��ʼֵ��  2
�����ڣ�  ����Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  ͼ����ҳ��
'widows'
ֵ��  <integer> | inherit
��ʼֵ��  2
�����ڣ�  ����Ԫ��
�ɷ�̳У�  ��
�ٷֱȣ�  N/A
ý�飺  ͼ����ҳ��

    'orphans'���Թ涨��һ�������б���������һ��ҳ��ײ�����������С��Ŀ��'widows'���Թ涨��һ�������б���������һ��ҳ�涥������������С��Ŀ�����ʹ�����ǵ����Ӽ���

    �����ʽ������Ϣ����μ��߿�һ�ڡ�

13.3.4 �����ķ�ҳ

    ���������У���ҳ���Գ�����������Щ�ط���

  1. ���Ĵ�ֱ�߾�֮�䡣��������﷢����ҳ����ô��ص�'margin-top'��'margin-bottom'�ļ���ֵ������Ϊ'0'��
  2. ��һ������е��߿�֮�䡣

    ��Щ��ҳҪ�������¹���

    ������������޷��ṩ�㹻�ķ�ҳ������ֹ�������ҳ��򣬹���B�͹���D����������Ѱ�Ҷ���ķ�ҳ�㡣

    ����������ҵ��㹻�ķ�ҳ�㣬����A�͹���C�������ԣ��Խ�һ���ҳ�����ķ�ҳ�㡣

    ��ҳ�����Է��������Զ�λ�Ŀ��С�

13.3.5 ǿ�Ƶķ�ҳ

    ��ҳ����������(1)��������ڸñ߾��ϵ����е�Ԫ�����ɵĿ��'page-break-after'��'page-break-before'�����У�������һ������Ϊ'always'��'left'��'right'��

    ��ҳ���������(1)��������ñ߾�֮�ϵ����һ���߿�����µĵ�һ���߿���в�ͬ��'page'ֵ��

13.3.6 ����ѡ���ҳ

    CSS2�����������ʹ����Щ�����ķ�ҳ��CSS2������ֹ�û������κ�һ�����ܵĵ��ҳ��Ҳ����ֹ����������ҳ������CSS2ȷʵ�Ƽ��û�����ѭ���¿��ǣ�����������ʱ����ì�ܣ����г�Ϊ���Ƕ����ǹ��򣩣�

���ӣ�

    �����Ǽٶ���ʽ������'orphans : 4'��'widows : 2'����һ����20�У��߿����ڵ�ǰҳ�ĵײ����ã�

    �������Ǽٶ�'orphans'Ϊ'10'����'widows'Ϊ'20'���ڵ�ǰҳ�ĵײ�����8�п��ã�

13.4 ҳ�����ݵIJ��

    ҳ�������е�������ѭ���������ͬһ���CSS2����������

���ӣ�

    �������µ����ӣ�

@page {
  margin-left: 3cm;
}

@page :left {
  margin-left: 4cm;
}

    ����α��ѡ���ӵ����ߵ�����������ҳ����߾�Ϊ'4cm'��������ҳ��������ҳ������߾�Ϊ'3cm'��