Elemanın Genişliğini Hesaplama
Toplam eleman genişliği =
Genişlik + (sol + sağ boşluk) + (sol+sağ sınır) + (sol+sağ marjin)
Elemanın Yüksekliğini Hesaplama
Toplam eleman yüksekliği =
Yükseklik + (üst+alt boşluk) + (üst +alt sınır)+ (üst+alt marjin)
Archive for the ‘CSS’ Category
- In: CSS | HTML
- Yorum Yapın
CSS kutu modeli content (içerik), padding (boşluk), border (sınır), margin (kenar mesafesi) içerir.
CSS Tablolar
Posted on: Kasım 8, 2016
- In: CSS | HTML
- Yorum Yapın
HTML’de tablo oluşturmayı daha önce anlatmıştım. Bu yazımda basitçe CSS ile tabloların tasarımını anlattım. Bildiğiniz gibi tablolar <table> etiketi ile oluşturulur. <tr> etiketi ile tabloya satır ekleriz, <td> ile de sütun ekleriz.
Basit olarak bir tablo yapalım ve tablonun border özelliğini ile border’ı belirleyelim. Ben 5px solid pink değerini verdim. Siz başka bir değer verebilirsiniz. <style></style> etiketleri arasına CSS kodumuzu yazabiliriz. Yazının devamını oku »
CSS Dış Çizgi (Outline)
Posted on: Kasım 4, 2016
- In: CSS | HTML
- Yorum Yapın
Elemanların etrafına dış çizgi çizilir.
Basit bir örnek yapalım.
Tarayıcıdaki görüntüsü
- In: CSS | HTML
- Yorum Yapın
- In: CSS | HTML
- Yorum Yapın
Liste yaparken işaretleyicileri resim yapabiliriz. Bunun için list-style-image özelliği kullanılır.
Basit bir örnek yapalım.
- In: CSS | HTML
- Yorum Yapın
Sıralanmamış ve sıralanmış listeler için list-style-type özelliği kullanılır.
Ben örnek olarak circle, square, lower-alpha, upper-latin değerlerini kullandım. Siz bunların dışındakileri de kullanabilirsiniz.
CSS Sınıf Oluşturmak
Posted on: Kasım 4, 2016
- In: CSS | HTML
- Yorum Yapın
Belirli elemanları seçili yapmak için sınıflar kullanılabilir. Sınıf oluşturmak için “.” işareti kullanılır.
Basit bir örnek yapalım.
Tarayıcıdaki görüntüsü
CSS Seçiciler (selectors)
Posted on: Kasım 4, 2016
- In: CSS | HTML
- Yorum Yapın
CSS seçiciler HTML elemanlarını seçmek için kullanılır. Bunu id, tip gibi özellikleri kullanarak sağlar.
Eleman Seçici
Elemanları etiket adlarına göre seçmek için kullanılır. Basit bir örnek yapalım. Aşağıdaki örnekte tüm <p> elemanları <style></style> etiketleri arasında yazdığımız p{ } içinde yer alan özelliklere sahip olur. Ben renklerini değiştirmiştim. Tarayıcıda açtığımızda tüm <p> elemanlarının rengi benim belirlediğim renkte oldu.
Tarayıcıdaki görüntüsü.
id Seçici
Sayfa içerisinde belirli bir elemanı seçmek için kullanılır. id önüne “#” işareti konur. Yazının devamını oku »
- In: CSS | HTML
- Yorum Yapın
Visibility Özelliği
Visibility özelliğini hidden yaparsak eleman gizlenir ama sayfada yerini kaplar.
Bir örnek yapalım. <h2> etiketli başlık için gizlenen sınıfının visibility özelliğini hidden yapalım.
Tarayıcıda açtığımızda “GİZLENEN BAŞLIK” yazısı ekranda gözükmez ama onun bulunduğu yer boşluk olarak gözükür. “CSS” yazısının h2 başlığına sahip olmasına rağmen gözükmesinin nedeni class=”gizlenen” sınıfını içermemesinden.
CSS Kodlarını Ekleme Yöntemleri (Dış stil sayfası, İç stil sayfası, Çevrimiçi stil)
Posted on: Kasım 1, 2016
- In: CSS | HTML
- Yorum Yapın
CSS kodlarını 3 şekilde ekleyebiliriz: Dış stil sayfası (External Style Sheet), İç stil sayfası (Internal Style Sheet), Çevrimiçi (Inline) stil.
1. İç Stil Sayfası
HTML sayfasının <head> kısmında <style></style> etiketleri arasına CSS kodları yazılır. Belirlenen biçim tek sayfaya uygulanacaksa kullanılabilir.
2. Dış Stil Sayfası Yazının devamını oku »
Nihal's Blog 