Css’i Web Sayfasında Kullanma Ders-2
Merhaba arkadaşlar daha önceki dersimde de belirttiğim gibi css artık web sayfaları için olmazsa olmazdır. Peki css dosyalarını web sayfalarında nasıl kullanacağız bunların yolları ne derseniz. aşağıdaki başlıkları dikkatlice okumalısınız.
1 – Css’in kod İçerisinde Kullanımı (html, php, asp … sayfanızda direk kullanma)
Kullanım aşağıdaki gibidir.
<div style="color:#fff; font:14px Tahoma; width:200px; height:50px; margin:10px;">Burası Style'ın uygulanacağı Alan</div>
Yukardaki kod bloğunu gördüyseniz bunun gibi yüzlerce kod bloğunun sayfanızı nasıl kasacağını ve google açısından da nasıl bir dezavantaj olacağını da düşünmüş olmalısınız ? Bu artık tasvip edilmeyen bir css style kullanımıdır.
2 – Head Etiketi Arasında Kullanımı (html, php, asp … sayfanızda direk kullanma)
<!DOCTYPE">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.tablomuz{
color:#fff;
font:14px Tahoma;
width:200px;
height:50px;
margin:10px;
}
</style>
</head>
<body>
<div class="tablomuz">Bu Alan Css Style'ın Uygulanacağı Alan</div>
</body>
</html>Bu kullanımında aslında yukardaki kullanımdan pek farkı yoktur. tek farkı bu kullanımın dah aderli toplu duruşu ve tek yerden müdehale edilebilir oluşudur. Fakat; Yinede sayfanızdaki kod yoğunluğunu ve kirliliğini ortadan kaldırmayacaktır.
3 – css Dosyasını Dışardan Çağırmak / sayfa dışı css kullanmak
En iyi en hızlı ve en kullanışlı yöntemdir css dosyasını dışardan çağırma yöntemi. aşağıda örneklendirme sini görebilirsiniz.
öncelikle sayfanıza dışarıdan çağıracağınız css uzantılı dosyanızı hazırlayın. ismini style.css koyun ve aşağıdaki gibi ya da istediğiniz gibi css dosyanızı yapılandırın
style.css
.anatablo{ width:900px; height:50px; margin:0 auto; padding:10px;}index.html
<!DOCTYPE> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="anatablo">Bu Alan Css Style'ın Uygulanacağı Alan</div> </body> </html>
style.css ve index.html dosyalarınız aynı dizinde ise yukarıdaki kod çalışacaktır.
Daha önceki dersimizde de bahsettiğim gibi bu yöntem css kodlarınızı bir dosyada kullanmanıza ve istediğiniz herhangi bir biçimsel değişiklikte daha hızlı hakaret etmenize olanak tanımaktadır.
4 – css @import Yöntemi
Bu yöntem dışarıdan css çağırma yöntemi ile aynıdır ama bu yöntemde css dosyası içerisine başka css dosyaları ya da fontlar da çalıştırabilmenize imkan sağlanmaktadır. örneği şu şekilde olmalıdır.
<!DOCTYPE> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> @import "style.css"; </style> </head> <body> <div class="tablomuz">Bu Alan Css Style'ın Uygulanacağı Alan</div> </body> </html>
Css import ile css dosyalarınızın içerisine de başka css dosyaları çağırarak sayfa yoğunluğunuzu az da olsa etkilemiş olursunuz. örneğin style css yanına menu.css diye bir dosya daha eklemek istiyorsunuz ve bunu harici css dosyası olarak sayfanıza eklemeniz gerekecek, bunun yerine style.css içerisine import edebilirsiniz. bunun için style.css dosyanızı açıp kodların başlangı. kısmına yani en üste @menu.css yazmanız yeterlidir
NOT: yol aynı dizindeyse sadece menu.css yazın. menu.css farklı bir dizinde ise örneğin menu klasörü içinde menu.css ise @menu/menu.css şeklinde yazmanız gerekir.
