Sayfaya Css Ekleme Yontemleri

Basliktanda gorulecegi gibi bu derste sayfamiza css kodlarimizi eklemenin degisik yontemlerini olumlu ve olumsuz ozellikleriyle ogrenecegiz.

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

1-Inline CSS

Dogrudan html ogesinin style niteligi kullanarak elemente eklenir.
<p style="color:red;text-align:right;">
		Kırmızı renkli,saga dayali icerik.
</p>
gorulecegi uzere bu sekilde eklenen css sadece eklendigi elemente etki yapar,bana gore bu durum hem pozitif hemde negatif etkiye sahiptir.
  1. Pozitif cunku oncelik degeri yuksektir.(diger css ekleme yontemlerine gore)
  2. Negatif cunku dokumanimizda her elemana css eklemek zorunda kalabiliriz buda kod karmasasi demektir,ve sayfanin yuklenme hizinada olumsuz yansir.
  3. Bu yontemin kullanilmasi ozel durumlar icin nadiren gerekebilir.

2-Internal CSS

Inline CSS yontemine gore oldukca esnek sayilabilir. Genel olarak sayfanin head bolumune asagdaki ornekte oldugu gibi eklenir.
SONUC:

Yukardaki ornekte CSS kodlarinin head kapsaminda ve bir style elemani icinde yer aldigni gordunuz mu?
h1 icin ayarlanan stil ozelliklerinin gecerli sayfadaki tum h1 degerlerine etki yaptigni gordunuz mu?
p icin ayarlanan stil ozelliklerinin gecerli sayfadaki tum p degerlerine etki yaptigni gordunuz mu?
Bu yontem ne zaman tercih edilebilir?
Sadece bulundugu dokumana ozgu(tek 1 dosya) css bilgileri tasiyorsa kullanilabilir.

External CSS

Gordugumuz iki kullanim biciminde de uygulanan stiller sadece bulundugumuz dokuman ile sinirliydi,simdi ogrenecegimiz yontem ile yuzlerce sayfalik bir websitesinin gorunusunu sadece tek bir css dosyasini guncelleyerek degistirebiliriz. Cunku bu metot soyle calisir:CSS kodlari ayri bir dosyaya yazilir ve ihtiyac duyulan belgeye bir link gibi eklenir.

<!DOCTYPE html>
<html lang="en">
<head>
	<title>External Css</title>
	<link rel="stylesheet" href="cssdosyasi.css">
</head>
<body>
	<h1>External Css Baslik</h1>
	<p>External CSS Aciklama...</p>
</body>
</html>
Html Dosyasinda ekledigmiz cssdosyasi.css icerigi asagda
body{
	background-color:lightblue;
}

h1{
	font-size: 32px;
	color:red;
	text-align: center;
}

p{
	text-align: center;
}
SONUC:

Stil dosyamizin uzantisinin css oldugnu gordunuz mu?
Stil dosyamizda sadece css kodlarinin oldugunu gordunuz mu?
Stil dosyamizi sayfamiza head kapsaminda asagdaki gibi ekledigmizi gordunuz mu?
<link rel="stylesheet" href="cssdosyasi.css">
Bu css dosyasini 100 sayfanin kendisine ekledigini dusunun,sadece css dosyasindaki bir kodu degistirerek (ornegin body ogesinin arkaplan rengini) tum sayfalarin arkaplan rengini degistigini gorecegiz,guncelleme acisindan oldukca pratik degil mi?

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