CSS, bir belgenin görünümünü açıklayan bir dildir. Yani web sayfalarının nasıl göründüğünden sorumludur. Arka planın rengi ve dekoratif öğeler, yazı tiplerinin boyutu ve stili hepsi ona bağlıdır. Terim “Cascading Style Sheets” (basamaklı stil sayfaları) anlamına gelmektedir. CSS, bir sayfada öğelerin düzenlenmesinden sorumlu olan başka bir biçimlendirme dili olan HTML ile etkileşime girmektedir.
HTML’nin, kapıların ve pencerelerin nerede olduğunu ve mutfağın veya koridorun hangi tarafta olduğunu bulabileceğiniz bir apartman planının kaba bir çizimi gibi çok genel, koşullu bir şema olduğunu hayal edebilirsiniz. Bu durumda, site için CSS, duvar rengi, mobilya ve dekor ile daha ayrıntılı bir düzen görmenize yardımcı olan bir tasarım taslağıdır.
CSS ne için gereklidir?
Diyelim ki HTML ile metin zaten belgenin en üstüne yerleştirilmiştir. Bunun için rengini, yazı tipini ve boyutunu ayarlayabiliriz. CSS kullanmadan metni kalın veya italik yapabilirsiniz. Bunu yapmak için, kaynak koduna metnin stilini tanımlayan bir etiket eklemeniz gerekmektedir. Örneğin, bu metinde, <b> etiketi kullanılarak, parça kalın harflerle yazılmıştır. Metnin ilk kısmı normal yazı tipindedir. Ayrıca bu kısım koyu renkle vurgulanacaktır.
<!DOCTYPE html>
<html>
<kafa>
<title>b etiketli kalın metin</title>
</head>
<vücut>
<p>Metnin ilk kısmı normal yazı tipindedir. <b>Ancak bu kısım kalın olarak vurgulanacaktır.</b></p>
</body>
</html>
HTML’de metni biçimlendirmek için etiketlerin kullanılması kaynak kodu karıştırmaktadır. Ayrıca durum daha karmaşık hale getirmektedir. Bu nedenle hata yapma olasılığını da artırmaktadır. Bundan kaçınmak için stil işaretleme için ayrı bir dil oluşturdular. Bu dil de CSS ‘dir. Yazı tipi boyutu ve rengine ek olarak, bu biçimlendirme dili şunlarıda düzenlemektedir;
- Başlıkları;
- Alt başlıkları;
- Gövde metninin bölünmesini;
- Kenar boşluklarının ve girintilerin boyutunu;
- Metni vurgulamak için ayrı renkli çerçeveleri;
- Ana arka planın rengini;
- Üstbilgi ve altbilgiyi.
Stil sayfaları nasıl çalışmaktadır?
Herhangi bir dil gibi CSS dili’nin de kendi sözdizimi vardır. Ayrıca kuralları da vardır. Bunlar öğelerin görünümünü belirleyen değerlerdir. Bir CSS kuralı, bir seçiciden, CSS özelliklerinden ve bunların değerlerinden oluşmaktadır.
- Seçiciler, tarayıcının verilen seçenekleri HTML kodunun hangi bölümüne uygulayacağını anlamasına yardımcı olan etiketlerdir.
- CSS özellikleri, bir öğenin veya metnin rengi veya arka planın rengi (arka plan) gibi belirli tasarım ayarlarıdır.
- Değer yalnızca bir değerdir. Ayrıca metin veya siyah gibi bir sayı olarak ifade edilmektedir;
seçici {
mülk değeri;
}
p {
siyah renk
}
Koddaki CSS kuralları kaşlı ayraçlar {…} içine alınır. Ayracı açmadan önce, bu kuralın uygulanacağı seçiciyi belirtmeniz gerekir.
Örnekte, seçici <p>’dir. <p> adlı tüm etiketleri seçmektedir. Renk CSS özelliğidir ve siyah, CSS özelliğinin değeridir. Özellik: değer bağlama, stil bildirim bloğu olarak adlandırılmaktadır. İçinde, özellik değerden iki nokta üst üste ile ayrılmakta ve bir blok diğerinden noktalı virgülle ayrılmaktadır.
Tablolar basamaklı tablolar olarak adlandırılmaktadır. Çünkü basamaklama prensibine göre çalışırlar. Yani aşağıda yazılan kural öncelikli kabul edilmektedir. Örneğin örneğimizde, arka plan renginin değerinin altına başka bir renk değeri yazarsak: kırmızıdır. O zaman metnin rengi ise, siyah değil kırmızı olacaktır.
p {
siyah renk
arka plan: #eeeee
kırmızı renk
}
CSS Stilleri Dahil
CSS’yi HTML ile birlikte kullanmak için aşağıdaki yöntemlerden birini seçebilirsiniz;
1. CSS’de yazılan tüm kodlar, .css uzantılı ayrı bir harici dosyaya yazılmaktadır. <link href> etiketi kullanılarak HTML sayfasına bağlanmaktadır. Bu nedenle sayfada görünmeyecek bir hizmet etiketidir;
<kafa>
<link href=”style.css” rel=”stylesheet”>
</head>
Bir stil sayfası değerine sahip rel özelliği, belgede metin stillerinin uygulandığını göstermektedir. Bu önemlidir. Çünkü stilleri uygulamaya ek olarak, <link> etiketi birçok farklı şekilde kullanılmaktadır.
2. Style niteliğini kullanarak CSS stillerini belirli bir etiketin içine yazın;
<p stil=”renk: siyah; background: #eeeeee”> style özelliğiyle stil ekleme</p>
Bu durumda kaşlı ayraçlar kullanamazsınız. Çünkü onlarsız bile kuralın hangi öğeye atıfta bulunduğu tarayıcı tarafından anlaşılır olacaktır.
Site yapısı
CSS kayan özellikleri
Float, öğenin hangi tarafa hizalanacağını belirleyen bir özelliktir. Sağa veya sola. Örneğin, bir öğeyi sola hizalamak için CSS özelliğini imzalarız;
kayan nokta: sol;
Bu yöntem, örneğin görüntüleri metnin etrafına sarmak için kullanmak için uygundur. Ancak bir süre önce, neredeyse her şey float kullanılarak dizilirdi. Örneğin, bu yaygın bir menü düzeni yöntemiydi. Menü öğelerinin bir çizgi oluşturması için, her öğeye birbiri ardına sıralanacak şekilde float: left veya float: right verilmiştir;
Esnek kutu
Flexbox, 2011’de float’ın yerini almıştır. Avantajı, blokların daha esnek hale gelmesidir. Öğeler, alanı doldurmak için küçüldü ve gerildi. Herhangi bir sorun olmadan dikey ve yatay olarak hizalanabildiler. Örneğin menü öğelerini ortaya hizalamak için şu kodu yazmanız yeterlidir;
Bir öğe, bloklar sayfanın tüm genişliğini kaplayacak şekilde uzatılabilmektedir. Bunu yapmak için alt blok (sınıf seçici) için bir CSS özelliği yazılmalıdır.
Esnek büyüme: 1;
Flexbox’ın tüm özelliklerini, istediğiniz değeri seçebileceğiniz ve kod parçacığını kopyalayabileceğiniz etkileşimli bir hile sayfasında görebilirsiniz.
Grid
Grid yakın dönemde ortaya çıkmıştır. Geliştiricilerin uzun süredir karşılaştığı birçok sorunun çözülmesine de yardımcı olmuştur. Sorunlar, başlangıçta bunun için tasarlanmamış yöntemlerle çözülmüştür. Ana yenilik, elemanların dikey ve yatay olarak birkaç eksene göre düzenlenmesiydi. Birden çok satır veya birden çok sütun olmayan öğeleri her birine a, b, c, d vb. değerler atayarak genişletebilirsiniz. Sonra CSS kodunu yazıyoruz:
grid-şablon-alanları: “a b c d d”
“f f g d d”
Tüm işlevler ayrıca, istediğiniz değeri seçip kodunu kopyalayabileceğiniz etkileşimli bir hile sayfasında toplanmaktadır.
CSS3
CSS3, halen geliştirme aşamasında olan yeni nesil bir CSS’dir. Bununla JavaScript kullanmadan öğeleri canlandırabilmektedir. Ayrıca gölgeler ve degradeler oluşturabilmektedir. Bu sayede blokların köşelerini yuvarlatabilirsiniz.
Örneğin, başlık öğesini yuvarlamak için border-radius özelliğini kullanın;
başlık {
arka plan rengi:#7695FE;
kenarlık: ince #336699 katı;
dolgu: 10 piksel
kenar boşluğu: 10 piksel
metin hizalama: merkez;
sınır yarıçapı: 25px;
}
Sorun şu ki, tüm tarayıcılar aynı anda CSS3 yeniliklerini desteklemeye başlamamaktadır. Bu nedenle border-radius özelliğini destekleyen bir tarayıcıda görüntü farklı olabilmektedir. Bu tutarsızlıklar nedeniyle, CSS3 ile çalışan web tasarımcıları bir kural oluşturmuşlardır: “Web siteleri tüm tarayıcılarda aynı görünmemelidir ve bu normaldir.”
CSS Metodolojisi
Metodoloji, diğer ekip üyeleri veya üçüncü taraf geliştiriciler tarafından korunabilecek ve okunabilecek şekilde CSS yazmak için bir standarttır. Yani dışarıdan bir kişinin anlayacağı, yazar olmadan kodu anlayıp değişiklik yapabileceği kurallar bunlardır. Yazma yönergelerine CSS metodolojileri denmektedir.
Evrensel bir metodoloji bugün mevcut değildir. Bazıları modası geçmiş ve bazıları diğerlerinden daha aktif olarak kullanılmaktadır. Ayrıca yakın gelecekte yeni ve daha gelişmiş metodolojiler ortaya çıkabilmektedir. En popüler iki tanesidir.
Atomik CSS. Bu metodolojide, kuralları birleştiren araçlar olan bir dizi sınıf oluşturulmaktadır. Sınıflar doğrudan HTML bloğunda birleştirilmektedir. Yani öğe stilleri CSS’de ayarlanmamaktadır. Böylece, bağlamlar arasında geçiş yapması gerekmediğinden, düzen tasarımcısının görevi kolaylaştırılmaktadır. Örneğin, herhangi bir projede değerler de vardır;
- dolgu – elemanın her tarafında dolgu;
- kenar boşluğu – öğenin her tarafındaki kenar boşlukları.
Aynı değerler { dolgu: 5 piksel; } ve { kenar boşluğu: 5 piksel; }, $space-1: 5px ve { padding: 10px; } ve { kenar boşluğu: 10 piksel; } $space-2: 10px genel değerine dönüştürün;
Bu metodoloji, tek bir arayüz değildir. Yeniden kullanılabilecek tüm bir tasarım sistemi oluşturabileceğiniz için büyük projeler için kullanışlıdır.
CSS-in-js. Bu metodoloji, CSS dosyalarını dahil etmek yerine, JavaScript dilinden yararlanmanın mümkün olacağı tek bir JS modülünü HTML’ye bağlamayı önermektedir. Bu yaklaşımın avantajı, CSS’nin daha güçlü olmasıdır. Çünkü kesinlikle tüm özelliklerini kısıtlama olmadan kullanabilirsiniz. Örneğin, bir tasarım projesinden seçilen renkler, JS kodu kullanılarak açıklaştırılabilir veya koyulaştırılabilir:
‘color’ öğesinden rengi içe aktar
const kırmızı = Renk(‘kırmızı’)
sabit stiller = {
renk: red.lighten(10).toHex()
}
CSS-in-JS’nin bir başka yararı da kod ve dosyalardaki azalmadır. Örneğin; bu metodolojide, 2-3 kuralın yazıldığı küçük bir bileşen için ayrı bir CSS dosyası oluşturmak zorunda kalmayacaksınız. Ayrıca diğer metodolojilerde, bu tür birçok dosya vardır.
CSS-in-JS metodolojisi, öncelikle geliştiricilerin rahatlığı ve DX’in (Geliştirici Deneyimi) kalitesini artırmak için oluşturulmuştur. Bu nedenle kullanıcı deneyimini – UX’i (Kullanıcı Deneyimi) etkileyecektir. Ayrıca bu durumla gerçekten doğrudan ilişkilidir. Çünkü bir geliştiricinin çalışması ne kadar rahatsa, hatalar ve koltuk değnekleri olmadan arayüz işlevselliği o kadar kaliteli olmaktadır.
