CSS Nedir?
CSS aslında bir HTML sayfasının nasıl görüneceğini tarif eder. Bunun içinde sayfadaki başlık, metin, resim, video gibi öğelerin görsel özelliklerinin yanı sıra, sayfa yerleşimi ve bu yerleşimin farklı ekranlardaki görünümü de ayarlanır. Aynı zamanda web siteleri üzerinde haritalama, renkler, yazı fontları ve birçok alanda fonksiyonel değişikler yapabilmenizi sağlar.
Css html dosyasında yazılıyorsa style etiketinin içerisine yazılır. Eğer farklı bir dosyada yazılıyorsa o dosyaya link verilerek projeye dahil edilir. Şimdi harici olarak css ekliyoruz. Aşağaki gibi html dosyasında link vererek main.css dosyasına yönlendiriyoruz. main. css dosyasındaki kodlar da sağ fotoğraftaki gibidir. Kodların aşağıda açıklanmıştır.
| CSS Özelliği | Örnek Değerler | Açıklama |
|---|---|---|
| color | #ff0000, rgb(255, 0, 0), blue | Metin rengini belirler. |
| font-family | “Arial”, “Helvetica”, sans-serif | Metin fontunu belirler. |
| font-size | 16px, 1.2rem, medium | Metin boyutunu belirler. |
| font-weight | normal, bold, 400 | Metnin kalınlığını belirler. |
| text-align | left, center, right, justify | Metin hizalamasını belirler. |
| background-color | #f0f0f0, rgba(0, 128, 255, 0.5), transparent | Arka plan rengini belirler. |
| width | 300px, 50%, auto | Elementin genişliğini belirler. |
| height | 200px, 50%, auto | Elementin yüksekliğini belirler. |
| padding | 10px, 20px 10px 5px 15px | Elementin iç kenar boşluğunu belirler (saat yönünde sırayla üst, sağ, alt, sol). |
| margin | 10px, 20px 10px 5px 15px | Elementin dış kenar boşluğunu belirler (saat yönünde sırayla üst, sağ, alt, sol). |
| border | 1px solid #000, 2px dashed red | Elementin kenarlık stilini ve rengini belirler. |
| display | block, inline, inline-block, flex | Elementin görüntülenme türünü belirler. |
| position | static, relative, absolute, fixed | Elementin konumlandırılma türünü belirler. |
| z-index | 1, 100, -1 | Elementin yığınlama düzenini belirler. |
| box-shadow | 2px 2px 5px #888, 0 0 10px rgba(0, 0, 0, 0.5) | Kutuya gölge ekler. |
| border-radius | 5px, 50%, 10px 20px | Elementin kenar yuvarlatma değerini belirler. |
| text-decoration | underline, line-through, none | Metin süslemelerini belirler (altı çizili, üstü çizili vb.). |
Daha ayrıntılı olarak html öğelerine verilen css özelliklerine bakalım.
- a: Linkin, sayfa açıldığında tıklanmadan veya imleç üzerine getirilmeden önceki durumudur.
- a:hover : Linkin imleç üzerine getirildiğindeki durumudur.(Arka plan rengi vs. değiştirilebilir.)
- a:active : Linkin tıklandığı andaki durumudur.
- a:visited : Linkin tıklandıktan sonraki durumudur.
- color: Öğenin rengini belirler.
- background-color: Arka plan rengini belirler.
- background-image: Arka plana resim ekler(Bu animated-gif de olabilir.)
- text-decoration: Yazının altının, üstünün vs. çizgili olup olmayacağını belirler.
- font-weight: Yazının kalınlık veya inceliğini belirler.
- font-family: Yazı türünü belirler.(Arial , Verdana gibi.)
- font-style: Yazının normal veya sağa eğik olmasını sağlar.
- font-variant: Yazının normal veya tümünün büyük harflerden oluşmuş olmasını sağlar.
- font-weight: Yazının kalınlık-inceliğini belirler.
- font-size: Yazının büyüklüğünü belirler.
- border: Öğenizin etrafına kenarlık ekler.
- display: Öğeyi içeren hücre , satır vb. istenilen alanın seçilmesini sağlar.
- position: Öğenin yerini belirlemeyi sağlar.
- absolute: Öğe sayfaya göre yani sayfanın üst kısmına göre başlangıç kabul edilir.
- relative: Öğenin bulunduğu yerden itibaren konumlanır.
- static: Öğenin yerinin sabit olarak (Varsayılan olan sol üst köşe) belirlenmesini sağlar.
- top: Öğenin üstten ne kadar aşağıda olması gerektiğini belirler.
- left: Öğenin soldan ne kadar içeride olması gerektiğini belirler.
- width: Öğenin genişliğinin ne kadar olacağını belirler.
- height: Öğenin yüksekliğinin ne kadar olacağını belirler
- overflow: Öğenin belirtilen yükseklik ve genişliğe sığmayan kısmına(taşan) ne olacağını belirler.
- auto: Otomatik olarak belirlenir.
- scroll: Kaydırma çubuğu ekleyerek görünmesini sağlar.
- visible : Katmanı belirtilen boyutların dışına taşırarak sığmayan yerlerin görünmesini sağlar.
- hidden: Sığmayan yerleri gizler.
- visibility: Öğenin görünebilirlik ayarını yapar.
- visible : Öğenin görünür olmasını sağlar.
- hidden: Öğeyi gizler.
- z-index : Öğenin alttan üste doğru hangi sıra ile gösterileceğini belirler.1 değeri katmanın en altta olacağını belirtir. Genelde üst üste binen, bir tarafın daha sönük görüneceği durumlarda kullanılır.
- margin : Öğe ile pencerenin kenarları arasında bırakılacak boşluğu belirler.
- margin-top : Öğe ile pencerenin üst kenarı arasında bırakılacak boşluğu belirler.
- margin-right : Öğe ile pencerenin sağ kenarı arasında bırakılacak boşluğu belirler.
- margin-bottom : Öğe ile pencerenin alt kenarı arasında bırakılacak boşluğu belirler.
- margin-left : Öğe ile pencerenin sol kenarı arasında bırakılacak boşluğu belirler.
- padding : Öğe kenarları ile tablo içeriği (Yazı vb.) arasında bırakılacak boşluğu belirler.
- padding-top : Öğenin üst kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
- padding-right : Öğenin sağ kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
- padding-bottom : Öğenin alt kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
- padding-left : Öğenin sol kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
- border : Öğenin kenarlarının şekillendirilmesini sağlar.
- border-top : Öğenin üst kenarının şekillendirilmesini sağlar.
- border-left : Öğenin sol kenarının şekillendirilmesini sağlar.
- border-bottom : Tablonun alt kenarının şekillendirilmesini sağlar.
- border-right : Tablonun sağ kenarının şekillendirilmesini sağlar.
- border-width : Öğenin kenarlarının kalınlığını belirler.
- border-top-width : Öğenin üst kenarının kalınlığını belirler.
- border-right-width : Öğenin sağ kenarının kalınlığını belirler.
- border-bottom-width : Öğenin alt kenarının kalınlığını belirler.
- border-left-width : Öğenin sol kenarının kalınlığını belirler.
- border-style : Öğenin kenarlık türünü belirler.
- border-top-style : Öğenin üst kenarlık türünü belirler.
- border-right-style : Öğenin sağ kenarlık türünü belirler.
- border-bottom-style : Öğenin alt kenarlık türünü belirler.
- border-left-style : Öğenin sol kenarlık türünü belirler.
- border-color : Öğenin kenarlarının rengini belirler.
- border-top-color : Öğenin üst kenarının rengini belirler.
- border-right-color : Öğenin sağ kenarının rengini belirler.
- border-bottom-color : Öğenin alt kenarının rengini belirler.
- border-left-color : Öğenin sol kenarının rengini belirler.
- border–radius: Öğenin kenarlarını ovalleştirmeyi sağlar.
!! Css ile ilgili bilmemiz gereken en önemli şeylerden biri de classlar ve id seçicileridir. Classlar, birçok öğeyi kapsayabilir fakat idler sadece tek bir öğeye verilir. Css’te classlara style verilirken başına nokta konur.(Örneğin: .div vs). Idlerde ise başına kare hashtag işareti konulur.(#kutu vs.)
Basit örnekler yapalım.
1-
Burada html içerisindeki h1 etiketinin fontunun değiştirilmesini ve yazının ortalanmasını sağladık. p etiketinin de font tipini ve yazı boyutunu değiştirdik. body ye verilen özellik ise sayfanın arka plan rengini değiştirmemizi sağladı.
2- Başka bir örnekle devam edelim.
Burada class ve id farkını görüyoruz. Tek bir class adıyla birden fazla öğeye stil verebiliyoruz. Ama idleri tek bir öğeyle sınırlandırıyoruz. Kodların açıklamasını yorum satırlarında belirttim.
3- Burada border ve paddinglerin kullanımına bakalım.
