6.1 Sınıf niteliği ve stil etiketi
Ama hepsi bu değil. Yüzlerce "stil" icat edildikten sonra şu soru ortaya çıktı: bunlar nasıl kullanılır? Ve sonra onları "sınıflara" ayırma fikrini buldular. Bunlar, elbette, Java'dakilerle aynı sınıflar değildir. Sadece özel stil grupları.
Ve "sınıfları" kullanmadan önce bir resminiz varsa:
<img src="logo.png" style="width=100px;height=100px;opacity=0.5">
Şimdi şu şekilde yazılabilir:
<img src="logo.png" class="picture">
<style>
img.picture {
width=100px;
height=100px;
opacity=0.5
}
</style>
Özel bir tane oluşturduk «style» picture
ve stil değerlerini style
. Ardından <img> ile "stil" resmini etiketiyle bağladık class
.
6.2 Seçici, seçici türleri
Ayrı ayrı oluşturulan bu stiller, classes
veya olarak bilinmeye başlandı selectors
. Birkaç önemli özelliği var.
Birinin html-element
birden çok seçicisi olabilir. Adları bir boşlukla gösterilir. Örnek:
<img src="logo.png" class="picture main">
Burada seçicilere değinmemizin bir nedeni, otomatik olarak uygulanabilmeleridir. Ve bu yararlı özellik gelecekte çok sık kullanılacaktır. Java geliştiricileri dahil.
İşte bunların kısa bir listesi:
# | seçici | Örnek | Tanım |
---|---|---|---|
1 | * |
|
Bir HTML belgesinin tüm öğeleri için geçerlidir. |
2 | #İD |
|
# işaretinden sonra, verilen stilin uygulanacağı öğenin kimliği gelir. |
3 | etiket |
|
Belgedeki tüm tablolar için geçerlidir. |
4 | etiket seçici |
|
Belirtilen sınıf özniteliğine sahip tüm belge tabloları için geçerlidir. |
5 | .seçici |
|
Belirtilen sınıf özniteliğine sahip tüm öğeler için geçerlidir. Herhangi bir etiket. |
6 | ebeveyn çocuk |
|
Üst etiketin ana sınıfı ve alt etiketin makale sınıfını içerdiği tüm öğeler için geçerlidir. |
7 | etiket: bağlantı |
|
:link sözde sınıfı, kullanıcının henüz tıklamadığı bağlantılara stil vermek için kullanılır. |
8 | etiket:ziyaret edildi |
|
:link sözde sınıfı, kullanıcının zaten tıkladığı bağlantılara stil vermek için kullanılır. |
9 | etiket:işaretlendi |
|
Bu sözde sınıf, yalnızca işaretli UI öğelerini seçecektir: radyo düğmeleri veya onay kutuları. |
10 | etiket: vurgulu |
|
Bu sözde sınıf, fareyle üzerine geldiğinizde bir öğenin stilini değiştirmenize olanak tanır. |
on bir | etiket:ilk çocuk |
|
Bu sözde sınıf, yalnızca ilk alt öğenin seçilmesine izin verecektir. |
Hepsini ezberlemek zorunda değilsin. Ancak bu tabloyu birkaç kez incelerseniz ve tüm bunları kafanızda biriktirirseniz iyi olur. Modern hayatta web olmadan, hiçbir yerde ve web'de - seçiciler olmadan hiçbir yerde.