CSS Dokümantasyonu
Kısa ve örneklerle anlatılan CSS kaynağı. Kavramı oku, kodu gör, sonra Coddy yolculuğunda uygula.
Rehberli bir CSS yolculuğuna başlaBaşlarken
- Inline CSSInline CSS, bildirimleri style özniteliğiyle doğrudan bir elementin üzerine yazar. Söz dizimini, satır içi stilin ne zaman doğru seçim olduğunu, stil dosyalarını neden ezdiğini ve internal ile external CSS'ten farkını öğren.
- External CSSExternal CSS, her sayfanın <link rel="stylesheet"> ile bağladığı bir .css dosyasında durur; internal CSS ise tek bir sayfanın içindeki <style> elementindedir. İkisini de, dosya yollarının nasıl çalıştığını ve karşılaştıklarında hangi kuralın kazandığını öğren.
- CSS yorum satırıCSS'te tek bir yorum söz dizimi vardır: tek satır da çok satır da /* ... */ ile yazılır. Yorumların nereye yazılabildiğini, bir kuralın nasıl yoruma alındığını ve // ile iç içe yorumların bir sonraki kuralı neden sessizce bozduğunu öğren.
- !important!important, bir bildirimin özgüllükleri ne olursa olsun normal bildirimlere karşı kazanmasını sağlar. Neyi yendiğini, onu neyin yendiğini, altta özgüllüğün nasıl işlediğini ve bir stil çakışmasını kazanmanın daha temiz yollarını öğren.
- CSS değişkenleriCSS değişkenleri (custom properties) bir değeri bir kez saklar ve var() ile tekrar kullanır. Onları :root içinde tanımlamayı, kapsamlarını ve ezilmelerini, yedek değer vermeyi, JavaScript ile tema değiştirmeyi ve geçersiz değer tuzağından kaçınmayı öğren.
Seçiciler
- CSS seçicilerBir CSS seçici, bir kuralın stil verdiği elementleri seçer. Bütün seçici türlerini, dört birleştiriciyi (alt öğe, çocuk, bitişik kardeş, genel kardeş), öznitelik seçicileri, gruplamayı öğren ve seçicileri canlı olarak dene.
- Class seçiciClass seçici (.ad) o class'a sahip her elemente, ID seçici (#ad) ise o id'ye sahip tek elemente stil verir. Söz dizimini, birden fazla ve zincirlenmiş class'ları, class ile id farkını, adlandırma kurallarını ve JavaScript ile class açıp kapatmayı öğren.
- Sözde sınıflarSözde sınıflar elementleri konumlarına ya da durumlarına göre seçer: :nth-child(), :first-child, :not(), :focus, :checked, :has() ve daha fazlası. Söz dizimini, canlı test aracıyla an+b formülünü ve nth-child ile nth-of-type farkını öğren.
- ::before ve ::after::before ve ::after, doğrudan CSS'ten bir elementin ilk ve son çocuğu olarak üretilmiş içerik ekler. content özelliğini, boş bir content'in neden gerekli olduğunu, onları konumlandırmayı, attr() ile tooltip'leri, sayaçları ve çalışmadıkları yerleri öğren.
- CSS hover:hover sözde sınıfı, fare imleci bir elementin üzerindeyken ona stil verir. Butonlar ve kartlar için hover efektlerini, yumuşak geçişleri, doğru sırada :link, :visited, :hover ve :active ile link renklerini ve dokunmatik ekranlarda hover'ı öğren.
Kutu modeli
- Kutu modeliHer element dört katmandan oluşan bir kutudur: content, padding, border ve margin. Her katmanın boyuta nasıl eklendiğini, box-sizing: border-box'ın hesabı nasıl değiştirdiğini öğren ve her katmanı canlı olarak ölçülmüş halde gör.
- CSS paddingPadding, bir elementin içindeki, içeriği ile kenarlığı arasındaki boşluktur. 1 ila 4 değerli padding kısa yazımını, tek kenar özelliklerini, mantıksal padding'i, yüzdeleri ve padding'in bir elementin boyutunu nasıl değiştirdiğini öğren.
- CSS marginMargin, bir elementin kenarlığının dışındaki, diğer elementleri iten saydam boşluktur. Margin kısa yazımını, margin: 0 auto ile ortalamayı, negatif margin'leri, flexbox'ta margin auto'yu ve dikey margin'lerin neden çöktüğünü öğren.
- Margin ve padding farkıPadding bir elementin kenarlığının içindeki boşluktur; margin ise dışındaki. İkisini aynı kutuda, yan yana ve canlı olarak gör, sonra arka planlar, tıklama alanları, elementler arası boşluk ve ortalama için hangisini kullanacağını öğren.
- CSS borderborder özelliği, bir elementin padding'inin çevresine bir çizgi çizer. Border kısa yazımını, bütün kenarlık stillerini, renkleri ve tek kenarları, border-radius ile yuvarlak köşeleri ve kenarlığın outline'dan farkını öğren.
- Width ve heightwidth ve height bir elementin kutusunun boyutunu ayarlar. Sabit ve yüzdelik boyutları, height: 100%'ün neden çoğu zaman hiçbir şey yapmadığını, esnek düzenler için min-height ve max-width'ü, auto ile 100% farkını ve fit-content anahtar kelimelerini öğren.
Metin ve yazı tipleri
- Yazı boyutufont-size özelliği metnin ne kadar büyük olacağını ayarlar. Aldığı birimleri (px, rem, em, %, anahtar kelimeler, vw), HTML'de yazı boyutunun nasıl değiştirildiğini, rem'in neden güvenli varsayılan olduğunu ve em boyutlarının nasıl katlandığını öğren.
- Kalın yazı (font-weight)font-weight özelliği metni kalın, ince ya da ikisinin arasındaki herhangi bir kalınlıkta yapar. 100'den 900'e sayısal ölçeği, normal ve bold değerlerini, göreli bolder ve lighter'ı ve bir kalınlığın neden bazen hiçbir değişiklik göstermediğini öğren.
- Satır yüksekliğiline-height her metin satırının yüksekliğini, dolayısıyla satırlar arasındaki boşluğu ayarlar. Birimsiz bir sayının neden doğru varsayılan olduğunu, px, em ve % değerlerinin nasıl farklı miras alındığını ve gövde metni ile başlıklar için iyi değerleri öğren.
- Yazı rengi<font color> etiketi kullanımdan kalktı; HTML'de yazı rengi CSS color özelliğiyle ayarlanır. Bütün sayfayı, tek bir kelimeyi, bir linki ya da bir başlığı adlandırılmış renkler, hex ve rgb ile renklendirmeyi ve metni okunaklı tutmayı öğren.
- Altı çizili yazıMetnin altını text-decoration ile çiz, sonra çizgiyi kontrol et: rengini, stilini, kalınlığını ve metinden uzaklığını. Ayrıca linklerden alt çizginin nasıl kaldırılacağını ve ne zaman kaldırmaman gerektiğini öğren.
- Metin gölgesitext-shadow metnin arkasına bir ya da daha fazla gölge çizer. Dört değeri (x uzaklığı, y uzaklığı, bulanıklık, renk), parlama, kontur ve 3B efektleri için gölgeleri üst üste koymayı ve kalabalık arka planlarda metni okunaklı tutmak için gölge kullanmayı öğren.
Renkler ve arka planlar
- CSS renklerCSS'te bir rengi yazmanın bütün yolları: adlandırılmış renkler, hex kodları, rgb() ve rgba(), hsl(), alfa kanalıyla saydamlık, currentColor ve daha yeni oklch() ile color-mix(). Her biri canlı bir örnek ve bir dönüştürücüyle.
- Arka plan rengibackground-color bir elementin kutusunu bir renkle doldurur. Bütün sayfanın, bir div'in, bir tablo satırının ya da tek bir kelimenin arka plan rengini ayarlamayı, saydamlığın nasıl çalıştığını, bgcolor'ın neden kullanımdan kalktığını ve background-color'ın background kısa yazımından farkını öğren.
- Arka plan resmibackground-image bir elementin içeriğinin arkasına bir resim ya da gradyan koyar. url() ve gradyanları, background-size'ı (cover ve contain), background-position'ı, background-repeat'i, birden fazla arka planı katman olarak kullanmayı ve background kısa yazımını öğren.
- GradyanCSS gradyanları, tarayıcının renklerden çizdiği resimlerdir. radial-gradient'i (şekil, boyut, konum), linear-gradient'i (yön ve açılar), conic-gradient'i, renk duraklarını, çizgiler için keskin durakları, tekrarlayan gradyanları ve gradyanlı metni öğren.
- Kutu gölgesibox-shadow bir elementin kutusunun çevresine gölgeler çizer. Beş değeri (x, y, bulanıklık, spread, renk), inset gölgeleri, gerçekçi derinlik için birkaç gölgeyi üst üste koymayı, spread ile yapılan odak halkalarını ve gölgeleri bulanık gösteren hataları öğren.
Yerleşim
- CSS displaydisplay özelliği bir elementin düzene nasıl katıldığına karar verir. Ölçülmüş yan yana kutularla block, inline ve inline-block'u, display none ile visibility hidden farkını ve flex, grid, flow-root ile contents'in nereye oturduğunu öğren.
- CSS positionposition: absolute bir elementi en yakın konumlandırılmış atasının içinde tam koordinatlara yerleştirir. absolute'un position: relative ile nasıl çalıştığını, ardından fixed ve sticky'yi, top/right/bottom/left ve inset özelliklerini ve sticky'nin neden bazen yapışmadığını öğren.
- CSS z-indexz-index, üst üste binen elementlerden hangisinin en üste çizileceğine karar verir. Hangi elementlerde çalıştığını, stacking context'lerin elementleri nasıl gruplayıp z-index 9999'un bile kaybetmesine yol açtığını, neyin stacking context oluşturduğunu ve çalışmayan z-index'in nasıl düzeltileceğini öğren.
- CSS overflowoverflow, kutusuna sığmayan içeriğe ne olacağına karar verir: göster, kes ya da kaydırma çubukları ekle. visible, hidden, scroll, auto ve clip değerlerini, overflow-x ve overflow-y'yi, metinde üç noktayı ve overflow'un düzen üzerindeki yan etkilerini öğren.
- Float ve clearfloat bir elementi bir kenara iter ve metnin, dergilerin fotoğraf yerleştirdiği gibi onun etrafına sarılmasına izin verir. float left, right ve inline-start'ı, clear'ı, bir ebeveynin float'ların çevresinde neden çöktüğünü ve display: flow-root'un bunu nasıl düzelttiğini, float'ların neden artık sayfa düzeni için kullanılmadığını öğren.
- Div ortalamaBir div'i yatayda, dikeyde ya da ikisinde birden ortalamanın bütün yolları: flexbox, grid, margin auto, transform ile absolute konum, margin auto ile inset ve align-content. Her biri canlı çalışıyor ve kendi ortalamasını ölçüyor; hangisinin ne zaman kullanılacağını gösteren bir tablo da var.
- Resim ortalamaBir <img> satır içidir, bu yüzden metin gibi ortalanır: ebeveynine text-align: center. Ya da onu margin: 0 auto ile bir blok yap ya da dikey dahil flexbox veya grid ile ortala. Her yöntem canlı çalışıyor ve sonucu ölçüyor.
Flexbox ve Grid
- CSS flexboxFlexbox öğeleri bir satıra ya da sütuna dizer ve alanı nasıl paylaşıp nasıl hizalandıklarını kontrol eder. display: flex'i, ana ve çapraz ekseni, bütün kapsayıcı özelliklerini, flex-grow, flex-shrink ve flex-basis'i, her öğenin nereye yerleştiğini ölçen canlı bir oyun alanıyla öğren.
- CSS justify-contentjustify-content flex öğelerini ana eksen boyunca, align-items ise çapraz eksen boyunca yerleştirir. Her değeri yan yana ve ölçülmüş halde, tıklanabilir bir hizalama ızgarası, align-self ve justify-content'in bazen neden hiçbir şey yapmadığının nedenleriyle gör.
- CSS flex-wrapflex-wrap, flex öğelerinin tek bir satıra sıkışıp sıkışmayacağına ya da bir sonrakine geçeceğine, flex-direction ise bir satırda mı yoksa bir sütunda mı akacaklarına karar verir. İkisini canlı örneklerle, flex-flow kısa yazımını, align-content'i ve medya sorgusu olmadan esnek bir kart satırını öğren.
- CSS gridCSS grid öğeleri aynı anda satırlara ve sütunlara yerleştirir. display: grid'i, grid-template-columns'u, fr birimini, repeat() ve minmax()'ı, auto-fill ile auto-fit farkını, öğeleri grid-column ile yerleştirmeyi ve grid-template-areas'ı, düzenleyip ölçtüğün canlı bir ızgarayla öğren.
Duyarlı tasarım
- Medya sorgularıBir medya sorgusu CSS'i yalnızca bir koşul doğru olduğunda uygular: minimum bir ekran genişliği, karanlık bir renk şeması ya da bir fare imleci gibi. @media söz dizimini, mobil öncelikli breakpoint'leri, aralık söz dizimini, prefers-color-scheme'i, JavaScript'te matchMedia'yı ve container query'leri öğren.
- Birimler rem em pxrem kök yazı boyutuna, em mevcut elementin yazı boyutuna göredir, px sabittir, % ise özelliğe bağlıdır. Her birimi iç içe bir demoda ölçülmüş halde, em'in neden katlandığını, hangisinin ne zaman kullanılacağını ve vw, vh ile dvh'nin nasıl çalıştığını gör.
- CSS clamp()clamp(MIN, PREFERRED, MAX) tercih edilen değeri döndürür, ama asla MIN'den küçük ya da MAX'tan büyük değil. Yazı boyutlarını ve boşlukları medya sorgusu olmadan nasıl akışkan yaptığını, ortadaki değerin nasıl hesaplandığını ve min() ile max()'ın onunla ilişkisini öğren.
- CSS calc()calc() CSS'te hesap yapmanı ve birimleri karıştırmanı sağlar, örneğin %100 eksi sabit 200px'lik bir kenar çubuğu. Söz dizimi kurallarını (boşluklar önemlidir), CSS değişkenleriyle calc()'ı, çözdüğü yaygın düzenleri ve geçersiz bir calc()'ın neden sessizce yok sayıldığını öğren.
Geçişler ve efektler
- CSS transitionBir CSS transition, bir özellik değiştiğinde onu eski değerinden yenisine canlandırır, örneğin hover'da. transition kısa yazımını, bütün zamanlama fonksiyonlarını yan yana, neyin canlandırılıp neyin canlandırılamayacağını, height: auto için geçici çözümü ve azaltılmış hareketi öğren.
- CSS animasyonCSS animasyonları bir elementi @keyframes içinde tanımladığın adımlardan kendiliğinden ve istediğin sıklıkta geçirir. @keyframes söz dizimini, sekiz animation özelliğinin hepsini, fill-mode ve direction'ı, yükleme göstergelerini, duraklatmayı ve azaltılmış harekete nasıl saygı gösterileceğini öğren.
- CSS transformtransform özelliği bir elementi çevresindeki düzeni değiştirmeden taşır, ölçekler, döndürür ve eğer. Bütün transform fonksiyonlarını, fonksiyon sırasının neden önemli olduğunu, transform-origin'i, ayrı translate, scale ve rotate özelliklerini ve translate(-50%, -50%) ile ortalama hilesini öğren.
- Döndürme (rotate)Bir elementi transform: rotate(45deg) ya da daha yeni rotate özelliğiyle döndür. Açı birimlerini (deg, turn, rad), transform-origin ile bir köşe etrafında döndürmeyi, metin ve ikon döndürmeyi, dönen bir yükleme göstergesini ve rotateX ile rotateY ile 3B döndürmeyi öğren.
- Saydamlık (opacity)opacity bütün bir elementi ve içindeki her şeyi 0'dan (görünmez) 1'e (düz) kadar yarı saydam yapar. Değerleri, opacity'nin neden metni de soldurduğunu ve yalnızca arka planın nasıl saydam yapılacağını, opacity: 0 ile visibility ve display farkını ve hover'da solmayı öğren.
- Bulanıklaştırma (blur)filter: blur(5px) bir elementi bulanıklaştırır, backdrop-filter: blur() ise arkasındakini. Bütün filter fonksiyonlarını (brightness, contrast, grayscale, sepia, saturate, hue-rotate, invert, drop-shadow) canlı kaydırıcılarla, onları nasıl birleştireceğini ve bulanık kenar sorununu öğren.
