CSS Hile Sayfası
Son güncelleme
Seçiciler
Biçimlendirmek istediğiniz elementleri nasıl hedefleyeceğiniz.
| Seçici | Eşleştirir |
|---|---|
* | Tüm elementler |
p | Tüm <p> elementleri (etikete göre) |
.btn | class="btn" olan elementler |
#main | id="main" olan element |
div p | Bir <div> içindeki tüm <p>'ler (alt öğe) |
div > p | Yalnızca doğrudan çocuklar |
a:hover | Üzerine gelinen bağlantılar (sözde sınıf) |
li:first-child | Üst öğesindeki ilk <li> |
li:nth-child(2n) | Her çift <li> |
input[type="text"] | O özniteliğe sahip girdiler |
p::before | <p>'den önce üretilen içerik (sözde element) |
Kutu modeli
Her element bir kutudur: içerik, padding, kenarlık, margin.
| Özellik | Ne yapar |
|---|---|
width / height | İçerik kutusunun boyutu |
padding | Kenarlığın içindeki boşluk |
border | 1px solid #333 - genişlik, stil, renk |
margin | Kenarlığın dışındaki boşluk |
box-sizing: border-box | Genişliğin padding + kenarlığı içermesini sağla |
margin: 0 auto | Bir blok elementini yatay olarak ortala |
overflow: hidden | Taşan içeriği kırp |
Tipografi ve renk
| Özellik | Örnek |
|---|---|
color | color: #333 - metin rengi |
background | background: #fff veya bir görsel/gradyan |
font-family | font-family: system-ui, sans-serif |
font-size | font-size: 16px (veya rem, em) |
font-weight | 400 (normal) … 700 (kalın) |
line-height | 1.5 - satırlar arası boşluk |
text-align | left, center, right, justify |
text-decoration | underline, none |
Flexbox
Tek boyutlu düzen - satırlar veya sütunlar. Üst öğeye display: flex ayarlayın.
| Özellik (kapsayıcıda) | Ne yapar |
|---|---|
display: flex | Çocukları flex öğeleri yap |
flex-direction | row (varsayılan) veya column |
justify-content | Ana eksen boyunca hizala (center, space-between) |
align-items | Çapraz eksen boyunca hizala (center, stretch) |
gap | Öğeler arası boşluk, örn. gap: 16px |
flex-wrap | wrap, öğelerin yeni satırlara akmasını sağlar |
flex: 1 (çocukta) | Öğe boş alanı doldurmak için büyür |
Grid
İki boyutlu düzen. Üst öğeye display: grid ayarlayın.
| Özellik | Ne yapar |
|---|---|
display: grid | Çocukları grid öğeleri yap |
grid-template-columns | 1fr 1fr 1fr veya repeat(3, 1fr) |
grid-template-rows | Satır boyutlarını tanımla |
gap | Satırlar ve sütunlar arası boşluk |
grid-column | 1 / 3 - bir öğeyi sütunlar boyunca yay |
auto-fit / minmax | Duyarlı grid'ler için repeat(auto-fit, minmax(200px, 1fr)) |
place-items: center | Her öğeyi hücresinde ortala |
Konumlandırma ve görüntüleme
| Özellik / değer | Ne yapar |
|---|---|
position: static | Varsayılan - normal akışta |
position: relative | Normal yerinden ofset |
position: absolute | En yakın konumlandırılmış üst öğeye göre konumlanır |
position: fixed | Görünüm alanına sabitlenir |
position: sticky | Bir eşiğe kaydırıldığında yapışır |
top / right / bottom / left | Konumlandırılmış elementler için ofsetler |
z-index | Yığılma sırası (yüksek = üstte) |
display: none | Elementi düzenden kaldırır |
display: inline-block | Satır içi akar ama width/height kabul eder |
Geçişler ve dönüşümler
| Özellik | Örnek |
|---|---|
transition | transition: all 0.2s ease |
transform: translate | translate(10px, 0) - taşı |
transform: scale | scale(1.1) - yeniden boyutlandır |
transform: rotate | rotate(45deg) |
opacity | 0 (görünmez) … 1 (opak) |
box-shadow | 0 2px 8px rgba(0,0,0,.15) |
border-radius | 8px - yuvarlatılmış köşeler |
Birimler ve duyarlı tasarım
| Birim / özellik | Anlamı |
|---|---|
px | Mutlak pikseller |
% | Üst öğeye göreli |
rem | Kök yazı tipi boyutuna göreli |
em | Geçerli yazı tipi boyutuna göreli |
vw / vh | Görünüm alanı genişliğinin / yüksekliğinin %1'i |
fr | Boş alanın kesri (grid) |
@media (max-width: 600px) { … } | Bir kırılma noktasının altında kuralları uygula |
Seçiciler, kutu modeli, flexbox, grid ve her zaman unuttuğunuz özellikler - tek sayfada. Bu CSS hile sayfası, elementleri hedeflemekten onları ortalamaya kadar web sayfalarını biçimlendirmek ve düzenlemek için hızlı bir başvurudur.
Buradaki her şey modern tarayıcılarda çalışan standart CSS'tir. Bir kural kopyalayın ya da CSS'i anında önizlemeyle düzenleyebileceğiniz HTML playground'da canlı deneyin.
CSS hile sayfası SSS
Bu CSS hile sayfası ücretsiz mi?
Evet. Bu CSS hile sayfası kayıt gerektirmeden ücretsizdir. Yer imlerinize ekleyin ve bir seçiciye, özelliğe ya da düzen desenine bakmanız gerektiğinde kullanın.
Flexbox mı yoksa grid mi kullanmalıyım?
Tek boyutlu düzenler için flexbox kullanın - bir düğme satırı, bir gezinme çubuğu, tek satır veya sütundaki öğeler. Hem satırları hem de sütunları aynı anda kontrol ettiğiniz iki boyutlu düzenler için grid kullanın, örneğin bir sayfa düzeni veya bir kart galerisi. Birlikte iyi çalışırlar: her kartın içeride flexbox kullandığı bir kart grid'i yaygındır.
CSS ile bir div'i nasıl ortalarım?
En basit modern yol, üst öğede flexbox kullanmaktır:
display: flex; justify-content: center; align-items: center; bir çocuğu hem yatay hem dikey olarak ortalar. Belirli bir genişliğe sahip bir blok elementinin yalnızca yatay olarak ortalanması için margin: 0 auto hâlâ işe yarar.CSS'i çevrimiçi olarak deneyebilir miyim?
Evet. HTML playground'u açarak HTML ve CSS'i canlı önizlemeyle birlikte yazabilirsiniz. Yapı istediğinizde, Coddy'nin ücretsiz etkileşimli CSS kursu seçicileri, kutu modelini, flexbox'ı ve grid'i adım adım kapsar.
Bu hile sayfası yeni başlayanlar için uygun mu?
Evet. Seçicilerden ve kutu modelinden (temeller) flexbox'a, grid'e ve geçişlere doğru ilerler, böylece üstteki bölümlerle başlayıp zamanla modern düzene geçebilirsiniz.
İlgili kaynaklar
Daha fazla kopya kağıdı
