CSS’i (X)HTML sayfalarımıza
eklemenin 4 yöntemi vardır.
1. Kod
içinde (In-line)
Direk olarak (X)HTML
elemanın içine style özelliği kullanılarak uygulamak.
<div style="color:red">Deneme
yazımız</div>
Tüm CSS komutlarını
kodların içine direk uygulamak önerilen bir kodlama şekli değildir.
2. <style>
Elemanı Kullanılarak
<head> kısmında <style> elemanı içinde CSS kodumuzu yazarak;
<head>
<style type="text/css">
div{
color:red;
}
</style>
</head>
Birinci yönteme göre avantajı (X)HTML kod ile CSS bir
birinden
ayrıştırılmış olmasıdır.
3.
Harici CSS Dosyası Kullanımı
Bu metot da CSS kodlarımızı .css uzantılı bir dosyaya kaydederiz. Daha sonra bu kodu
gereken sayfalarımıza uygularız.
ornek.css
p {
color: red;
}
a {
color: blue;
}
<head>
<link rel="stylesheet"
type="text/css"
href="ornek.css"
/>
</head>
Bu yöntemin diğerlerine
göre en büyük avantajı bir kere yazılan kod gerekli olan tüm sayfalara
eklenebilmesidir. Bu sayede harici eklenen css kodu bir kere
yüklendikten sonra diğer kullandığımız sayfalarda tekrar yüklenemeyerek bize
hız kazandıracaktır.
4. @import le
Eklemek
3. yöntem ile kullanımı
benzerdir. import kodu link koduna göre önce yorumlanır. Eski tarayıcılar
tarafından yorumlanmaz.
<head>
<style type="text/css">
@import "ornek.css";
</style>
</head>
Bu yöntemle eklenen
harici css dosyası eski web tarayıcıları tarafından
görüntülenemeyecektir. web tarayıcıları tarafından @import ile eklenen kod link
ile eklenen kodlamadan önce yorumlanır. Ayrıca CSS dosyalarımızda @import özelliğini kullanarak
devamlı kullandığımız kodları css dosyamıza harici olarak ekleyebiliriz böylelikle
tekrarlardan kurtulmuş olunur. Bu metot avantajları bakımından önerilen bir
yöntemdir.
Hiç yorum yok:
Yorum Gönder