ASP.NET Core’da Razor Görünümlerine CSS Ekleme
ASP.NET Core’da Razor görünümlerine CSS eklemek, web uygulamalarınızın stilini ve görünümünü özelleştirmek için hayati önem taşır. Bu makale, CSS eklemenin çeşitli yollarını ve en iyi uygulamaları kapsamlı bir şekilde açıklayacaktır.
CSS Dosyası Bağlama
En yaygın yöntem, harici bir CSS dosyasını bağlamaktır. Bu, tüm görünümlerinizde tutarlı bir stil sağlamanın etkili bir yoludur.
html
<link href="~/css/site.css" rel="stylesheet" />
Yukarıdaki kod, site.css adlı bir CSS dosyasını wwwroot/css klasöründen bağlar.
Inline CSS
Bazı durumlarda, belirli bir görünüm için özel stil kuralları eklemek isteyebilirsiniz. Inline CSS, bunu doğrudan görünüm dosyasına ekleyerek yapmanıza olanak tanır.
“`html
“`
CSS Sınıfları ve Kimlikleri
CSS sınıfları ve kimlikleri, belirli HTML öğelerine stil kuralları uygulamak için kullanılır. Bu, kodunuzu daha modüler ve yönetilebilir hale getirir.
“`html
Başlık
“`
“`css
.container {
padding: 20px;
}
title {
color: #000;
font-size: 24px;
}
“`
CSS Yardımcıları
CSS yardımcıları, yaygın stil kurallarını tek bir satırda uygulamanın hızlı bir yoludur. Örneğin, text-center yardımcı programı bir öğenin metnini ortalar.
“`html
Metin Ortalı
“`
En İyi Uygulamalar
CSS eklerken aşağıdaki en iyi uygulamaları göz önünde bulundurun:
- Harici CSS Dosyalarını Tercih Edin: Mümkün olduğunca harici CSS dosyalarını kullanın. Bu, kodunuzu daha düzenli ve yönetilebilir hale getirir.
- CSS Sınıflarını ve Kimliklerini Kullanın: Kodunuzu modüler hale getirmek ve stil kurallarını yeniden kullanmak için CSS sınıflarını ve kimliklerini kullanın.
- Inline CSS’yi Sınırlı Kullanın: Inline CSS’yi yalnızca belirli bir görünüm için özel stil kuralları eklemek için kullanın.
- CSS Yardımcılarını Akıllıca Kullanın: CSS yardımcıları, yaygın stil kurallarını uygulamanın hızlı bir yoludur, ancak aşırı kullanmaktan kaçının.
- Önbellek Oluşturun: CSS dosyalarınızı önbelleğe alarak sayfa yükleme sürelerini iyileştirin.