CSS, bir web sitesinin görünümünü tasarlamada ve güzelleştirmede en önemli araçlardan biridir. Size temel bilgileri ve CSS'nin nasıl kullanılacağını öğreteceğiz
CSS, HTML Güzelliğini Değiştirebilir
CSS, bir Web sayfasını biçimlendirmek için kullandığımız dildir.
CSS nedir?
- CSS, Basamaklı Stil Sayfaları anlamına gelir
- CSS, HTML öğelerinin ekranda, kağıtta veya diğer ortamlarda nasıl görüntüleneceğini açıklar
- CSS çok fazla iş tasarrufu sağlar. Aynı anda birden çok web sayfasının düzenini kontrol edebilir
- Harici stil sayfaları CSS dosyalarında saklanır
CSS Demosu - Bir HTML Sayfası - Birden Çok Stil!
Burada dört farklı stil sayfasıyla görüntülenen bir HTML sayfası göstereceğiz. Farklı stilleri görmek için aşağıdaki "Stil Sayfası 1", "Stil Sayfası 2", "Stil Sayfası 3", "Stil Sayfası 4" bağlantılarına tıklayın:
CSS'yi Neden Kullanmalı?
CSS, farklı cihazlar ve ekran boyutları için tasarım, düzen ve gösterimdeki varyasyonlar dahil olmak üzere web sayfalarınız için stiller tanımlamak için kullanılır.
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
CSS Büyük Bir Sorunu Çözdü
HTML ASLA bir web sayfasını biçimlendirmek için etiketler içermeyi amaçlamamıştı!
HTML, bir web sayfasının içeriğini tanımlamak için oluşturuldu, örneğin:
<h1> Bu bir başlıktır </h1>
<p> Bu bir paragraftır.</p>
HTML 3.2 spesifikasyonuna <font> gibi etiketler ve renk öznitelikleri eklendiğinde, web geliştiricileri için bir kabus başladı. Her sayfaya yazı tipi ve renk bilgisinin eklendiği büyük web sitelerinin geliştirilmesi uzun ve pahalı bir süreç haline geldi.
Bu sorunu çözmek için World Wide Web Konsorsiyumu (W3C) CSS'yi yarattı.
CSS, HTML sayfasından stil biçimlendirmesini kaldırdı!
CSS Çok Fazla İş Kurtarır!
Stil tanımları normalde harici .css dosyalarına kaydedilir.
Harici bir stil sayfası dosyasıyla, yalnızca bir dosyayı değiştirerek tüm web sitesinin görünümünü değiştirebilirsiniz!
CSS Sözdizimi
Bir CSS kuralı, bir seçici ve bir bildirim bloğundan oluşur.
Seçici, stil vermek istediğiniz HTML öğesini işaret eder.
Bildirim bloğu, noktalı virgülle ayrılmış bir veya daha fazla bildirim içerir.
Her bildirim, iki nokta üst üste ile ayrılmış bir CSS özellik adı ve bir değer içerir.
Birden çok CSS bildirimi noktalı virgülle ayrılır ve bildirim blokları küme parantezleriyle çevrilidir.
p {
color: red;
text-align: center;
}
Örnek Açıklama
p
, CSS'deki bir seçicidir (stillemek istediğiniz HTML öğesini gösterir: <p>).color
bir özelliktir vered
özellik değeridirtext-align
bir özelliktir vecenter
özellik değeridir