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.
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
- Google’da SEO kaygısından dolayı semantik html tagleri kullanıyoruz.
- 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ı.
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
- default değeri
content-box
tur - sonrasında
* {
box-sizing: border-box;
}
olarak değiştirilmelidir.
- 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;; ; ; ; ;
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.
- 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.
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
vh
vw
vmin
vmax
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
)