CSS Dosyası – Görsel Düzen

CSS Dosyası Nedir ve Ne İşe Yarar?

CSS dosyası, epub dosyasının kitap okuyucularda nasıl görünmesi gerektiğini ayarlar.

CSS Dosyası, Nelerin Görünüşünü Belirliyor?

Epub dosyasındaki yazıların hepsi bazı etiketlerin içinde yer alıyor. Aşağıdaki görseli inceleyerek okumaya devam edin. Sol taraf kod bölümü, sağ taraf kitap görünümü. Burada gördüğün gibi yazılar bazı etiketlerin(<h1>, <h3>, <p>…) içerisinde ifade edilmiş. Bu etiketleri css dosyasına tanımlarsak (bu etiketin içindeki yazı şu şekilde görünsün dersek) yazıların kitap okuyuculardaki görüntüsünü ayarlamış oluruz. Peki tanımlama işlemi nasıl oluyor?Adsız

Tekrar candır. Üstte gördüğünüz gibi yazılar şu etiketlerin ve sınıfların içerisinde <h1>, <h3>, <p>, <p class=”p1″> (Kırmızı ile işaretlediğim p etiketi içinde p1 sınıfını ifade eder.) bulunuyor. Css dosyası da bu etiketlerin içerisindeki yazıları kitap görünümünde nasıl görünmesi gerektiğini belirtiyor. (Preview ekranında gördüğünüz gibi). Olay bu kadar basit. Bizler kitap okuyucularımız ya da bilgisayardaki programlarda Preview ekranındaki gibi görüyoruz kitapları fakat kitabın aslı kodludur.

_____

CSS konusunu bu işe yeni başlayanlar için nasıl anlatabilirim diye çok düşündüm. En baştan kendi css dosyanızı yaratmak mantıksız ve anlamsız olacağından zamanla düzenleme yaparken kendi dosyanızı oluşturacaksınız o yüzden hazır css dosyası kullanarak başlayın bu işe. Aşağıda benim hazırladığım en temel görsel düzene sahip css dosyası bulunmaktadır.

***

CSS DOSYASINI İNDİRMEK İÇİN BURAYA TIKLAYIN.

***

CSS DOSYASINI HER EPUB OLUŞTURDUĞUMUZDA, EPUBIN İÇİNDEKİ TÜM .XHTML DOSYALARINA TANITMAK ZORUNDAYIZ. AŞAĞIDAKİ ADIMLARI UYGULAYARAK TANITMA İŞLEMİNİ GERÇEKLEŞTİREBİLİRSİN.

Bu oluşturduğumuz css dosyasını xhtml dosyalarına tayin etmezse hiçbir faydası olmaz. Şimdi nasıl yapacağımıza gelelim. CSS dosyasını Text bölümündeki xhtml dosyalarından hangisine ya da hangilerine tayin edecekseniz, onları seçin ve sağ tıklayıp, Link Stylesheets…‘e tıklayın.

p2

Link Stylesheets…‘e tıkladıktan sonra açılan pencerede xhtml dosyalarına tayin edeceğiniz css dosyasını seçiniz. Bir epub dosyasında birden fazla css dosyası yüklenebilir ve .xhtml dosyalarına farklı css dosyaları tayin edilebilir.

***

Elimden geldiğince hazır css dosyasını standart tutmaya çalıştım fakat beğenmediğiniz bir yer olursa değişiklik yapmak sana kalıyor. Değişiklik yapman için aşağıdaki css değerlerini bilmelisin.

  1. font-size: Yazılarımızın büyüklüğünü ayarlıyor.
  2. text-align: Yazıların sayfa üzerinde nasıl görünmesi gerektiğini, yani nere tarafa yaslı olması gerektiğini ifade eder. (Alabildiği değerler left,right,center,justify)
  3. text-indent: Paragraf girintisi
  4. font-style: İtalik görünümü sağlar. (Aldığı değer sadece italictir.)
  5. font-weight: Yazıları kalınlaştırmayı sağlar.(Aldığı değer boldtur.)
  6. margin-top: Üstten boşluk bırakmanızı sağlar.
  7. margin-bottom: Alttan boşluk bırakmanızı sağlar.
  8. margin-right: Sağdan boşluk bırakmanızı sağlar.
  9. margin-left: Soldan boşluk bırakmanızı sağlar.

Bu dokuz ifade en temel css kodlarıdır. Bu kodların ne işe yaradığını öğrendiğin vakit çok rahat düzenleme yapabilirsin.

***

Hazır css dosyasının içindeki tanımlı etiketler ve değerleri şu şekildedir. Bu değerleri pdf , yani basılı kitap görünümü sağlamak için değiştirebilirsin.

  • h1 = Başlık 1 (En üst başlık)
  • h2 = Başlık 2
  • h3 = Başlık 3
  • p = Paragraf (Başlıklar hariç her paragrafı <p> etiketi ile ifade etmelisin ki kod yapısı sade olsun.)
  • .girintisiz = Paragraf girintisi olmayan paragraflarda kullanın.
  • .girintisiz_o = Paragraf girintisi olmayan ve ortaya hizalanmış yazılarda kullanın.
  • .ml2ti0 = Soldan 2 birim boşluk bırakılmış ve paragraf girintisi olmayan sınıf
  • .ml2ti1 = Soldan 2 birim boşluk bırakılmış ve paragraf girintisi 1 olan sınıf
  • .ml3ti0  = Soldan 3 birim boşluk bırakılmış ve paragraf girintisi olmayan sınıf
  • .ml3ti1 = Soldan 3 birim boşluk bırakılmış ve paragraf girintisi 1 olan sınıf
  • .kunye = Kitabın künyesindeki her paragrafı bu sınıfla ifade edin.
  • .baslik1,.baslik2,.baslik3,.baslik4,.baslik5 = İç kapakta kullanılan sınıflar sadece margin değerleri ve font büyüklük değeriyle oynayın.
  • .yazar = Yazarın tanıtımını bu kodla ifade edin.
  • .logo = İç kapaklardaki logoyu bu sınıfla ifade edin.

***

CSS DOSYASINA YENİ BİR SINIF EKLEMEK

Niçin yeni bir sınıf oluştururuz?

Temel etiketlere verdiğimiz görsel değerler bazı yazılar için uygun olmayabiliyor bu yüzden bu yazıları etiketsiz bırakmamak için yeni sınıf oluşturmak zorunda kalıyoruz. Aşağıda <p> etiketinde genelde sınıf açılan durumları belirttim.

  • Şiirlerin farklı görünüşü
  • Mektuplar
  • İç Kapaklar
  • Farklı sayfa yapıları
  • Görsellerin sayfa üzerindeki yerini

Sınıflar sadece temel etiketler için açılır o yüzden temel kodları belirtmekte fayda var. <p>, <div>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <span>, <img>

Temel kodlar cssde ifade edilirken isimlerinin başında nokta bulunmaz. Sınıflarda ise nokta bulunmak zorundadır.

***

 

Bazen değerleri farklı bağımsız bir p kodu yazmamız gerekecek, mesela bazı kitaplarda başlıktan sonraki ilk paragrafta, paragraf girintisi olmuyor. Aşağıdaki görselde kırmızı oklara bakın. p1

Hazır olarak indirdiğin css dosyasındaki p etiketinin girinti değeri 1em, yani bir birimdir. Dolayısıyla yukarıdaki ilk paragrafı girintisiz yapmak için şunları yapman gerek.

  • İlk paragrafı p etiketinin içinde, yeni bir sınıfta ifade edeceksin.
  • İfade ettiğin sınıfı css dosyasına tanımlayacaksın.

Her paragrafı <p> ile ifade ediyoruz fakat görseldeki ilk paragrafın <p> etiketine ekstradan bazı eklemeler yapmalıyız ki girintisiz görünsün.

İŞİN MANTIĞI

<p class=”HerhangiBirİsimYazabilirsinizKırmızıyla belirtiğim yer bizim sınıf oluşturmamızı sağlıyor. Mavi ise bu sınıfın adı oluyor. Sınıfın adını css dosyasına yazarken şunlara dikkat et; İsimlendirmeyi Türkçe karakter ve boşluk kullanmadan yaz aksi takdirde kod çalışmaz. 

Oluşturduğumuz bu yeni sınıfın görünüş değerlerini css dosyasına belirtiniz.

CSS dosyasında, temel etiketler için özel sınıf açarken sınıf adının önünde bir adet nokta(.) olmalı yoksa sınıf olduğunu ifade etmemiş olursunuz ve o sınıf çalışmaz. Örnek;.girintisiz olmalı.

.HerhangiBirİsimYazabilirsiniz {text-indent:0em;}  = .girintisiz {text-indent:0em;}  

Bu sayede yaratmış olduğumuz “HerhangiBirİsimYazabilirsiniz” sınıfının paragraf girintisi her zaman sıfır olmuştur.

EN BAŞTAN KENDİ CSS DOSYASINI YARATACAKLARI İÇİN

Sigil’de css dosyası oluşturmak için Book Browser bölümündeki Styles klasörüne sağ tıklayıp Add Blank Stylesheet demeniz gerekmektedir. Ya da elinizde kayıtlı bir css dosyası varsa yine aynı şekilde Styles klasörüne sağ tıklayıp Add Existing Files… demeniz gerekmektedir.

  • İlk önce Styles bölümünde oluşturduğumuz css dosyasını açın. Yeni oluşturduysan dosyanın içerisinde bir şey yazmıyordur.
  • Buraya p yazınız.
  • Daha sonra bir boşluk bırakarak kaşlı ayraçla “{” başlangıç yapınız. Kaşlı ayraç nedir?
  • Yukarıda öğrendiğiniz 9 değer arasından dilediklerinizi kaşlı ayraçtan sonra yazmaya başlayınız. Yeni bir değer girmek isterseniz, iki değer arasına mutlaka noktalı virgül “;” koyunuz. Örnek –> font-size:2em;text-indent:0em
  • Dilediğiniz değerleri girdikten sonra kapanış için tekrar kaşlı ayraç “}“koymalısınız.
  • Böylelikle p etiketinin görünüşünü belirlemiş olduk. Eğer başka kodlar -<h1>, <h2>, <div>…- da girmek istiyorsanız yine aynı mantıkla hareket etmelisiniz.

UYGULAMA: Kodun adını yaz, kaşlı ayracı yaz, değerleri gir(değerler arasına mutlaka ;),kaşlı ayraçla kapanışı yap.

UYARI: Kaşlı ayraçların yönlerine dikkat ediniz.

 

4 thoughts on “CSS Dosyası – Görsel Düzen

  1. hayri 24 Aralık 2016 / 13:14

    Öncelikli olarak bu rehberi hazırlayana/hazırlayanlara teşekkür ederim. Bir süredir ingilizce kitapları epuba çevirmeye çalışıyorum gösterdiğiniz hemen herşeyi doğru yapmakla birlikte css konusunda halen daha bazı sıkıntılarım var ve metinlerde ilk paragrafı bir türlü girintisiz yapamıyorum. Girintisiz yaptığımda ise bu sefer sağ taraftan justify seçeneğindeki gibi heryere yaslı bir paragraf olmuyor. Bir de kaynak olarak kullandığım orjinal pdflerdeki italik kelime ve cümleler epubda normal şekilde çıkıyor bunları kısa yoldan epubda düzenleme imkanı mevcut mu?

    Beğen

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s