CSS Notları
Bu notlar Adem İlter'in CSS Eğitimi ile paralel olarak hazırlanmıştır. Başlangıç düzeyinde CSS bilgisi olan ya da mevcut bilgilerini sağlamlaştırmak isteyenlere hızlı referans olması için hazırlanmıştır.
Html Yapısı, Inline ve Block Elementler
div
vep
display
değeridisplay:block
olarak gelir.inline
elemana bazı özellikler tanımlanamaz:height
gibi. Bunu yapabilmek içindisplay: inline-block
olarak display seçimi yapılması gerekir.- En çok kullanılan display stilleri:
block
,inline-block
,inline
- Tarayıcı geliştirici kısmındaki computed kısmı varsayılan değerleri ifade eder
Semantik HTML ve CSS Yazma Yöntemleri
- Google’da SEO kaygısından dolayı semantik html tagleri kullanıyoruz.
Basit Seçiciler
- CSS yukarıdan aşağıya doğru kod okuma yapar.
*
=> Bu seçici universal selector olarak geçer. Sayfadaki herşeyi kapsar.- Type seçici html elementlerini seçer:
body {
}
- Class seçici ise html etiketlerine atanan classları seçer
.btn {
}
- Id seçici ise sayfadaki tekil olan bir anahtarı seçer
#my-unique-btn {
}
- Attribute selector:
[class] {
color: red;
}
html etiketlerine atanan attribute'leri seçer.
Not: <h1>
sayfada bir tane bulunmalı.
Form Elemanları
label
input idsine göre ilerler- eğer input labelın içine yazılırsa inputa id yazmaya gerek kalmaz
- input tiplerini text olarak bırakmamak gerekiyor. İlgili tipi yazmak daha doğru olur:
email
,tel
, vb. - radio butonlarda
name
mevcutsa butonlardan yalnızca birini seçer - form etiketinin default methodu
get
tir - form elemanlarının başarılı bir şekilde post işlemi yapabilmesi için
name
'i olması gerekiyor. - formda görünmesini istemediğiniz dataları input type hidden olarak kodlayabiliriz.
display: inline
ise margin değerlerini almaz
Box Sizing (Kutu Modeli)
- default değeri
content-box
tur - sonrasında
* {
box-sizing: border-box;
}
olarak değiştirilmelidir.
Reset.css ve Normalize.css - Sıfırdan HTML ve CSS Eğitimi
- Tarayıcı farklılıklarını ve ön tanımlı gelen Css ayarlarını sıfırlar
- Tarayıcı tarafından ön tanımlı gelen ayarlar
user agent stylesheet
altında yer alır. DevToolsta çalışırken buna dikkat etmek gerekir. - Reset.css ön tanımlı gelen ayarları sıfırlar, normalize.css ise hepsini sıfırlamak yerine tarayıcı farklılıklarını ortadan kaldırır.
- Normalize daha yaygın kullanılıyor. CSS dosyalarınızın en üstüne aşağıdaki gibi dah'l edilmeli :
@import https: //necolas.github.io/normalize.css/8.0.1/normalize.css;; ; ; ; ;
Kısayol Tanımlamalar
padding
,margin
gibi özellikler tanımlanırken kısayol tanımlama yapılabilir:
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 30px;
/* Yukarıdaki kullanım yerine aşağıdaki gibi kısayol padding tanımlama yapılabilir. */
padding: 10px 20px 10px 30px;
/* Bu şekildeki kısayol tanımlamalarını CSS saat yönünde okur.
1. değer: yukarı
2. değer: sağa
3. değer: aşağı
4. değer: sola */
- aynı şekilde
border
,background
gibi özelliklerde de kısayollar kullanılabilir. Detaylı bilgi için w3schools bakmalısınız.
Renk Değerleri ve currentColor
- CSS3 ile birlikte 147 tane ön tanımlı renk ismi yazabiliyoruz.
rgba
=> buradakia
alphayı temsil eder ve verdiğiniz değerin saydamlığını ayarlayabilirsiniz.- mevcut color rengi border rengi olarak kullanılabilir(inheritance)
background-color: transparent
olarak kodladığımızda backgroundtaki rengi alabiliriz.
Temel Ölçü Birimleri
px
=> Verdiğiniz değer ne ise ekranda da aynı şekilde görünürem
=> Font size değerirem
=> root em, kapsayıcıya bakmadan roottaki değere bakar%
=> kapsayıcının yüzdesi kadar
Tarayıcın çalıştığı ekran büyüklüğüne göre ölçü birimleri
vh
vw
vmin
vmax
Görünüm Özellikleri
display:none
=> Ekrana yüklenmezvisibility:hidden
=> Ekrana yüklenir, görüntülenmezopacity: 0
neredeysevisibility:hidden
aynı duruma gelir
fotoğrafların görünümleri kapanmasına rağmen networke yüklenir (image lazy loading
)