web-programlama

Bir biçim (style) sayfasını eklemenin üç farklı yolu mevcuttur: Dış stil sayfası (External Style Sheet), İç stil sayfası (Internal Style Sheet), Çevrimiçi (Inline) stil.

Dış Stil Sayfası

Stil çok sayıda sayfaya uygulanacaksa, dış stil sayfası kullanmak uygun bir yöntemdir. Dış stil sayfasıyla, bütün web sayfasının görünümünü sadece bir tek dosyayla oynayarak gerçekleştirebilirsiniz. Her sayfa, <link> etiketiyle, stil sayfasına gönderen bir bağlantı içermelidir; <link> etiketi head bölümünün içinde olmalıdır.

Bir inline elemanını bir block elemanına değiştirmek ya da tersini yapmak, sayfanın web standartlarını koruyarak belirli bir biçimde görünmesini sağlayabilir.

Aşağıdaki örnek <li> elemanlarını bir inline eleman olarak göstermektedir:

li {
    display: inline;
}

Aşağıdaki örnek ise, <span> elemanlarını block elemanı olarak gösteriyor:

span {

    display: block;

}

Şimdi örnek kullanımını görelim:

Bir block elemanı, kullanılabilecek tüm yatay genişliği kullanan ve kendisinden önce ve sonra bir satır sonu bulunan elemandır.

Block elemanları aşağıdaki gibidir:

• <h1>
• <p>
• <li>
• <div>

Bir inline elemanı ise gerekli olduğu kadar genişleyen bir elemandır. Satır sonu zorunluluğu da yoktur.

Inline elemanlarına örnekler ise şu şekildedir:

• <span>
• <a>

Display özelliği elemanın nasıl görüntüleneceğini, visibility özelliği ise bir elemanın görünür mü yoksa gizli mi olacağını belirler.

Bir Elemanı Gizlemek

Bir elemanı gizlemek ya display özelliğini “none” yaparak ya da visibility özelliğini “hidden” yaparak gerçekleştirilir. Bununla birlikte bu iki metot farklı sonuçlar üretir:

visibility: hidden ataması elemanı gizler ancak eleman sayfada aynı yeri kaplar. Eleman gizlenecektir fakat hala genel çerçevede yer alacaktır.

CSS boyut özelliklerini belirlerken aşağıdaki tabloda yer alan değerleri kullanabilirsiniz:

CSS boyut (dimension) özellikleri bir elemanın genişlik ve yüksekliğini kontrol etmenizi sağlar.

Konuyu bir örnekle anlatamaya başlamak daha doğru olacak:

CSS padding özellikleri, e

Tek bir bildirim içinde tüm kenarlara ait paddingler atanabilir; bu da shorthand özelliğidir. Şimdi nasıl kullanıldığına bakalım:

p {
    padding: 110px 70px;
}

Gördüğünüz gibi basit şekilde atamaları yaptık, şimdi örnekleri açıklayarak inceleyelim:

• padding: 25px 50px 75px 100px;

üst padding 25px
sağ padding 50px
alt padding 75px
sol padding 100px

CSS'te, bir elemanın farklı kenarlarına farklı padding'ler atamak mümkündür. Şimdi kullanımını inceleyelim:

p {
    padding-top: 110px;
    padding-bottom: 120px;
    padding-right: 140px;
    padding-left: 70px;
}

Şimdi de bunu bir HTML belgesinde nasıl kullandığımıza bakalım:

CSS padding özellikleri, elemanların etrafındaki boşluğu tanımlar.

Padding: Padding, bir eleman etrafındaki bir alanı siler (border'ın dışında). Padding'in bir zemin rengi yoktur ve tamamı ile saydamdır. Ayrı özellikler kullanılarak, üst (top), sağ (right), alt (bottom) ve sol (left) padding'ler bağımsız olarak değiştirilebilir. Ayrıca bir kısayol (shorthand) padding'i ile tümü birden de atanabilir.