Home-theater-designers
Web'den bir otel için bilet rezervasyonlarını veya yol tariflerini yazdırdıysanız, muhtemelen sonuçlardan pek de etkilenmemişsinizdir. Bu nedenle, yazdırılan belgelerin, Basamaklı Stil Sayfaları (CSS) kullanılarak ekranda olduğu gibi şekillendirilebileceğinin farkında olmayabilirsiniz.
Endişelerin Ayrılması
CSS'nin önemli bir yararı, içeriğin sunumdan ayrılmasıdır. En basit ifadeyle, bu, çok eski moda stilistik işaretleme yerine şu anlama gelir:
Heading
Anlamsal işaretleme kullanıyoruz:
Bu sadece daha temiz değil, aynı zamanda sunumumuzun içeriğimizden ayrıldığı anlamına da geliyor. Tarayıcılar oluşturma h1 öğeler varsayılan olarak büyük, kalın metindir, ancak bu stili herhangi bir zamanda bir stil sayfasıyla değiştirebiliriz:
h1 { font-weight: normal; }
Bu stil bildirimlerini ayrı bir dosyada toplayarak ve bu dosyayı HTML belgemizden referans alarak 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, yazdırma için bir stil sayfası belirtebiliriz. Bir ekran stil sayfası genellikle şu şekilde bulunur:
Ancak ek bir özellik, yarım , 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 ortam için uygulanacağı anlamına gelir. Bununla birlikte, medya özniteliği baskı 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 yaygın stilleri (belki yazı tipi ailesini veya satır aralığını) tüm medya için geçerli olan bir stil sayfasında ve medyaya özgü biçimlendirmeyi ayrı stil sayfalarında toplayabiliriz. Yine, bu, endişelerin ayrı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ırarak mürekkebi boşa harcamak istemezsiniz. Belgenizde ayarlanmış olabilecek bu değerler için varsayılanları sıfırlayarak başlayın:
body {
background: white;
color: black;
}
Ayrıca arka plan resimlerinin yazdırılmasını da önlemek isteyebilirsiniz; bunlar dekoratif olmalıdır ve bu nedenle içeriğinizin zorunlu bir parçası olmamalıdır:
* {
background-image: none !important;
}
İlgili: CSS'de Arka Plan Resmi Nasıl Ayarlanır
iphone'um neden itunes'a bağlanmıyor
Marjları Kontrol Etme
Baskı ile ilgili olarak dikkate alınması gereken bir diğer bariz nokta da sayfa kenar boşluğudur. CSS, kenar boşluğu boyutunu ayarlamak için bir araç sağlarken, tarayıcınızın ve yazıcınızın da kenar boşluğu ayarlarını etkileyebileceğini unutmayın.
Örneğin, Chrome'un yazdır iletişim kutusunda, aşağıdakileri içeren değerlere sahip bir kenar boşluğu ayarı vardır: Yok ve gelenek bu, CSS ile belirtilen her şeyi geçersiz kılar:
Bu nedenle, halka açık web sayfalarında marj kararlarının okuyucuya bırakılması önerilir. Ancak, kişisel kullanım veya varsayılan bir düzen oluşturmak için, CSS aracılığıyla yazdırma kenar boşluklarının ayarlanması uygun olabilir. NS @sayfa kuralı, kenar boşluklarının ayarlanmasına izin verir ve aşağıdaki gibi kullanılmalıdır:
@page {
margin: 2cm;
}
CSS ayrıca, sayfanın tek sayılı (sağ), çift sayılı (sol) veya kapak sayfası olmasına göre kenar boşluğunu değiştirmek gibi daha karmaşık yazdırma düzenleri için kapasiteye sahiptir.
nintendo switch'i tv'ye nasıl kurarım
Ne yazık ki, bu, özellikle kapak sayfası seçeneği, yeterince desteklenmiyor, ancak minimum düzeyde kullanılabilir. Aşağıdaki stiller, alt kenar boşlukları üstten biraz daha büyük ve sayfa dış kenarlarında sırttan biraz daha büyük kenar boşlukları olan sayfalar üretir:
@page {
margin-left: 20mm;
margin-right: 20mm;
margin-top: 40mm;
margin-bottom: 50mm;
}
@page :left {
margin-left: 30mm;
}
@page :right {
margin-right: 30mm;
}
Alakasız İçeriği Gizleme
Tüm içerik, belgenizin basılı sürümü için uygun olmayacaktır. Sayfanızda başlık gezintisi, reklamlar veya bir kenar çubuğu varsa, bu ayrıntıların basılı sürümde görünmesini engellemek isteyebilirsiniz, örneğin:
#contents, div.ad { display: none; }
Bağlantıları sabitleme
Köprüler açıkça basılı materyalle alakalı değildir, bu nedenle muhtemelen onları çevreleyen metinden ayıran stilleri kaldırmak isteyeceksiniz:
a { text-decoration: none; color: inherit; }
Ancak yine de okuyucuların orijinal URL'lere erişmesini isteyebilirsiniz ve basit bir çözüm, bunları bağlantılı metinden sonra otomatik olarak eklemektir:
a[href]:after {
content: ' (' attr(href) ')';
font-size: 90%;
color: #333;
}
Bu CSS, aşağıdaki gibi sonuçlar verir:
a[href]:sonra ( :sonrasında ) her bağlantı elemanı ( ile ) aslında bir URL'ye sahip ( [href] ). NS içerik beyan burada değerini ekler href parantezler arasındaki nitelik. Oluşturulan içeriğin görüntülenmesini kontrol etmek için başka stil kurallarının uygulanabileceğini unutmayın.
Sayfa Sonlarını İşleme
Sayfa sonlarının yalıtılmış içerik bırakmasını veya ortasından garip bir şekilde ayrılmasını önlemek için sayfa sonu özelliklerini kullanın: sayfa sonu öncesi , sayfa sonu ve sayfa sonu . Örneğin:
table { page-break-inside: avoid; }
Bu, hiçbirinin tek bir sayfadan daha uzun olmaması koşuluyla, tabloların birden çok sayfaya yayılmasını önlemeye yardımcı olmalıdır. Benzer şekilde:
h1, h2 { page-break-before: always; }
Bu, bu tür başlıkların her zaman yeni bir sayfa başlattığı anlamına gelir. Sayfanızın h1'ini bir h2 ile hemen takip ederseniz, h1 kendi başına bir sayfada sona ereceğinden sorunlara neden olabilir. Bunu önlemek için, söz konusu örneği hedefleyen bir seçici kullanarak sayfa sonunu iptal etmeniz yeterlidir, örneğin:
ubuntu mac'a nasıl kurulur
h1 + h2 { page-break-before: avoid; }
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ı, yazdırma stil sayfası içeren bir CV'yi gösteren bu örnekte gösterildiği gibi, Geliştirici Araçları aracılığıyla yazdırma stillerinizi kontrol etmeyi ve hatta hata ayıklamayı daha kolay hale getirir. İlk önce ana menüyü açın ve Diğer Araçlar ardından Geliştirici Araçları seçenek:
Görünen yeni panelden öğesini seçin. Menü , sonra Daha fazla araç , bunu takiben oluşturma :
Ardından aşağı kaydırın CSS medya türünü taklit et ayar. Açılır menü, belgenizin baskı ve ekran görünümleri arasında geçiş yapmanızı sağlar:
Baskı stil sayfasını taklit ederken, standart Stil 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'ye yazdırma
Modern işletim sistemlerinin kullanışlı bir özelliği, bir PDF dosyasına yazdırma yeteneğidir. Aslında, yazdırabileceğiniz herhangi bir şey bunun yerine 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 değil.
Bu, HTML'yi yazdırma stil sayfasıyla birlikte ek olarak gönderilebilen ve yazdırılabilen yüksek kaliteli bir belge oluşturmak için mükemmel bir araç yapar.
Çeşitli Belgeler Yazdırın
CV'nizden yemek tariflerine veya etkinlik duyurularına kadar her şeyi içeren kaliteli belgeler oluşturmak için bir baskı stil sayfası kullanabilirsiniz. Web sayfaları yazdırıldığında genellikle çirkin görünür ve istenmeyen ayrıntılar içerir, ancak az sayıda stil düzeltmesi yazdırma sonuçlarını önemli ölçüde iyileştirebilir. Nihai sonuçları PDF olarak kaydetmek, çekici, profesyonel belgeler oluşturmanın hızlı bir yoludur.
Paylaş Paylaş Cıvıldamak E-posta Microsoft Edge ile Web Sayfalarını PDF'ye YazdırmaDaha sonra saklamak istediğiniz ilginç bir makaleye hiç rastladınız mı? Üç kolay adımda Edge ile PDF olarak kaydedebilirsiniz.
Sonrakini Oku İlgili konular- Programlama
- Baskı
- CSS
Bobby, yirmi yılı aşkın bir süredir yazılım geliştiricisi olarak çalışan bir teknoloji tutkunu. Oyun konusunda tutkulu, Switch Player Magazine'de İnceleme Editörü olarak çalışıyor ve çevrimiçi yayıncılık ve web geliştirmenin tüm yönleriyle ilgileniyor.
Bobby Jack'dan Daha FazlaHaber bültenimize abone ol
Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!
Abone olmak için buraya tıklayın