Blog İpuçları

CSS Nedir (Ve Nasıl Çalışır)

Bugünlerde, web sitesi içeriği tasarlamanın birçok kolay yolu var. Sürükle ve bırak çözümleri, web sitesi oluşturucuları ve hatta tam İçerik Yönetim Sistemleri (CMS) bulacaksınız . Ancak bu araçlar sizi ancak bir yere kadar götürebilir.

Gerçekten orijinal tasarımlar yaratmak istiyorsanız – bir kopya-kedi web sitesi ile sonuçlanma riskini almak yerine – biraz kodlama öğrenmek işe yarıyor. Başlamak için en iyi yer, bir web sayfasındaki öğelerin nasıl sunulacağını kontrol etmenizi sağlayan Basamaklı Stil Sayfalarıdır (CSS).

Bu yazıda, CSS’nin ne olduğunu ve nasıl çalıştığını başlangıç ​​dostu terimlerle açıklayacağız. Ardından, tahmin edebileceğinizden daha kolay olan CSS öğrenme yoluna başlamanıza yardımcı olacağız. Hemen içeri atlayalım!

Bir Web Sitesinin Temel Yapı Taşları

Çok fazla teknik deneyiminiz olmasa bile, programların ve web sitelerinin çeşitli kodlama dilleri kullanılarak oluşturulduğunu muhtemelen biliyorsunuzdur. Bu, kendi sitenizde özel değişiklikler yapmak için ‘kaputun altına girmeyi’ düşünmeyi biraz korkutucu hale getirebilir.

Ancak, web siteleri oluşturmak için kullanılan temel diller, standart programlama dilinizden daha kullanıcı dostudur. Bunlardan en önemlileri:

  1. HTML: Köprü Metni Biçimlendirme Dili (HTML), web sayfalarının nasıl ‘oluşturulduğudur’ . Sayfada hangi tür öğelerin nerede görüneceğini belirler.
  2. CSS: Bu dil, HTML gibi bir ‘biçimlendirme’ diliyle birlikte kullanılmak üzere tasarlanmıştır. CSS, HTML öğelerinin nasıl biçimlendirileceğini tanımlar – düzenlerini, renklerini, yazı tiplerini vb. Kontrol eder.
  3. JavaScript: Önceki iki dil esas olarak statik (taşınmayan) içerikle ilgilenirken, JavaScript, etkileşimli özellikler ve öğeler oluşturmak için kullanılır .

Bu açıklamalar elbette basitleştirmedir ve üç dil de öğrenilmeye değerdir. Ancak tasarımcılar için CSS en önemli olanıdır. Bu özel dilin nasıl çalıştığına daha ayrıntılı olarak bakalım.

CSS Nedir ve Nasıl Çalışır?

HTML’nin bir ‘biçimlendirme dili’ olduğunu söylediğimizi hatırlıyor musunuz? CSS ise bir ‘stil sayfası dilidir’. Bu yararlı bir tanımlayıcıdır, çünkü CSS’nin ne hakkında olduğunu – stil ve sunum – bilmenizi sağlar.

Eğer iken edebilirsiniz belirli bir web sayfanızın koduna doğrudan CSS eklemek, bu bir iyi uygulama olarak kabul edilmez. Bunun yerine, tasarımcılar yalnızca CSS kodunu içeren ayrı dosyalar olan stil sayfaları oluşturur. Bu dosyalar hakkında anlaşılması gereken birkaç önemli nokta var:

  • Bir CSS stil sayfası, bir sitedeki birden çok sayfanın stilini etkileyen kurallar içerebilir. Bu sayfalardan herhangi biri ziyaret edildiğinde, stil sayfası koduna erişilir ve sayfayı oluşturan HTML’nin nasıl görüntüleneceğini belirler.
  • Bir site tipik olarak, her biri bir veya daha fazla sayfayı yöneten birden çok stil sayfası içerir. Ana sayfanız için bir stil sayfanız olabilir; örneğin, diğer tüm sayfalar için bir başkası ve blog gönderileri için üçüncüsü .
  • Stil sayfalarını düzenleyerek veya sitenize yenilerini ekleyerek, gerçek içeriğin hiçbirini etkilemeden görünümünü ve düzenini değiştirebilirsiniz (bunun yerine HTML ile belirlenir).

Yine, bu sistem bu basit kuralların önerdiğinden daha karmaşıktır . Yine de, bu size stil sayfalarının ne işe yaradığı ve neden önemli oldukları konusunda fikir vermek için yeterli olmalıdır.

Eylem Halinde CSS Örneği

Şimdiye kadar, bahsettiğimiz stil sayfalarında neler olduğunu merak ediyor olabilirsiniz. Aşağıda, bir web sitesi stil sayfasının neye benzediğine dair bir örnek verilmiştir:

CSS stil sayfası örneği.

Bir stil sayfası, gerektiği kadar çok veya az bilgi içerebilir. Tipik olarak, tek tek öğeler (metin gibi) için renkler, yazı tipleri ve diğer stil bilgileriyle birlikte bir sayfanın düzenini ve biçimlendirmesini yöneten kuralları içerir.

Basit bir CSS kodu örneğine bakalım:

p {
font-family: verdana;
font-size: 20px;
color: green;
}

“P”, kodun hangi öğeyi etkilemesi gerektiğini belirten bir “seçici” olarak adlandırılır. Bu durumda, “p” paragraf anlamına gelir. Bu, aşağıdaki kuralların ilgili sayfaların HTML’sinde paragraf olarak işaretlenen tüm öğelere uygulanacağı anlamına gelir.

Sonraki birkaç satır oldukça açıklayıcıdır. Bu paragraflardaki tüm metinler için yazı tipi ailesini, boyutunu ve rengini belirlerler. Eğer değiştirirseniz yeşil: Renk için renk: mavi , sayfadaki metin buna göre renk değiştiriyor. Bu çizgiler aynı zamanda köşeli parantezlerle çevrelenmiştir, bu nedenle stil sayfasındaki hangi kuralların hangi öğelere uygulanacağı açıktır.

CSS Hakkında Nasıl Daha Fazla Bilgi Edebilirsiniz?

Yukarıdaki örnek çok basit olsa da, umarım web sitesi tasarımı söz konusu olduğunda uygulamaları görmeye başlayabilirsiniz. CSS kullanarak, bir sayfadaki herhangi bir öğeyi belirtebilir ve tam olarak neye benzeyeceğine, ne kadar büyük olacağına vb. Karar verebilirsiniz.

CSS’yi nasıl kullanacağınızı öğrenmenin en iyi yolu, atlamak ve denemeye başlamaktır. WordPress gibi stil sayfalarına kolayca erişmenizi sağlayan bir CMS kullanarak özel bir test web sitesi kurun . Ardından, değişiklik yapma ve sitenizin ön ucunda neler olduğunu görme alıştırması yapın. Sıfırdan yeni bir stil sayfası oluşturmayı denemekten çok artımlı ince ayarlarla öğrenmek çok daha kolaydır.

CSS hakkında daha fazla bilgi edinmenize yardımcı olabilecek birçok kullanışlı kaynak da vardır. En iyilerden biri – ve başlamayı önerdiğimiz –  W3Schools CSS Eğitimi :

W3Schools CSS Eğitimi.

Bu etkileşimli ders dizisi, size dil konusunda adım adım yol gösterecek, size temel terminolojiyi öğretecek ve pratik yapmanız için birçok fırsat sunacaktır.

Sonuç

Tasarım ve kodlama, tamamen farklı iki beceri seti gibi görünebilir. Ancak web siteleri söz konusu olduğunda ikisi ayrılmaz bir şekilde bağlantılıdır. Neyse ki, web sayfalarının nasıl tasarlanacağını öğrenmek isteyen herkes, olabildiğince kullanıcı dostu olacak şekilde tasarlanmış bir dile – CSS’ye erişebilir.

Bir web sitesinin CSS’sinde değişiklikler yaparak, düzeni ve görünümü üzerinde neredeyse tamamen kontrole sahip olabilirsiniz. Dahası, düzenlemeleriniz stil sayfalarında bulunduğundan, içeriğini etkilemeden sitenin görünümünü değiştirebilirsiniz.

Editör

I am a web developer who is working as a freelancer. I am living in Saigon, a crowded city of Vietnam. I am promoting for http://sneeit.com

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu