Bölüm 3 CSS

CSS Nedir?

CSS (Cascading Style Sheets - Basamaklı Stil Şablonu) kelimelerinin kısaltmasıdır. CSS sayfadaki HTML elemanlarının nasıl gösterileceğini belirtir. CSS bir stil yapılandırma dilidir ve bir programlama dili değildir. CSS web sayfanızın stilini belirtmek için kullandığınız kod'dur. Nasıl bir kuaför saçlarınızı şekillendiriyorsa CSS de HTML elemanlarını şekillendirir.

Örneğin bir web sayfasında tüm paragrafların yazı renginin kırmızı olmasını isterseniz CSS kodunuz şöyle olur:

p {
    color: red;
}

Bu stil kodu sayfadaki tüm <p> elemanlarının yazı rengini kırmızı yapacaktır. Bu kodun nereye yazılacağını birazdan göreceğiz. Şimdi biraz kodun parçalarına bakalım. Üstteki p harfi seçici deyim olarak bilinir ve sayfada aradığımız elemanları bulmak için kullandığımız kriterdir. Arkasından stil kuralları dediğimiz satırlar gelir. Bu örnekte bir tane kural var o da color: red; satırı. Burada color kelimesi stil kodunun özellik kısmıdır, burada değiştirmek istediğimiz stilin adını gireriz. red ise stil kuralının değer kısmı, yazının kırmızı olacağını bildiriyor. Yukarıdaki örnekteki gibi seçici, blok ve içindeki stil kurallarından oluşan sete CSS Kural Seti (CSS Rule Set) adı verilir. Şimdi bu seti biraz inceleyelim.

CSS kural seti

Tüm bu yapıya CSS kural seti denir. Bir HTML elemana stil uygularken ilk yapmanız gereken o elemanı bulup göstermek. Bu örnekte eleman(lar)ı gösterme işini seçici deyim denen p yapıyor. Örnekte çok basit bir seçici deyim kullanıldı, biraz sonra değişik seçici deyim örnekleri göreceğiz.

Seçici deyim ardından o elemana ait CSS stil kurallarının listesini içeren bloğu belirten süslü parantez { } geliyor. Bir çok kodlama dilinde süslü parantezlerle bloklar belirlendiği gibi CSS kural setlerinde de aynı yapı kullanılmış, biz de mecbur böyle kullanacağız.

Normalde kural seti içinde bir çok kural tanımlaması olur ama burada örnek için sadece bir kural tanımlanmış. color kelimesi stil kuralının özellik adı ve eleman yazı rengini belirtmek için kullanılır. Özellik adından sonra mutlaka iki nokta üsütüste konur. Bunun anlamı "adı bitti, artık değer girmeye geçiyorum" demek. purple kelimesi ise özelliğe verilen değer. Değeri girdikten sonra mutlaka bir noktalı virgül (;) koymalısınız. Noktalı virgül kural tanımlamanın bittiğini bildirir, eğer koymazsanız stil kodunuzun yanlış algılanmasına sebep olur.

CSS kodlarında da alt satıra geçmeler ve satırlara soldan yapılan girintilerin zorunluluğu yok. Yukarıdaki 3 satır hepsi yan yana yazılabilirdi, yeterki süslü parantezler, iki nokta üstüsteler ve noktalı virgüller unutulmasın. Önemli olan onların hatasız girilmesi. Ama görsel olarak sizin kodu kolay anlamanız için yardımıcı olarak bu girintilemeyi kullanmanız iyi olacaktır.

CSS'i Sayfanıza Ekleme Yöntemleri

Bir HTML sayfasına CSS stillleri eklemenin 3 değişik yolu var.

  • Harici CSS kodlarını kullanmak.
  • Dahili CSS kodlarını kullanmak.
  • Satır içi CSS kodları kullanmak.

Bunları test için ilk-sayfam projemizin index.html dosyasına geri dönelim.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Örnek Web Sayfam</title>
    </head>
    <body>
        <h1>Merhaba Dünya!</h1>
        <p>Aşağıda sevimli bir köpecik resmi var.</p>
        <img src="images/pupy.jpg" alt="Sevimli köpecik">
        <p>Alınacaklar:</p>
        <ul>
            <li>Et</li><li>Süt</li><li>Yumurta</li>
        </ul>
        <p>
            Abdülmuttalip Uzunkavaklaraltındayataruyumazoğlu
        </p>
    </body>
</html>

Merhaba Dünya!

Aşağıda sevimli bir köpecik resmi var.

Sevimli köpecik

Alınacaklar:

  • Et
  • Süt
  • Yumurta

Abdülmuttalip Uzunkavaklaraltındayataruyumazoğlu


Harici Dosyadan CSS Kullanmak

Proje root klasörü altında stylesheets adlı bir alt klasörümüz vardı. Buraya stilim.css isimli bir yeni dosya ekleyelim, bu dosyayı daha sonra web sayfamızın HTML kodunda stil dosyası başvurusu olarak bildireceğiz. Buraya paragraflarımızın yazı rengini değiştirmek için bir CSS kuralı yazalım.

p {
    color: blue;
}

Seçici deyim olarak p kullanırsak sayfadaki tüm <p> elemanları seçer. CSS kural seti bloğunda sadece tek satır var o da color özelliğini yani elemanın yazı rengini mavi yapan blue değerine sahip. Şimdi index.html sayfamızda bu CSS dosyasına başvuru için <head> kısmına bir bağlantı elemanı ekleyelim.

    <head>
        <meta charset="utf-8">
        <title>Örnek Web Sayfam</title>
        <link rel="stylesheet" href="stylesheets/stilim.css"
            type="text/css">
    </head>

<link> elemanı HTML sayfalardan dışarıdaki bir dosyaya bağlantı yapılırken kullanılıyor. rel özelliği ile dosyanın hangi amaçla bağlandığı bildiriliyor, stylesheet değeri bağlantının bir stil dosyası olacağını bildiriyor. href özelliği ise dosyanın adresini veriyor, stylesheets/stilim.css değeri dosyanın sayfamız olan index.html dosyasının bulunduğu klasördeki stylesheets alt klasörü içindeki stilim.css dosyası olduğunu bildiriyor. type="text/css" özelliği ise dosyanın düz metin olarak css tipi bir dosya olarak işlenmesi gerektiğini tarayıcıya bildiriyor.

Dosyaları kaydedip sayfamızı tarayıcıda açarsak tüm <p> elemanlarının (paragrafların) yazı renginin maviye dönmüş olduğunu göreceğiz.

mavi paragraflar

Harici dosyada CSS kullanmak en yaygın kullanmanız gereken yöntem. Düşünün, çok büyük bir web sitesi yaptığınızı ve bir sürü web sayfanız olduğunu. CSS kodlarınız tek bir dosyada toplanırsa , sadece o dosyada yaptığınız değişiklikler tüm sitedeki sayfaları aynı anda değiştirecektir. Tüm projenize ortak olan stillleri böyle ayrı dosyada saklamalısınız.


Dahili CSS kodları

Dahili CSS kodları kullanım şeklinde ise sadece bulunduğunuz HTML sayfaya etki edecek stil kurallarını sayfanın HTML kodunda <head> kısmına toplarsınız. Öncelikle daha önceki dış dosya başvurusunu yapan <link> elemanını yoruma çıkartalım.

    <head>
        <meta charset="utf-8">
        <title>Örnek Web Sayfam</title>
        <!--link rel="stylesheet" href="stylesheets/stilim.css"
            type="text/css"-->
    </head>

Dahili CSS tanımlamaları <style> elemanı içerisinde yapılır.

    <head>
        <meta charset="utf-8">
        <title>Örnek Web Sayfam</title>
        <!--link rel="stylesheet" href="stylesheets/stilim.css"
            type="text/css"-->
        <style>
            p {
                color: red;
            }
        </style>
    </head>

Gördüğünüz gibi <style> elemanı içinde CSS kuralımızı aynen dış dosyada yazdığımız gibi yazdık. Sadece farkı görelim diye burada rengi kırmızı seçtim.

kırmızı paragraflar

Paragraf yazıları kırmızı oldu. Her iki tekniği de kullanırsak ne olacak? diye insanın aklına takılıyor. Yukarıdaki <link> elemanını yorumdan çıkarıp aktif edersek yazıların hala daha kırmızı olduğunu görürüz. Çünkü HTML kod içinde önce dış dosyadan stil okunuyor, sonra içerdeki <style> elemanından stil okunuyor. İkinci olan geçerli olacaktır.


Satır içi CSS Kullanımı

Satır içi kullanım demek direk elemanın kodunda stil belirtmek demektir. Satır içi kullanımda stil kuralları o elemanın style bağlı özelliğine değer olarak yazılır. Başlığın rengini parlak yeşil yapalım.

    <body>
        <h1 style="color: lime;">Merhaba Dünya!</h1>
        <p>Aşağıda sevimli bir köpecik resmi var.</p>
....

Merhaba Dünya!


Birden fazla kural yazacaksanız aynı satırda yazmaya devam edebilirsiniz, iki nokta üstüste ve noktalı virgüller kodunuzu açıkça belirliyor zaten.

<h1 style="color: lime; margin-left: 100px;">Merhaba Dünya!</h1>

gibi. Satır için CSS stillleri yazılırken seçici deyim yok, zaten direk elemanın özelliğine yazılıyor. Ayrıca süslü parantezle blok yapmaya da gerek yok. Direk kurallar yazılıyor. Satır içi stiller kendisinden önce yazılmış veya çağrılmış tüm stillerin üzerine yazar. Fakat sadece o elemana özel yazınca , eğer sayfada ya da sitemizde başka sayfada aynı şekilde görünmesini istediğimiz elemanlar varsa onlara da aynı stili tekrar tekrar yazmamız gerekir. Hem HTML kodun görünümünü de gereksiz karmaşık yapıyorlar. Bu yüzden sadece bir tek elemanın bir yada iki stilini değiştirecekseniz ve bir daha da lazım olmayacağını düşünüyorsanız satır içi stil düşünün.

Devam etmeden önce index.html kodlarından dosya içi stil olan <style> elemanını ve başlığa yazdığımız satır içi style özelliğini silelim ve dış dosya olan stilim.css dosyası üzerinden stilleri denemeye devam edelim.

Birden Fazla CSS Kuralı Kullanmak

Şu anda stilim.css dosyamızda paragraflar için sadece bir kural verilmiş durumda o da color: blue; satırı. Paragraf elemanlarına daha fazla stil kuralı eklemek için sadece kuralları ard arda eklememiz yeterli.

p {
    color: blue;
    font-size: 30px;
    border: 1px solid red;
}

Merhaba Dünya!

Aşağıda sevimli bir köpecik resmi var.

Sevimli köpecik

Alınacaklar:

  • Et
  • Süt
  • Yumurta

Abdülmuttalip Uzunkavaklaraltındayataruyumazoğlu


font-size özelliğine verdiğimiz değerle paragraf yazı boyutunu 30 piksel yapıyoruz, yani bir başlık kadar büyümüş oluyor. border: 1px solid red; kuralı ise elemanın çerçeve çizgilerini bildiriyor ve 3 tane değer girilmiş. 1px çizgi kalınlığının bir piksel olduğunu bildirir. solid çizginin tipini bildiriyor, burada solid düz çizgi demek. Mesela dotted nokta nokta, dashed kesikli çizgi gibi değişik olasılıklar var. red de tabiki çizgi renk adı "#xxxxxx" şeklinde renk kodu da olabilir tabi ki.

Birden Fazla Elemana CSS Kuralı Yazmak

Seçici deyimde sadece bir tek eleman kullandık. Peki birden fazla seçicimiz olup , sayfadaki değişik değişik elemanlara aynı stili uygulamak istersek nasıl yapacağız? Söz gelimi sayafamızdaki <p>, <h1> ve <li> elemanlarının hepsine ortak bir CSS kuralı tanımlayacağız. Stil dosyamızı şöyle değiştirelim:

p, h1, li {
    color: #f00;
}

Birden fazla seçici deyimi aynı kural setinde kullanacaksak, bu seçici deyimler arasına virgül ile ayırarak yan yana yazarız. Burada sayfamızdaki p, h1 ve li elemanların hepsinin yazı rengini #f00 yapıyoruz, bu RGB formatında kırmızı renk değeri.

Merhaba Dünya!

Aşağıda sevimli bir köpecik resmi var.

Sevimli köpecik

Alınacaklar:

  • Et
  • Süt
  • Yumurta

Abdülmuttalip Uzunkavaklaraltındayataruyumazoğlu

Seçici Deyimler

Bazı basit seçici deyimleri tablomuzda görebilirsiniz.

Seçici Deyim Neyi Seçer? Örnek
Eleman Seçici Blirtilen HTML elemanı p { color: blue; }
ID Seçici Belirtilen id değerine sahip HTML elemanı. Sayfada aynı id değerinde bir tek eleman olmalı. #h-big { font-size: 60px; }
Class Seçici Belirtilen class değerine sahip HTML elemanı. Sayfada aynı class değerinde birden çok eleman olabilir. .para { font-size: 17px; }
Seçicileri Birleştirmek Birden fazla seçici deyimin seçtiği elemanların hepsini birlikte. p, h1 { margin: 30px; }
* Tüm elemanlar. * { background: yellow }

Eleman seçici deyimle daha önce bir çok örnek yaptık. id seçici ise id="değer" özelliğindeki id değeri başına # işareti eklenerek seçici deyim oluşturulur. Sayfadaki birden çok elemanı aynı kurala bağlamak isterseniz bu elemanlara class değeri verebilirsiniz. class="değer" şeklinde özellik verdiğiniz elemanları seçmek için #değer şeklinde sınıf değeri başına # karakteri ekleyerek seçici deyimi oluşturursunuz. Sayfada biden fazla seçici deyime aynı kural setini uygulamak içinse, az önce gösterdiğimiz gibi seçici deyimler arasına virgül koyarak yan yana yazarsınız. Son olarak da sayfadaki tüm HTML elemanları seçen * seçici deyimi var. * kullanarak verdiğiniz kural seti sayfadaki tüm HTML elemanlarına uygulanır.

CSS Koduna Yorum Eklemek

Yorumlar kodlarınıza eklediğiniz kod olmayan ama kendinize ve başkalarına yardımıcı olacak yorum yazılarıdır. Kod işlenirken tarayıcınız yorumları değerlendirmeye almaz. Ancak ileride kendiniz bile kodunuzu değiştirmek istediğinizde kodun o kısmına ait açıklayıcı bilgileri içinde barındırmanız çok faydalı olacaktır. Sonuçta burada verilen örnekler gibi kısa kod parçalarınız olmayacak. Binlere varan satırda kod içinde nerede ne yaptığınızı not almak size bile faydalı olacaktır.

/* Tüm h1, p, li eleman yazılarını kırmızı yap */
p, h1, li {
    color: #f00;
}

Yukarıda CSS kodu içinde bir yorum satırı eklenmiş. CSS kodunda yorumlar /* ile başlar ve */ ile biter. Bu ikisi arasına yazılan yazılar tarayıcı tarafından dikkate alınmaz. Kod satırlarının sonuna da yorum ekleyebilirsiniz.

/* Tüm h1, p, li elemanları */
p, h1, li {
    color: #f00; /* yazı rengi kırmızı*/
}

"Kodu yoruma atmak" diye bir tabir vardır. Bir şeyleri denemek için kodun bir kısmını /* ve */ arasına alıp tarayıcı tarafından işlenmeden atlanmasını sağlayabilirsiniz.

p, h1, li {
    /* color: #f00; */
    font-style: italic;
}

Örnekte color: #f00; satırı yoruma atılmış ve renk kırmızı olmadan sayfa nasıl görünüyor diye bakabilirsiniz. Beğenmezseniz yorum işaretçilerini silerek kod satırının tekrar aktif olması sağlanabilir. İhtiyaç duyarsanız birden çok satırdan oluşan yorumları da kodunuza ekleyebilirsiniz.

/*
    TEST Stilleri
    Bu dosyada CSS kod denemeleri yapıyorum
*/
p, h1, li {
    color: #f00;
    font-style: italic;
}
/* CSS kodları sonu */

Yorumları kodlarınız arasında gerekli olduğu yerlerde kullanmaya özen gösterin. "Gerekli" diyorum, çünkü burada örnek verdiğimiz çok basit kodlar için de yorum yazıp durmaya gerek yok. Ama yüzlerce satır kod yazıp, içinde kendinize tek satır yorum koymadıysanız da , yakın zamanda koda bakıp "ben burada ne yapmıştım yaa" diye kara kara düşüneceğinizi garanti edebilirim.

CSS Kutu Modeli

Tüm HTML elemanlar aslında görmediğimiz bir çerçeve içindedirler. Daha önce border CSS özelliğine değer verdiğimizde paragrafların etrafında dikdörtgen şeklinde sınır çizgileri oluşmuştu. İşte bu çerçeve o elemanın içinde olduğu kutuyu gösteriyor. Elemanların sayfada yerleştirmeleri yapılırken bu kutuya göre işlem yapılır.

CSS kutu modelinin parçaları şunlardır:

  • margin : Eleman kutusu dışında kalan boş alandır. O yönde bir sonraki elemana ya da yoksa görsel alan kenarına kadar olan boşluktur.
  • border : Eleman kutusunun sınırıdır, istenirse çizgi olarak gösterilebilir.
  • padding : Eleman kutusu sınır çizgisi ile eleman içeriğindeki yazı ya da diğer elemanları yerleştirmeden önce eleman kenarlarından bırakılacak boşluktur.
  • İçerik : Eleman içerisindeki yazılar ve başka HTML elemanlarının toplamı o elemanın içeriğini oluşturur.

Aşağıda sevimli bir köpecik resmi var.


Burada açık mavi alan paragrafın margin alanıdır. margin alanı ileride başınıza en bela olacak alan. Bir sonraki elemanın kenarına kadar olan mesafedir. Ama mesafe o elemanın sınır çizgisine göre ölçülür. Bu durumda karşı elemanın da bir margin değeri varsa , hangisi daha büyükse o kadar mesafe olur arada. İçiçe elemanlar varsa ve kapsayan dıştaki eleman bir padding değerine sahipse içteki elemanın margin değeri dıştaki elemanın sınırından ölçülür. Ama dıştaki elemanda padding yoksa o elemanın da dışındaki komşu elemana göre mesafe ayarlanır. Buna benzer bir sürü anlaması zor kurallar yüzünden margin kullanmak web geliştirmeye yeni başlayanlar için hep sorun olmuştur.

border ise kırmızı ince çizgi olarak görünen çerçeve. Elemanın kutu sınırları burasıdır aslında. padding ise paragraf içindeki yazı ile çerçeve arasında bırakılan sarı renkli iç boşluktur. Sayfanızdaki eleman kutularını görmek için şöyle bir stil girebilirisiniz:

* {
    border: 1px solid;
    margin: 0;
    padding: 5px;
}

Bir web sayfasındaki herhangi bir elemanın kutu modelini görmek için tarayıcınızın Geliştirici Araçları (Developer Tools) penceresini kullanabilirsiniz. Ayrıntısını görmek istediğiniz elemana web sayfasında sağ tıklayıp Öğeyi Denetle (Inspect Element) seçerseniz geliştirici araçları penceresi açılır ve sağ tıkladığınız eleman özellikleri gösterilir. Styles kısmında elemanın CSS stillerini hem sizin girdiğiniz hem tarayıcı default değerleri ile gösterir ve en sonunda da grafik olarak elemanın CSS kutu modeli gösterilir.

css kutu modeli

Margin Değerini Ayarlamak

margin stili elemanın dışındaki boşluğu belirler demiştik. Margin değeri tüm yönler için tek verilebildiği gibi margin-top, margin-right, margin-bottom ve margin-left olarak her yöne ayrı değer de verilebilir. margin değerleri girilirken bir, iki, üç ya da dört değerli olarak girilebilir. Değerler arasında boşluk verilir, margin: 2px 4px 3px; gibi. Aşağıda bu değer girişlerine göre elemana nasıl uygulanacağı bir tabloda gösteriliyor.

Girilen Değer Sayısı Elemana Nasıl Uygulanır
Bir Tüm dört kenara aynı değer uygulanır.
İki İlk değer üst ve alta uygulanır, ikinci değer sol ve sağa uygulanır.
Üç İlk değer üste, ikinci değer sol ve sağa, üçüncü değer alta uygulanır.
Dört Değerler sırasıyla üst, sağ, alt, ve sol taraflara uygulanır.

Genelde böyle yönler söz konusu olan değerler çoklu verildiğinde üstten başlayarak saat yönünde dönülür. Bir sonraki nesil saat ne yöne dönüyor onu da bilmez tahminim. Her şey dijital oldu.

Margin değerleri girilirken uzunluk birimi, yüzde oranı, inherit kelimesi ya da auto kelimesi olarak girilebilir.

  • Uzunluk birimi : Bu şekilde değer girilince margin sabit bir mesafe olarak ayarlanır. Daha önce örneklerde piksel olarak mesafe olan px birimi ile verilen değerler görmüştük. cm, mm, pt gibi başka birimler de kullanılır. Google'a "CSS units" diyerek aratabilirsiniz.
  • Yüzde oranı : Elemanın margin değerini onu çevreleyen elemanın genişliği ile orantılı bir değere ayarlar. Çevreleyen elemanın boyutları değiştikçe içteki elemanın da margin değeri orantılı olarak otomatik değişir.
  • inherit kelimesi : Elemanın margin değeri içinde bulunduğu elemanın margin değerinden kalıtım yoluyla aynısı olur.
  • auto kelimesi : Tarayıcı elemanı kendine göre otomatik bir yere koyar. Mesela genişliği sayfa genişliği olan bir elemanın genişliğini daraltıp sayfada yatay olarak ortalamak için margin: auto; yazarsanız sayfada yatay olarak ortaya gelir.

Örnek sayfamızdaki resmi ortalamak için bir <div> elemanı içine alıp yatay olarak sayfada ortalayabiliriz.

<div><img src="images/pupy.jpg" alt="Sevimli köpecik"></div>

ve stil dosyası

div {
    width: fit-content;
    margin: auto;
}

Sevimli köpecik

Önce <div> elemanın genişliğini resimin genişliğine düşürüyoruz. Sonra margin değerini auto girerek tarayıcının yatay olarak ortalamasını sağlıyoruz. Bunu bir kenara not edin , ileride çok lazım olacak.

Margin değerleri uzunluk olarak verilirse pozitif, sıfır ya da negatif değer olabilir.

CSS Padding Değeri

Padding değeri margin'e benzer ana farkı elemanın içeriği ile dış sınırı arasındaki boşluk olmasıdır. Ayrıca padding değeri negatif olamaz ve auto kelimesi kullanılamaz. Örnek sayfamızda elemanların kenarlara çok yakın olduğunu düşünürsek stil dosyasına padding ekleyerek sayfa içeriğini kenarlardan boşluk kalacak hale getirebiliriz.

body {
    padding: 50px;
}

Bu görsel alanın tüm kenarlarından içeriye 50 piksel boşluk bırakacaktır. Aynı margin benzeri olarak dört yön için padding-top, padding-right, padding-bottom ve padding-left kullanılabildiği gibi 1, 2, 3 veya 4 değerli padding özelliği de aynı margin gibi kullanılabilir.

Uzunluk birimi olarak değer kullanıldığında sıfır değer verirken yanında birim yazmaya gerek yoktur. Hangi birim olursa olsun sıfır hiç boşluk verilmeyecek demektir.

Display Özelliği

CSS display özelliği elemanın nasıl gösterileceğini belirler. Display özelliği yerleşimi kontrol etmek için kullanılabilir. Her HTML elemanın ne tür bir eleman olduğuna göre değişen bir default display değeri vardır. Birçok elemanın default display değeri block veya inline'dır.

block stil elemanlar konulduğunda yeni bir satıra yerleşirler ve bulundukları alanın tüm genişliğini işgal ederler. Paragraflar block türünde elemanlardır.

<p> elemanı display= block; default özelliğinde bir elemandır.

Paragraf - 2


Örnekte <p> elemanı çerçeve çizgisini mavi çizdirerek tüm içinde bulunduğu alana yayılmış olduğunu gösterdik. <div> elemanı da sayfalarımızda belli kısımlarını belirtmek için kullandığımız bir elemandır ve display: block; default değerine sahiptir. Çok kullanılan diğer blok elemanlar da <h1> - <h6> arası elemanlar olan başlıklar ve alt başlıklardır.

inline değere sahip elemanlar ise satır içinde kullanılan elemanlardır. display: inline; default özelliğine sahip elemanlar yerleşimde yeni bir satıra geçmeden yerleştirildiği gibi genişlikleri de içeriklerini tam kavrayacak kadar olur.

Buraya tıklayarak Github ana sayfasına gidebilirsiniz.

Örnekte görülen link elemanı <a> bunlara bir örnek. Gördüğünüz gibi yeni satıra geçmeden bulunulan yerden devam ediyor ve genişliği ancak içeriğini kapsayacak kadar. Çerçevesini kırmızı çizerek bunu simüle ettik. Daha önce gördüğümüz resim ekleme elemanı <img> elemanı da inline değere sahip bir elemandır.

puppy inline

Yeri gelmişken bir noktadan daha bahsedelim. Daha önce bir örnekte , sayfamızdaki resmi yatay olarak ortalamak için bir <div> elemanı içine koymuştuk. Sebebi aslında display: block; olan elemanlara margin: auto; dediğinizde tarayıcı elemanı sayfa ortasına getirir. Bu durumda <div> elemanı içine koymadan da resmi ortalayabiliriz. Resim için şöyle bir stil seti yazalım:

img {
    display: block;
    margin: auto;
}
centered picture

Önce <img> elemanının default display: inline; olan CSS özelliğine block değeri veriyoruz. Sonra margin: auto; ile resmin tarayıcı tarafından ortalanmasını sağlıyoruz. bunu da bir kenara yazın. Bu ortalma işi çok lazım oluyor.

Sayfa Başlığı Stillendirme

stilim.css dosyamıza şu stil setlerini girerek sayfamızı biraz renklendirelim.

html {
    background-color: aqua;
}

body {
    background-color: yellow;
    margin: auto;
    padding: 0 20px 20px 20px;
    width: 600px;
    border: 4px solid black;
}

p, li {
    font-size: 25px;
    letter-spacing: 1px;
    color: blue;
}

Merhaba Dünya!

Aşağıda sevimli bir köpecik resmi var.

Sevimli köpecik

Alınacaklar:


CSS kurallarında yeni olan birtek letter-spacing: 1px; var herhalde. Yazı harfleri arasında bir boşluk bırakıyoruz ve azıcık ayrık olsunlar, okuması kolay olur.

Gelelim başlık için yapacaklarımıza. Önce biraz büyütelim ve yazısını ortalayalım.

h1 {
    font-size: 65px;
    text-align: center;
}

Merhaba Dünya!

Aşağıda sevimli bir köpecik resmi var.

Sevimli köpecik

Alınacaklar:


text-align: center; CSS kuralı ile <h1> elemanı içindeki yazı ortalanıyor. Bildiğiniz gibi <h1> elemanı display: block; elemanlardan biri, bu yüzden genişliği tüm alana yayılıyor. Böyle blok elemanlarda içerik tüm genişliği kaplamamışsa text-align stil kuralı ile içeriği sağa, sola, ortaya çekebilirsiniz.

Başlığın üzerinde üst kenara kadar bir boşluk var. Bunun sebebi tarayıcılarda her HTML eleman türü için default bazı stiller olması. h1 elemanı üzerindeki boşluk da default margin değerleri yüzünden oluşuyor. Bunları da sıfırlayalım.

h1 {
    font-size: 65px;
    text-align: center;
    margin: 0;
}

Merhaba Dünya!

Aşağıda sevimli bir köpecik resmi var.

Sevimli köpecik

Alınacaklar:


Şimdide başlığı renklendirip biraz gölge verelim.

h1 {
    font-size: 65px;
    text-align: center;
    margin: 0;
    color: deepskyblue;
    text-shadow: 3px 3px 1px black;
}

Merhaba Dünya!

Aşağıda sevimli bir köpecik resmi var.

Sevimli köpecik

Alınacaklar:


text-shadow özelliği yazının arkasına aynısından bir tane daha kopya koyarak 3 boyutlu gibi görünüm sağlar. Parametrelerini inceleyelim.

  • İlk parametre (3px) gölge yazının esas yazının ne kadar sağına konacağı bilgisi. Yani gölge orjinal yazıdan 3 piksel sağda olacak. İlk değere negatif ölçü verilirse orjinal yazının solunda gölge konacaktır.
  • İkinci değer (3px) gölge yazının esas yazının ne kadar altına konacağı bilgisi. Yani gölge orjinal yazıdan 3 piksel aşağıda olacak. İkinci değere negatif ölçü verilirse orjinal yazının üzerine doğru gölge konacaktır.
  • Üçüncü değer ise blur denilen buğulandırma değeri. Burada verilen değer ne kadar büyükse gölge o kadar dağıtılarak bulanık bir görünüm oluşturulur. Burada 1 piksel değer verilerek gölgenin sadece birazcık bulanık olması sağlanmış. Değişik değerler deneyerek etkisini görebilirsiniz.
  • Dördüncü değer ise gölgenin rengi. Burada siyah seçtik.

CSS Font Özellikleri

CSS font özellikleri ile yazı tipi ailesi, boyutu, yazı koyuluğu ve yazı stili belirlenir. Yazı tip adını belirtmek için font-family özelliği kullanılır. Örnek web sayfamızda paragrafın birinin font özellikleri ile örnekler yapalım. Öncelikle paragrafın birine class değeri vererek sadece onu seçelim.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Örnek Web Sayfam</title>
        <link rel="stylesheet" href="stylesheets/stilim.css"
            type="text/css">
    </head>
    <body>
        <h1>Merhaba Dünya!</h1>
        <p>Aşağıda sevimli bir köpecik resmi var.</p>
        <img src="images/pupy.jpg" alt="Sevimli köpecik">
        <p class="para">Alınacaklar:</p>
        <ul>
            <li>Et</li><li>Süt</li><li>Yumurta</li>
        </ul>
        <p>
            Abdülmuttalip Uzunkavaklaraltındayataruyumazoğlu
        </p>
    </body>
</html>

Listenin üzerindeki paragrafa class="para" değeri vererek diğerlerinden ayrılmasını sağlıyoruz. Şimdi stilim.css dosyamızı da değiştirelim.

.para {
    color: blue;
    font-size: 25px;
    font-family: Arial, Helvetica, Times;
}

html {
    background-color: aqua;
}

body {
    background-color: yellow;
    margin: auto;
    padding: 0 20px 20px 20px;
    width: 600px;
    border: 4px solid black;
}

p, li {
    letter-spacing: 1px;
}

h1 {
    font-size: 65px;
    text-align: center;
    margin: 0;
    color: deepskyblue;
    text-shadow: 3px 3px 1px black;
}

Alınacaklar:

  • Et
  • Süt
  • Yumurta

Abdülmuttalip Uzunkavaklaraltındayataruyumazoğlu


Stil dosyasını da yukarıda gösterilen hale getirin ki aynı şeyleri konuşuyor olalım. Burada .para sınıf değerine sahip paragrafta 2 tane font özelliği kullanılıyor. font-family: Arial, Helvetica, Times; özelliği yazı tipi ailesini belirtiyor. Burada verilen 3 değer aralarında virgül konarak ayrılmış. Bunun sebebi yazı tip aile isimleri birden fazla kelimeden oluşup aralarında boşluk olabiliyor. Bu nedenle şimdiye kadar gördüğümüz diğer CSS özelliğine çoklu değer girme tekniği dışında font-family için, değerler virgül ile ayrışır.

font-family özelliğinde 3 tane yazı ailesi adı verilmiş - Arial, Helvetica ve Times. Tarayıcı bu yazıyı gösterirken ilk verilenden itibaren hangi yazı ailesi elinde varsa onunla yazıyı kullanıcıya gösterir. Yani önce sisteminde varsa Arial, yoksa Helvetice, o da yoksa Times tipi yazı olarak gösterilecektir. Yazıların görünümü ve ekranda kapladıkları alan yazının ailesine çok bağlı olduğu için bu şekilde o olmazsa bu olsun şeklinde değer girme imkanı verilmiş. Burada örnekte verilen yazı aileleri görsel ve boyutsal olarak birbirlerine oldukça benzerdir mesela.

Eğer yazınızın eğik olmasını istiyorsanız font-style özelliği kullanırsınız. Aşağıdaki paragrafa bir id verip onu da eğik yazı yapalım.

....
        <ul>
            <li>Et</li><li>Süt</li><li>Yumurta</li>
        </ul>
        <p id="yazar">
            Abdülmuttalip Uzunkavaklaraltındayataruyumazoğlu
        </p>
....

....

#yazar {
    font-style: italic;
}

Alınacaklar:

  • Et
  • Süt
  • Yumurta

Abdülmuttalip Uzunkavaklaraltındayataruyumazoğlu


Eğer yazınızın koyuluk miktarını değiştirmek isterseniz font-weight özelliğini kullanırsınız.

.para {
    color: blue;
    font-size: 25px;
    font-family: Arial, Helvetica, Times;
    font-weight: bold;
}

Alınacaklar:

  • Et
  • Süt
  • Yumurta

Abdülmuttalip Uzunkavaklaraltındayataruyumazoğlu


font-weight özelliğine değer olarak 100-900 arası yüzer artan değerlerden birini verebilirsiniz. Değer arttıkça resim koyulaşır. Örnek gerekirse 400 değeri normal yazıdır, 700 ise bizim bold dediğimiz koyu yazıdır. İsim olarak değerlerde ise lighter, normal, bolder, bold gibi değerleri var. Buarada verilen özelliklerin olası değerleri için internet araması yapmanızı tavsiye ederim. Çünkü olasılıklar o kadar fazla ki, burada hepsini görmeye kalksak konumuzdan koparız. Mesela bu özellik için internette "font-weight values" diye arama yaparak olası değerler ve örnekler bulabilirsiniz.

Google Fonts

Google font tipleri son zamanlarda web tasarımcıları tarafından sık kullanılmaya başladı. http://fonts.google.com adresinde bunları görebilirsiniz. Sitede birçok font örnekleri var , bunlara bir göz atın. Yukarıda search kutusunda daha önceden bildiğiniz bir font da arayabilirsiniz. Mesela "Open Sans" font tipini arayalım. Bulunan yazı tipinin üzerine tıklayınca ona ait açıklama sayfasına gidilir. Bu sayfada söz konusu font için italic, bold vs her stilde nasıl göründüğüne dair örnekler var. Size tavsiyen yukarıda "Type here to preview text" kısmına Türkçe karakterler yazıp o font'un Türkçe'ye uyumlu olmasını mutlaka test edin.

Burada bulduğunuz font'u web sayfanızda nasıl kullanacağınızı https://developers.google.com/fonts/docs/getting_started sayfası açıklıyor. Sayfada biraz aşağıya inersek bize HTML sayfa kodumuzun <head> kısmına şöyle bir bağlantı eklememizi söylüyor:

<link rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Font+Name">

Bizim font adımız "Open Sans" olduğuna göre sayfamızın <head> kısmına şunu yazacağız:

    <head>
        <meta charset="utf-8">
        <title>Örnek Web Sayfam</title>
        <link rel="stylesheet" href="stylesheets/stilim.css"
            type="text/css">
        <link rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Open+Sans">
    </head>

Birden fazla kelimeden oluşan font ismimiz varsa kelimeler arasında boşluk vermeyip (+) artı işareti koyuyoruz. Web adreslerinde boşluk karakteri kullanılmaz. Şimdi tüm HTML sayfamızda bu font kullanılsın diye stilim.css dosyamızda html elemanı kural setine ilave yapalım.

html {
    background-color: aqua;
    font-family: Open Sans;
}

Merhaba Dünya!

Aşağıda sevimli bir köpecik resmi var.

Sevimli köpecik

Alınacaklar:

  • Et
  • Süt
  • Yumurta

Abdülmuttalip Uzunkavaklaraltındayataruyumazoğlu


Evet. Bu yazı oldukça berrak bir yazı, sevdim kendisini. Dikkat ettiyseniz font adımız 2 kelimeden oluşuyor ve değeri verirken içinde boşluk var. İşte bu sebeple font-family özelliğine birden fazla değer girilirken , değerler arasında boşluk değil virgül konması istenmiş. İkinici bir font adı ekleyelim.

html {
    background-color: aqua;
    font-family: Open Sans, sans-serif;
}

Kodumuz daha düzenli görünsün diye şöyle de yazılabilir:

html {
    background-color: aqua;
    font-family: "Open Sans", sans-serif;
}

Tercih sizin.

Yerleşim Deyimleri


Yukarıda yerleşim için kullanılan deyimlere örnekler verilmiş. Bunlar bir HTML elemanın sayfanızda nasıl görüneceği ve nereye yerleştirileceği ile ilgili CSS kuralları. Web geliştirmesi yaptığınız müddetçe yerleşim ile ilgili CSS ve stil odaklı JavaScript kodlarını öğrenme döneminiz hiç bitmeyecek, sürekli yeni teknikler gelişiyor. Biz burada gösterilen temel CSS kurallarına bir bakalım.

position özelliği ile başlıyoruz. Bir elemanın position özelliğinin aldığı değere göre yerleşimde nereye konacağı tayin edilir. İlk örnek olan position: relative; ile HTML elemanın normalde olması gereken yere göre yerleştirileceği belirtilir. Burada anlatılmak istenen position: relative; olan eleman , daha sonra gelecek özelliklerde verilen top, right, bottom veya left özelliklerine göre belirtilen taraftan sabit bir mesafe ile konumlandırılacaktır.

<div class="div1"><div class="div2"></div></div>
<div class="div3"><div class="div4"></div></div>
<style>
    #test13 .div1, #test13 .div3 {
        background-color: yellow;
        width: 150px;
        height: 150px;
        margin: 10px;
    }
    #test13 .div2, #test13 .div4 {
        background-color: lime;
        width: 100px;
        height: 100px;
        position: relative;
        top: 25px;
    }
    #test13 .div2 {left: 25px;}
    #test13 .div4 {left: -25px;}
</style>

Gördüğünüz gibi içiçe 2 kutudan içteki dıştakinin sol üst köşesine yapışık pozisyonlanır. Her iki içteki kutuda da top: 25px; ile yukarıdan 25 piksel içeride monte edileceği belirtiliyor. Her iki <div> elemanına farklı left değerleri verdik. Göründüğü üzere negatif değer verince eleman kendisini içeren elemanın dışına monte edilebiliyor.

position: absolute; ise elemenın kapsayan üst elemanlar içinde en yakın position özellikli elemana göre sabitlenir. Bulamazsa en son <body> elemanına göre sabit pozisyonda yerleştirilir.

<div class="div1"><div class="div2"><div class="div3"></div></div></div>
<style>
    #test14 .div1 {
        background-color: yellow;
        width: 150px;
        height: 150px;
        margin: 0 50px;
        position: relative;
    }
    #test14 .div2 {
        background-color: lime;
        width: 100px;
        height: 100px;
    }
    #test14 .div3 {
        background-color: blue;
        width: 75px;
        height: 75px;
        position: absolute;
        right: 25px;
    }
</style>

Örnekte içiçe 3 tane <div> elemanı var. En içteki mavi eleman position: absolute; özelliğe sahip ve right: 25px; ile sağdan 25 piksel içerde kalacağı belirtilmiş. Ama dikkat ederseniz içinde olduğu yeşil kutuya göre değil en dıştaki sarı kutuya göre konumlandırılmış. Çünkü yeşil kutuda position özelliği kullanılmamış, bu yüzden bir dıştaki elemana geçiyor ve onda position özelliği kullanılmış. Üst elemanın position değerinin ne olduğu önemli değil. İçteki position: absolute; olan eleman sadece dıştaki position özelliği olan elemanı arıyor (Tabii ki geçerli bir değere sahip olması gerekiyor).

.
.
inline elemanlar içeriği kapsayacak kadar
inline-block elemanlara width ve height değeri verilebilir.
.
block elemanlar tüm genişliği kaplar. width özelliği verilse dahi

Yukarıda ise display özelliğine örnekler var. İlk grupta 2 tane display: inline; değere sahip eleman var. inline elemanlar sadece içeriklerini kapsayacak kadar büyükliükte olurlar. Bunlara widht veya height özelliği ile boyut verilse bile etkili olmaz. Elemanlar yan yana geldiği gibi arkalarından gelen açıklayıcı yazı da yanlarında devam eder şekilde yerleşmiş.

İkinci grupta ise display: inline-block; olan iki eleman var. Bunlara boyut verilebilir ve yerleşimde yan yana monte edilirler. Dikkat ederseniz açıklayıcı yazı da yanlarına devam etmiş.

Son grupta ise display: block; olan 2 eleman var. Bunlara boyutlandırma verilmezse ilki gibi içeriği çok az olmasına rağmen tüm genişliği kaplar. width ve height ile boyutlandırma yapsanız bile görüntüde yanı boş olduğu halde teorik olarak tüm genişliği kaplayarak yanına eleman almaz. Bu yüzden açıklayıcı yazı mecburen alt satıra yerleşiyor.

<p><img src="images/pupy.jpg" class="float-right">Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
    egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est,
    ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
    aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent
    convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum
    nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis
    imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis.
    Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
    porta. Cras ac leo purus. Mauris quis diam velit.</p>
<style>
    .float-right {
        float: right;
    }
</style>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.


Yukarıdaki örnekte float özelliğinin kullanımı görülüyor. Normalde paragraf içindeki resim sol üst köşede yer alacak yazılar geri kalan alana yazılacaktı. float: right; stili önce resmi alanın sağ tarafına çekiyor, geri kalan içerik ondan kalan boş alana yerleşiyor. Geri kalan içerik dedim, mesela şu kodu deneyin:

<p>Lorem ipsum dolor sit amet,<img src="images/pupy.jpg" class="float-right"> consectetur
    adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
    egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est,
    ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
    aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent
    convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum
    nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis
    imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis.
    Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
    porta. Cras ac leo purus. Mauris quis diam velit.</p>
<style>
    .float-right {
        float: right;
    }
</style>

Resimden önce de yazılar olmasına rağmen görüntü aynı oldu. Çünkü önce resim sağ tarafa kaydırılıyor ve geri kalan içerik alanın boş kalan kısmına dağıtılıyor.

clear: both; özelliği de float özelliğine bağlı bir özellik. Bir elemanın sağında ya da solunda az önce gösterilen gibi float değerli eleman yerleşmesini istemiyorsak clear ile elemanın o tarafının işgal edilmesini engelleriz.

<div style="width: 50px; height: 50px; float: left; background: yellow;" ></div>
<div style="width: 90px; height: 90px; float: right; background: blue;" ></div>
<p style="clear: left;">Bu yazı soluna float eleman alamaz. Ama sağında olabilir.
Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. </p>

Bu yazı soluna float eleman alamaz. Ama sağında olabilir. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.


overflow: hidden; ise alanın dışına taşan içeriğin ne olacağını belirtiyor. hidden değeri taşan içeriğin gösterilmeyeceğini belirtiyor. Bu genelde boyutu belirtilmiş elemanlarda içeriğin eleman boyutundan dışarı taşmasını engellemek içindir.

<div style="width:150px; height: 150px; overflow: hidden;" >
    Phasellus imperdiet, nulla et dictum interdum, nisi lorem
    egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est,
    ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
    aliquet.
</div>
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.

Örnekte çok uzun olan yazının eleman dışına taşan kısmı görünmez yapılıyor, ancak alanın aldığı kadarı gösteriliyor.Default değer overflow: visible; ve böyle bırakılırsa yazılar eleman dışına taşar.

Bir HTML eleman için position bilgisi verilmemişse aslında o eleman position: static; değerine sahiptir. Tüm elemanlar başlangıçta Statik Pozisyon değerine sahiptir.



Relative Pozisyon Hakkında Biraz Daha

Relative pozisyonlama HTML elemanın normalde olması gereken konuma göre kaydırılmasıdır. position: relative; olan bir eleman bunun yanında top, right, bottom ya da left özelliklerinden en az biri verilmeden bir anlam ifade etmez.

<div class="d-blue"></div>
<div class="d-green"></div>
<div class="d-blue"></div>
<div class="d-blue"></div>
<style>
    div {
        display: inline-block;
        width: 100px; height: 100px;
        margin: 20px;
    }
    .d-blue { background-color: deepskyblue; }
    .d-green {
        background-color: chartreuse;
    }
</style>

Yukarıda örnekte verilen 4 kutudan yeşil olana reletive pozisyon verelim.

<div class="d-blue"></div>
<div class="d-green"></div>
<div class="d-blue"></div>
<div class="d-blue"></div>
<style>
    #test20 div {
        display: inline-block;
        width: 100px; height: 100px;
        margin: 20px;
    }
    #test20 .d-blue { background-color: deepskyblue; }
    #test20 .d-green {
        background-color: chartreuse;
        position: relative;
        top: 35px; left: 35px;
    }
</style>

Görüldüğü gibi yeşil kutu olması gereken yere göre kaydırılarak top: 35px; ile yukarıdan ve left: 35px; ile soldan 35'er piksel içeriye konumlanmış. Bir diğer dikkatinizi çekmek istediğimi nokta , görünen elemanların margin ve padding değerleri hala yeşil kutunun orjinalde olması gereken konuma göre çalışıyor. Diğer elemanlar yeşil kutuyu kaydırmamız sonucu oluşan boşluğa doğru kaymıyor ya da "bu yeşil benim çok üzerime geldi" deyip ondan uzaklaşmıyor, daha önceki pozisyonlarını koruyorlar.

Relative pozisyonlamayı diğer elemanların konumunu etkilemeden sadece bir elemanı sağa, sola, yukarı veya aşağı kaydırmak gerektiğinde öncelikle hatırlayınız lütfen.



Display Özelliği İncelemesi

display özelliği elemanın nasıl gösterileceği hakkında bilgi verir. Her HTML eleman default olarak block ya da inline elemandır.

<a href="images/lale.jpg">
    <img src="images/lale.jpg" width="230" height="150">
</a>
<a href="images/denizana.jpg">
    <img src="images/denizana.jpg" width="230" height="150">
</a>
<a href="images/penguen.jpg">
    <img src="images/penguen.jpg" width="230" height="150">
</a>
<h1>Meyveler</h1>
<p>Sebzeler</p>

Meyveler

Sebzeler


Örnekte gördüğünüz <img> elemanları display: inline; olan elemanlar. <h1> ve <p> elemanları ise display: block; olan elemanlar. block değerli elemanlar her zaman yeni bir satıra yerleşirler. <div>'ler, <h1>'den <h6>'ya başlıklar ve <p> paragraflar en yaygın kullanılan block değerli elemanlar.

inline elemanlar ise yeni bir satır başlatmazlar ve yan yana dizilirler. En yaygın inline elemanlara örnek olarak <img>, <a> ve <span> elemanları gösterilebilir. Blok elemanlar içerikleri çok küçük olsa bile tüm genişliği kaplar. Bunu görmek için örneğimizdeki başlık ve paragrafın arka rengini değiştirelim.

<a href="images/lale.jpg">
    <img src="images/lale.jpg" width="230" height="150">
</a>
<a href="images/denizana.jpg">
    <img src="images/denizana.jpg" width="230" height="150">
</a>
<a href="images/penguen.jpg">
    <img src="images/penguen.jpg" width="230" height="150">
</a>
<h1>Meyveler</h1>
<p>Sebzeler</p>
<style>
    h1, p {
        background-color: yellow;
    }
</style>

Meyveler

Sebzeler


Gördüğünüz gibi içerikleri çok az yer kaplamasına rağmen tüm yatay alana yayılıyorlar. Genişlikleri kısıtlanmış olsa bile yan yana yerleşmezler.

<style>
    h1, p {
        background-color: yellow;
        width: 250px;
    }
</style>

Meyveler

Sebzeler


Hala tüm satırı kaplıyormuş gibi alt alta yerleşiyorlar. Yan yana koyabilmenin tek yolu onlara display: inline; stil vermektir.



Overflow İncelemesi

Büyüklüğü sınırlı elemanların içerikleri boyutlarını aşrsa nasıl gösterileceğini overflow özelliği belirler. Bir örnekle başlayalım.

<div class="temizlenecek">
    <img src="images/lale.jpg" width="250">
    Bu yazı CSS float ve clear özellikleri göstermek içindir. <br>
    Bu yazı CSS float ve clear özellikleri göstermek içindir. <br>
    Bu yazı CSS float ve clear özellikleri göstermek içindir.
</div>
<style>
    img { float: right; }
    div { border: 5px solid blue; }
</style>
Bu yazı CSS float ve clear özellikleri göstermek içindir.
Bu yazı CSS float ve clear özellikleri göstermek içindir.
Bu yazı CSS float ve clear özellikleri göstermek içindir.

<div> elemanın yüksekliğini içeriğindeki yazılar belirliyor. Ama yine aynı elemanın içinde olması gereken resim eleman sınırları dışına taşmış. Bu taşmaları düzenlemek için overflow özelliği kullanılarak bu taşan elemanın nasıl gösterileceği belirlenir. Olası değerler şöyle:

  • visible : Bu default eleman overflow değeridir. Taşma olursa eleman görünmeye devam edecek demektir. Örneğimiz zaten şu anda bu default değer sayesinde taşmış olarak görünüyor.
  • hidden : Elemanın dışarı taşan içeriği kırpılıp gösterilmez. Ama script yoluyla programsal olarak kaydırma yapılarak geri kalan kısım gösterilebilir.
  • clip : Elemanın dışarı taşan içeriği kırpılıp gösterilmez. Programsal olarak da görünmesi sağlanamaz.
  • scroll : Taşan kısım kırpılır ama eleman kenarına konan kaydırma çubuğu ile taşan kısıma görüntü kaydırılabilir.
  • auto : Taşan kısıma göre mümkünse eleman boyutu değişir, mümkün değilse kenarı kaydırma çubuğu gelir.
<div class="temizlenecek">
    <img src="images/lale.jpg" width="250">
    Bu yazı CSS float ve clear özellikleri göstermek içindir. <br>
    Bu yazı CSS float ve clear özellikleri göstermek içindir. <br>
    Bu yazı CSS float ve clear özellikleri göstermek içindir.
</div>
<style>
    img { float: right; }
    div { border: 5px solid blue; }
    .temizlenecek { overflow: auto; }
</style>
Bu yazı CSS float ve clear özellikleri göstermek içindir.
Bu yazı CSS float ve clear özellikleri göstermek içindir.
Bu yazı CSS float ve clear özellikleri göstermek içindir.

Ama boyut uzatılamazsa:

<div class="temizlenecek">
    <img src="images/lale.jpg" width="250">
    Bu yazı CSS float ve clear özellikleri göstermek içindir. <br>
    Bu yazı CSS float ve clear özellikleri göstermek içindir. <br>
    Bu yazı CSS float ve clear özellikleri göstermek içindir.
</div>
<style>
    #test25 img { float: right; }
    #test25 div { border: 5px solid blue; }
    #test25 .temizlenecek { height: 100px; overflow: auto; }
</style>
Bu yazı CSS float ve clear özellikleri göstermek içindir.
Bu yazı CSS float ve clear özellikleri göstermek içindir.
Bu yazı CSS float ve clear özellikleri göstermek içindir.


Fixed Pozisyon

Bazı web sayfalarında sayfada aşağı yukarı gezinirken bazı içeriklerin görsel alandaki yerlerini koruduklarını görürsünüz. Bu sayfanın en üstündeki özlü sözü gösteren bant ve solda sabit duran menüler gibi. Bu elemanlar position: fixed; değerine sahipler.

#fixed-elm {
    position: fixed;
    left: 20px;
    top: 150px;
}

Örnekte verilen stile göre id="fixed-elm" özelliğine sahip eleman görsel alanın sol kenarından 20 piksel, üst kenarından 150 piksel içeriye sol üst köşesi gelecek şekilde konumlanacaktır ve sayfada aşağı doğru kaydıkça sürekli görünmeye devam edecektir.

Z-Index Değeri

Web sayfasında elemanlar bir sebeple üst üste çakışırsa hangisinin öne gelip görünür olacağını z-index özelliği belirler. Bu değere pozitif ya da negatif değer verilebilir. Çakışmalarda z-index değeri daha büyük olan görünümde öne gelecektir. Değer verilmezse ya da aynı olursa HTML kod içinde daha sonra girilen eleman öne gelecektir.

Koordinat sistemini düşündüğünüzde X sağa-sola yönde, Y yukarı-aşağı yöndeyse Z sayfadan bize doğru gelen eksen olacaktır. Z-Index denme sebebi budur. Z-Index özelliği absolute, relative ve fixed pozisyonlu elemanlara uygulanır. Bir örnek verelim.

<h1>Resime z-index verilecek</h1>
<img src="images/lale.jpg" width="200">
<p>Örnek bir paragraf yazısı.</p>
<p>Örnek bir başka paragraf yazısı.</p>
<style>
    img {
        position: absolute;
        top: 10px; left: 50px;
    }
</style>

Resime z-index verilecek

Örnek bir paragraf yazısı.

Örnek bir başka paragraf yazısı.


Resim konumlanınca diğer yazıların üzerine geliyor. Ben yazıların altında kalsın istersem negatif bir z-index değeri vererek sağlarım.

<h1>Resime z-index verilecek</h1>
<img src="images/lale.jpg" width="200">
<p>Örnek bir paragraf yazısı.</p>
<p>Örnek bir başka paragraf yazısı.</p>
<style>
    #test27 img {
        position: absolute;
        top: 10px; left: 50px;
        z-index: -1;
    }
</style>

Resime z-index verilecek

Örnek bir paragraf yazısı.

Örnek bir başka paragraf yazısı.


Buraya kadar CSS şekillendirmeler üzerinde oldukça kapsamlı bir inceleme yaptık. Bütün bunları öğrenmeniz , anlamanız , test edip sindirmeniz çok önemli. Bu noktadan sonra böyle elemanları tek tek şekillendirmek yerine hazır CSS kütüphanelerinden en yaygını olan Bootstrap ile stil verme işlemini nasıl hızlandıracağımızı göreceğiz. Bu sayfayı burada bitirip sonraki sayfada devam edelim.


< 2. Bölüm 4. Bölüm >

.

.