Daha önceki HTML'ye Giriş yazımızda olduğu gibi bu eğitime başlarken de bilgisayar ve internet kullanmayı bilmekten başkasına ihtiyaç yok. Ama önceki yazıyı okumuş olsanız iyi olur.
CSS ya da Cascading Styles Sheets HTML belgelerin görünümlerine stil vermeye yarar. HTML bir sayfanın anlamı yada içeriği olarak düşünülürse CSS de sayfanın sunumudur. Stiller HTML kodlara benzemez. Genel formatları özellik: değer; şeklindedir. Bu özelliklerin büyük çoğunluğu bir çok HTML elemanlanına aynı şekilde uygulanabilir.
Bu içinde bulunduğu paragrafın yazı rengini kırmızı yapacaktır. Kod berraklığı açısından HTML kodlu kısım içinde mümkün olduğu kadar sadece HTML kodları bırakmalıyız. Özellikle stil kodlarımız çok arttığında HTML elemanları bile kod içinde ayırt edemez oluruz. Bu yüzden buradaki gibi sadece bir-iki stile müdahale etmenin dışında satır içi stilleri kullanmamalıyız. Bu bir başlangıç bilgisi zaten bilginizi ilerlettikçe siz de bunu istemeyeceksiniz.
Belge içi stil uygulamalarında ise stilleri HTML dosyamızın <head> elemanı içinde ayrı bir bölümde toplarız. Bu stiller tüm sayfaya uygulanır, stil olduklarını belirtmek için de <style> tag içinde yazılırlar. Şöyle ki,
CSS ya da Cascading Styles Sheets HTML belgelerin görünümlerine stil vermeye yarar. HTML bir sayfanın anlamı yada içeriği olarak düşünülürse CSS de sayfanın sunumudur. Stiller HTML kodlara benzemez. Genel formatları özellik: değer; şeklindedir. Bu özelliklerin büyük çoğunluğu bir çok HTML elemanlanına aynı şekilde uygulanabilir.
Elemana CSS uygulamak
HTML'ye CSS uygulamanın 3 yolu vardır. Satır içi - imline , belge içi - internal ve belge dışı - external.
Satır içi (inline)
Satır içi stilller HTML elemanın style adlandırılmış özelliğine yazılarak sadece bulunulan elemanın görüntüsünü değiştirir. Şuna benzer
<p style="color: red">bir yazı</p>Bu içinde bulunduğu paragrafın yazı rengini kırmızı yapacaktır. Kod berraklığı açısından HTML kodlu kısım içinde mümkün olduğu kadar sadece HTML kodları bırakmalıyız. Özellikle stil kodlarımız çok arttığında HTML elemanları bile kod içinde ayırt edemez oluruz. Bu yüzden buradaki gibi sadece bir-iki stile müdahale etmenin dışında satır içi stilleri kullanmamalıyız. Bu bir başlangıç bilgisi zaten bilginizi ilerlettikçe siz de bunu istemeyeceksiniz.
Belge içi (internal)
Belge içi stil uygulamalarında ise stilleri HTML dosyamızın <head> elemanı içinde ayrı bir bölümde toplarız. Bu stiller tüm sayfaya uygulanır, stil olduklarını belirtmek için de <style> tag içinde yazılırlar. Şöyle ki,
<!DOCTYPE html>
<html>
<head>
<title>CSS Örneği</title>
<style>
p {
color: red;
}
a {
color: blue;
}
</style>
...Bu stil belgedeki tüm paragrafları kırmızı yazılı tüm linkleri mavi yazılı yapacaktır.
Bu şekilde stilllerimizi HTML kodun içinde ayrı bir yere koysak da hala dosyamızın içinde duruyorlar. Bu da tercih edilen bir yöntem değildir. En iyisi stilllerimizi harici bir dosyada toplamak. Bazen web sayfası çok karmaşık hale geldikçe sayfa için değil sayfanın sadece bir kısmı için bile ayrı stil dosyası hazırlanabilir.
Belge dışı (external)
Bu yöntem de CSS kod ayrı bir dosya içine konulur. Bunun bir avantajı tüm web sitesinden istediğimiz sayfa ya da sayfaların bu dosyayı kullanmasını sağlayabiliriz. Bu harici dosyaları isimlendirirken ".css" uxantılı dosyalar kullanılır. Bu CSS dosyasının içinde örneğin şöyle bir kod bulunur:
p {
color: red;
}
a {
color: blue;
}
<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" href="style.css">
...
Uygulamak!
Bu yazılarda her zaman bir uygulamasını yaparak öğrendiklerimizi test ediyoruz. Bu konuda hazırlığımızı yapalım yeni bir klasör oluşturalım ve içine "style.css" ve "index.html" adında 2 tane yeni dosya ekleyelim. "style.css" dosyamız şimdilik boş kalsın. "index.html" dosyamız içine de şunları yazalım:
index.html
<!DOCTYPE html>
<html>
<head>
<title>İlk web sayfam</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
Şimdilik HTML dosyamız sadece stil dosyasının yerini bildiriyor. Şimdilik böyle kaydedelim, ileride içini dolduracağız.
Seçiciler, özellikler ve değerler
HTML dosyalarında tag'ler olduğu gibi CSS dosyalarında da selector (seçici) vardır. Bir tek elemanı bile seçebilen karmaşık seçiciler olmasına rağmen biz başlangıç seviyesinde sadece HTML seçicilerini göreceğiz. Örneğin h2 seçicisi kullandığımızda sayfadaki tüm h2 elemanları etkilenecektir. Yukarıda da örnek stilde gördüğümüz gibi p seçicisi tüm HTML p tag'lerinin stilini değiştirir ya da a seçicisi tüm HTML linklerinin stilini değiştirir.
Seçici kelimenin ardından bir süslü parantez açılarak o HTML elemana ait stilller satır satır girilir. her bir stil satırında özellik adı , ":" değer ya da değerler ve sonunda da ";" bulunur. Bazı örnek özellik isimi vermek gerekirse, color , font-weight , background-color çok kullanılan özelliklerden bazıları.
Özellik ardından iki nokta üst üste konarak değer ya da değerler girilir. En son özelliği tanımlamamızı bitirmek için noktalı virgül işareti ile satır sonlandırılır. Örnek:
body {
font-size: 14px;
color: navy;
}
Uzunluklar ve yüzdeler
CSS'de girilebilecek özellik değerleri için birçok ölçü birimi var. Fakat bazı genel özellik değerleri birçok özellikte kullanılır. Devam etmeden önce bunlara bir bakalım.
- px - (font-size="14px; de olduğu gibi) piksel olarak büyüklük ifade eder
- em - (font-size="2em; de olduğu gibi) göreceli olarak hesaplanır. Örnekteki elemanın yazı büyüklüğü default büyüklüğün 2 katı olur.
- pt - (font-size="12pt; de olduğu gibi) nokta olarak büyüklük , printerde yazılırkenki noktalar gibi (pek kullanılmaz)
- % - (width: 50%; de olduğu gibi) yüzde olarak büyüklük ifade eder. Açıklayacağız ama geçen yazıda resiler konusu işlerken kısa bir bilgi vermiştik. % işareti Türkçede kullanıldığı gibi başa değil İngilizcede kullanıldığı gibi sona gelir, karıştırmayalım.
Değer 0 olacaksa yanında birim yazmaya gerek yok. Mesela bir elemanın etrafında sınır çizgisi istemiyorsak border: 0; yazarız, 0px yada 0% yazmamız gerekmez.
Renkler
CSS'de 16,777,216 tane renk vardır ve hepsini ezbere bilmek zorunludur. Renkler isimleriyle , RGB değerleri olarak (red/green/blue) ve hexadecimal sayı formatında belirtilebilir. Aşağıdaki değerlerin hepsi full kırmızı rengi ifade eder.
- red
- rgb(255, 0, 0)
- rgb(100%, 0, 0)
- #ff0000
- #f00
RGB değerleri ile kırmızı yeşil ve mavi ışıklar karıştırılarak renk oluşturulur. her bir rengin alabileceği değer 0-255 arasındas olabilir. Örnek olarak rgb(0, 255, 0) tam yeşil, rgb(255, 255, 0) tam kırmızı ve tam yeşil karışımı yani tam sarı renktir. Gri olarak rgb(200, 200, 200) örnek verebiliriz. Bu konuda da W3Schools sitesinin meşhur sayfalarından birini önerebilirim. Artık W3Schools sitesini de öğrendiğinize göre sağlam web tasarımcısı olmaya çeyrek kaldı.
Hexadecimal sayı sistemi aslında elektronikte bilgisayarların temelini oluşturan ikili sayı sistemi ile birlikte gelişen bir sayı sistemi. Desimal sayı sisteminde rakamlar 0-9 aralığında 10 tane iken , hexadesimal sistemde her basamak 16 değişik değer alabilir. Bu 16 değeri ifade etmek için 9 rakamından sonra 10 sayısına karşı "a" harfi kullanılır. Böylece her basamaktaki 16 olası rakam 0123456789abcdef karakterlerinden biri olur. RGB olarak girilen değer 0-255 arası hexadesimal olası değer de 0-ff (ff = 15*16 + 15 = 255 desimal aslında) arası olacaktır. Hexadesimal olarak renk ifade edilirken rgb gibi parantez içi sayılar değil # karakteriyle başlayan 6 rakam bitişik olarak ifade edilir. Ama gerçekte bu 6 rakam soldan ilk 2 si kırmızının değeri ortadaki 2 si yeşilin değeri ve sağdaki 2 si mavinin değeridir. Örnek #00ff00 tam yeşil , #ffff00 tam sarı ve #999999 bir gri tonu olacaktır.
Hexadesimal numaralandırmanın basite indirgenmiş hali 3 rakamla ifade edilir. Nasıl olsa bu 0-255 arasında yanyana olan değerler arasında pek fark olmaz diyerek 3 rakamı kullanmaya başlamışlar. Burada aslında her rakamı ikişer defa yazarak 6 rakamlı karşılığı bulunur. Örneğin #0f0 = #00ff00, #ff0 = #ffff00 ve #999 = #999999 gibi.
Başka renk değeri giriş çeşitleri de var ancak temel ilkeler bunlar. Şimdilik yeterli.
color ve background-color özellikleri
İlk önce söylenmesi gereken işi Amerikalılar icat ettiği için colour değil Amerikancadaki gib color yazılıyor. color yazı rengini ve background-color arka plan rengini ayarlar. Mavi arka plan üzerinde sarı yazı şöyle ifade edilir.
h1 {
color: yellow;
background-color: blue;
}
Çok takım tutar gibi oldu ama alakası yok. HTML sayfamızda bir h1 tag ilave ederek görüntüsünü test edebiliriz. Bu renkler çok sert gelmiş olabilir öyleyse stil dosyamızı şöyle yapalım:
Diyelim HTML dosyamıza da şunu yazdık
style.css
body {
font-size: 14px;
color: navy;
}
h1 {
color: #ffc;
background-color: #009;
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>İlk web sayfam</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>CSS'yi seviyorum</h1>
</body>
</html>
Yazılar
Web sayfamızdaki yazıların görüntüsüne uygulayabileceğimiz bir çok stil var.
font-family
Yazıda kullanılan fontun adı. Times New Roman , Arial, veya Verdana gibi. Bu yazı ailelerinden birini web sayfamızda yazdığımızda ziyeret edenin kullandığı tarayıcı bu isimler ile kendisinde yüklü olan yazıyı kullanacaktır. Kullanıcının bilgisayarında bu yazı tipleri bulunmuyorsa yaptığımız değişiklik geçersiz olur. Bu nedenle bir yandan herkesin bilgisayarında olan yazı tiplerine öncelik vermek gerekirken bir yandan da emniyet için istediğimiz görüntüye uygun alternatif yazı tipleri de belirtebiliriz. Eğer şöyle bir değerler sıralaması yaparsak - font-family: arial, helvetica, serif; , tarayıcı ilk önce arial yazı tipine bakar onu bulamazsa helvetica yazı tipini arar o da yoksa standart bir yazı tipi olup tüm bilgisayarlarda bulunan serif yazı tipini kullanır.
Not : Her ne kadar virgül ile ayırmış olsak da birkaç kelimeden oluşan yazı isimlerinde tırnak içine almalıdır. font-family: "Times New Roman" gibi.
font-size
Elemanın yazı büyüklüğünü ayarlar. Burada bir tavsiye her ne kadar h1 tag'i yazısından daha büyük p tag'leri yapabilsek de paragraf yazısını büyüterek başlık yapmak tavsiye edilmez. En basiti arama motorları ilk önce sayfanın h1 tag'ine bakar.
font-weight
Yazının koyuluk derecesini belirler. En çok yaygın olanlar font-weight: bold; ve font-weight: normal; dir. Fakat bundan başka bolder, lighter, 100, 200, 300, 400 (bu normal ile aynı), 500, 600, 700 (bu bold ile aynı), 800 veya 900. Aşağıda bazı ortak yazı stilleri görülüyor.
font-style
Bu özellik yazının italik (eğik) ya da normal olacağını belirler. font-style: italic; ya da font-style: normal; gibi. Normali yazmaya ne gerek var derseniz tamamı italik olan bir yazı içinde normal de gerekebilir di mi?
text-decoration
Bu özellik yazının alt kısmında , üst kısmında veya tam üzerinde bir çizgi olmasını belirler.
- text-decoration: overline; Yazının altına çizgi çizer. Örnek böyle
- text-decoration: underline; Yazının altına çizgi çizer. Örnek böyle
- text-decoration: line-through; Yazının üstünü çizer. Örnek böyle
Bu özelliğin web programlamada en çok kullanıldığı alan linklerin altına default olarak gelen çizgiyi kaldırmak için text-decoration: none; şeklindedir. (none burada olmayan şey anlamına gelir, yani bir çizgi dekorasyonu yok denerek linklerin altında çizgi çıkması engellenir). Aslında eski güzel günlerde altı çizili olan yazının bir link olduğunu bilirdi herkes. Ama şimdi her şey bir gizli saklı..
text-transform
Bu özellik yazının büyük harflerini yönetir.
- text-transform: capitalize; - yazıdaki kelimelerin ilk harflerini büyük harf yapar.
- text-transform: uppercase; - yazıdaki tüm harfleri büyük harf yapar.
- text-transform: lowercase; - yazıdaki tüm harfleri küçük harf yapar.
- text-transform: none; - bu ne işe yarar ben de bilmiyorum.
style.css
body {
font-family: arial, helvetica, sans-serif;
font-size: 14px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
a {
text-decoration: none;
}
strong {
font-style: italic;
text-transform: uppercase;
}
Yazı boşlukları
Bu örnek resim ile bir ön fikir verek başlayalım.
letter-spacing harfler arası boşluğu ayarlar, word-spacing kelimeler arası boşluğu ayarlar. Bunlara bir ölçü değeri verebileceğimiz gibi normal değeri vererek default yapıya geri de dönebiliriz. Nacizane tavsiyem büyüklük verirken piksel falan değil de karakter ölçüsü olan em kullanın. Mesela yukarıdaki letter-spacing: 0.5em;
text-indent özelliği yazının başında boşluk vermek için kullanılır. Satırbaşı dediğimiz bu şey, dikkat edersek yazılı basında ve kitaplarda çok yaygın kullanılırken web sayfalarında pek görünmez. Ama istenirse de bu stil ile sağlanabilir.
text-align özelliği ile de yazının bulunduğu alan içinde sağa hizalı, sola hizalı ya da ortalamış olamasını sağlayabiliriz. Değerler sola hiza için left , sağa hiza için right ve ortalamak için center olmalıdır. Bu hizalama işi web sayfalarında bazen çok sıkıntılı olabiliyor. Bulunulan alandan ilk önce emin olmak gerekir. Emin değilseniz text-align demeden önce geçici olarak background-color değiştirerek alanı net olarak görebilirsiniz.
Margin ve Padding
Geldik en çok kullanılan yerleşim kontrol elemanlarına. Herhangi bir elemanın dışında bırakılması istenen boşluk alana margin denir. Elemanların kenarları arasında kullanılamayan boş bir alan bırakmak içindir. Elemanın kendi içindeki içeirği ile kenarları arasında boşluk istenirse bu sefer padding özelliği kullanılır. Aslında margin bazı elemanlarda otomatik olarak geliyor, mesela başlıkların üstünde ve altında , paragrafların üstünde ve altında default margin değerleri var. Dikkat ettiysek bunu farketmişizdir. body elemanında her yanında margin var yoksa yazdığımız yazılar sol kenara sıfıra sıfır yapışırdı.
Şöyle bir deneme CSS düşünebiliriz:
h2 {
font-size: 1.5em;
background-color: #ccc;
margin: 20px;
padding: 40px;
}
Not: sayfayı yenilediğinizde stilin değişmediğini görürseniz ve kodunuzda hata yoksa sayfayı yenileme tuşuyla değil Shift+F5 tuş kombinasyonuyla yenilemeyi deneyin. Tarayıcı yorulmayayım derken eski sakladığı style.css dosyasını kullanıyor olabilir.
Ayrıca elemanın dört bir yanı ayrı ayrı da margin ve padding alabilir. margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom ve padding-left sırasıyla elemanın üst, sağ, alt ve sol taraflarına ayrı değerle vermek için kullanılır.
Kutu Modeli
Margin, padding ve border özellikleri hepsi birlikte kutu modeli diye isimlendirilir. Yerleşim biliminde çok kullanacağımız bu modelin yapısı şöyledir.
Margin kutusu
Border kutusu
Padding kutusu
Eleman kutusu
Yukarıdaki görsel de CSS kullanarak yapıldı, içiçe elemanlar marginler ve paddinglerle yapılmıştır.
Bu kutu modeli yerleşim ayarlarken çok hatırlanması gereken bir şey. O yüzden aklımızın bir köşesinde kalsın lazım oldukça nasıldı diye döner bakarız.
Border - Sınırlar
border özelliği body içindeki hemen tüm HTML elemanlarına uygulanabilir.
border-style ile sınır çizgisinin tipi belirlenir alabileceği değerler şunlar:
solid
dotted
dashed
double
solid
dotted
double
dashed
dotted
double
dashed
groove
ridge
inset
outset
border-width özelliği sınır çizgisi genişliğini ayarlar, genelde piksel olarak değer verilir. Kenarlar için ayrı ayrı olarak border-top-width , border-right-width , border-bottom-width ve border-left-width kullanılabilir.
CSS dosyamıza şu kodları ekleyelim
h2 {
border-style: dashed;
border-width: 3px;
border-left-width: 10px;
border-right-width: 10px;
border-color: red;
}
Bu kod h2 elemanlarımızın sınır çizgisini kırmızı kesikli çizgi yapar. Üst ve alt kenarların çizgi kalınlığı 3 piksel, sol ve sağ kenarlar ise 10 piksel olacaktır.
Hepsi bir arada
HTML eğitimi sonunda bir html dosyası yazmıştık. O dosyanın içeriğini kopyalayalım "index.html" dosyamız şöyle olacaktır.
index.html
<!DOCTYPE html>
<html>
<head>
<title>İlk web sayfam</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<h1>İlk web sayfam</h1>
<h2>Nedir bu?</h2>
<p>HTML kullanarak herşeyi bir araya getiran bir yazı. <em>HTML kullanarak dedim.</em>
HTML kullanarak herşeyi bir araya getiran bir yazı. HTML kullanarak herşeyi bir araya getiran bir yazı.
HTML kullanarak herşeyi bir araya getiran bir yazı. HTML kullanarak herşeyi bir araya getiran bir yazı.
HTML kullanarak herşeyi bir araya getiran bir yazı. HTML kullanarak herşeyi bir araya getiran bir yazı.
kullanarak herşeyi bir araya getiran bir yazı. HTML kullanarak herşeyi bir araya getiran bir yazı.
HTML kullanarak herşeyi bir araya getiran bir yazı. </p>
<h2>Niye ?</h2>
<ul>
<li>HTML öğrenmek için</li>
<li>
Hava atmak için
<ol>
<li>Patronuma</li>
<li>Arkadaşlarıma</li>
<li>Kedime</li>
<li>Beynimin içinde konuşup duran küçük ördeğe</li>
</ol>
</li>
<li>Çünkü bilgisayarıma aşık oldum ve HTML ile ona göstereceğim</li>
</ul>
<h2>Listeler nasıldı?</h2>
<p><a href="/lists.html">Listeler Sayfası</a></p>
<h3>Hongkong 300x200</h3>
<img src="/images/hong-kong.jpg" width="300px" height="200px">
<h3>Bir tablo</h3>
<table>
<tr>
<td>Satır 1, sütun 1</td>
<td>Satır 1, sütun 2</td>
<td>Satır 1, sütun 3</td>
</tr>
<tr>
<td>Satır 2, sütun 1</td>
<td>Satır 2, sütun 2</td>
<td>Satır 2, sütun 3</td>
</tr>
<tr>
<td>Satır 3, sütun 1....</td>
<td>Satır 3, sütun 2....</td>
<td>Satır 3, sütun 3....</td>
</tr>
</table>
<h2>Bir form</h2>
<p><strong>Not : </strong> Görüntü var da pek iş yapmıyor</p>
<form action="forms.html" method="get">
<p>İsim :</p>
<p><input type="text" name="isim" value="Adınız"></p>
<p>Yorumlar :</p>
<p><textarea name="yorumlar" rows="10" cols="20">Yorumlarınız</textarea></p>
<p>Cinsiyet :</p>
<p><input type="radio" name="cins" value="male"> Erkek</p>
<p><input type="radio" name="cins" value="female"> Kadın</p>
<p><input type="radio" name="cins" value="hermaphrodite"> Çift cinsiyetli</p>
<p><input type="radio" name="cins" value="asexual"> Cinsiyetsiz</p>
<p><input type="submit" value="Gönder"></p>
</form>
</body>
</html>
Bu arada "getiran" bir yazı diye başlamışım kopyalayınca hepsi öyle olmuş, yeni farkettim..
Şimdi de "style.css" dosyamızı şu hale getirelim.
style.css
body {
font-family: arial, helvetica, sans-serif;
font-size: 14px;
color: black;
background-color: #ffc;
margin: 20px;
padding: 0;
}
/* bu bir yorum programsal anlamı yok */
p {
line-height: 21px;
}
h1 {
font-size: 2em;
color: #ffc;
background-color: #900;
margin: 0;
margin-bottom: 7px;
padding: 4px;
font-style: italic;
text-align: center;
letter-spacing: 0.5em;
border-bottom-style: solid;
border-bottom-width: 0.5em;
border-bottom-color: #c00;
}
h2 {
color: white;
background-color: #090;
font-size: 1.5em;
margin: 0;
padding: 2px;
padding-left: 14px;
}
img {
border-style: dashed;
border-width: 2px;
border-color: #ccc;
}
a {
text-decoration: none;
}
strong {
font-style: italic;
text-transform: uppercase;
}
li {
color: #900;
font-style: italic;
}
table {
background-color: #ccc;
}
Allahım ne iğrenç renkler.. Ama CSS baya bir değiştirmiş di mi? Tavsiyem CSS satırlarını tek tek yazarak etkilerini tahmin edin ve bakın bakalım tahmininiz gerçekleşti mi?
Giriş seviye olarak bu kadar CSS yeter. Sonraki bölümde JavaScript'e de gireceğiz inşallah. Üçü bir araya gelmeden web sitesi tasarımı olmaz.
Şimdilik kalın sağlıcakla..
Hiç yorum yok:
Yorum Gönder