Basamaklı Stil Sayfaları Nedir ve CSS Ne İçin Kullanılır?

Basamaklı Stil Sayfaları Nedir ve CSS Ne İçin Kullanılır?

CSS, HTML ve JavaScript ile birlikte temel web teknolojilerinin üçlüsüne aittir. Dikkatli planlama ile CSS, endişelerin ayrılmasına katkıda bulunur. Bağımsız kaynaklar bir içeriğin yapısını, sunumunu ve davranışını kontrol eder.





Stil Sayfaları erişilebilirlik, ölçeklenebilirlik ve hatta web performansında önemli bir rol oynar. Bir içerik yazarı veya web tasarımcısı olarak, cihazların içeriği nasıl oluşturduğu üzerinde size kontrol sağlarlar. Düzenden yazı tipi boyutuna ve rengine kadar CSS, içeriği güzel görünen sayfalara dönüştürür.



CSS Neye benziyor?

CSS büyük bir dildir—biçimlendirilecek pek çok farklı şey vardır! Ancak sözdizimi, öğrenilecek yalnızca birkaç kuralla basittir.





HTML öğeleri, CSS'nin biçimlendirebileceği çeşitli özelliklere sahiptir. NS renk özellik ön plan (örneğin metin) rengini ayarlar. Yazı tipi boyutu şunlara bağlıdır: yazı Boyutu Emlak.

Her özellik, desteklenen bir değere ayarlanabilir. Bir özelliğe bir değerin atanması bir 'bildiri'dir. Genel olarak, şöyle görünürler:



property: value

Örneğin:

ağa bağlanın ama internet yok
color: red

Farklı özelliklerin değerleri çok farklı görünebilir, hatta aynı özellik için değerler bile. Örneğin, önceki bildirimi yazmanın iki yolu daha var:



color: #ff0000
color: rgb(255, 0, 0)

HTML ve Stil Sayfaları Nasıl Bir Araya Gelir?

HTML ve CSS'yi, her birinin avantajları olan birkaç farklı şekilde birleştirebilirsiniz.

Satır İçi Yazma Stilleri

En basit yöntem, stil bildirimlerini doğrudan HTML dosyasındaki bir öğeye eklemektir. Bunu kullanarak yapabilirsiniz stil öznitelik şöyle:




Most of this text is red …


… but this isn’t!


Bunun gibi satır içi stil öğeleri kullanışlı olsa da, birkaç dezavantajı vardır. Başlangıç ​​olarak, HTML'yi karmaşıklaştırır ve bir bakışta okumayı zorlaştırır. Bakımı da zor: Her paragrafın rengini ayarlamak istediğimiz uzun bir belge hayal edin. Bu CSS, ancak 'Stil Sayfaları' değil.

Stilleri Kafaya Yerleştirme

İkinci mekanizma ile bir Stil Sayfasının nasıl göründüğünü görmeye başlayabilirsiniz, gömme . Bu yaklaşımı kullanarak, tüm stil bildirimlerini bir stil içindeki eleman kafa bizim belgemiz. Bunun gibi bir şey görünecek:





/* style instructions go here */



...

Yine de stil talimatlarımız öncekinden biraz daha fazla ayrıntıya ihtiyaç duyuyor. Onları başa taşıdığımızdan, her kural artık bir öğeyle ilişkilendirilmiyor. ilan etmiş olabiliriz kırmızı renk , ama bu renk ne olmalı?

İşte burada CSS seçiciler devreye giriyor. Bu sözdizimini kullanarak sayfanın belirli bölümlerini hedeflememize ve stillerini tek bir yerde tanımlamamıza izin veriyorlar:

Windows 10'da canlı duvar kağıdı nasıl alınır
selector {
declaration1;
declaration2;
/* etc. */
}

Örneğin, paragraf metnine mavi stil vermek için aşağıdakileri belirtebiliriz:

p {
color: blue;
}

Bu örnekte, seçici basitçe P , belgemizdeki tüm paragraf öğeleriyle eşleşen. İçinde olduğu sürece tüm metni maviye boyar.

Harici Stil Sayfasını Bağlama

Kapsanacak son yöntem bağlantı kurmaktır. Bu, açık ara en faydalı yaklaşımdır ve çoğu zaman tercih etmeniz gereken bir yaklaşımdır. CSS kurallarını gömmek yerine stil öğesini doğrudan belgenizde varsa, bunları ayrı bir dosyaya taşıyabilirsiniz.


içine bu kodu yapıştırın harici stil sayfanızı bağlamak için HTML dosyanızın etiketleri.

CSS'nin Gücü

Bağlantılı yöntemle, CSS'nin temel gücünden yararlanıyoruz: endişelerin ayrılması. Tüm anlamsal bilgiler (içeriğin ne anlama geldiği) HTML belgesinde bulunur. Stil - nasıl göründüğü - ayrı bir dosyada, stil sayfasında.

İşte bu ayrımın sadece birkaç faydası:

  • Yalnızca dosya referansını değiştirerek bir stil sayfasını değiştirebilirsiniz. Bu dinamik olarak bile gerçekleşebilir. Tek adımda, bir sayfanın tüm görünümünü ve verdiği hissi değiştirebilirsiniz.
  • Birçok sayfa gerektiği gibi aynı stil sayfalarını paylaşabilir. Tek bir dosyayı değiştirerek, tüm web sitesinin görünümünü ve verdiği hissi güncelleyebilirsiniz.
  • Bir sayfayı 'içerik' ve 'stil' olarak ayırmanın teknik faydaları vardır. Proxy'ler ve tarayıcılar, tek tek dosyaları ayrı ayrı önbelleğe alabilir. Bu, bir sitenin stil bilgilerini her sayfaya eklemek yerine bir kez gönderebileceği anlamına gelir.
  • İşbirliği yaparken farklı ekipler, birbirlerini etkilemeden ayrı dosyalar oluşturup düzenleyerek güçlü yönleriyle çalışabilirler.

Cascade'i Açıklamak

Stiller ve stil sayfaları hakkında çok şey öğrendiniz, peki ya CSS'nin basamaklı kısmı?

Kademeli, birden çok stil sayfası mevcut olduğunda hangi stillerin kullanılacağına karar verir. Bir yazarın içeriği için nasıl stil belirleyebileceğini gördünüz. Ancak CSS'nin bir başka özelliği de, okuyuculara ve tarayıcı üreticilerine bu konuda da bazı sözler vermesidir.

Varsayılan stilleri zaten merak etmiş olabilirsiniz. Örneğin, nasıl bir H1 öğe, yazar stil sayfaları olmasa bile büyük ve kalın görünüyor mu? Bu, kullanıcı aracısı stil sayfasını oluşturan bir dizi özel kural sayesindedir. Bu kurallar ilk olarak web tarayıcınız tarafından ziyaret ettiğiniz her sayfaya uygulanır.

Basamak, kullanıcı aracısı stillerinden sonra bir yazar stil sayfasının uygulanacağını belirtir. Tarayıcımız başlıkların kalın olduğunu söylüyorsa ancak sayfanın yazarı bu sayfadaki başlıkların açık olduğunu beyan ederse, o zaman açık olurlar.

Kontrolün bir kısmını okuyucuya veren başka bir stil sayfası kaynağı var. Herhangi bir web kullanıcısı, teoride, özel kurallara sahip bir kullanıcı stil sayfası tutabilir. Bunlar ortada yer alır: kullanıcı kuralları varsayılan tarayıcı ayarlarını geçersiz kılar, ancak yazar stilleri tarafından geçersiz kılınır. Ne yazık ki, kullanıcı stil sayfaları desteği hiçbir zaman yaygın olmamıştı.

Farklı Medyaları Hedefleme

Stil Sayfalarını ekranın ötesinde farklı bağlamlarda kullanabilirsiniz. NS yarım niteliği bağlantı öğesi, stil sayfasının hangi ortam türlerine uygulanacağını tanımlar. Örneğin, bir tanımlayabilirsiniz baskı için stil sayfası aşağıdaki gibi işaretleme kullanarak:

Ortak stilleri tek bir genel stil sayfasında ve ortama özgü stilleri ayrı dosyalarda toplayabilirsiniz. İçeriğinizin işitsel veya braille sunumlarına hitap edecek medya türleri bile vardır. CSS, erişilebilirliği iyileştirmede hayati bir araçtır.

İlgili: Kör veya Görme Engelliyseniz Web'de Nasıl Gezinirsiniz?

instagramın facebook bağlantısı nasıl kaldırılır

Wikipedia gibi siteler, baskı stillerini kontrol etmek, istenmeyen öğeleri gizlemek ve düzeni basitleştirmek için CSS kullanır.

CSS, HTML'nin İyi Görünmesini Sağlar

Basamaklı Stil Sayfaları pek çok şeyi kapsar: basamaklı, kalıtım, seçiciler, kaynaklar, medya, vb. Ancak güçleri modern web'i mümkün kılar. Bu, yerleşik olarak yeniden kullanılabilirlik, esneklik ve erişilebilirlik özellikleri sağlayan bir ortamdır.

CSS'nin tam gücünü ve ne kadar sunabileceğini görmek için, tüm temel CSS3 özelliklerini kapsayan hile sayfamıza göz atın.

Paylaş Paylaş Cıvıldamak E-posta Temel CSS3 Özellikleri Hile Sayfası

CSS3 özellikleri hile sayfamızla temel CSS sözdiziminde ustalaşın.

Sonrakini Oku İlgili konular
  • Programlama
  • Web Geliştirme
  • CSS
Yazar hakkında Bobby Jack(58 Makale Yayımlandı)

Bobby, yirmi yılı aşkın bir süredir yazılım geliştiricisi olarak çalışan bir teknoloji tutkunu. Oyun oynama konusunda tutkulu, Switch Player Magazine'de İnceleme Editörü olarak çalışıyor ve çevrimiçi yayıncılık ve web geliştirmenin tüm yönleriyle ilgileniyor.

Bobby Jack'dan Daha Fazla

Haber bültenimize abone ol

Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!

Abone olmak için buraya tıklayın