Web siteleri, resimler, metinler ve çeşitli belgeler dahil olmak üzere bir dizi ayrı parçadan oluşur. Bu belgeler yalnızca PDF dosyaları gibi çeşitli sayfalardan bağlanabilecekleri değil, aynı zamanda sayfaları oluşturmak için kullanılan belgeleri de içerir. HTML belgeleri bir sayfanın yapısını ve bir sayfanın görünümünü dikte etmek için CSS (Basamaklı Stil Sayfası) belgelerini belirlemek. Bu makale, CSS'nin ne olduğunu ve bugün web sitelerinde nerede kullanıldığını ele alacak.
Bir CSS Tarih Dersi
CSS ilk olarak 1997'de web geliştiricilerinin oluşturdukları web sayfalarının görsel görünümünü tanımlamalarının bir yolu olarak geliştirilmiştir. Web profesyonellerinin içeriği ayırmak ve görsel tasarımdan bir web sitesinin kodunun yapısı, bu zamandan önce mümkün olmayan bir şey.
Yapı ve stilin ayrılması, HTML'nin başlangıçta dayandığı işlevin daha fazlasını gerçekleştirmesine olanak tanır - sayfanın tasarımı ve düzeni hakkında endişelenmenize gerek kalmadan, genellikle "görünüm ve his" olarak bilinen bir şeydir. sayfa.
CSS'nin Evrimi
CSS, web tarayıcılarının bu biçimlendirme dilinin temel yazı tipi ve renk özelliklerinden daha fazlasını kullanmaya başladığı 2000 yılına kadar popülerlik kazanmadı. Bugün, tüm modern tarayıcılar CSS Düzey 1'in tamamını, CSS Düzey 2'nin çoğunu ve hatta CSS Düzey 3'ün çoğu yönünü destekler. CSS gelişmeye devam ettikçe ve yeni stiller tanıtıldıkça, web tarayıcıları modülleri uygulamaya başladı bu tarayıcılara yeni CSS desteği getiren ve web tasarımcılarına çalışması için güçlü yeni stil araçları sağlayan ile.
Geçmiş (birçok) yıl içinde, CSS kullanmayı reddeden seçkin web tasarımcıları vardı. web sitelerinin tasarımı ve geliştirilmesi, ama bu uygulama bugün endüstriden neredeyse tamamen uzaklaştı. CSS artık web tasarımında yaygın olarak kullanılan bir standarttır ve bugün sektörde çalışan ve bu dili en azından temel düzeyde anlamayan birini bulmakta zorlanacaksınız.
CSS Bir Kısaltmadır
Daha önce de belirtildiği gibi, CSS terimi "Basamaklı Stil Sayfası" anlamına gelir. Bu belgelerin ne yaptığını daha tam olarak açıklamak için bu ifadeyi biraz parçalayalım.
"Stil sayfası" sözcüğü, belgenin kendisine atıfta bulunur (HTML gibi, CSS dosyaları gerçekten yalnızca çeşitli programlarla düzenlenebilen metin belgeleridir). Stil sayfaları uzun yıllardır belge tasarımı için kullanılmaktadır. İster basılı ister çevrimiçi olsun, bir düzen için teknik özelliklerdir. Baskı tasarımcıları, tasarımlarının tam olarak özelliklerine göre basıldığından emin olmak için uzun süredir stil sayfaları kullanıyor. Bir web sayfası için bir stil sayfası aynı amaca hizmet eder, ancak web tarayıcısına görüntülenen belgenin nasıl oluşturulacağını söyleyen ek işlevsellik ile. Bugün, CSS stil sayfaları da şunları kullanabilir: medya sorguları bir sayfanın arama şeklini değiştirmek için farklı cihazlar ve ekran boyutları. Bu, tek bir HTML belgesinin, erişmek için kullanılan ekrana göre farklı şekilde oluşturulmasına izin verdiği için inanılmaz derecede önemlidir.
Çağlayan "basamaklı stil sayfası" teriminin gerçekten özel bir parçasıdır. Bir web stili sayfası bir şelalenin üzerindeki bir nehir gibi, o sayfadaki bir dizi stil arasında basamaklamak için tasarlanmıştır. Nehirdeki su şelaledeki tüm kayalara çarpıyor ama sadece diptekiler suyun tam olarak nereye akacağını etkiliyor. Aynısı, web sitesi stil sayfalarındaki basamaklandırma için de geçerlidir.
Tasarımcı Stil Sayfaları Tarayıcı Varsayılan Stil Sayfalarını Geçersiz Kılıyor
Web tasarımcısı herhangi bir stil uygulamasa bile her web sayfası en az bir stil sayfasından etkilenir. Bu stil sayfası kullanıcı aracısı stil sayfası — başka talimat sağlanmadığında web tarayıcısının bir sayfayı görüntülemek için kullanacağı varsayılan stiller olarak da bilinir. Örneğin, varsayılan olarak köprülerin stili mavidir ve altı çizilir. Bu stiller, bir web tarayıcısının varsayılan stil sayfasından gelir. Ancak web tasarımcısı başka talimatlar sağlarsa, tarayıcının hangi talimatların öncelikli olduğunu bilmesi gerekir. Tüm tarayıcıların kendi varsayılan stilleri vardır, ancak bu varsayılanların çoğu (mavi altı çizili metin bağlantıları gibi) tüm veya çoğu ana tarayıcı ve sürümde paylaşılır.
Tarayıcı varsayılanının başka bir örneği için, web tarayıcımızda varsayılan yazı tipi "Times New Roman" 16 boyutunda görüntülenir. Bununla birlikte, ziyaret ettiğimiz sayfaların neredeyse hiçbiri bu yazı tipi ailesinde ve boyutunda ekrana gelmiyor. Bunun nedeni, çağlayanın, tasarımcıların kendileri tarafından belirlenen ikinci stil sayfalarının yeniden tanımlanmasını tanımlamasıdır. yazı tipi boyutu ve aile, web tarayıcımızın varsayılanlarını geçersiz kılar. Bir web sayfası için oluşturduğunuz herhangi bir stil sayfası, bir tarayıcının varsayılan stillerinden daha fazla özgünlüğe sahip olacaktır, bu nedenle bu varsayılanlar, yalnızca stil sayfanız bunları geçersiz kılmadığı takdirde geçerli olacaktır. Bağlantıların mavi ve altı çizili olmasını istiyorsanız, varsayılan olduğu için herhangi bir şey yapmanıza gerek yoktur, ancak sitenizin CSS dosyası bağlantıların yeşil olması gerektiğini söylüyorsa, bu renk varsayılan maviyi geçersiz kılar. Alt çizgi, aksini belirtmediğiniz için bu örnekte kalacaktır.
CSS Nerelerde Kullanılır?
CSS, aynı zamanda, web sayfalarının bir medyadan başka ortamlarda görüntülendiğinde nasıl görüneceğini tanımlamak için de kullanılabilir. internet tarayıcısı. Örneğin, web sayfasının nasıl yazdırılacağını tanımlayacak bir yazdırma stili sayfası oluşturabilirsiniz. Gezinme düğmeleri veya web formları gibi web sayfası öğelerinin yazdırılan sayfada hiçbir amacı olmayacağından, bir sayfa yazdırıldığında bu alanları "kapatmak" için bir Yazdırma Stil Sayfası kullanılabilir. Pek çok sitede pek yaygın bir uygulama olmasa da, yazdırma stili sayfaları oluşturma seçeneği güçlü ve çekicidir (bizim deneyim — çoğu web uzmanı bunu sadece bir sitenin bütçe kapsamı bu ek çalışmayı gerektirmediği için yapmaz. yapıldı).
CSS Neden Önemlidir?
CSS, bir web tasarımcısının öğrenebileceği en güçlü araçlardan biridir çünkü onunla bir web sitesinin tüm görsel görünümünü etkileyebilirsiniz. İyi yazılmış stil sayfaları hızlı bir şekilde güncellenebilir ve sitelerin görsel olarak neye öncelik verildiğini değiştirmesine izin verir. üzerinde herhangi bir değişiklik yapılmasına gerek kalmadan ziyaretçilere değer ve odak gösteren ekran altta yatan HTML işaretlemesi.
CSS'nin ana zorluğu, öğrenilecek çok şey olmasıdır - ve tarayıcıların her gün değişmesiyle, bugün neyin işe yaradığını yarın yeni stiller desteklendiğinden ve diğerleri bir nedenden dolayı bırakıldığından veya gözden düştüğünden bir anlam ifade etmeyebilir veya bir diğeri.
CSS Öğrenme Eğrisi Buna Değer
CSS basamaklandırıp birleştirebildiğinden ve farklı tarayıcıların yönergeleri nasıl farklı şekilde yorumlayıp uygulayabildiğini göz önünde bulundurarak, CSS'yi öğrenmek düz HTML'den daha zor olabilir. CSS ayrıca tarayıcılarda HTML'nin gerçekten yapmadığı şekilde değişir. Bununla birlikte, CSS'yi kullanmaya başladığınızda, stil sayfalarının gücünden yararlanmanın, web sayfalarını nasıl düzenlediğiniz ve görünümlerini ve hislerini nasıl tanımladığınız konusunda size inanılmaz bir esneklik sağlayacağını göreceksiniz. Yol boyunca, geçmişte işinize yarayan ve istediğiniz zaman tekrar başvurabileceğiniz stil ve yaklaşımlardan oluşan bir "püf noktası" biriktireceksiniz. yeni web sayfaları oluştur gelecekte.