Harici CSS'ye Köprü Ekleme

Basamaklı stil sayfaları (CSS), Web sayfalarına üç yoldan biriyle eklenebilecek HTML öğelerinin stillendirilmesi için tarayıcı yönergeleridir: harici, dahili veya satır içi. Dış stil sayfalarını kullanmanın iki avantajı, bir sayfanın stillerinin, sayfanın içeriğinden ayrı olarak korunabilmesi ve aynı stillerin birden fazla Web sayfasına dahil edilebilmesidir. Kullanıcılar, ziyaretçilerin belirli bir sayfanın stillerinin bir kısmını veya tamamını dinamik olarak değiştirmelerini sağlayan bir özellik olan, sayfanın kullanıcı arayüzüyle etkileşime girerek CSS dosya referanslarını da değiştirebilir.

1.

Bir metin editörü açın ve “externalBlue.css” adlı yeni bir dosya oluşturun. Genellikle, bir metin düzenleyicide yeni bir metin dosyası oluşturma işlemi “Dosya” menüsünden “Yeni” yi seçmektir.

2.

ExternalBlue.css dosyasında tek bir stil tanımlayın. Bu stil varsayılandır ve Web sayfasının arka plan (gövde) renginin mavi olması gerektiğini belirtir. Uygun stil sözdizimini (seçici, stil, nitelik) aşağıdaki gibi kullandığınızdan emin olun:

vücut {background: blue;}

ExternalBlue.css dosyanızı kaydedin ve sonra metin düzenleyicinizi kapatın.

3.

Kullanıcı sayfada bir köprü seçtiğinde erişilecek olan “externalGreen.css” adında ikinci bir dosya oluşturun. Sayfanın arka plan renginin yeşil olması gerektiğini belirten bir stil tanımlayın, ardından dosyayı kaydedin ve kapatın:

vücut {background: green;}

4.

“ExternalCSS.html” adlı üçüncü bir dosya oluşturun. Temel HTML etiketlerini - “”, “”, “”, “”, “” ve “” - dosyasına şu şekilde ekleyin:

5.

ExternalBSS.hts stil sayfasını externalCSS.html dosyasına, dosyanın açılması “” ile “” etiketlerinin arasına bir bağlantı etiketi (“”) koyarak ekleyin. “” Etiketini ekleyin, etiketin “rel” özelliğini “stylesheet” e, “href” niteliğini “externalBlue.css” ve “id” niteliğini “styles” a ayarlayın. “Stiller” bağlantısı şimdi externalCSS.html'deki externalBlue.css stil sayfasına başvuruyor.

6.

Dosyaya açık bir JavaScript “” etiketi ekleyin. Etiketin “type” özelliğini “text / javascript” olarak ayarlayın. Bu etiketi setin altına “styles” link etiketinin altına yerleştirin.

7.

Açılış ve kapanış arasında externalCSS.html dosyasına “changeStyle ()” adlı bir JavaScript işlevi ekleyin. Stil Sayfasını Değiştirmek İçin Tıklayın.

9.

ExternalCSS.html dosyasını bir Web tarayıcısında açın. “Stil Sayfasını Değiştirmek İçin Buraya Tıklayın” köprüsünü tıklayın ve externalGreen.css stil sayfasının açıldığını ve arkaplanın maviden yeşile döndüğünü doğrulayın.

Gerekenler

  • Metin düzeltici
  • Web sunucusuna erişim
  • JavaScript etkin Web tarayıcısı

İpuçları

  • Harici stil sayfaları, sunucu tarafı komut dosyaları kullanılarak değiştirilebilir, ancak bu yöntem bir sunucu isteği gerektirir.
  • Bir etiketteki “type” niteliği, medya tiplerini belirtmek için kullanılabilir ve böylece belirli bir medya tipini desteklemeyen tarayıcıların CSS'yi yoksaymasına izin verir.
  • Bir etiketteki “medya” niteliği, stil sayfası tarafından kullanılan bir ortamı belirtmek için kullanılabilir. Bu medya, baskı, ekran ve tty gibi seçenekler içerir.
  • Internet Explorer'ın eski sürümlerinden bazıları JavaScript'i tam olarak uygulamayabilir.

Uyarı

  • Tüm tarayıcılar tüm CSS stillerini desteklemez ve bazıları bunları farklı şekilde uygulayabilir. Web sayfasının genel görünümünü değiştiren stilleri kullanırken bunu aklınızda bulundurun.

Tavsiye