Bu konuda Css'i sitemize ekleme yollarından bahsedicem.
Css'i sitenize eklemenizin 3 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 İçene 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.
<div style=”background-color:#1f65d8; color:#fff;”>Css'i Kod İçerisine Ekleme</div>
2- Style Etiketi Kullanarak Eklemek (Head Tagları Arasına)
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.
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.
<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.
<head><style type=”text/css”>#deneme-etiketi {background-color:#1f65d8;color:#fff;}</style></head>
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.
<div id=”deneme-etiketi“> Css'i siteme style kullnarak ekledim </div>
3- Harici CSS Dosyası Kullanarak Eklemek
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
<head>
<link rel=”stylesheet” type=”text/css” href=”deneme.css” />
</head>
4- @İmport ile 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 :
@import url(/css/deneme.css)
@import url(/css/test.css)
@import url(/css/ornek.css)
genel blog
YanıtlaSiloyun blog
yemek tarifleri