CSS sözdizimi
Bir CSS kuralı belirlenmiş bir selektör ve bir deklarasyon blok oluşur:
HTML öğesine selektör noktaları stil istiyorum.
beyan blok noktalı virgül ile ayrılmış bir veya daha fazla bildirimleri içerir.
Her bildirimi iki nokta ile ayrılan bir CSS özelliği adı ve bir değer içerir.
Bir CSS beyanı her zaman bir noktalı virgül ile biter ve beyan bloklar küme parantezi ile çevrilidir.
Aşağıdaki örnekte tüm <p> elemanları kırmızı metin rengi ile, hizalanmış olacak:
CSS Seçiciler
CSS seçicileri için kullanılır "find" (or select) HTML onların elemanı adı, kimliği, sınıf, niteliğe dayalı olarak öğeleri ve daha fazlası.
eleman Seçici
eleman seçme elemanı adına göre elemanlarını seçer.
Hepiniz seçebilirsiniz <p> Böyle bir sayfadaki öğeleri (bu durumda, tüm <p> elemanları Ortalanmıştır, kırmızı metin rengi ile olacaktır):
id Seçici
Id seçici kullanan id belli bir elemanı seçmek için bir HTML elemanının niteliğini.
id seçici bir benzersiz eleman seçmek için kullanılır böylece bir elementin id, bir sayfa içinde benzersiz olmalıdır!
Belirli bir kimliğe sahip bir öğeyi seçmek için, bir karma yazmak (#) elemanın kimliği eklenen karakterini.
Stil kuralı aşağıda ile HTML öğesi uygulanacak id="para1" :
Not: Bir kimlik adı bir sayı ile başlayamaz!
sınıf Seçici
sınıf seçici belirli bir sınıf özelliği olan elemanları seçer.
Bir yazma, belirli bir sınıfla elemanlarını seçmek için period (.) Sınıfın adından karakter.
Aşağıdaki örnekte, tüm HTML öğelerini class="center" kırmızı ve hizalanmış olacak:
Ayrıca yalnızca belirli HTML elemanları bir sınıf etkilenen gerektiğini belirtebilir.
Aşağıdaki örnekte, sadece <p> ile elementler class="center" hizalanmış olur:
HTML öğeleri, birden fazla sınıfını ifade edebilirsiniz.
Aşağıdaki örnekte, <p> elemanı uygun tarz olacaktır class="center" ve class="large" :
Not: Bir sınıf adı bir sayı ile başlayamaz!
Seçicileri gruplandırma
Böyle aynı tarz tanımlarla elemanları, varsa:
h1
{
text-align: center;
color: red;
}
h2
{
text-align: center;
color: red;
}
p
{
text-align: center;
color: red;
}Bu kodu en aza indirmek için, seçiciler grubuna daha iyi olacaktır.
Grup seçiciler için, virgül, her seçme ayırın.
Aşağıdaki örnekte yukarıdaki koddan seçicileri gruplandırdık:
CSS Yorumlar
Yorumlar kodunu açıklamak için kullanılır ve daha sonraki bir tarihte kaynak kodunu düzenlerken yardımcı olabilir.
Yorumlar tarayıcılar tarafından göz ardı edilir.
Bir BB açıklama ile başlar /* and ends with */ . Yorumlar da birden fazla satıra ayrılabilir:
Örnek
p
{
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
Kendin dene " Egzersizleri ile Yourself test edin!
Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Alıştırma 4»