Harici Stil Sayfası Nasıl Oluşturulur

CSS Site Genişliğini Kullanma

Web siteleri stil ve yapının birleşimidir ve günümüzün web sitesinde, bir sitenin bu iki yönünü birbirinden ayrı tutmak en iyi uygulamadır.

HTML her zaman yapısıyla bir site sağlayan şey olmuştur. Web'in ilk günlerinde, HTML ayrıca stil bilgisi içeriyordu. etiketi gibi öğeler, yapısal bilgilerle birlikte görünüm ve izlenim bilgisi ekleyerek HTML kodu boyunca dolguluydu. Web standartları hareketi bu uygulamayı değiştirmemizi ve tüm stil bilgisini CSS veya Basamaklı Stil Sayfalarına itmemizi sağladı. Bunu bir adım ileriye taşıyarak, güncel öneriler, web sitesi tasarım ihtiyaçlarınız için "harici stil sayfası" olarak bilinenleri kullanmanızdır.

Dış Stil Sayfalarının Avantaj ve Dezavantajları

Basamaklı Stil Sayfaları ile ilgili en iyi şeylerden biri, sitenizin tamamını tutarlı tutmak için bunları kullanabilmenizdir. Bunu yapmanın en kolay yolu, harici bir stil sayfasını bağlamak veya içe aktarmaktır. Sitenizin her sayfası için aynı harici stil sayfasını kullanırsanız, tüm sayfaların aynı stile sahip olduğundan emin olabilirsiniz. Gelecek için değişiklik yapmayı da kolaylaştırabilirsiniz. Her sayfa aynı harici stil sayfasını kullandığından, bu sayfadaki herhangi bir değişiklik her site sayfasını etkileyecektir. Bu, her sayfayı ayrı ayrı değiştirmek zorunda kalmadan daha iyidir!

Dış Stil Sayfalarının Avantajları

  • Birkaç belgenin görünümünü ve hissini bir kerede kontrol edebilirsiniz.
    • Bu, özellikle web sitenizi oluşturmak için bir ekip ekibiyle çalışıyorsanız kullanışlıdır. Birçok stil kurallarını hatırlamak zor olabilir ve basılı bir stil kılavuzunuz olabilirken, örneğin 12 punto Arial font veya 14 punto kurye ile yazılacak metin olup olmadığını belirlemek için sürekli olarak gözden kaçmak verimsiz ve sıkıcıdır. Herşeyi tek bir yerde yaparak ve o mekanda da değişiklik yapabileceğiniz yer olduğundan, bakımı çok daha kolay hale getirebilirsiniz.
  • Birçok farklı HTML öğesinde kullanılabilen stil sınıfları oluşturabilirsiniz.
    • Sayfanızdaki çeşitli öğelere vurgu yapmak için sık sık belirli bir yazı tipi stilini kullanırsanız, bu görünüm ve izlenimi elde etmek için stil sayfanızda ayarladığınız bir sınıf özelliğini, her bir örnek için belirli bir stili tanımlamak yerine kullanabilirsiniz. vurgu.
  • Stillerinizi daha verimli olacak şekilde kolayca gruplayabilirsiniz.
    • CSS için kullanılabilen tüm gruplama yöntemleri, harici stil sayfalarında kullanılabilir ve bu, sayfalarınızda daha fazla kontrol ve esneklik sağlar.

Dış Stil Sayfalarının Dezavantajları

  • Harici stil sayfaları, özellikle son derece büyükse, indirme süresini artırabilir. CSS dosyası, yüklenmesi gereken ayrı bir belge olduğundan, bu yüklemeyi gerçekleştirmek için performansı etkileyecektir.
  • Dış stil sayfaları, bir stil kullanımda olmadığında, sayfa kaldırıldığında silinmediği için söylenmesi zor olduğundan çok hızlıdır. Özellikle birden çok kişi aynı dosya üzerinde çalışıyorsa, CSS dosyalarınızın uygun yönetimi önemlidir.
  • Yalnızca tek sayfalık bir web siteniz varsa, yalnızca bir sayfanın stilini oluşturduğunuzdan, CSS için harici bir dosyaya sahip olmak gerekli olmayabilir. Sadece tek bir sayfa siteniz olduğunda harici CSS'nin faydalarının çoğu kaybolur.

Harici Stil Sayfası Nasıl Oluşturulur

Dış stil sayfaları, belge stil sayfaları için benzer bir sözdizimi ile oluşturulur. Ancak, dahil etmeniz gereken tek şey seçici ve beyanlardır. Belge düzeyinde bir stil sayfasında olduğu gibi, bir kuralın sözdizimi şöyledir:

seçici {özellik: değer;}

Bu kuralları, .css uzantılı bir metin dosyasına kaydedin. Bu gerekli değildir, ancak içine girmek için iyi bir alışkanlıktır, bu yüzden stil sayfalarınızı bir dizin listelemesinde hemen tanıyabilirsiniz.

Bir stil sayfası belgeniz olduğunda, Web sayfalarınıza bağlamanız gerekir. Bu iki şekilde yapılabilir:

  1. bağlayıcı
    1. Bir stil sayfasını bağlamak için HTML etiketini kullanırsınız. Bu, rel , type ve href niteliklerine sahiptir. Rel özniteliği, bağlandığınızı söyler (bu durumda bir stil sayfası), tür tarayıcı için MIME-Türünü tanımlar ve href, .css dosyasının yoludur.
  2. içe
    1. Belge düzey stil sayfasında içe aktarılmış bir stil sayfası kullanırsınız, böylece herhangi bir belgeye özgü olanları kaybetmemek için harici stil sayfasının niteliklerini içe aktarabilirsiniz. Bağlantılı bir stil sayfasını çağırmak için benzer şekilde adlandırırsanız, yalnızca belge düzeyi stil bildirimi içinde çağrılmalıdır. Web sitenizi korumak için ihtiyaç duyduğunuz sayıda dış stil sayfası alabilirsiniz.

Jennifer Krynin tarafından yazılmış orijinal makale. Jeremy Girard tarafından 8/8/17 tarihinde düzenlenmiştir.