CSS'in Yapısı ve Selector'lar

Css yapı(rule)'lardan oluşur. Yapı'ların temeli Selector(seçiçi) denilen yapılardır. Aşağıda h3 ile kullanılan başlığın rengini kırmızı yapıyoruz.

  1 <html>
  2 <head>
  3 	<style>
  4 		h3{
  5 			color:red;
  6 		}
  7 	</style>
  8 </head>
  9 <body>
 10 	<h3>Bu başlık kırmızı olur</h3>
 11 	<h4>Bu başlık kırmızı olmaz</h4>		
 12 </body>
 13 </html>

h3{color:red;}, rule'dır. {'den önce yazılan bölüme selector denir. Burada h3 selector'dür. {}'in içindeki property:value çiftleri de decleration'dır. Decleration'larda birden fazla value kullanılabilir. örneğin

olduğu gibi 10pt ve Times value'leri kullanılabilir. 10 pt font'un boyu, Times'sa font tipidir.

Çağlayan Yapısı ve Inheritance

Html elementlerin hiyerarşilerinden oluşur. Tüm elementlerin en tepesinde html elementi vardır. Onun içinde head, head'in içinde ise title elementi kullanılır. Yine h1 elementi body elementinin içinde kullanılır. body'in stilinde renk olarak kırmızı verilsin, h3'ün rengi mavi yapılsın. h3 içindeki yazılar kırmızı mı mavi mi olurlar. h3 mavi istiyor ancak body kırmızı istiyor. h3 içindeki yazıların rengi mavi olur. Her zaman en alttaki etiket etkili olur. h3'teki yazı h3'ün içinde olduğunda h3'ün dediği olur. Aşağıda bu örneği görüyorsunuz.

  1 <html>
  2 <head>
  3 	<style>
  4 		body{
  5 			color:red;
  6 		}
  7 		h3{
  8 			color:blue;
  9 		}
 10 	</style>
 11 </head>
 12 <body>
 13 	<h3>bu başlık mavi olur</h3>
 14 	<p>bu yazı kırmızı olur</p>
 15 </body>
 16 </html>

Bir tag'in biçimini başka bir tag'e göre verebilirsiniz. örneğin <i> tag'i p tag'in içinde red, h1 tag'inin içinde blue olması için şunu yapmamız gerekir.

  1 <html>
  2 <head>
  3 	<style>
  4 		p i{
  5 			color:red;
  6 		}
  7 		h1 i{
  8 			color:blue;
  9 		}
 10 	</style>
 11 </head>
 12 <body>
 13 	<h4>buradaki yazıda <i>renk değişmeyecek</i> olacak</h4>
 14 	<h1>buradaki yazıda <i>mavi</i> olacak</h1>
 15 	<p>buradaki yazıda <i>lırmızı</i> olacak</p>
 16 </body>
 17 </html>

Eğer selector1 selector2{...} şeklinde bir yapı varsa şu anlama gelir. selector2 eğer selector1 tag'in içinde ise bu stili uygula. Bu birden fazla selector için de kullanılabilir. Örneğin

şeklinde kullanılırsa div tag'inin içindeki p tag'inin içinde i varsa bu stil uygulanır.

Class ve İd selector

Yukarıdaki örneklerde selector olarak h3,body gibi elementler kullanılmıştır. Class ve id selector kullanmak çok yararlıdır. Class selector .isim,id selector #isim ile yaratılır. Aşağıda redHead ve blueHead adlı iki class yaratılmakta ve kullanılmaktadır. Bu class'lar renk özelliği olan tüm elementlere uygulanabilir(body,h1...,h6,p vs..). İd kullanımında . yerine #,class yerine id yazmak yeterlidir.

  1 <html>
  2 <head>
  3 	<style>
  4 		.redHead{
  5 			color:red;
  6 		}
  7 		.blueHead{
  8 			color:blue;
  9 		}
 10 	</style>
 11 </head>
 12 <body>
 13 	<h3 class="redHead">bu başlık kırmızı olur</h3>
 14 	<h1 class="blueHead">bu yazı mavi</h1>
 15 </body>
 16 </html>

  1 <html>
  2 <head>
  3 	<style>
  4 		#redHead{
  5 			color:red;
  6 		}
  7 		#blueHead{
  8 			color:blue;
  9 		}
 10 	</style>
 11 </head>
 12 <body>
 13 	<h3 id="redHead">bu başlık kırmızı olur</h3>
 14 	<h1 id="blueHead">bu yazı mavi</h1>
 15 </body>
 16 </html>

id'ler sadece bir kere kullanılabilirler. class'lar ise istenildiği kadar kullanılabilir.

Pseudo Elements ve Pseudo Class

Pseudo elementler veya classların başında : işareti bulunur. Aşağıda bir link üzerine gelindiğinde stilini değiştirmek için :hover pseudo classı kullanılmaktadır. Fare ile linkin üzerine gelindiğinde linki kırmızı renkte yapıyoruz.

  1 <html>
  2 <head>
  3 	<style>
  4 		a:hover{
  5 			color:red;
  6 		}
  7 	</style>
  8 </head>
  9 <body>
 10 	<a href="bilmemne.html">tıkla</a>
 11 </body>
 12 </html>

:link pseudo class'ı henüz tıklanmamış linklerin biçimlerini set eder. :visited ise bir kere tıklanmış (ziyaret edilmiş) linklerin biçimini kontrol etmek için kullanılır. :active ise bir seçili durumdaki (yeni tıklanmış) linklerin biçimnini ayarlamak için kullanılır. :focus ise elemnt focus'landığı zaman biçim vermek için kullanlır. aşağıda tüm bu pseudo classları kullanıyoruz.

  1 <html>
  2 <head>
  3 	<style>
  4 		:link{
  5 			color:gray;
  6 		}
  7 		a:hover,a:visited:hover,a:active:hover{
  8 			color:red;
  9 		}
 10 		a:active{
 11 			color:green;
 12 		}
 13 		a:visited{
 14 			color:brown;
 15 		}
 16 	</style>
 17 </head>
 18 <body>
 19 	<a href="bilmemne.html">tıkla</a>
 20 </body>
 21 </html>

Specificity-Öncelik

  1 <html>
  2 <head>
  3 	<style>
  4 		.mystyle{
  5 			color:blue;
  6 		}
  7 		p{
  8 			color:red;
  9 		}
 10 	</style>
 11 </head>
 12 <body>
 13 	<p class="mystyle">buradaki yazı ne renk?</p>
 14 </body>
 15 </html>

görüldüğü gibi p red olsun, .mystyle class'ı blue olsun istiyor. Biri diğerinin altında veya üstünde olmadığına göre kimin dediği olacak. Burada devreye öncelik meselesi girmektedir. burada .mystyle'ın dediği olur. en yüksek öncelik id selector'undur. daha sonra class selector ve en son tag selector gelir.

CSS'in Yapısı ve Selector'lar

Css'nin Yapısı

Çağlayan Yapısı ve Inheritance

Class ve İd selector

Pseudo Elements ve Pseudo Class

Specificity-Öncelik

Dosya Listesi