Css Stil Sayfasi

Yazar: BirKod Tarih: 25.07.2015

Merhaba arkadaşlar. Önceki dersimizden bu dersimize aktardığımız CSS ile dökümanlara ulaşmayı anlatacağız. Öncelikle bahsetmek istediğimiz konu bu css özelliklerini hangi dökümanlarda, nasıl çalıştıracağımızdır. Önreğin bir h1 etiketine verdiğimiz color=red özelliğini farklı bir sayfada h1 etiketini kullanırken nasıl çağıracağız? İşte bu konumuzda genel olarak bundan bahsedeceğiz..

1. YÖNTEM: Her Sayfaya Ayrı Stil Dökümanları

Öncelikle söylemeliyim ki bu yöntemi kesinlikle tavsiye etmemekteyiz. Uzun CSS Kodlarımızın hepsini her yeni sayfaya eklemek hem siteyi yavaşlatacak, hem de düzenleme açısından büyük bir eksi alacaktır. Bu nedenle sadece çalışırken kolaylık olması açısından bahsetmek istedik.

<html>
<head>
	<title>Sayfa Başlığı</title>
	<style>
		h1 {color: red}
	</style>
</head>
<body>
	<h1>BirKod - CSS Stil Sayfası!</h1>
</body>
</html>

Yukarıdaki kodda dikkatimizi çeken kısmı farketmişsinizdir. Evet, style kodlarımızı head taglarımız arasına ekledik ve tüm style taglarımızın içeriği bize css dökümanlarını kullanabilme avantajı sağlıyor. Fakat yalnızca bu sayfada...

2. YÖNTEM: Stil Dosyası Belirleme ve Çağırma

Genelde kullandığımız yöntem budur. Yeni bir döküman oluştururuz. İsmine stil.css deriz ve html dökümanımıza bu dosyamızı çağırırız. Gelin nasıl yapacağımıza bakalım..

Öncelikle yeni bir klasör oluşturalım ve içerisine yukarıda da belirttiğimiz gibi 2 adet dosya açalım. Bu dosyalarımızı Yeni › Metin Belgesi diyerek oluşturabiliriz. Yalnız dikkat edin. Uzantıları ~~.txt~~ olmamalıdır.. Döküman uzantılarını dikkate alarak oluşturalım..

Şimdi bu dökümanlarımızı bir not editörü ile açalım. (Notepad++, Sublime Text, Not Defteri...)

stil.css

h1 {color: red}

index.html

<html>
<head>
	<title>Sayfa Başlığı</title>
	<link href="stil.css" rel="stylesheet" />
</head>
<body>
	<h1>BirKod - CSS Stil Sayfası!!</h1>
</body>
</html>

Dökümanlarımıza bu kodları ekledikten sonra farkettiğiniz üzere kodlarımız arasına link etiketini ve link etikinin içerisine href komutu ile dosyamızı, rel komutu ile ise sayfalar arası bağlantıyı kurmayı sağlamış oluyoruz. Bu sayede bundan sonra stil.css dökümanımız içerisine yazacağımız tüm özelliklerimiz stil.css dosyamızı çağırdığımız tüm sayfalarımızda geçerli olacaktır. Wordpress gibi web sitelerinde stil dosyamızı yalnızca header.php'ye eklemekteyiz. Daha sonrasında ise header.php içeriğimiz tüm sayfamızda görüntülenecek olmasından dolayı stil dosyamızda tüm sayfalarımızda eklenmiş olacaktır. Yani aslında 2. yöntem bizim işimizi oldukça kolaylaştıracaktır.

Birkod

Css Stil Sayfasi

1. YÖNTEM: Her Sayfaya Ayrı Stil Dökümanları

2. YÖNTEM: Stil Dosyası Belirleme ve Çağırma

stil.css

index.html