Bu konuda Css'i sitemize nasıl ekleriz onu anlatıcağım.
Css'i sitenize eklemenizin 4 yolu vardır.Bunlar;
- Kod İçerisine ekleyebiliriz
- Style etiketi kullanılarak ekleyebiliriz ( Head tagları arasına )
- Harici stil şablonu kullanarak ekleyebiliriz.
- @import kullanarak ekleyebiliriz.
1- Kod İçerisine Eklemek
1. Yöntemle
<div> ve </div> etiketi içerisine style kullanarak ekleyebiliriz.Alttaki örneği dikkatlice bakarak nasıl eklendiğini daha iyi bir şekilde anlayabilirsiniz.
Kod:
[B]<div[/B] [COLOR="Red"]style=”background-color:#1f65d8; color:#fff;”[/COLOR]>Css'i Kod İçerisine Ekleme[B]</div>[/B]2- Style Etiketi Kullanarak Eklemek
2.Yöntemle
<head> tagları arasına <style> kullarak oluşturduğumuz bir div etiketini web sitemizin head tagları arasına eklemiş olduğumuz her sayfasında kullabiliriz.
Kod:
[B]<head>[/B]
[COLOR="vegaspopülerBlue"]<style type=”text/css”>[/COLOR]
#[COLOR="red"]deneme-etiketi[/COLOR]
{
background-color:#1f65d8;color:#fff;
}
[COLOR="vegaspopülerBlue"]</style>[/COLOR]
[B]</head>[/B]Bu etiketin kullanım örneği şu şekildedir. <div> arasına yukarda belirlemiş olduğumuz etiketi(id) adını doğru bir şekilde yazmalıyız.
Kod:
<div [COLOR="vegaspopülerBlue"]id[/COLOR]=”[COLOR="red"]deneme-etiketi[/COLOR]“> Css'i siteme style kullnarak ekledim </div>3- Harici Stil Şablonu Kullanarak Eklemek
Css kodlarımızın tümünü .css uzantılı bir dosyaya ekleyebiliriz bu eklediğimiz kodları sitemize çok kolay bir şekilde çağırıp kullanabiliriz.Bu yöntem diğer yöntemlerden daha fazla ilgi duymaktadır nedeni ise bir cssyi her sayfaya eklemek yerine bir dosyadan alarak sitemizin hızlanmasıdır.
Oluşturduğumuz bir .css uzantılı dosyayı sitemize çağırmamızı sağlayan kod aşağıdadır.Örnek dosyamızın ismi deneme.css olsun
Kod:
<head>
[COLOR="vegaspopülerBlue"]<link rel=”stylesheet” type=”text/css” href=”[COLOR="Red"]deneme.css[/COLOR]” />[/COLOR]
</head>4- @İmport yaparak Eklemek
@import sayesinde elimizdeki bir kaç css dosyasını tek bir dosya haline getirebilir ve sitemize ekleyebiliriz.Mesela elimizdeki deneme.css , test.css , ornek.css dosyaları mevcut bu dosyaları tek tek html içerisine eklemek yerine oluşturduğumu bir @import dosyası sayesinde daha hızlı bir şekilde sitemize ekleyebiliriz.Örnek dosyamızın ismi cssler.css olsun.
cssler.css dosyasının içeriği şu şekilde olmalıdır :
Kod:
@import url(/css/[COLOR="red"]deneme.css[/COLOR])
@import url(/css/[COLOR="red"]test.css[/COLOR])
@import url(/css/[COLOR="red"]ornek.css[/COLOR])Konu Alıntıdır.
Daha Fazlası İçin;
Css Dersleri - Web Master Uzmanı