Bilet rezervasyonlarınızı veya internetten bir otele yol tarifini daha önce yazdırdıysanız, muhtemelen sonuçlardan çok daha az etkilenmişsinizdir. Bu nedenle, yazdırılan belgelerin, Basamaklı Stil Sayfaları (CSS) kullanılarak ekrandaki gibi stil oluşturulabileceğinin farkında olmayabilirsiniz.
Kaygıların Ayrılması
CSS'nin önemli bir avantajı, içeriğin sunumdan ayrılmasıdır. En basit ifadeyle, bu, aşağıdakiler gibi çok eski moda stilistik işaretler yerine şu anlama gelir:
Başlık
Anlamsal işaretleme kullanıyoruz:
Başlık
Sadece bu kadar temiz değil, aynı zamanda sunumumuzun içeriğimizden ayrı olduğu anlamına geliyor. Tarayıcılar render h1 elemanlar varsayılan olarak büyük, kalın metinlerdir, ancak bu stili bir stil sayfasıyla istediğimiz zaman değiştirebiliriz:
h1 {yazı tipi ağırlığı: normal; }
Bu stil bildirimlerini ayrı bir dosyada toplayarak ve bu dosyaya HTML belgemizden referans vererek, ayırmayı daha da iyi kullanabiliriz. Stil sayfası yeniden kullanılabilir ve onu kullanan her belgedeki biçimlendirmeyi güncellemek için bu tek dosyayı istediğimiz zaman değiştirebiliriz.
Baskı Stil Sayfası Dahil Etme
Bir ekran stil sayfası eklemeye benzer şekilde, baskı için bir stil sayfası belirleyebiliriz. Bir ekran stil sayfası genellikle şu şekilde bulunur:
Ancak ek bir özellik, medya, belgenin oluşturulduğu bağlama göre hedeflemeye izin verir. Varsayılan olarak, önceki öğe şuna eşdeğerdir:
Bu, stil sayfasının belgenin oluşturulduğu herhangi bir ortama uygulanacağı anlamına gelir. Bununla birlikte, medya özniteliği ayrıca yazdırma ve ekran değerlerini de alabilir:
Bu örnekte, print.css stil sayfası yalnızca belge yazdırıldığında kullanılacaktır. Bu çok kullanışlı bir mekanizmadır. Tüm ortak stilleri (belki yazı tipi ailesi veya satır aralığı) tüm ortamlar için geçerli olan bir stil sayfasında ve ayrı stil sayfalarında ortama özgü biçimlendirmeyi toplayabiliriz. Yine, bu endişelerin ayrıştırılmasının başka bir kullanımıdır.
Bazı Örnek Stil Bildirimleri
Temiz Bir Arka Plan
Renkli bir arka plan veya arka plan görüntüsü yazdırmak için neredeyse kesinlikle mürekkep harcamak istemezsiniz. Belgenizde ayarlanmış olabilecek bu değerler için varsayılanları sıfırlayarak başlayın:
vücut {
arka plan: beyaz;
siyah renk;
}
Ayrıca herhangi bir arka plan resminin yazdırılmasını da önlemek isteyebilirsiniz — bunlar dekoratif olmalı ve bu nedenle içeriğinizin gerekli bir parçası olmamalıdır:
* {
arka plan resmi: yok! önemli;
}
İlişkili: CSS'de Arka Plan Resmi Nasıl Ayarlanır
CSS, web sayfalarını şekillendirmek için güçlü bir araçtır. Bir arka plan görüntüsünün nasıl yerleştirileceğini öğrenmek size CSS ile ilgili birçok temel bilgi öğretir.
Kenar Boşluklarını Kontrol Etme
Baskı ile ilgili göz önünde bulundurulması gereken bir diğer açık nokta da sayfa kenar boşluğudur. CSS, kenar boşluğu boyutunu ayarlamak için bir yol sağlarken, tarayıcınızın ve yazıcınızın kenar boşluğu ayarlarını da etkileyebileceğini unutmamalısınız.
Örneğin, Chrome’un yazdırma iletişim kutusunda, aşağıdakileri içeren değerlere sahip bir kenar boşluğu ayarı vardır: Yok ve özel CSS aracılığıyla belirtilen her şeyi geçersiz kılacak:
Bu nedenle, herkese açık web sayfalarında kenar boşluğu kararlarını okuyucuya bırakmanız önerilir. Bununla birlikte, kişisel kullanım için veya varsayılan bir düzen oluşturmak için, CSS aracılığıyla baskı marjlarını ayarlamak uygun olabilir. @sayfa kuralı, kenar boşluklarının ayarlanmasına izin verir ve aşağıdaki gibi kullanılmalıdır:
@sayfa {
kenar boşluğu: 2cm;
}
CSS ayrıca, kenar boşluğunu sayfanın tek numaralı (sağ), çift numaralı (sol) veya kapak sayfası olmasına göre değiştirmek gibi daha karmaşık yazdırma düzenleri için kapasiteye de sahiptir.
Ne yazık ki, bu yetersiz bir şekilde destekleniyor - özellikle kapak sayfası seçeneği - ancak asgari düzeyde kullanılabilir. Aşağıdaki stiller, alt kenar boşlukları üstten biraz daha büyük ve dış sayfa kenarında sırttan biraz daha büyük kenar boşluklarına sahip sayfalar oluşturur:
@sayfa {
kenar sol: 20 mm;
sağ kenar boşluğu: 20 mm;
kenar boşluğu: 40 mm;
kenar boşluğu alt: 50 mm;
}
@page: left {
kenar sol: 30 mm;
}
@page: sağ {
sağ kenar boşluğu: 30 mm;
}
Alakasız İçeriği Gizleme
Tüm içerik, belgenizin basılı sürümü için uygun olmayacaktır. Sayfanız başlık gezintisi, reklamlar veya bir kenar çubuğu içeriyorsa, bu ayrıntıların basılı sürümde görünmesini engellemek isteyebilirsiniz, örneğin:
#contents, div.ad {display: none; }
Açıkça, köprüler basılı materyalle alakalı değildir, bu nedenle onları çevreleyen metinden ayıran stilleri büyük olasılıkla kaldırmak isteyeceksiniz:
a {text-decoration: yok; renk: devralır; }
Bununla birlikte, okuyucuların yine de orijinal URL'lere erişmesini isteyebilirsiniz ve basit bir çözüm, bunları bağlantılı metnin arkasına otomatik olarak eklemektir:
a [href]: {
içerik: "(" attr (href) ")";
yazı tipi boyutu:% 90;
renk: # 333;
}
Bu CSS, aşağıdaki gibi sonuçlar verir:
a [href]: sonra özellikle sonraki konumu hedefler (:sonra) her bağlantı öğesi (a) aslında bir URL'ye ([href]). içerik Buradaki beyan, href parantezler arasında öznitelik. Oluşturulan içeriğin görüntülenmesini kontrol etmek için başka stil kurallarının da uygulanabileceğini unutmayın.
Sayfa Sonlarını İşleme
İzole içerik bırakan veya ortada garip bir şekilde kırılan sayfa sonlarından kaçınmak için sayfa sonu özelliklerinden yararlanın: sayfa sonu, sayfa sonu ve sayfa içi. Örneğin:
tablo {page-break-inside: kaçının; }
Bu, tabloların birden çok sayfaya yayılmasını önlemeye yardımcı olur ve hiçbirinin tek bir sayfadan daha uzun olmaması gerekir. Benzer şekilde:
h1, h2 {page-break-before: her zaman; }
Bu, bu tür başlıkların her zaman yeni bir sayfa başlattığı anlamına gelir. Sayfanızın h1'ini hemen bir h2 ile izlerseniz sorunlara neden olabilir, ancak h1 kendi başına bir sayfada sona erecektir. Bunu önlemek için, söz konusu örneği hedefleyen bir seçici kullanarak sayfa sonunu iptal etmeniz yeterlidir, örneğin:
h1 + h2 {sayfa sonu: kaçının; }
Baskı Stillerini Görüntüleme
Her durumda, tarayıcınız ve işletim sisteminiz, genellikle standart yazdırma iletişim kutusunun bir parçası olarak bir baskı önizleme özelliği sağlamalıdır.
Chrome tarayıcı, baskı stil sayfalı bir CV gösteren bu örnekte gösterildiği gibi, Geliştirici Araçları aracılığıyla baskı stillerinizi kontrol etmeyi ve hatta hata ayıklamayı daha kolay hale getirir. İlk önce ana menüyü açın ve Daha Fazla Araç ardından Geliştirici Araçları seçenek:
Görünen yeni panelden Menü, sonra Daha fazla araç, bunu takiben Rendering:
Sonra aşağı kaydırın CSS medya türünü taklit edin ayarı. Açılır menü, belgenizin yazdırma ve ekran görünümleri arasında geçiş yapmanızı sağlar:
Baskı stil sayfasını taklit ederken, standart Stiller tarayıcısı canlı stil kurallarını incelemek ve değiştirmek için kullanılabilir. Bir ekrandaki baskı çıktısını taklit etmenin hala% 100 doğru olmadığını unutmayın. Tarayıcı kağıt boyutu hakkında hiçbir şey bilmiyor ve @sayfa kural taklit edilemez.
PDF olarak yazdırma
Modern işletim sistemlerinin kullanışlı bir özelliği, bir PDF dosyasına yazdırma yeteneğidir. Aslında, yazdırabileceğiniz her şey bir PDF dosyasına gönderilebilir - sonuçta bir PDF dosyasının basılı bir belgeyi temsil etmesi gerektiği için gerçek bir sürpriz olmaz.
Bu, HTML'yi bir baskı stil sayfasıyla birlikte, hem ek olarak gönderilebilen hem de yazdırılabilen yüksek kaliteli bir belge oluşturmak için mükemmel bir araç haline getirir.
Çeşitli Belgeleri Yazdırın
Özgeçmişinizden tariflere veya etkinlik duyurularına kadar her şey dahil olmak üzere kaliteli belgeler oluşturmak için bir baskı stil sayfası kullanabilirsiniz. Web sayfaları genellikle çirkin görünür ve yazdırıldıklarında istenmeyen ayrıntılar içerir, ancak az sayıda stil ince ayarı baskı sonuçlarını önemli ölçüde iyileştirebilir. Nihai sonuçları PDF olarak kaydetmek, çekici, profesyonel belgeler oluşturmanın hızlı bir yoludur.
Daha sonrası için saklamak istediğiniz ilginç bir makaleyle hiç karşılaştınız mı? Eh, üç kolay adımda Edge ile PDF olarak kaydedebilirsiniz.
- Programlama
- Baskı
- CSS
Bobby, yirmi yılın büyük bir bölümünde yazılım geliştirici olarak çalışan bir teknoloji meraklısıdır. Switch Player Magazine'de İnceleme Editörü olarak çalışarak oyun oynama konusunda tutkulu ve çevrimiçi yayıncılık ve web geliştirmenin tüm yönlerine dalmış durumda.
Haber bültenimize abone ol
Teknoloji ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için haber bültenimize katılın!
Bir adım daha…!
Lütfen size az önce gönderdiğimiz e-postadaki e-posta adresinizi onaylayın.