CSS Kodları Nasıl Yazılır?
CSS nasıl yazılır? CSS’in yapısı iki ana kısımdan oluşur. Seçiciler (Selector) ve Bildirim Bloğu (Declaration Block). Bildirim Bloğuda ikiye ayrılır. Özellik (Property) ve Değer (Value).
1. Seçiciler ve Bildirim Bloğu
Tüm HTML elemanları (body, p vd.) potansiyel seçicilerdir. Seçiciler ismini buradan alır, seçilen HTML elemanı anlamındadır. Bildirim bloğu süslü parantez ile ”{ }” açılır ve kapanır. Bildirimler arasında ” ; ” noktalı virgül kullanılır. Özellik ve değerler birbirinden ” : ” iki nokta üst üste ile ayrılır.
2. Gruplama
Yukarıda bir seçiciyi sadece bir HTML elemanına atamayı gördük, Birden fazla HTML elemanına de atama yapabiliriz, buna gruplama denir. Gruplama seçicilerde yapıldığı gibi bildirimlerde de yapılabilir.
Gruplama yapılan seçicileri ayırmak için ” , ” virgül kullanılır. Sınırsız sayıda seçici gruplanabilir. Gruplama bize büyük kolaylıklar sağlar. Bildirimlerimizi de gruplayabiliriz. Bununla ilgili yukarıda örnekler mevcut. Bir veya daha fazla seçiciye bir den fazla bildirim ekleyebiliriz.
3. Değerler
Değerler genelde mesafe ve renkleri tanımlamak için kullanılır. Değerleri dört gruba ayıra biliriz. Uzunluk değerleri, yüzde değerleri, renk değerleri ve URL değerleri
Birçok CSS özelliği anahtar sözcük değeri alabilir. Anahtar sözcükleri tırnaksız olarak atanır. Tırnaklı atamalar hatalıdır.
p{ color: red; }
3.1. Uzunluk Değerleri
CSS’de tanımlanan 8 uzunluk değeri vardır. Bunların üç tanesi göreceli (relative) uzunluklar ve kalan beş tanesi kesin (absolute)uzunluklardır.
3.1.1. Göreceli Uzunluklar
Bu değerler diğer uzunluk değerlerine göre görecelidir. Sayfalarımızın ölçeğinin değiştiği ve çıktısının alındığı durumlarda bu uzunluk değerlerini kullanmamız bize avantaj sağlayacaktır.
em: Elemanın yazıtipinin yüksekliğidir. Mesela font-size değeri 14 px olarak atanmış ise 1em 14piksel eşit demektir.
ex: Elemanın “x” harfinin yüksekliğidir. Atanmış olan yazıtipinin küçük “x” değeri yüksekliğidir.
px: piksel değeri. Eğer monitörünüze yeterince yakından bakarsanız, çok küçük kutulardan oluşmuş bir ızgaraya benzer. Buradaki her kutu bir pikseldir. Bu da her monitöre göre farklı değer demektir.
3.1.2. Kesin Uzunluklar
Bu uzunluklar gerçek hayatta kullanılan birimlerdir.
İn (inç): 1 inch=2,54 cm’dir.
Örnek: line-height:0.5 in
cm: Bizim gerçek hayatta kullandığımız santimetre değeridir.
Örnek: margin:2cm
mm: Bizim gerçek hayatta kullandığımız milimetre değeridir.
Örnek: letter-spacing:1mm
pt (point): Standart baskı birimidir. (1pt = 1/72in)
Örnek: font-size:14pt
pc (pika): Bir inç’in 1/6 eşit olan bir baskı ölçü birimidir. Bir pika 12 noktaya bölünür.
Örnek: font-size:2pc
3.2. Yüzde Değerleri
Yüzde değerleri göreceli değerlerdir. Yüzde değerleri uygulandığı nesnenin boyutuna bağlı hareket eder.
/* elemanın font-size değerinin %150 si dir */
h4 { line-height: 150% }
/* satır genişliğinin 10% nu */
p { text-indent: 10% }
3.3. Renk Değerleri
CSS’de renk değerleri isim olarak ve RGB değeri olarak tanımlanabilir. RGB tanımlaması da dört çeşittir.
3.3.1. Renk İsimleri
Renklerin İngilizce isimleri kullanılarak tanımlama yapılabilir.
p {color: black}
/* renk tanımı siyah olarak yapılıyor*/
h1{ background-color: red;}
/* h1 başlığının ardalanı kırmızı tanımlanıyor */
3.3.2. RGB Renk Değerleri
CSS’de renk tanımlamak için genelde kullanılan yöntem budur. RGB tanımlamanında dört çeşidi vardır.
#RRGGBB : Burada, RR, GG, ve BB, sırasıyla kırmızı (red), yeşil (green) ve mavi (blue) renklerin toplam renk içindeki yoğunluğunu gösteren hekzadesimal sayılardır. Örnek: color:#ff0000; (kırmızı)
#RGB: Yukarıdaki yöntemin kısaltmasıdır. Aynı değerleri taşıyan grup değerleri birleştirilir. Örnek: color:f00; (kırmızı)
rgb(R,G,B): Bu RGB renklerinin ondalık sayma düzeninde 0 ile 255 arasında bir tanımı vardır. Buna göre tanımlama yapılabilir. Örnek h1 {color: rgb(191,127,127);}
rgb(R%,G%,B%): Bu RGB renklerinin yüzdesel olarak %0 ile %100 arasında bir tanımı vardır. Buna göre tanımlama yapılır. Örnek: h1 {color: rgb(75%,0%,0%);}
CSS3 ile birlikte RGBA (RGB with Alpha channel) renk tanımı da eklenmiştir. Renk tanımı ile birlikte alfa kanal saydamlık değeri de atanabilecek.
3.4. URL Değerleri
CSS veri dosyası ve kaynağın yerini belirlemek için URI(Universal Resource Indicator – Evrensel Kaynak ) kullanır. CSS’de URI genel olarak iki yerde kullanılır stil şablonlarını eklemek veya Artalan resmi eklemek için. URL tanımlaması için aşağıdaki gibi bir tanımlama yapılır.
url("http://www.fatihhayrioglu.com/images/kucuk.gif")
Burada tırnaksız ve tek tırnaklı kullanımları da standarda uygundur.
CSS nasıl yazılır konusunu detaylı bir şekilde gördük. CSS ile ilgili konuları aşağıdaki linke tıklayarak CSS kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter logolarına tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.
https://yazilimdelisi.com/category/web-gelistirme/css/
Sosyal Medya Hesaplarımız
