CSS Syntax
eleman seçme
id seçici
Sınıf seçici (for all elements)
Sınıf seçici (for only <p> elements)
seçicileri gruplandırma
CSS Backgrounds
Bir sayfanın arka plan rengini ayarlayın
Farklı elementlerin arka plan rengini ayarlayın
Bir sayfanın arka plan olarak bir resim ayarlayın
Nasıl yalnızca yatay bir arka plan resmi tekrarlamak
Bir arka plan resmi konumlandırmak için nasıl
Bir sabit arka plan görüntüsü (this image will not scroll with the rest of the page)
Tek bildiriminde tüm arkaplan özellikleri
Gelişmiş arka plan örneği
Arka plan özellikleri açıklanmıştır
CSS Borders
Dört sınırların genişliğini
Üst sınırın genişliğini ayarlayın
Alt sınır genişliğini
Sol sınırdan genişliğini ayarlayın
Sağ sınırının genişliğini ayarlayın
Dört sınırın stilini ayarla
Üst sınırın stilini ayarla
Alt sınırın stilini ayarla
Sol kenarlık stilini ayarlama
Sağ kenarlık stilini ayarlama
Dört sınırın rengini ayarlayın
Üst sınırın rengini belirler
Alt sınırın rengini belirler
Sol sınırın rengini belirler
Sağ sınırın rengini belirler
Tek bildiriminde tüm sınır özellikleri
Her iki tarafında farklı sınırları ayarlama
Tek bildiriminde Tüm üst sınır özellikleri
Tek bildiriminde tüm alt sınır özellikleri
Tek bildiriminde tüm sol sınır özellikleri
Tek bildiriminde Pekala sınır özellikleri
CSS Margins
Bir elemanın her iki tarafında farklı kenar belirtme
Sol kenar boşluğu, üst öğesinden miras duysun
Marj stenografi özelliği
Oto ayarla marjı onun kapsayıcı içindeki eleman merkezi
CSS Padding
Bir elemanın sol dolgu ayarlayın
Bir elemanın sağ dolgu ayarlayın
Bir elemanın üst dolgu ayarlayın
Bir elemanın alt dolgu ayarlayın
Tek bildiriminde tüm padding özellikleri
CSS Text
Farklı elementlerin metin rengini ayarlayın
metni hizalama
Linkleri altında çizgiyi kaldırın
metin süsleyin
Bir metinde harf kontrol
Girinti metin
Karakterler arasındaki aralığı belirtin
Çizgi arasındaki boşluk belirtin
Bir elemanın metin yönünü ayarlayın
Kelimeler arasında boşluk arttırın
Bir elemanın içindeki metin sarma devre dışı bırakın
Metnin içindeki bir resmin dikey hizalama
CSS Fonts
Bir metnin yazı tipini ayarlayın
Yazı boyutunu ayarlayın
Px yazı tipinin boyutunu ayarlayın
Em yazı tipinin boyutunu ayarlayın
Ve yüzde em yazı tipinin boyutunu ayarlayın
Yazı tipi stilini ayarlayın
Yazı varyantı ayarlayın
Fontun kalınlığı ayarlayın
Tek bildiriminde tüm yazı tipi özellikleri
CSS Links
Ziyaret / ziyaret edilmemiş bağlantıları farklı renkler ekleyin
Linklere metin dekorasyon Kullanımı
Bağlantılar için bir arka plan rengi belirtin
Köprülere diğer stilleri ekleme
Bağlantı kutuları oluşturma - İleri
Gelişmiş - sınırları ile bağlantı kutuları oluşturma
CSS Lists
Listelerde tüm farklı liste öğesi belirteçleri
Liste maddelik işaretleyici olarak bir resim ayarlayın
Liste maddelik işaretleyici yerleştirin
Tek bildiriminde Tüm liste özellikleri
Renklerle Stil listeleri
Tam genişlikli sınırlanmıştır listesi
CSS Tables
Tablo, inci ve td elemanları için kara sınır belirtin
Border-çöküş Kullanımı
Masa etrafında Tek sınır
Bir tablonun genişliği ve yüksekliği belirtme
Içeriğine yatay hizalama ayarlayın (text-align)
Içeriğine dikey hizalamasını ayarlama (vertical-align)
Inci ve td elemanları için dolgu belirtme
Yatay bölücüler
Hoverable tablo
Çizgili tablolar
Masa sınırlarının rengini belirtin
Tablo başlığı pozisyonunu ayarlayın
duyarlı Masa
Süslü bir tablo oluşturun
Tablo özellikleri açıklanmıştır
CSS Box Model
250 piksel toplam genişlikte bir elemanı belirtir
CSS Outline
Bir elemanın etrafında bir çizgi çizin (outline)
Bir taslak stilini ayarla
Bir taslak rengini belirler
Bir anahat genişliğini
CSS Dimension
Bir elemanın genişliği ve yüksekliği ayarlama
Bir elemanın ayarlama maksimum genişlik
Farklı elementlerin genişliği ve yüksekliği ayarlama
Bir görüntü kullanılarak yüzde genişliği ve yüksekliği ayarlama
Set dakika genişliği bir elemanın ve maksimum genişliği
Takım dakika yüksekliği ve bir elemanın maksimum yükseklikte
CSS Display
Nasıl bir öğe gizlemek için (visibility:hidden)
Nasıl bir element göstermez için (display:none)
Bir satır içi eleman olarak bir blok düzeyi öğesi görüntülemek için nasıl
Bir blok düzeyinde eleman olarak bir satır içi öğeyi görüntüleyecek nasıl
Gizli içerik göstermek için bir araya JavaScript CSS nasıl kullanılır için
Görüntü özelliklerini açıkladı
CSS Positioning
Tarayıcı penceresine unsuru göre konumlandırmak
Normal pozisyonuna unsuru göre konumlandırmak
Bir mutlak değere sahip bir eleman yerleştirin
Çakışan elemanlar
Bir elemanın şekli ayarlama
Bir elemanın içeriği sığmayacak kadar büyük olduğu zaman bir kaydırma çubuğu nasıl oluşturulur
Otomatik taşması işlemek için tarayıcıyı nasıl ayarlanır
Bir piksel değeri kullanılarak bir görüntünün üst kenarını ayarlama
Bir piksel değeri kullanılarak bir görüntünün alt kenarının ayarlama
Bir piksel değeri kullanılarak bir görüntünün sol kenarını ayarlama
Bir piksel değeri kullanılarak bir görüntü sağ kenarına ayarlama
İmleç değiştir pozisyonu görüntü metni (top left corner)
Pozisyon görüntü metni (top right corner)
Pozisyon görüntü metni (bottom left corner)
Pozisyon görüntü metni (bottom right corner)
Pozisyon görüntü metin (centered)
Konumlandırma özellikleri açıkladı
CSS Floating
Şamandıra tesisin basit kullanımı
Bir paragrafta sağa yüzer sınır ve marjlar ile bir görüntü
Sağa yüzen bir resim yazısı ile bir görüntü
Soldaki bir paragraf şamandıra ilk harfini edelim
Şamandıra özelliğiyle bir resim galerisi oluşturma
Şamandıra kapatma (using the clear property)
Yatay menü oluşturma
Tablo kullanmadan ana sayfaya
CSS Aligning Elements
Merkezi marjı ile hizalayarak
Pozisyonuyla Sol / Sağ hizalama
Sol Sağ pozisyonuyla hizalayarak / - crossbrowser çözümü
Şamandıra ile Sol / Sağ hizalama
Sol Sağ şamandıra ile hizalayarak / - crossbrowser çözümü
CSS Combinators
alçalan seçici
Çocuk seçici
Bitişik Kardeş seçici
Genel Kardeş Seçici
CSS Generated Content
İçerik özelliğiyle her bağlantı sonrası parantez içinde URL'yi ekleyin
Ile bölümleri ve alt bölümleri numaralandırma "Section 1", "1.1" , "1.2" , vb
Tırnak özelliğiyle tırnak işareti belirtin
CSS Pseudo-classes
Köprü farklı renkler ekleyin
Köprülere diğer stilleri ekleme
Odak: Kullanımı
:first-child - İlk p elemanını maç
:first-child - tüm p elemanları ilk i elemanını maç
:first-child - tüm ilk çocuk p elemanları tüm i unsurları eşleştir
Kullanımına :lang
CSS Pseudo-elements
Bir metinde ilk harf özel olun
Bir metnin ilk satırı özel olun
Ilk harfi ve ilk satırı özel yapmak
Kullanın: Bir elemanın önce bazı içerikleri eklemek için önce
Kullanın: Bir elemanın sonra bazı içerikleri eklemek için sonra
CSS Navigation Bars
Tamamen tarz dikey gezinti çubuğu
Tamamen tarz yatay gezinti çubuğu
CSS Dropdowns
Açılan metin
Aşağıya doğru açılan menü
Sağ hizalanmış açılır menü
Açılan görüntü
Açılan gezinti çubuğu
CSS Tooltips
Sağ ipucu
Sol ipucu
Üst ipucu
Alt ipucu
Okla ipucu
Hareketli ipucu
CSS Image Gallery
Resim Galerisi
Duyarlı Resim galerisi
CSS Image Opacity
Şeffaf görüntüleri oluşturma - mouseover etkisi
Bir arka plan görüntüsünde metin ile şeffaf kutu oluşturma
CSS Image Sprites
Bir resim sprite
Bir resim sprite - bir gezinme listesi
Vurgulu etkisi ile bir görüntü sprite
CSS Attribute Selectors
Tüm seçer <a> bir hedef niteliği ile unsurlarını
Tüm seçer <a> bir hedef = "_ blank" özelliğine sahip elemanlar
Bunlardan biri kelimelerin bir boşluk ile ayrılmış listesini içeren bir başlık niteliği, tüm elemanları seçer "flower"
Ile başlayan bir sınıf, özellik değeri tüm öğeleri seçer "top" (must be whole word)
Ile başlayan bir sınıf, özellik değeri tüm öğeleri seçer "top" (must not be whole word)
Ile biten bir class özelliğinin değerine sahip tüm unsurları seçer "test"
Içeren bir sınıf, özellik değeri tüm öğeleri seçer "te"
CSS Forms
Tam genişlikli giriş alanı
Yastıklı giriş alanı
Bordered giriş alanı
Alt bordürlü giriş alanı
Renkli girdi alanları
Odaklanmış giriş alanları
Odaklı giriş alanları 2
Simgesi / görüntü ile Girdi
Hareketli arama giriş
Şekillendirme textareas
Seçme menüleri Styling
Giriş düğmelerini Styling
CSS Counters
Bir sayaç oluşturma
İçiçe sayaçları 1
İçiçe sayaçları 2
CSS3 Rounded Corners
Elemanlara yuvarlak köşeler ekleme
Her köşe Yuvarlak ayrı ayrı
Eliptik köşeleri oluşturun
CSS3 yuvarlatılmış köşeler açıklanmıştır
CSS3 Border Images
Yuvarlak anahtar kelimeyi kullanarak, bir elementin etrafında bir görüntü sınır oluşturma
Streç anahtar kelimeyi kullanarak, bir elementin etrafında bir görüntü sınır oluşturma
Resim çizgi - Farklı dilim değerleri
CSS3 sınır görüntüleri açıkladı
CSS3 Backgrounds
Bir elemanın için birden arka plan resimleri ekleyin
Arka plan görüntüsünün boyutunu belirleyin
Kullanarak bir arka plan resmi ölçeklendirme "contain" ve "cover"
Birden arka plan görüntülerinin boyutlarını tanımlayın
Tam boyutlu arka plan görüntüsü (completely fill the content area)
Arka plan resmi konumlandırılmış olduğu belirtmek için background-kökeni kullanın
Arka plan boyama alanını belirlemek için background-klip kullanın
CSS3 Gradients
Lineer Gradyan - alta üst
Lineer Gradyan - soldan sağa
Lineer Gradyan - diyagonal
Lineer Gradyan - belirli bir açıyla
Birden çok renk durakları ile - Doğrusal Degrade
Lineer Gradyan - bir gökkuşağı + metnin rengi
Lineer Gradyan - şeffaflık ile
Lineer Gradyan - tekrar eden lineer bir gradyan
Radyal Gradyan - eşit aralıklı renk durur
Radyal Gradyan - farklı mesafeli renk durur
Radyal Gradient - şekil
Radyal Gradient - farklı boyut anahtar
Radyal Gradyan - yinelenen bir radyal gradyan
CSS3 Shadow Effects
Basit gölge efekti
Gölgenin bir renk ekleme
Gölge bulanıklık efekti ekleme
Siyah gölge ile Beyaz metin
Kırmızı neon parıltı gölge
Kırmızı ve mavi neon parıltı gölge
Siyah, mavi ve lacivert gölge ile Beyaz metin
Bir elemanın için basit kutu-gölge ekle
Kutu-gölge renk ekleme
Renk ekleyin ve-gölge boks etkisi bulanıklık
Oluşturmak kağıt benzeri kartlar (text)
Oluşturmak kağıt benzeri kartlar (polaroid images)
CSS3 Text
Nasıl gizli, taştı içeriği kullanıcıya işaret edilmelidir belirtin
Öğenin üzerine ne zaman hover taşan içeriği görüntülemek için nasıl
Uzun kelimeler kırılacak edebilmek ve bir sonraki satıra kaydırılır izin ver
Hat kırma kuralları belirtin
CSS3 Fonts
Senin kullanın "own" in fontları @font-face kuralı
Senin kullanın "own" in fontları @font-face kuralı (bold)
CSS3 2D Transforms
translate() - mevcut pozisyonundan bir eleman hareket
rotate() - bir eleman saat yönünde döndürmek
rotate() - bir eleman saatin tersi yönünde döndürmek
scale() - bir eleman artırmak
scale() - bir eleman azaltmak
skewX() - X ekseni boyunca bir öğe eğriltir
skewY() - y-ekseni boyunca bir öğe eğriltir
skew() - X ve Y ekseni boyunca bir öğe eğriltir
matrix() -, ölçek, hareket edebilir ve bir elemanı çarpıtabilir dönüşümlü
CSS3 3D Transforms
rotateX() -, belirli bir derecede kendi X-ekseni etrafında bir elemanı döndürmek
rotateY() -, belirli bir derecede kendi Y ekseni etrafında bir elemanı döndürmek
rotateZ() -, belirli bir derecede kendi Z ekseni etrafında bir elemanı döndürmek
CSS3 Transitions
Geçiş - bir elemanın değiştirilmesi genişliği
Bir elemanın değişim genişliği ve yüksekliği - Geçiş
Bir geçiş için farklı bir hız eğrisi belirtme
Bir geçiş etkisi için bir gecikme belirtme
Bir geçiş etkisi bir dönüşüm ekleme
Bir kestirme özelliği tüm geçiş özelliklerini belirleme
CSS3 Animations
Bir öğeye bir animasyon bağlama
Animasyon - Bir elemanın değişim background-color
Animasyon - değişiklik background-color ve bir elemanın konumu,
Bir animasyonu beklet
Durana önce animasyonu 3 kez çalıştırın
Sonsuza dek animasyon çalıştırın
Ters yönde çalıştırmak animasyon
Alternatif döngülerinde Run animasyon
Animasyonlar için Hız eğrileri
Animasyon stenografi özelliği
CSS3 Images
Yuvarlak görüntü
Daire içinde görüntü
Küçük resim
Bağlantı olarak küçük resim
duyarlı görüntü
Görüntü metni (top left corner)
Görüntü metni (top right corner)
Görüntü metni (bottom left corner)
Görüntü metni (bottom right corner)
Görüntü metni (centered)
Polaroid görüntüleri
Gri tonlama görüntü filtresi
Gelişmiş - CSS & JavaScript Görüntü Modal
CSS3 Buttons
Temel CSS düğmeleri
Düğme renkler
Düğme boyutları
Yuvarlak düğmeleri
Renkli düğmesi sınırları
Hoverable düğmeler
Gölge düğmeleri
Engelli düğmeleri
Düğme genişliği
Düğme grupları
Bordered düğmesi grubu
Hareketli Düğme (Hover Effect)
Hareketli Düğme (Ripple Effect)
Hareketli Düğme (Pressed Effect)
CSS3 Pagination
Basit sayfalama
Aktif ve hoverable sayfalandırma
Yuvarlak ve aktif hoverable sayfalama
Hoverable geçiş etkisi
bordered sayfalandırma
Yuvarlak bordürlü sayfalama
Bağlantıları arasında boşluk sayfalandırmayı
Sayfalandırma boyutu
Bağlantıları arasında boşluk sayfalandırmayı
ortalanmış sayfalandırma
Galeta unu
CSS3 Multiple Columns
Birden çok sütun oluşturun
Sütunlar arasındaki boşluğu belirtir
Sütunlar arasındaki kuralın stilini belirtin
Sütunlar arasındaki kural genişliğini belirtir
Sütunlar arasındaki kural rengini belirtin
Sütunlar arasındaki kuralın genişliği, stil ve renk belirtin
Bir öğe genelinde yayılan kaç sütun belirtin
Kolonlar için önerilen bir optimal genişliğini belirtin
CSS3 birden çok sütun açıkladı
CSS3 User Interface
Bir kullanıcı, bir elemanın genişliğini değiştirmek olsun
Bir kullanıcı bir elemanın yüksekliğini yeniden boyutlandırmak edelim
Bir kullanıcı, bir elemanın genişliği ve yüksekliği hem de yeniden boyutlandırmak olsun
Çevre çizgisi ve bir öğenin sınırı arasındaki boşluk ekle
CSS3 kullanıcı arayüzü açıkladı
CSS3 Box Sizing
Kutu ebatta kesip biçmeksizin elemanların genişliği
Kutu boyutlandırma elemanların genişliği
Form elemanları + kutu boyutlandırma
CSS3 kutusu açıkladı boyutlandırma
CSS3 Flexbox
Üç esnek eşyalarla flexbox'a
Üç esnek eşyalarla flexbox'a - rtl yönü
esnek-yönü - satır ters
esnek-yönü - Sütun
esnek-yönü - sütun ters
haklı-içerik - esnek uç
haklı-içerik - merkezini
haklı-içerik - uzay-arası
haklı-içerik - uzay-etrafında
hizalamak-öğeleri - streç
hizalamak-öğeleri - esnek başlama
hizalamak-öğeleri - esnek uç
hizalamak-öğeleri - merkezini
hizalamak-öğeleri - taban çizgisini
esnek-wrap - nowrap
esnek-wrap - wrap
esnek-wrap - wrap-ters
hizalamak-içerik - merkezini
Esnek öğeleri Sipariş
Margin-right: auto;
Marj: auto; = Mükemmel bir merkezileştirme
esnek öğeler üzerinde hizaya-öz
Esnek öğelerin geri kalan kısmına göre esnek öğenin uzunluğunu belirtin
Flexbox'a ile Duyarlı bir web sitesi oluşturma
CSS3 Media Queries
Görüntü bölmesi 480 piksel genişliğinde veya daha geniş ise lightgreen Arka plan rengini değiştirme
Görüntü bölmesi 480 piksel genişliğinde veya daha geniş olması durumunda sayfanın solundaki yüzer bir menü göster
CSS3 Media Queries - More Examples
HTML sayfası
520 699px ila Genişlik - her bağlantı için bir e-posta simge uygulama
700 1000 piksel ila Genişlik - Bir metinle bağlantıları Önsöz
1001PX yukarıda genişliği - bağlantıları e-posta adresini uygula
1151px yukarıda Genişlik - Daha önce kullanıldığı gibi simge ekle
Bir web sayfasında bir kenar çubuğundaki e-posta bağlantıları listesini kullanın
CSS3 medya örnekleri açıkladı sorgular