CSS'in Yapisi / CSS Syntax and Selectors

Css'in yapisi genel olarak iki bolumden olusur.

  1. Secici/seciciler bloğu.[Selector]
  2. Bildirim Bloğu [Declaration]
Evet yukardaki aciklama biraz soğuk duruyor , ifadeyi biraz samimileştirelim ve tekrar yazalim.
  1. Hangi html ogesine/ogelerine css uygulayacagimiza karar verdigmiz bolum [p,div,span,...]
  2. Yaptigimiz secime css uyguladigimiz bolum


Selector {Property1:Value1;Property2:Value2;}

Konuyu ornek uzerinden anlatmak sanirim daha faydali olacak.
Sayfamizdaki tum link elementlerine(a) CSS uygulamak istedigimizi dusunelim,hepsinin rengi kirmizi olsun ve 24px font degeri verelim
a {color:red;font-size:24px;}
Evet yukardaki kod istedigimizi yapacaktir.
  1. Ornektede goruldugu gibi a elementi selector gorevinde.
  2. Suslu parantezler icerisindeki bolum Bildirim blogudur.
  3. ozellik:deger; seklindeki ifadeler birer bildirimdir.(color:red; ve font-size:24px;)
  4. Her bildirimde ozellik ile deger arasinda iki nokta ust uste [ : ] bulunur
  5. Bildirimler birbirinden noktali virgulle [ ; ] ayrilir
asagdaki kodda ayni islemi yapar!
a {
	font-size:24px;
	color:red;
}
(a,p,h1,div,body,ul,li,span gibi istedigmiz elementi secerek css uygulayabiliriz)

CSS Seçicileri

Yukarda da bahsettigimiz gibi html ogleri(span,div,p,a,table,..) , sınıf isimleri,id isimleri secici olarak kullanilabilir.(tabiki hepsi bukadar degil)
html ogelerinin kullanimi yukardaki gibi,simdi digerlerinden bahsedelim.

CSS - ID Selector

Html derslerinde ( Html id ve Class ) ID ve Class terimlerinden bahsettik,isteyen arkadaslar bakabilir.
  1. Html dersimizde ID icin html ogesinin kimlik numarasi gibi ifadesini kullanmistik hatirlatalim(... id="html_dersleri" veya id="sayfa5" ... gibi)
  2. Sayfada yer elan ve id degeri verilmis html elemani hedeflenir
  3. id bilgisi geregi sadece belirli bir elemana ulasma niyetinden oldugumuz durumda kullanilir
  4. id isminin basinda # isareti yer almalidir
#menu {
    color: red;
    font-size:24px;
    text-align: right;

}

id degerlerini bir sayi ile baslatmamak onerilen bir davranistir!
(ben chrome ile denedim css uygulanamiyor)

CSS - Class Selector

Yukarda id selector icin "sayfadaki belirli bir elemani hedef alir" demistik,iste bunun aksine bazen birden cok html ogesini hedef alarak(secerek) css uygulamak kolaylik saglar.
  1. Sayfadaki ayni sinif degerine sahip html ogeleri hedeflenir
  2. Herhangi bir sinifi secmek icin once nokta isareti sonra ise sinif adi yazilir
Bircok yerde baslik bulunduran uzunca bir dokuman hayal edin,(yada 100 sayfa)
Birgun patronunuz geldi ve dediki "Tum basliklarin fontunu büyüt ve kirmizi renkli olsun herkes farketsin." tabiki siz zamaninda bugunleri dusunerek her baslik elementi icin baslik isminde bir sinif atadiginiz icin cok rahatsiniz :)
.baslik {
    color: red;
    font-size:30px;
}
iste bitti.
Patron hizinizdan etkilendi fakat sayfadaki tum baslik sinifini tasiyan elementlerin kirmizi ve buyuk fontta olmasindan rahatsiz oldu "sadece ana basliklari bicimlendir" dedi.
tabi efendim!
h1.baslik {
    color: red;
    font-size:30px;
}
iste bitti.
Patron sonuctan yine memnun degil,sadece makaleler bolumu icinde yer alan basliklarin (h1.baslik) bicimlendirilmesini istedi.
evet bu iyi bir istek dikkat!
#makaleler h1.baslik {
    color: red;
    font-size:30px;
}
yukardaki kodun anlami sudur makaleler id degerine sahip elementin icinde yer alan h1 basliklarindan sinifi baslik olanlari bicimlendir!
yukardaki kodun bazi versiyonlari cocuk elementin bazi ozel durumlarinda ise yaramayabilir!
Bir element birden fazla sinif barindirabilir ... class='baslik kirmizi' ... gibi bu durumda elementimiz baslik ve kirmizi siniflari icin yazilan css degerlerinden etkilenecektir

CSS - Gruplama

Uygulanan CSS degerinden etkilenmesi icin birden fazla secici kullanma bicimidir(aralarinda virgull kullanarak), hem yazilan kodlari azaltir hemde yonetilebilirlik acisindan pozitif etkiye sahiptir.
h1,p,a,.baslik{
	color:red;
	font-size:16px;
}

CSS - Yorum Satirlari

CSS'de de kodlarimizin arasina bize/baskalarina yardimci olacak yorumlar yazabiliriz. /* burasi yorum alanidir */
/*Tum h1 elementlerinine CSS uygulayalim*/
h1{
	color:red;/*kirmizi olsun*/
	font-size:16px;
}
/*
Tek satirli,
cok satirli
yorumlar eklenebilir
*/
CSS ile cok daha farkli secimler yapmak mumkun bunlari ilerleyen derslerde ogrenecegiz.
yukardaki uyariya bir onek verelim.
*{
	color:red;
	font-size:16px;
}
Yukardaki kodda tum elementlere css uygulamak istedik ve * (Evrensel secici) karakterini kullandik.
Simdi yukardaki konulari daha iyi kavramak icin bir ornek yapalim.
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Css Selector</title>
	<style>
	/*Tum linkleri kirmizi yapalim*/
	a{color:red;}
	

	/*tum h1 elementlerine font-size degeri verelim*/
	h1{font-size:32px;}


	/* baslik2 id degerindeki h1 elementinin rengini degistirelim*/
	#baslik2{color:blue;}

	/*linkler isimli sinifa css verelim*/
	.linkler{
		font-size: 24px;
	}


	/* ozel sinifina sahip linkler icin css*/
	a.ozel{color:black;}


	/* p ve div icin ortak css yazalim*/
	p,div{
		font-size: 30px;text-align: center;
	}


	/* paragraf id degerindeki p elementi icinde yer alan 
	a elementini bicimlendirelim diger a elementleri etkilenmesin*/
	#paragraf a{
		color: green;
		font-size: 18px;
	}

	</style>
</head>
<body>
<h1 class="baslik" id="baslik1">Güvenlik Yazilimlari-1</h1>
	<ul id="menu1" class="linkler">
		<li><a href="#">Bitdefender</a></li>
		<li><a href="#" class="ozel">Eset</a></li>
		<li><a href="#">Avast</a></li>
	</ul>

	<h1 class="baslik" id="baslik2">Güvenlik Yazilimlari-2</h1>
	<ul id="menu2" class="linkler">
		<li><a href="#">Panda</a></li>
		<li><a href="#" class="ozel">Avira</a></li>
		<li><a href="#">Norton</a></li>
	</ul>

	<hr>

	<p id="paragraf">
		Css Hakkinda uzunca bir paragraf...

		<a href="#">Burda da bir link var</a>
	</p>


	<div>
		uzunca bir div icerigi...
	</div>

</body>
</html>

Güvenlik Yazilimlari-1

Güvenlik Yazilimlari-2


Css Hakkinda uzunca bir paragraf... Burda da bir link var

uzunca bir div icerigi...

Bu derse ait gorus ve onerilerinizi yada farkettigniz hatalari Lutfen bana bildirin!
birbyte.net@gmail.com