CSS Podcast'i - 005: Devralma
Öğelerin düğme gibi görünmesi için birkaç CSS yazdığınızı varsayalım.
<a href="http://example.com" class="my-button">I am a button link</a>
.my-button {
display: inline-block;
padding: 1rem 2rem;
text-decoration: none;
background: pink;
font: inherit;
text-align: center;
}
Ardından bir içerik makalesine bağlantı öğesi eklersiniz.
class
.my-button
değerine sahip. Ancak bir sorun var;
Metin, beklediğiniz renkte değilse. Bu nasıl oldu?
Bazı CSS özellikleri için değer belirtmezseniz bunu devralırsınız.
Bu düğmede color
öğesini şu CSS'den devralındı:
article a {
color: maroon;
}
Bu derste, bu durumun neden olduğunu ve bunların neden daha az CSS yazmanıza yardımcı olacak güçlü bir özellik olduğunu öğreneceksiniz.
Devralma akışı
Şimdi, devralmanın işleyiş şekline kullanarak aşağıdaki HTML snippet'ini kullanabilirsiniz:
<html>
<body>
<article>
<p>Lorem ipsum dolor sit amet.</p>
</article>
</body>
</html>
Kök öğe (<html>
), dokümandaki ilk öğe olduğu için hiçbir şeyi devralmaz.
HTML öğesine CSS ekleyin,
belgenin kademeli olarak aşağı inmeye başladığını.
html {
color: lightslategray;
}
color
özelliği, varsayılan olarak diğer öğeler tarafından devralınır.
html
öğesi color: lightslategray
,
bu nedenle, renk devralabilen tüm öğelerin rengi lightslategray
olur.
body {
font-size: 1.2em;
}
p {
font-style: italic;
}
En derin iç içe yerleştirilmiş öğe olduğu için yalnızca <p>
italik metin içerir.
Devralma yalnızca aşağı doğru ilerler, üst öğelere yedeklenmez.
Varsayılan olarak hangi özellikler devralınır?
Varsayılan olarak tüm CSS özellikleri devralınmaz. ama gerçek pek çok şey var. Varsayılan olarak devralınan mülklerin tam listesini aşağıda bulabilirsiniz. tüm CSS özelliklerinin W3 referansından alınmıştır:
- azimut
- sınır-daraltma
- border-spacing
- altyazı tarafı
- color [renk]
- imleç
- yol tarifi
- boş-hücreler
- font-family
- font-size
- yazı tipi-stili
- font-variant
- yazı tipi-ağırlığı
- yazı tipi
- letter-spacing
- line-height
- list-style-image
- list-style-position
- list-style-type
- list-style
- artıklar
- alıntılar
- metin hizalama
- metin girintisi
- text-transform
- görünürlük
- boşluklar
- dullar
- word-spacing
Devralmanın işleyiş şekli
Her HTML öğesi varsayılan olarak bir başlangıç değeriyle tanımlanmış her CSS özelliğine sahiptir. Başlangıç değeri, devralınmamış ve varsayılan olarak gösterilen bir özelliktir. bu öğe için bir değer hesaplayamazsa.
Devralınabilen özellikler aşağı basamaklara doğru,
ve alt öğeler, üst öğesinin değerini temsil eden hesaplanan bir değer alır.
Bu, bir üst öğede font-weight
değerinin bold
değerine ayarlandığı durumlarda tüm alt öğelerin kalın olacağı anlamına gelir.
font-weight
farklı bir değere ayarlanmadığı sürece
veya kullanıcı aracısı stil sayfasında bu öğe için font-weight
değeri bulunur.
Devralmayı açık bir şekilde devralma ve kontrol etme
Devralma, öğeleri beklenmedik şekillerde etkileyebileceğinden CSS'nin bu konuda size yardımcı olacak araçları vardır.
inherit
anahtar kelimesi
inherit
anahtar kelimesini kullanarak herhangi bir mülkün, üst öğesinin hesaplanan değerini devralmasını sağlayabilirsiniz.
İstisnalar oluşturmak, bu anahtar kelimeyi kullanmanın kullanışlı bir yoludur.
strong {
font-weight: 900;
}
Bu CSS snippet'i, tüm <strong>
öğelerini font-weight
değeri 900
olacak şekilde ayarlar.
yerine varsayılan bold
değeri (font-weight: 700
eşdeğeri olur).
.my-component {
font-weight: 500;
}
.my-component
sınıfı, bunun yerine font-weight
öğesini 500
olarak ayarlar.
.my-component
içindeki <strong>
öğelerini font-weight: 500
haline getirmek için şunları da ekleyin:
.my-component strong {
font-weight: inherit;
}
Artık .my-component
içindeki <strong>
öğelerinde font-weight
olarak 500
olacak.
Bu değeri açıkça ayarlayabilir,
ancak gelecekte inherit
ve .my-component
CSS'si değişikliği yaparsanız
<strong>
cihazınızın otomatik olarak güncel kalacağını garanti edebilirsiniz.
initial
anahtar kelimesi
Devralma, öğelerinizle ilgili sorunlara neden olabilir ve initial
size güçlü bir sıfırlama seçeneği sunar.
CSS'de her özelliğin varsayılan bir değeri olduğunu daha önce öğrenmiştiniz.
initial
anahtar kelimesi, bir özelliği tekrar varsayılan olan bu başlangıç değerine ayarlar.
aside strong {
font-weight: initial;
}
Bu snippet, bir <aside>
öğesindeki tüm <strong>
öğelerinde kalın yazı tipini kaldırır ve bunun yerine
o da başlangıç değeri olan normal ağırlıkta olmalarını sağlar.
unset
anahtar kelimesi
Bir mülk varsayılan olarak devralınırsa veya devralınmazsa unset
özelliği farklı davranır.
Bir mülk varsayılan olarak devralınırsa
unset
anahtar kelimesi inherit
ile aynı olur.
Mülk varsayılan olarak devralınmazsa unset
anahtar kelimesi initial
değerine eşit olur.
Varsayılan olarak hangi CSS özelliklerinin devralındığını hatırlamak zor olabilir.
unset
bu bağlamda faydalı olabilir.
Örneğin, color
varsayılan olarak devralınır.
ancak margin
olmadığı için şunu yazabilirsiniz:
/* Global color styles for paragraph in authored CSS */
p {
margin-top: 2em;
color: goldenrod;
}
/* The p needs to be reset in asides, so you can use unset */
aside p {
margin: unset;
color: unset;
}
Şimdi margin
kaldırılır ve color
devralınan hesaplanan değere geri döner.
unset
değerini all
özelliğiyle de kullanabilirsiniz.
Yukarıdaki örneğe dönersek,
Genel p
stilleri birkaç özellik daha alırsa ne olur?
Yalnızca margin
ve color
için ayarlanan kural uygulanacak.
/* Global color styles for paragraph in authored CSS */
p {
margin-top: 2em;
color: goldenrod;
padding: 2em;
border: 1px solid;
}
/* Not all properties are accounted for anymore */
aside p {
margin: unset;
color: unset;
}
Bunun yerine aside p
kuralını all: unset
olarak değiştirirseniz,
p
için hangi genel stillerin uygulanacağı önemli değildir;
her zaman ayarlanmamış olur.
aside p {
margin: unset;
color: unset;
all: unset;
}
Öğrendiklerinizi sınayın
Kalıtım bilginizi test etme
Aşağıdaki özelliklerden hangisi devralınabilir?
animation
line-height
font-size
text-align
color
Devralınacak bir şey olmadığı sürece inherit
gibi davranan ve
initial
gibi davranır mı?
reset
superset
unset