Ancak kodlama yaparken her web sayfası için ayrı ayrı aynı CSS özelliklerini dahil etmek zordur. Bu nedenle, tek bir stil sayfasının oluşturulabileceği ve daha sonra birden çok dosya tarafından kolayca erişilebileceği bir çözüm kullanılması gerekir.
CSS'deki @import Kuralı nedir?
CSS stil özelliklerini dahil etmenin en iyi yolu, @import kuralını kullanmaktır. @import, bir CSS stil sayfasını başka bir stil sayfasından içe aktarmak veya bu sayfaya erişmek için kullanılır. Bu, içe aktarılan stil sayfasına eklenen tüm özellikler doğrudan yalnızca @import ve ardından stil sayfasının tam adı yazılarak uygulandığından, geliştiricinin çabasını azaltır.
@import Kuralının sözdizimi
Başka bir stil sayfasından bir stil sayfasına erişmek için @import kuralını ekleme sözdizimi aşağıdaki gibidir:
@içe aktarmak 'stil sayfasıadı.css' ;
@import kuralı aşağıdaki yöntemle de eklenebilir:
@içe aktarmak url ( stil sayfasıadı.css ) ;
Basitçe, CSS stil sayfası dosyasının adını ters virgül veya yuvarlak parantez içinde “ ile ekleyin. url 'yazdıktan sonra' @içe aktarmak ”.
Örnek: @import Kuralı Ekleme
@import kuralının nasıl çalıştığını anlamak için basit bir kod parçacığı yazıyoruz:
< h1 > Bu Basit Bir Metindir! < / h1 >Yukarıdaki kod parçacığında, bir HTML belgesine eklenmiş basit bir tek satırlık cümle içeren bir
başlığı vardır. Bu basit kod aşağıdaki çıktıyı üretecektir:
Daha sonra yukarıdaki web sayfası arayüzünün oluşturulduğu dosyadan içe aktarılabilecek bazı CSS özelliklerini tanımlamak için bir stil sayfası oluşturalım. Başka bir dosya oluşturup adını “ stil sayfası ” olarak bildirilen dosya türü ile css ”, ve sadece
başlık ve gövde için bazı özellikler ekleyin: h1 {
renk : gece yarısı mavisi ;
arka plan rengi : masmavi ;
Metin hizalama : merkez ;
}
vücut {
arka plan rengi : açık mavi ;
}
başlık ve gövde için stil özelliklerini içeren stil sayfası dosyasına erişmek için, stilin gerekli olduğu herhangi bir CSS dosyasına @import kuralını eklememiz yeterlidir.
Yalnızca basit bir @import kuralı eklemek, özellikleri her web sayfasına ayrı ayrı yazmak zorunda kalmadan tüm stil özelliklerini web sayfası arayüzüne uygulayacaktır.
Bu nedenle, @import kuralını şu şekilde yazmak gerekir:
@içe aktarmak 'stil sayfası.css' ;@import kuralını “ yazarak ekleme url ” ve yuvarlak parantez içindeki CSS dosyasının adı da aynı sonuçları gösterecektir:
@içe aktarmak url ( stil sayfası.css ) ;“ bölümünde tanımlanan özellikler stil sayfası ” dosyası sadece basit bir “ ekleyerek uygulanır. @içe aktarmak ” bunun için kural:
Bu, herhangi bir ek çaba gerektirmeden CSS özelliklerini bir dosyaya dahil etmenin en kolay yoludur.
@import Kuralının CSS'deki Faydaları
@import kuralı aşağıdaki nedenlerle yaygın olarak kullanılır:
- @import Kuralını kullanmak, belirli bir stil sayfasının tüm özelliklerini @import'tan sonra o sayfanın adını yazarak uyguladığı için geliştiricinin zamanını ve çabasını azaltır.
- Büyük ve karmaşık web uygulamalarında, aynı stil özellikleri yalnızca stil sayfası dosyasının adı eklenerek birden çok dosyada uygulanabileceğinden, @import kuralı çok avantajlıdır.
- Üstbilgiler, altbilgiler, gövde vb. stil sayfası öğeleri ayrı stil sayfası dosyalarında saklanabilir ve ardından @import kuralı kullanılarak, gerekli stillerden herhangi biri, stil özelliklerini eklemeye, kaldırmaya veya stil özelliklerini yorumlamaya gerek kalmadan içe aktarılabilir. dosya.
Bu, @import kuralının kullanımını özetlemekte ve bu kuralın nasıl CSS'yi dahil etmek için en iyi yöntem olarak kabul edildiğini açıklamaktadır.
Çözüm
Bir CSS stil sayfası içe aktarılabilir veya doğrudan başka bir stil sayfasından erişilebilir ve içe aktarılan stil sayfasındaki tüm özellikler doğrudan içe aktarıldığı dosyanın web sayfasında uygulanır. Her web sayfası arayüzü için her bir CSS özelliğini ayrı ayrı yazmaya gerek yoktur. Tek yapmanız gereken CSS stil sayfası dosyasının adını @import ile eklemek. Ve bu, CSS eklemek için en iyi yöntem olarak kabul edilir.