CSS'le sayfa bölme işlemlerinin nasıl yapılacağı üzerine biçimlendirmeler yapılabilir. Bu işlemler özellikle çıktı almaya yönelik biçimlendirmelerde yararlıdır. Aşağıdaki örneklerin çalışmasını görmek için kodun meydana getirdiği sayfayı yazdırmaya çalışıp önizlemesine bakılmalıdır.
page-break-inside
Bu özellik ile bir elemanın içinde bölünme yapılıp yapılamayacağı ayarlanır. Varsayılan değer auto değeridir ve sayfa bölünmelerinin otomatik olarak belirleneceğini belirtir. Kullanılabilecek bir diğer değer avoid değeridir ve bu değer bir eleman içinde bölünme olmasını mümkün olması durumunda engeller. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.
<!DOCTYPE html>
<html>
<head>
<title>CSS Sayfa Bölme</title>
<meta charset="UTF-8">
<style>
p{
page-break-inside: avoid;
width: 100px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
</body>
</html>
Yukarıdaki örnek kodla oluşturulan sayfa yazdırılmaya çalışılırsa üç paragraf ayrı ayrı sayfalar da olacaktır. page-break-inside özelliğinin silinmesi durumunda paragrafların iki farklı sayfaya yayılabileceği görülecektir.
page-break-after
Bu özellik ile bir elemandan sonra sayfa bölünmesi yapılıp yapılmayacağı belirtilir. Varsayılan değer olan auto sayfanın otomatik olarak bölünmesini sağlar. avoid değeri kullanılırsa elemandan hemen sonra sayfa bölünmesi mümkünse engellenir. always seçeneği kullanıldığında elemandan hemen sonra her zaman sayfa bölünür. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.
<!DOCTYPE html>
<html>
<head>
<title>CSS Sayfa Bölme</title>
<meta charset="UTF-8">
<style>
p{
page-break-after: always;
width: 100px;
}
</style>
</head>
<body>
<h1>Örnek Başlık 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
<h1>Örnek Başlık 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
<h1>Örnek Başlık 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
</body>
</html>
Yukarıdaki örnek kodla oluşturulan sayfa yazdırılmaya çalışılırsa her paragraftan sonra başka bir sayfaya geçilecektir.
page-break-before
Bu özellik ile bir elemandan önce sayfa bölünmesi yapılıp yapılmayacağı belirtilir. Varsayılan değer olan auto sayfanın otomatik olarak bölünmesini sağlar. avoid değeri kullanılırsa elemandan hemen önce sayfa bölünmesi mümkünse engellenir. always seçeneği kullanıldığında elemandan hemen önce her zaman sayfa bölünür. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.
<!DOCTYPE html>
<html>
<head>
<title>CSS Sayfa Bölme</title>
<meta charset="UTF-8">
<style>
p{
width: 100px;
}
h1{
page-break-before: always;
}
</style>
</head>
<body>
<h1>Örnek Başlık 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
<h1>Örnek Başlık 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
<h1>Örnek Başlık 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
</body>
</html>
Sütunlar <<<<< CSS3 >>>>> Konumlandırma