The Anatomy of a CSS Rule

Önceki makalede, bir HTML elemntini CSS ile stillemenin ne kadar kolay olduğunu anlamak için "Hello, world!" örneği kullandık. Ama o şekilde görünmesi nasıl sağlandı? bu makalede, nasıl çalıştığının hakkında daha derin bir bilgi almak için, CSS'in anatomisi ve yapısına odaklanacağız. H1 elementlerini hedeflediğimiz CSS kuralı yazdığımız örneğe bir bakış atalım:

h1 {
	color: DeepSkyBlue;
}

burada bir özellik ve bir değer ile bir selektör'ümüz var - bunlar CSS'in ana konseptleridir, bu makale sırasında isimlerini hatırlamanız gerekir. bu örnekte, selektörün adı h1, özellik color ve değer DeepSkyBlue'dur.

Bu 3 konsept arasında, birkaç özel karakter görüyorsunuz: özellik ve değeri çevreleyen süslü parantezler, özelliği değerden ayıran iki nokta üst üste, değerden sonraki noktalı virgül. her biri tarayıcıyı yazdığınız CSS kodunuanlamasına yardımcı oluyor: Süslü parantezler birden çok özelliği aynı kural (selektör) içine yazmanıza, iki nokta üst üste derleyiciyi özelliğinin nerede bitip değerin nerede başladığını anlamasına, ve noktalı virgül de derleyicinin değerin nerede bittiğini anlamasına yardım ediyor.

Üstteki selektörümüz gibi basit bir selektör için bu biraz karışık görünebilir, fakat daha fazla özellikli ve daha karışık özellikli ve daha karışık selektör ismi kullandığımız zaman, çok mantıklı gelecek. biraz daha karışık örnekle anlatayım:

h1, h2, h3 {
	color: DeepSkyBlue;
	background-color: #000;
	margin: 10px 5px;
}

h2 {
	color: GreenYellow;
}

Şimdi ilki birden fazla elementi hedefleyen, birden fazla selektörümüz, birden fazla özellik ve birden fazla değerimiz var - şu an muhatamelen yazdığınız kuralları derlemek için neden CSS yazım kurallarına ihtiyaç duyduğumuzu görüyorsunuz.

Formatting and Whitespace in CSS

You may we wondering why I'm formatting the selector the way I do: The initial curly brace is on the same line as the selector name, but the ending one is on a line of its own, properties have been indented and there's a space after the colon separating property and value but not before it. Why? Because that's how I like it but the truth is that the CSS parser doesn't care about whitespace.

Some people prefer to have the initial curly brace on its own line and to have a space before the colon as well:

h1
{
	color : DeepSkyBlue;
}

And that works just as well. In fact, a lot of software has been written to compact/minify CSS to take up the least possible amount of space, like this:

h1{color : DeepSkyBlue;}

That will work just fine too, but for more complex rules, it will make it harder to read and edit. However, the parser will understand it just as well as our first example, thanks to the special characters used as separators, as already discussed.

Summary

In this chapter, we've learned that the basic ingredients of CSS is the selectors, properties and values. A CSS document can contain multiple selectors and a selector can have multiple properties which in turn can have a value consisting of one or several elements. We also learned that curly braces, colons and semicolons separate each of the three ingredients from each other, and that whitespace and formatting is really up to you - the parser generally doesn't care.

We have looked at some basic selectors with some basic properties by now, but selectors is a much deeper subject and there are plenty more properties to work with. We will of course be discussing both in much more detail later in this tutorial.