logo

CSS Türleri

CSS (Basamaklı Stil Sayfası) görüntülenen HTML öğelerini açıklar ekran, kağıt , veya içinde diğer medya . Çok zaman kazandırır. Aynı anda birden fazla web sayfasının düzenini kontrol eder. Şunu ayarlar: yazı tipi boyutu, yazı tipi ailesi, renk, arka plan rengi sayfada.

eklememizi sağlar Etkileri veya animasyonlar web sitesine. Kullanırız CSS göstermek animasyonlar beğenmek düğmeler, efektler, yükleyiciler veya iplikçiler , ve ayrıca animasyonlu arka planlar .

Kullanmadan CSS , web sitesi çekici görünmeyecek. Var 3 türleri CSS bunlar aşağıda:

  • Satır içi CSS
  • Dahili/Gömülü CSS
  • Harici CSS
CSS Türleri

1. Dahili CSS

Dahili CSS'de etiketleyin bölümü HTML belge. Bu CSS stili, tek sayfalara stil vermenin etkili bir yoludur. Birden fazla web sayfası için CSS stilini kullanmak zaman alıcıdır çünkü stil her web sayfasında.

Aşağıdaki adımları kullanarak dahili CSS'yi kullanabiliriz:

1. Öncelikle, HTML sayfasını bulun ve

2.Sonrasına aşağıdaki kodu koyun

 

3. Ekle tüzük yeni satırda CSS'nin.

Örnek:

 body { background-color: black; } h1 { color: white; padding: 50px; } 

4. Stil etiketini kapatın.

 

Dahili CSS'yi ekledikten sonra HTML dosyasının tamamı aşağıdaki gibi görünür:

 body { background-color: black; } h1 { color: red; padding: 50px; } <h2>CSS types</h2> <p>Cascading Style sheet types: inline, external and internal</p> 

Seçicileri de kullanabiliriz (sınıf ve kimlik) stil sayfasında.

Örnek:

 .class { property1 : value1; property2 : value2; property3 : value3; } #id { property1 : value1; property2 : value2; property3 : value3; } 

Dahili CSS'nin Artıları

    Dahili CSSKodu HTML sayfasına eklediğimizde birden fazla dosya yükleyemiyoruz.

Dahili CSS'nin Eksileri:

  • Kod ekleme HTML belge azaltacak sayfa boyutu Ve yüklenme zamanı web sayfasından.

2. Harici CSS

Harici CSS'de web sayfalarını harici CSS'ye bağlarız. .css dosya. Tarafından yaratılmıştır Metin düzeltici . CSS, bir web sitesini şekillendirmek için daha etkili bir yöntemdir. Düzenleme yaparak .css dosyasını kullanarak tüm siteyi aynı anda değiştirebiliriz.

Harici CSS'yi kullanmak için aşağıda verilen adımları izleyin:

1. Yeni bir tane oluşturun .css ile dosya Metin düzeltici , ve Ekle Basamaklı Stil Sayfası kurallar da.

Örneğin:

 .xleftcol { float: right; width: 35%; background:#608800; } .xmiddlecol { float: right; width: 35%; background:#eff3df; } 

2. Hariciye bir referans ekleyin .css hemen ardından dosya etiketleyin bölümü HTML sayfası :

 

Harici CSS'nin Artıları:

  • Dosyalarımız daha temiz bir yapıya sahiptir ve boyutları daha küçüktür.
  • Biz de aynısını kullanıyoruz .css harici CSS'deki birden fazla web sayfası için dosya.

Harici CSS'nin Eksileri:

  • Harici CSS yüklenmeden sayfalar doğru şekilde teslim edilemiyor.
  • Harici CSS'de çok sayıda CSS dosyası yüklemek bir web sitesinin indirme süresini artırabilir.

3. Satır içi CSS

Satır içi CSS belirli bir stile stil vermek için kullanılır HTML eleman. Ekle stil seçicileri kullanmadan her HTML etiketine öznitelik ekleyin. Yalnızca kullanırsak bir web sitesini yönetmek zor olabilir satır içi CSS . Ancak, Satır içi CSS HTML'de bazı durumlarda faydalıdır. erişimimiz yok CSS dosyaları veya öğeye stiller uygulamak için.

Aşağıdaki örnekte satır içi CSS'yi kullandık.

yöntem alt dizesi Java
Ve

Burada faydalı olacaktır.

Satır içi CSS'nin artıları:

  • HTML sayfasında CSS kuralları oluşturabiliriz.
  • Satır içi CSS'de ayrı bir belge oluşturup yükleyemiyoruz.

Satır içi CSS'nin eksileri:

  • Satır içi CSS ekleme CSS HTML öğelerine ilişkin kurallar zaman tükeniyor Ve karışıklık HTML yapısını yukarı kaldırın.
  • Sayfa boyutunu ve sayfanın indirme süresini etkileyebilecek birden fazla öğeyi aynı anda şekillendirir.