Hoşgeldin Misafir

Web Tasarımda CSS'in Gücü: Temel Bilgiler ve Kullanım Alanları

ZeroPulse

ZeroPulse

ZeroPulse

Bishkek
1 Ara 2018
1,140 Mesaj

Aktiflik

Seviye

Deneyim

TIM / GÖREV:
Merhabalar @ZeroPulse. Lojistik grup adına paylaşılan Web Tasarımda CSS'in Gücü: Temel Bilgiler ve Kullanım Alanları makalesinde sizi görmekten mutluyum.
Bu yazımda sizlere bir web site oluşturmak için olmazsa olmazlardan biri olan CSS’den bahsedeceğim. CSS nedir ile başlayıp, CSS’i nasıl entegre edip yazabileceğinize kadar detayları bu makalemde bulabilirsiniz

CSS Nedir?​

Selam forum sakinleri! Web tasarımla ilgileniyorsanız veya bir web sitesi kurmayı düşünüyorsanız, CSS (Cascading Style Sheets) ile mutlaka tanışmışsınızdır. Ancak CSS nedir, tam olarak ne işe yarar ve neden bu kadar önemlidir? Gelin, bu soruları birlikte cevaplayalım.

CSS, bir web sayfasının görünümünü kontrol etmek için kullandığımız bir stil dili. Kısaca, HTML ile tanımlanan yapıyın üzerine “makyaj” yapmamıza izin verir. Renkler, yazı tipleri, düzenler ve hatta animasyonlar… Bunların hepsi CSS sayesinde mümkün. HTML sadece çerçeveyi kurar; göze hitap eden tasarımları ise CSS ile yaratırız.

Mesela bir örnekle anlatayım: Bir web sayfanızda başlık yazısını büyütmek, rengini de kırmızı yapmak istiyorsunuz. CSS olmadan bunu yapmak neredeyse imkansız. Ama birkaç satırlık CSS kodu yazıyorsunuz ve istediğiniz sonucu alıyorsunuz. Bu kadar basit ama bir o kadar da etkili!

CSS’in Teknik Özellikleri​

CSS sadece güzel görünümler yaratmakla kalmaz, teknik anlamda da web geliştiricilere birçok avantaj sağlar. Ben de kendi deneyimlerimden ve teknik detaylardan biraz bahsedeyim:

  1. Seçiciler (Selectors): CSS’in belki de en kritik özelliği. HTML elemanlarına nasıl stil vereceğimizi seçicilerle belirliyoruz. Mesela, bir paragrafı hedef almak için p seçicisini kullanabilirsiniz:
    CSS: 
    p {color: blue;
}
    Bu kod, tüm paragraf yazılarını mavi yapar.
  2. Kapsam ve Hiyerarşi: CSS, hiyerarşik bir yapıya sahiptir. Bir stil kuralı üstte tanımlanmışsa ve aynı eleman için altta farklı bir kural daha varsa, son kural uygulanır. Bu yapıya "cascading" yani "basamaklanma" denir.
  3. Responsive Tasarımlar: Media query kullanarak sitenizi tüm cihazlar için optimize edebilirsiniz. Telefon, tablet, masaü;stü gibi farklı ekran boyutlarına uyum sağlamak için CSS’i kullanabilirsiniz:
    CSS: 
    @media (max-width: 768px) {body {
background-color: lightgray;
}
}
    Yukarıdaki kod, ekran boyutu 768 pikselden küçükse arka plan rengini değiştirir.
  4. Performans: Harici bir CSS dosyası kullanarak sayfa yüklenme hızını optimize edebilirsiniz. Tarayıcılar bu dosyaları önbelleğe alır, bu da sayfanın daha hızlı yüklenmesini sağlar.
  5. Animasyonlar: Artık CSS ile JavaScript’e gerek kalmadan çok şık animasyonlar yapılabiliyor. Örneğin, bir butonun renk geçişi:
    CSS: 
    button {background-color: red;
transition: background-color 0.5s ease;
}

button:hover {
background-color: green;
}
    Bu kod, fareyle butonun üzerine gelindiğinde rengi kırmızıdan yeşile yumuşak bir şekilde değiştirir.
  6. Framework Uyumluluğu: Bootstrap gibi çerçevelerle entegre çalışabilir. Bu, sıfırdan başlamak yerine, hazır bileşenlerle hızlı sonuçlar elde etmenizi sağlar.

CSS’i Nasıl Yazabiliriz?​

CSS yazmak için 3 yöntem vardır.

  • External(Dış) CSS: Bir HTML dosyasına bağlı ayrı bir dosyada yazılmış style sheet yani stil dosyasıdır.
  • Internal(İç) CSS: Bir HTML dosyasının <head> bölümünde yazılmış bir style sheet’tir.
    HTML: 
    <!DOCTYPE html><html>
<head>
<style>
body {
background-color: linen;
}

h2 {
color: maroon;
text-align: center;
}

p {
color: gray;
}
</style>
</head>
<body>

<h2>Hello World!</h2>
<p>Lorem ipsum</p>

</body>
</html>
  • Inline(Satır içi) CSS: Doğrudan bir HTML öğesinin style yani stil özelliğinde yazılmış bir style sheet’tir.
    HTML: 
    <!DOCTYPE html><html>
<body>

<h2 style="color:maroon;text-align:center;">Hello World!</h2>
<p style="color:gray;">Lorem ipsum</p>

</body>
</html>

    En çok kullanılan CSS çeşiti External CSS’dir. Kod karmaşıklığını önler ve daha düzenli bir görünüm sağlar.

    Style sheets yazmak için en yaygın kullanılan dil CSS’dir buna ek olarak Sass/SCSS ve Less dillerinden de faydalanabiliriz. Bu dilleri kullanarak variable declaration(değişken atama), function(fonksiyon) ve kod bloğu yazıp gerekli yerlerde çağırma gibi işlemler yapabilir ve iç içe CSS yazabiliriz. Küçük bir örnek ile daha anlaşılır olmasını sağlayalım.

    SCSS: 
    $neutral: #555555;
@mixin reset-div {
margin: 0;
padding: 0;
}

@function sum($numbers...) {
$sum: 0;
@each $number in $numbers {
$sum: $sum + $number;
}
@return $sum;
}

div {
@include reset-div;

h2,
p {
color: $neutral;
}

h2 {
margin-left: sum(5px, 10px, 15px);
}
}

    Burada SCSS kullanarak, ilk olarak renk kodumuzu neutral isimli bir variable’a atadık. Bu renk kodunu birden fazla yerde kullanacağımız zaman tekrar tekrar yazmak yerine bir variable’a atıyoruz ki data stabil bir yapı oluşsun. Çoğu projede bütün variable değerleri variables isimli bir dosyada tanımlanıp, ardından CSS dosyasında import edilerek kullanılır. Bu da kodun okunurluğunu arttırır ve daha düzenli bir kod yapısı oluşturmamızı sağlar. Birden fazla class yani sınıf adında aynı CSS’ler kullanılıcak veya aynı function işlemleri yapılıcak ise mixin ve function ile çok daha temiz ve okunur bir CSS yazabiliriz.


    Class İsimlendirmeleri için BEM Metodolojisi

    BEM (Block, Element, Modifier) metodolojisi, HTML ve CSS kodlamasında isimlendirme düzenini belirlemek için kullanılan bir sistemdir. Özellikle büyük projelerde, okunabilirliği artırmak, kod tekrarını azaltmak ve bakım kolaylığı sağlamak için tercih edilir.
    Temel Kavramlar

    1. Block (Blok):
      • Ana yapı taşıdır.
      • Kendi başına bir anlam ifade eder.
      • Örnek: menu, header, button
    2. Element (Eleman):
      • Blok içerisindeki alt parçalardır.
      • Bloktan bağımsız olarak anlam ifade etmez.
      • Blok ile iki alt çizgi (__) kullanılarak bağlanır.
      • Örnek: menu__item, header__logo, button__icon
    3. Modifier (Değiştirici):
      • Blok veya elemanın görünümünü veya davranışını değiştirir.
      • İki kısa çizgi (--) kullanılarak eklenir.
      • Örnek: menu--vertical, button--disabled, menu__item--active

  • İsimlendirme Kuralları​

    1. Küçük harf ve tire kullanımı:
      • İsimlendirme tamamen küçük harflerle ve kelimeler arasında tire (-) kullanılarak yapılır.
      • Örnek: header__nav-item--active
    2. Bağımsızlık:
      • Her blok bağımsız olmalıdır. Başka bir blok içerisinde kullanılabilir, ancak başka bir blokla doğrudan ilişki kurulmamalıdır.
      • Örnek: menu ve button ayrı bloklardır.
    3. Global çakışmaları önleme:
      • Blok isimleri eşsiz olmalıdır.

  • Örnek​

    BEM metodolojisi, CSS ve HTML yapınızı düzenlerken etkili bir yapı sunar ve özellikle büyük projelerde kod karmaşasını önemli ölçüde azaltır.​


    HTML: 
    <div class="menu menu--vertical">
<ul class="menu__list">
<li class="menu__item menu__item--active">Home</li>
<li class="menu__item">About</li>
<li class="menu__item">Contact</li>
</ul>
</div>

    CSS: 
    .menu {
display: flex;
}

.menu--vertical {
flex-direction: column;
}

.menu__list {
list-style: none;
margin: 0;
padding: 0;
}

.menu__item {
padding: 10px;
}

.menu__item--active {
font-weight: bold;
}

    evbkwdd.jpg



    Bu yazıda, Web Tasarımda CSS'in Gücü: Temel Bilgiler ve Kullanım Alanları bahsedettim ve özetledim.
    Umarım faydalı olmuştur. Konuyla ilgili sorularınızı ya da deneyimlerinizi yorumlarda paylaşabilirsiniz!

    Keyifli kodlamalar!
    LOJİSTİK TİM SUNDU

    btn1pyf.png
 
Cevap yazmak için giriş yap yada kayıt ol.
Geri
Üst