CSS – Sözdizimi (Adım Adım Detaylı Açıklama)

#CSS

CSS Sözdizimi, tarayıcı tarafından yorumlanan ve daha sonra belgenizdeki ilgili öğelere uygulanan stil kurallarından oluşur.

CSS - Sözdizimi
CSS – Sözdizimi

CSS hakkında hiç bir fikriniz yoksa CSS Nedir ve Nasıl Çalışır? adlı makalemizi okumanızı tavsiye ediyoruz.

Daha sonra;

Bir CSS, tarayıcı tarafından yorumlanan ve daha sonra belgenizdeki ilgili öğelere uygulanan stil kurallarından oluşur. Bir stil kuralı üç bölümden oluşur –

  • Seçici – Seçici, stilin uygulanacağı bir HTML etiketidir. Bu, <h1> veya <table> vb. Gibi herhangi bir etiket olabilir.
  • Özellik – Bir özellik, HTML etiketinin bir türüdür. Basitçe söylemek gerekirse, tüm HTML nitelikleri CSS özelliklerine dönüştürülür. Renk, sınır vs olabilir.
  • Değer – Değerler özelliklere atanır. Örneğin, color özelliği kırmızı veya # F1F1F1 vs. değerine sahip olabilir.

CSS Stil Kuralı Sözdizimini aşağıdaki gibi koyabilirsiniz –

seçici { özellik: değer; }

CSS - Sözdizimi
CSS – Sözdizimi

Örnek – Tablonun kenarlığını aşağıdaki gibi tanımlayabilirsiniz –

table{ border :1px solid #C00; }

Buradaki tablo bir seçicidir ve kenarlık bir özelliktir,

Burada table; tablo demektir ve seçicidir, border; kenarlık demektir ve özelliktir, 1px kenarlığın kalınlığıdır ve değerdir, solid kenarlığın şeklini verir ve değerdir, #C00 kenarlığın rengini verir ve değerdir. Yani bir seçiciye atanan özellikte farklı anlamlara gelen ve özelliğe özgü birden fazla değer tanımlanabilir.

Seçicileri, rahatınıza bağlı olarak çeşitli basit şekillerde tanımlayabilirsiniz. Bu seçicileri birer birer söyleyelim.

CSS Tip Seçiciler

Bu yukarıda gördüğümüzle aynı seçici. Yine,  H1 başlıklarına renk vermek için bir örnek-

h1 {
   color: #36CFFF; 
}

CSS Evrensel Seçiciler

Evrensel seçici, belirli bir türün öğelerini seçmek yerine, bütün öğelere bu özelliği tanımlar-

* { 
   color: #000000; 
}

Bu kural, belgedeki her öğenin içeriğini siyah olarak oluşturur.

CSS Soydan Seçiciler

Stil kuralını yalnızca belirli bir öğenin içine girdiğinde belirli bir öğeye uygulamak istediğinizi varsayalım.

Aşağıdaki örnekte verildiği gibi, stil kuralı <em> öğesine yalnızca <ul> etiketinin içine girdiğinde uygulanır.

ul em {
   color: #000000; 
}

CSS Sınıf Seçicileri

Öğelerin sınıf niteliğine göre stil kuralları tanımlayabilirsiniz. Bu sınıfa sahip tüm elemanlar, tanımlanmış kurala göre biçimlendirilecektir.

.black {
   color: #000000; 
}

Bunun belirgin kullanımı da şu şekildedir:

<p class = "black">
   Buradaki yazılar siyaz olacaktır. Bu özellikten sadece class olarak tanımladığımız etiketler etkilenecektir.
</p>

Bu kural, belgede sınıf niteliği black olarak ayarlanmış her öğe için içeriği siyah olarak oluşturur. Biraz daha belirgin hale getirebilirsin. 

Örneğin –

h1.black {
   color: #000000; 
}

Bu kural, içeriği siyah olarak ayarlanmış yalnızca <h1> öğeleri için black olarak düzenler.

Verilen öğeye birden fazla sınıf seçicisi uygulayabilirsiniz. Aşağıdaki örneği düşünün –

<p class = "center bold">
   This para will be styled by the classes center and bold.
</p>

CSS ID Seçicileri

Öğelerin id niteliğine göre stil kuralları tanımlayabilirsiniz. Bu kimliğe sahip tüm elemanlar, tanımlanmış kurala göre biçimlendirilecektir.

#black {
   color: #000000; 
}

Bu kural, belgede id niteliği siyaha ayarlanmış her öğe için içeriği siyah olarak oluşturur. Biraz daha belirgin hale getirebilirsin.

Örneğin –

h1#black {
   color: #000000; 
}

Bu kural, kimliği siyah olarak ayarlanmış yalnızca <h1> öğelerinde içeriği siyah olarak oluşturur.

Kimlik seçicilerin gerçek gücü, soy seçicilerin temeli olarak kullanılmalarıdır.

#black h2 {
   color: #000000; 
}

Bu örnekte, h2 başlıkları, kimliği özniteliği siyah olarak ayarlanmış etiketlerde bulunduğunda siyah renkte görüntülenir.

The Child Seçiciler

Soydan seçicileri gördün. Soydan seçicilere çok benzeyen ancak farklı işlevleri olan bir tane daha seçici var. Aşağıdaki örneği düşünün –

body > p {
   color: #000000; 
}

Bu kural, <body> öğesinin doğrudan altında kullanıldıysa, tüm paragrafları siyah olarak oluşturur. <div> veya <td> gibi diğer öğelerin içine konan diğer paragrafların bu kural üzerinde bir etkisi olmaz.

Özellik Seçicileri

Stilleri, belirli özelliklere sahip HTML öğelerine de uygulayabilirsiniz.

Aşağıdaki stil kuralı, metin niteliğinde bir tür özelliğine sahip tüm giriş öğeleriyle eşleşir –

input[type = "text"] {
   color: #000000; 
}

Bu yöntemin avantajı, <input type = “cancel” /> öğesinin etkilenmemesi ve rengin yalnızca istenen metin alanlarına uygulanmasıdır.

Özellik seçiciye uygulanan aşağıdaki kurallar vardır.

•p [lang] – Tüm paragraf öğelerini bir lang niteliği ile seçer.

•p [lang = “tr”] – Lang özelliği tam olarak “tr” değerine sahip tüm paragraf öğelerini seçer.

•p [lang ~ = “tr”] – Lang özelliği “tr” kelimesini içeren tüm paragraf öğelerini seçer.

•p [lang | = “en”] – Lang özelliği tam olarak “en” olan ya da “en-” ile başlayan değerleri içeren tüm paragraf öğelerini seçer.

Çoklu Stil Kuralları

Tek bir eleman için çoklu stil kuralları tanımlamanız gerekebilir.

Birden çok özelliği ve karşılık gelen değerleri, aşağıdaki örnekte tanımlandığı gibi tek bir blokta birleştirmek için bu kuralları tanımlayabilirsiniz –

h1 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Burada tüm özellik ve değer çiftleri noktalı virgülle (;) ayrılır . Bunları tek bir satırda veya birden çok satırda tutabilirsiniz. Daha iyi okunabilmesi için bunları ayrı satırlarda tutarız.

Bir süre yukarıdaki blokta belirtilen özelliklerden rahatsız olmayın. Bu özellikler önümüzdeki bölümlerde açıklanacak.

Gruplama Seçicileri

İsterseniz birçok seçiciye bir stil uygulayabilirsiniz. Aşağıdaki örnekte gösterildiği gibi, seçicileri virgülle ayırmanız yeterlidir –

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Bu tanımlanmış stil kuralı aynı zamanda h1, h2 ve h3 elementine uygulanabilir. Listenin sırası önemli değil.

Seçicideki tüm elemanlar, kendilerine uygulanan ilgili bildirimlere sahip olacaktır.

Çeşitli id seçicileri aşağıda gösterildiği gibi bir araya getirebilirsiniz –

#content, #footer, #supplement {
   position: absolute;
   left: 510px;
   width: 200px;
}

Diğer makalelerde görüşmek üzere…

İyi çalışmalar dileriz…

İlginizi çekebilir…

WordPress Spam Yorumlarla Mücadele için Önemli İpuçları ve Araçlar!

Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter ve İnstagram‘da da bulabilirsiniz …


Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

İçerik Metası
İbrahim Bozkurt /// https://www.tutorialspoint.com/css/css_syntax.htm