CSS bileşenleri, bir web sayfasının görüntüsünü ve düzenini belirleyen yapı taşlarıdır. Bu bileşenler, web sayfasının görsel stili, düzeni ve kullanıcı etkileşimi gibi özelliklerini kontrol etmek için kullanılır.
Aşağıdakiler CSS bileşenlerinin bazılarıdır:
- Selector (Seçici): CSS’de bir elementi hedeflemek için kullanılan öğedir. Bir seçici, HTML elementlerini, id’leri, class’ları veya özellikleri hedefleyebilir.
- Property (Özellik): Bir elementin özelliklerini belirlemek için kullanılan kod bloğudur. Özellikler, renk, yazı tipi, boyut, arkaplan rengi, yükseklik, genişlik vb. gibi özellikleri içerebilir.
- Value (Değer): Bir özelliğin belirli bir değerini belirler. Örneğin, “color” özelliği için bir değer “red” olabilir.
- Box model (Kutu modeli): Bir HTML elementinin boyutlandırma ve konumlandırmasını belirleyen bir bileşendir. Kutu modeli, içerik, dolgu, kenar boşluğu ve çerçeve gibi özellikleri içerir.
- Layout (Düzen): Bir web sayfasındaki bileşenlerin konumlandırılması ve düzenlenmesi için kullanılır. Layout, grid, flexbox veya float gibi farklı tekniklerle yapılabilir.
- Pseudo-class (Yanılsama sınıfı): Bir HTML elementinin belirli bir durumunu hedeflemek için kullanılır. Örneğin, bir link’in ziyaret edildiği durumu hedeflemek için “visited” pseudo-class’ı kullanılabilir.
- Media query (Medya sorgusu): Bir web sayfasının farklı cihazlarda nasıl görüneceğini belirlemek için kullanılır. Medya sorguları, ekran boyutu, çözünürlük, cihaz yönelimi vb. gibi faktörlere göre farklı CSS özelliklerini etkinleştirebilir veya devre dışı bırakabilir.
Bu bileşenler, web tasarımında birçok farklı görsel özellikleri ve etkileşimleri sağlamak için kullanılır. CSS’nin gücü, web sayfalarına yaratıcı ve işlevsel tasarımlar oluşturmak için esneklik sağlamasıdır.
Örneğin:
Tablo öğesi (table element) bir örnek olabilir. Tablolar, HTML’deki birçok öğe gibi, CSS ile biçimlendirilebilir. Birkaç CSS bileşeni ile tabloların görünümü ve düzeni değiştirilebilir. Örneğin:
- Box model: Tablonun içeriği, dolgusu, kenar boşluğu ve çerçevesi ayarlanabilir.
- Selector: Tablodaki belli bir hücre veya satır sütunu hedeflenebilir.
- Property ve value: Tablonun renkleri, yazı tipi, genişlikleri, yükseklikleri gibi birçok özelliği CSS ile belirlenebilir.
- Layout: Tabloların içindeki hücrelerin konumu ve boyutu grid veya flexbox gibi düzenleme teknikleri kullanılarak ayarlanabilir.
- Pseudo-class: Tablodaki belli bir hücre, satır veya sütun belirli bir durumdayken, örneğin fare imlecine geldiğinde veya seçildiğinde, özel stiller uygulanabilir.
- Media query: Tabloların farklı cihazlarda nasıl görüneceği ayarlanabilir, örneğin mobil cihazlarda tabloların sütunları yığılabilir veya kaydırılabilir hale getirilebilir.
Bu özelliklerin bir kombinasyonu, tabloların tasarımını değiştirmek ve daha işlevsel ve estetik görünümler elde etmek için kullanılabilir.
