
Print CSS Nedir? Nasıl Kullanılır?
CSS ile yazıcıdan çıktısı alınacak olan sayfanın istenmeyen alanlarının kaldırılmasını @media print özelliği ile yapmamız mümkün, ilgili sitil dosyasına çıktıda gözükmesini istemediğimiz alanları gizleyebilir , kullanıcılara daha yalın bir web sayfası çıktısı alma imkanı sağlayabilirsiniz. Makale türünden bir web sayası düşündüğümüzde örneğin bir haber sitesi ya da bir blog sitesini ele alacak olursak, kullanıcı deneyiminden yola çıkarak yazıcıdan ilgili makele yazısı, başlığı ve görsel alanlarının çıkması daha doğru olacaktır. Bu gibi durumda menü, yan menü, sayfa sonu (footer) gibi alanları gizlememiz gerekecektir. Okuduğunuz bu makalede çıktı almak için klavyeden Windows kullanıcılar için Ctrl+P Mac kullanıcıları için Cmd+P tuşuna basarak çıktı ön izleme ekranından print CSS’in nasıl çalıştığını görebilirsiniz.Şimdi Print CSS’in nasıl kullanılacağına bakalım.
Öncelikli olarak Html sayfamıza print CSS dosyasını nasıl linkleyeceğimizi görelim.
Html kod yapısı
Burada önemli olan CSS media tipinin print özelliği taşıyor olması
not: media tipini “all” olarak ayarlandığında içeriye tüm media yapılarını getireceğinden print yapısıda çalışacaktır.
1 2 3 4 5 6 7 |
<link rel="stylesheet" href="print.css" media="print" type="text/css" /> |
Print CSS stil dosyası
@media print{ } yapısını açarak ilgili alanların stil yapılarıyla oynaya biliriz gözükmeseni istemediğiniz alanlar için “display:none” özelliğini verebilirsiniz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
@media print { body { background-color: #ffffff; color: black; /* Renk seçeneklerini istediğimiz gibi ayarlayabiliriz. */ } p { color: red; } h1, h2, h3, h4, h5, h6 { color: yellow; } .menu,footer,.left-menu{ display: none; /* Yazıcıda gözükmesini istemediğimiz alanlar için display none özelliğini kullana biliriz. */ } } |
Minimal Coding Privacy Policy
Sitemizi ziyaret eden kullanıcılar aşağıdaki koşulları, yazılanlarla sınırlı olmamak şartıyla kabul etmiş sayılacaktır. “www.minimalcoding.net” sitesinde yer alan tüm bilgiler,tasarım,logo,yorum ve tavsiyeler ile ses, görüntü, yazı içeren bilgi ve belgeler (“İçerik”) ile buradan yapılan tüm linkler, kullanıcıya genel bilgi vermek amacıyla sunulmuştur.
Burada mevcut olan İçerik, Minimal Coding'i Kaynak göstermeden paylaşılamaz ve yayınlanamaz. Bu siteye erişim serbest ve anonimdir.