Web sayfalarına CSS nasıl ekleyebilirim? yöntemleri nelerdir?
Toplam 1 cevap
Web sayfalarına CSS eklemeyi 4 farklı şekilde yapabiliriz.
1. Kod içinde (In-line)
Direk olarak HTML elementin içine style özelliği kullanılarak uygula yöntemi.
<div style="color:blue">Uzmanım</div>
Tüm CSS komutlarını kodların içine direk uygulamak önerilen bir kodlama şekli olmadığı için ancak özel durumlarda kullanılması tercih edilir.
2. style Elementi kullanılarak
<head> kısmında <style> elementi içinde CSS kodumuzu yazarak kullanma yöntemi.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>uzmanım.net</title>
<style type="text/css">
p{
color:blue;
}
</style>
</head>
<body>
<p>Uzmanım.net</p>
</body>Birinci yönteme göre daha avantajı bir kullanım şeklidir. HTML kod ile CSS bir birinden ayrıştırılmış olması.
3. Harici Stil(CSS) şablonu Kullanımı
Bu metod da CSS kodlarımzı .css uzantılı bir dosyaya kaydedip projeyemize ekleriz. ilkOrnek.css
a {
color: red;
}Daha sonra bu kodu gereken sayfalarımıza uygularız.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" /> <title>uzmanım.net</title> <link rel="stylesheet" type="text/css" href="ilkOrnek.css" /> </head> <body> <a href="http://www.uzmanim.net">Uzmanım.net</a> </body>
Bu yöntemin diğerlerine göre en büyük avantajı bir kere yazılan kod lazım 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 önemli bir hız kazancı sağlayacaktır.
4. @import ile eklemek
3. yöntem ile kullanımı benzemektedir.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" /> <title>uzmanım.net</title> <style type="text/css"> @import "ilkOrnek.css"; </style> </head>
@import ile eklenen kodlar link ile eklenen kodlardan daha önce yorumlanır web tarayıcıları tarafından. Ayrıca css dosyalarımızda @import özelliğini kullanarak devamlı kullandığmız kodları css dosyamıza harici olarak ekleyebilriz böylelikle tekrarlardan kaçınmış oluruz.
Ayrıca içeriği büyük olan sitelerde css kodunun parçalara ayrılması ve kullanılan sayfa CSS'inde hangi parçalar gerekli ise onların import edilmesi önerilir. Bu sayede kodun bir kısmında yaptığımız değişiklik için tüm css kodu incelenip değiştirilmesi gerekmez.