Css - Baskinlik

  1. Inline CSS / Satir ici Stillerle.
  2. Internal CSS / Dahili Still Kullanimi.
  3. External CSS / Harici Stil Sayfalariyla.

Evet arkadaslar onceki dersimizde yukardaki basliklari ogrendik,fakat simdi asagida bahsedecegim baskinlik problemlerine göz atacagiz , css ogrenmeye yeni baslamis arkadaslar icin biraz can sıkıcı olabilir.

Css - Element,Id ve Class Baskinligi

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
#ders{color:blue;}

.ders{color:red;}

h3{color:black;}

</style>
</head>
<body>
 
 	 <h3>Css Dersleri (1)</h3>
 
	 <h3 id='ders' class='ders'>Html Dersleri (2)</h3>
	 
	 <h3 class='ders'>Javascript Dersleri (3)</h3>

	 <h3 style='color:orange' id='ders' class='ders'>jquery Dersleri(4) </h3>
 
</body>
</html>

Css Dersleri (1)

Html Dersleri (2)

Javascript Dersleri (3)

Jquery Dersleri (4)

Sonucu sirayla yorumlayalim:
  1. 'de id ve sinif olmadigi icin sonuc siyah(1)
  2. 'de ID kullanilarak yazilan css kodu ,element ve sinif icin yazilan koda baskin geldi,siyah yada kirmizi degil sonuc mavi(2)
  3. 'de sinif icin yazilan css kodu , element icin yazilan css koduna baskin geldi sonuc kirmizi(3 Numara)
  4. 'de yazilan inline css element,id ve sinif icin yazilan koda baskin geldi

Css - inline css,internal css,external css Durumu

Asagida ise biraz daha karisik durumda neler oluyor onu inceledik.
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Css</title>
	<style>
		h1,h2{color:blue;}
	</style>
	<link rel="stylesheet" type="text/css" href="cssdosyasi.css">
</head>
<body>
	<h1 style="color:green;">Merhaba Neptün! (satir ici css var)</h1>
	<h2>Merhaba Dünya!</h2>
</body>
</html>
cssdosyasi.css'in icerigi
h1,h2{
	color: red;
}

  • internal css yontemiyle rengi mavi yaptik. daha sonra harici css dosyasinda kirmizi renk atadik.
    h1 elementi neden yesil renkte gorunuyor?
    Cunku h1 elementine uygulanan satirici css elemente digerlerine gore daha yakin ve onemi yuksek.(onceki derste 1.madde de soylemistik) bu nedenle inline-css kazandi.
  • h2 elementinde satir ici css yok fakat kirmizi neden?
    Cunku harici css dosyasi , internal css kodlarindan sonra eklendi ve onceki renk degerlerini guncelledi diyebilirim.(baskin geldi)
  • Simdi harici css dosyasini , internal css bilgilerinden once ekleyip sonucu gorelim
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Css</title>
    	<link rel="stylesheet" type="text/css" href="cssdosyasi.css">
    
    
    	<style>
    		h1,h2{color:blue;}
    	</style>
    
    	
    </head>
    <body>
    	<h1 style="color:green;">Merhaba Neptün!</h1>
    	<h2>Merhaba Dünya!</h2>
    
    </body>
    </html>
    Evet sonuc simdi de mavi!.
baskinlik konusunda %100 konusacak tecrubeye sahip degilim zaten bu konu cesitli durumlara bagli tarayici varsayilanlari,once ekleme,sonra ekleme,sinif secicisi ile eklenen degerler,id degerleriyle eklenen degerler,secici yol tarifi, asagda gosterecegim important deyimi vs.

fakat kucuk bir ipucu verebilirim
css secicisi html ogesine nekadar yakinsa degeri okadar artar. ne demek yakin?
ornegin satirici css html ogesinin tam kalbinde,
id secicisi html ogesini dogrudan isaret ediyor sadece 1 eleman seciyor,
sinif secicisi birdencok html ogesini secebiliyor()
element secicisi belirtilen tum elementleri seciyor (ornegin butun p elementlerini)
(adim adim elementten uzaklastik onun degerini dusurduk gibi dusunebiliriz)

CSS- secici yol tarifi

Asagidaki kodda p icindeki a elementlerini mavi yapmak istedik , fakat daha sona yazilan div a seklindeki css secicisi mavi a elementinide de kirmizi yapti.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
p a{color:blue;}
div a{color:red;font-size:30px;}
</style>
</head>
<body>
 
 <div class='birbyte'>
    <a href='#'>css-1</a>
    
    <p class='paragraf'>
    	<a href='#'>css-2</a>
    </p>
    
 </div>
 
</body>
</html>

css kodumuzu su sekilde degistirirsek p icindeki a elementi mavi kalacaktir.
div p a{color:blue;}
div a{color:red;font-size:30px;}

Css - important

Dokumanimiza birden cok harici css dosyasi ekledigimizi,internal css kullandigimiz vs dusunelim. bu durumda bazen islerin yolunda gitmez,kirmizi istedigimiz bir baslik ısrarla mavi gorunmeye devam eder. burda araya girmek gerek ve ben bunu kirmizi istiyorum iste o kadar demek icin important ifadesini asagdaki gibi kullanabiliriz. ben karmasayi ayni dosyada kisaca gostermek istedim (asagida 5. h1 haric digerleri kirmizi olacak)
<!DOCTYPE html>
<html>
<head>
<style>

h1.yesil{color:green}

h1#mavi{color:blue}

h1 {color: red !important;}

</style>

</head>
<body>

<h1>Merhaba Neptün!</h1>
<h1 style="color:blue">Merhaba Neptün!</h1>
<h1 class="yesil">Merhaba Neptün!</h1>
<h1 id="mavi">Merhaba Neptün!</h1>
<h1 style="color:black !important;" class="yesil">Merhaba Neptün!</h1>
</body>
</html>

Merhaba Neptün!

Merhaba Neptün!

Merhaba Neptün!

Merhaba Neptün!

Merhaba Neptün!


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