Css İmport Kullanımı

Merhaba Arkadaşlar,
Bu makalede Css’te import kullanımını öğreneceğiz.Örneğin bir tasarım yaptığımızı düşünelim.Tasarım için yazdığımız tüm css kodlarını tek dosya halinde tutarsak ilerleyen zamanlarda boyutu çok büyüyeceği için biraz karışabilir.Neyi nerde yazdığımızı bulmakta zorlanabiliriz.Eğer tasarımda belirli kısımlar için yazdığımız css kodlarını ayrı ayrı css dosyalarına yazarsak daha düzenli olacağından yönetilebilirliği arttırmış oluruz.

Örneğin menü kısmı için yazdığımız css kodlarını navbar.css, içerik kısmı için yazdığımız css kodlarını content.css, footer kısmı içinde footer.css dosyalarına yazdığımızı düşünelim.Bu şekilde menü ile ilgili bir değişiklik yapma ihtiyacı olduğunda hemen navbar.css dosyasını açıp gerekli değişiklikleri yapabiliriz.Diğer türlü hepsi tek css dosyasında olduğunda biraz daha karışık hale gelebiliyor.

Artık import kullanmanın avantajını öğrendiğimize göre nasıl kullanabileceğimize bakalım.Tüm ayrı ayrı oluşturduğumuz css dosyalarını birleştirmek için site.css dosyası oluşturalım ve bu dosyanın içerisine bunları ekleyelim.

site.css dosyasının içeriği :

Dikkat : Burda dosyalarınızın yolunu doğru yazdığınızdan emin olun.

Daha sonra oluşturduğumuz bu dosyayı html sayfamıza link vermeyi unutmayalım.

Gördüğünüz gibi daha derli toplu bir kod yazmış oluyoruz.

Biraz önceki örneğimizde url olarak import etmiştik.Farklı kullanım şekilleride bulunuyor.Şimdi de onlara bakalım.

Yeni bir makalede görüşmek üzere.

Önceki : Css Dersleri 41 – Scroll Behavior Kullanımı

Sonraki : Css Dersleri 43 – Tüm Css Özellikleri ve Tarayıcı Uyumluluğu

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +