Seçicileri inceleme
CSS seçicileri, stilin uygulanacağı öğeleri seçmek için kullanılır. Seçiciler çok fazla esneklik ve güç sunar. Seçiciler, tüm öğelere veya belirli bir öğeye ve hatta belirli bir harfe stil uygulamanızı sağlar.
Üç temel seçici türü vardır:
- Öğeler
- Sınıflar
- Kimlikler
Bu seçicileri kullanarak, stilleri birçok öğeye veya birkaç öğeye uygulayabilirsiniz.
Eleman seçiciler
Öğe seçici, bu etikete sahip tüm öğelere uygulanır. Herhangi bir HTML öğesi, öğe seçici olarak kullanılabilir. kullanarak h1 sayfadaki tüm h1 öğeleri değiştirebilirsiniz.
h1 {
/* style */
}
Sınıf seçiciler
Tüm HTML öğeleri bir class öznitelik eklemenize olanak tanır.
class öğeleri birlikte gruplandırmak ve CSS ayarlarını uygulamak üzere işaretlemenizi sağlamak için kullanılır.
Bir özgeçmiş oluştururken, eğitim ve istihdam geçmişiniz için bölümleriniz vardır. Bir sınıf kullanmak, bu öğeleri aynı stilde biçimlendirmenize olanak sağlar.
<div class="history">
<h2>Employer name</h2>
<h3>Job title</h3>
<h3>3 Jun 19 - 8 Jun 21</h3>
</div>
<div class="history">
<h2>School name</h2>
<h3>Major</h3>
<h3>Sep 2014 - May 2018</h3>
</div>
Önceki örnekte, büyük olasılıkla her div birinin biçimlendirmesinin benzer türde bilgiler görüntüledikleriyle aynı olmasını istersiniz. İki div öğeyi aynı sınıfla işaretleyerek her birine aynı CSS stilini uygulayabilirsiniz.
CSS'de bir sınıfı tanımlamak için adın önüne ön . ek eklersiniz. Bizim örneğimizde kullanabilirsiniz .history.
.history {
/* your styles */
}
CSS dosyası kullanıyorsanız, CSS dosyasına sınıf stili tanımını yazarsınız. HTML'deki sınıf özniteliği, CSS dosyasındaki tanıma başvurur.
Sahte sınıflar
Sözde sınıflar, öğeleri sayfadaki konumlarına veya kullanıcının bunlarla nasıl etkileşime geçtiğini temel alarak tanımlamanıza olanak tanır.
Bir kullanıcı bir web sayfasıyla etkileşime girdiğinde, çeşitli öğelerin durumu değişir. Kullanıcı faresini bir öğenin üzerine getirebiliyor olabilir ve üzerine geldiğinde rengin değişmesini istiyorsunuz. Veya kullanıcı bir bağlantı seçtiyse. Bu bağlantıyı ziyaret ettikten sonra, stili değiştirerek onlara haber vermek isteyebilirsiniz. CSS, kullanıcının yaptıklarına veya yaptıklarına göre dinamik olarak uygulanan birçok sahte sınıfı destekler. Sahte sınıflar bir ön ek olarak eklenir ve başka bir :seçicinin arkasına yerleştirilir.
Örneğin, kullanıcı imlecini üzerine getirdiğinde bir bağlantının arka plan rengini sarıya ayarlamak için aşağıdaki CSS'yi kullanabilirsiniz:
a:hover {
background-color: yellow;
}
En yaygın sahte sınıflardan bazıları aşağıdaki tabloda listelenmiştir:
| Sahte sınıf | Açıklama |
|---|---|
hover |
Kullanıcı imlecini bir öğenin üzerine getiriyor |
visited |
Daha önce tıklanan bir bağlantı |
link |
Desteklenmeyen bir bağlantı |
first-child |
Hiyerarşideki seçiciyle eşleşen ilk alt öğe |
last-child |
Hiyerarşide seçiciyle eşleşen son alt öğe |
Önemli
Sahte öğeleri ve CSS'yi kullanarak köprülerden alt çizgi kaldırabilirsiniz. Genel bir kural olarak, erişilebilirlik amacıyla alt çizgiden çıkmak en iyisidir. Altı çizili metin, kullanıcının sayfadaki bağlantıları hızla tanımlamasını sağlar.
Kimlik seçiciler
Sınıflara benzer şekilde, kimlik de bir öğeye stil uygulamanıza olanak tanır. Ancak, bir sınıf birden çok öğeye uygulanabilirken, kimliğin benzersiz olması ve yalnızca bir öğeye başvurması gerekir.
Özgeçmişte, X, GitHub veya blogunuz gibi sosyal medya için bir bölümünüz olabilir. Bu bölüm için özel bir stil istiyorsanız, bir kimlik ayarlayabilirsiniz:
<div id="social-media">
<!-- list of links -->
</div>
Kimlikler, CSS'de ön # eke eklenmiştir:
#social-media {
/* style */
}
Not
Sınıflar ve kimlikler için standart adlandırma kuralı"skewer-casing" kullanmaktır. Her sözcük küçük harfli ve ile ayrılmıştır -. Skewer-case adı, sözcüklerin bir şişte olabilir gibi görünmelerinden gelir.