CSS Nedir ?
Cascading Style Sheets ifadesinin kısaltılmış halidir. Türkçe dilinde “Basamaklı Stil Sayfası” olarak isimlendirilmektedir. CSS, HTML ile oluşturulmuş web sitesinin iskelet yapısına görsellik eklemeyi sağlar. HTML, görsellik ekleme açısından fazla bir seçeneğe sahip değildir. CSS nedir ? CSS etiketleri ve parametreleri
CSS
CSS ile web sitenizin daha güzel gözükmesini ve görsel açıdan zenginleşmesini sağlayabilirsiniz. Aynı zamanda CSS ile HTML etiketlerine müdahale edebilir ve etiketler üzerinde özelleştirme yapabilirsiniz. CSS ile head etiketleri arasında tasarım satırları oluşturabilir ve bunları site içerisinde istediğiniz yerde kullanabilirsiniz.
CSS ifadelerinin yazılışı HTML’e göre farklılık gösterir.
<div></div> etiketi
Kutu etiketidir. Önemli bir CSS etiketidir. Web sitelerindeki birçok tasarım bu kutular sayesinde yapılmaktadır. Aşağıdaki parametrelerle birlikte kullanılabilir.
- width: Genişlik eklemeyi sağlar.
- height: Yükseklik eklemeyi sağlar.
- background: Arka plan rengini değiştirmek yada arka plana görsel eklemek için kullanılır.
- border: Kenarlık eklemeyi sağlar.
- color: Yazı rengini değiştirir.
- font: Yazı boyutu, rengini, yazı tipini ve boyutunu değiştirir.
- text-align: Yazı hizalaması yapar.
- margin: Dışarıdan boşluk ekler.
- padding: İçeriden boşluk ekler.
İçerisinde merhaba dünya yazan renkli kutu örneği;
<html>
<head>
<meta charset="utf-8">
<title>Başlıksız Belge</title>
</head>
<body>
<div style="width:300px; height:180px; background:#c30; border:5px solid #000; color:#fff; font:bold 20px tahoma; text-align:center; margin:50px auto; padding:120px 0px 0px 0px; ">
MERHABA DÜNYA
</div>
</body>
</html>Fark ettiyseniz CSS tasarım ifadelerinin yazılışı HTML’den farklıdır. Örneğin HTML’de genişlik parametresi width=”300″ olarak yazılıyorken CSS’de width:300px; şeklinde yazılıyor. Yani CSS ifadeleri yazarken aşağıdakilere dikkat edilmelidir.
- HTML’de kullanılan “=” yerine “:” kullanılır.
- CSS’de birimler yazılır. Örneğin width:300px; genişlik birimi parametresinde girilen genişliğin birimi de belirtilmiştir.
- CSS’de parametreler daha uzun bir şekilde yazılabilir. Parametre, “;” ile sonlandırılır. Bu işaretten sonra bir sonraki parametreye geçilir. Örneğin yukarıdaki kodda font:bold 20px tahoma; parametresi “font:” ile başlamıştır. Buradaki “bold” parametresi yazının kalın olmasını sağlar. Hemen sonrasında bir boşluk bırakılarak “20px” parametresiyle yazının 20 piksel olması ve son olarak “tahoma” parametresiyle yazının tahoma fontunda olması sağlanmıştır. Buradaki “tahoma” parametresi kullanıcının son parametresi olduğundan “;” ile CSS ifadesi sonlandırılmıştır.
Burada style=” ” ifadesi div etiketinin stilini değiştirmeyi sağar. Style içerisindeki width:300px; height:180px; ifadeleri, genişliği ve yüksekliği ayarlar. Sonrasında yazılan background:#c30; ifadesi, arka plan renginin #cc3300 renk kodunda olmasını sağlar. Renk kodunun bu şekilde kullanılması CSS’e özgüdür. HTML ifadelerinde bu şekilde kullanılamaz.
Sonrasında yazılan border:5px solid #000; color:#fff; ifadesi, kenarlık eklemeyi sağlar. Bu kenarlık 5 piksel, kalın ve #000 (siyah) renkte ayarlanmıştır. Gördüğünüz şekilde kenarlığa ait birçok parametre tek bir seferde kullanılmış ve “;” ifadesiyle sonlandırılıp bir sonraki farklı parametreye geçilmiştir.
Sonrasında kutu içerisindeki yazının stili değiştirilmek istenmiştir. Font etiketinin dışında color:#fff; ile yazı rengi #ffffff yani siyah yapılmıştır. Ardından font:bold 20px tahoma; ifadesiyle kalın, 20 piksel boyutunda tahoma yazı tipinin kullanılması sağlanıştır.
Böylece <div></div> içerisine ne yazılırsa yazılsın, 20 piksel boyutunda tahoma yazı tipiyle kalın yazı yazılacaktır.
Hemen ardından gelen text-align:center; ifadesi, yazının ortalanacak şekilde hizalanmasını sağlar. Bu, left ile sola hizalama yada right ile sağa hizalama şeklinde ayarlanabilirdi.
Son olarak margin:50px auto; ile üstten 50 piksel, alttan 50 piksel boşluk verilmiştir. auto ile sağ ve sol taraftan hizalanması sağlanmıştır. Dikkat ettiyseniz margin dışarıdan boşluk uyguladığı için, sağ ve sol hizalama auto yapıldığından kutu ortalanmıştır. Benzer bir kullanımda margin:50px auto 50px auto; şeklinde olabilirdi.
Benzer bir şekilde padding:120px 0px 0px 0px; ile sadece yukarıdan 120 piksel iç boşluk uygulanmıştır.
Sonuç olarak bu kod şu şekilde gözükmektedir;
CSS’de etiketlerden çok parametrelerin nasıl kullanıldığı daha önemlidir. Bu parametrelerin ne işe yaradığı öğrendikten sonra örnek HTML ve CSS çalışmaları yapılabilir.
position ve float parametreleri
Bu parametreler özetle şu şekilde kullanılır;
- position: Sayfada bulunan nesnelerin (kutu vb.) konumlandırmayı sağlar.
- position:static Durağan konumlandırma sağlar. Sol üst köşeye göre konumlandırır. (Varsayılan)
- position:relative Göreceli konumlandırma sağlar. Bir önceki nesneye göre konumlandırır.
- position:absolute Mutlak konumlandırma sağlar. Tamamen bağımsız konumlandırır.
- position:fixed Sabit konumlandırma sağlar. Kullanıcı, sayfayı kaydırsa bile belirlenen konum değişmez.
- float: Sayfada bulunan nesneleri (kutu vb.) kaydırmak için kullanılır.
- float:left Sola kaydırır.
- float:right Sağa kaydırır.
- clear:both Kaydırmaları temizler.
- position: Sayfada bulunan nesnelerin (kutu vb.) konumlandırmayı sağlar.
Şimdi bu parametreleri uygulamalı olarak görelim. İlk önce postion:static, position:relative, position:absolute ve position:fixed parametrelerinin ne işe yaradığını görelim. Aralarındaki farkı bir anlayalım.
<html>
<head>
<meta charset="utf-8">
<title>Başlıksız Belge</title>
</head>
<body>
<div style="width:300px; height:180px; background:#c30; border:5px solid #000; color:#fff; font:bold 20px tahoma; text-align:center; padding:120px 0px 0px 0px; ">
BİRİNCİ KUTU
</div>
<div style="width:300px; height:180px; background:#c30; border:5px solid #000; color:#fff; font:bold 20px tahoma; text-align:center; padding:120px 0px 0px 0px; position:static; margin:50px 0px 0px 50px; ">
İKİNCİ KUTU
</div>
<div style="width:300px; height:180px; background:#c30; border:5px solid #000; color:#fff; font:bold 20px tahoma; text-align:center; padding:120px 0px 0px 0px; position:relative; top:50px; left:50px; ">
ÜÇÜNCÜ KUTU</div>
<div style="width:300px; height:180px; background:#c30; border:5px solid #000; color:#fff; font:bold 20px tahoma; text-align:center; padding:120px 0px 0px 0px; position:absolute; top:50px; left:50px; ">
DÖRDÜNCÜ KUTU</div>
<div style="width:300px; height:180px; background:#c30; border:5px solid #000; color:#fff; font:bold 20px tahoma; text-align:center; padding:120px 0px 0px 0px; position:fixed; top:500px; left:500px; ">
BEŞİNCİ KUTU</div>
<div style="width:300px; height:180px; background:#c30; border:5px solid #000; color:#fff; font:bold 20px tahoma; text-align:center; padding:120px 0px 0px 0px; ">
ALTINCI KUTU</div>
</body>
</html>Kod içerisinde toplamda altı kutu oluşturduk. Birinci ve altınca kutuda position parametresini kullanmadık. Geri kalan dört kutu içerisinde position parametrelerini birbirinden farklı olacak şekilde kullandık.
Karşımıza aşağıdaki gibi bir görüntü çıktı.
İlk kutu için yazılan;
<div style="width:300px; height:180px; background:#c30; border:5px solid #000; color:#fff; font:bold 20px tahoma; text-align:center; padding:120px 0px 0px 0px; ">
BİRİNCİ KUTU
</div>kod parçasında position parametresini kullanmadık. Ancak position:static varsayılan pozisyon olduğundan birinci kutu kendisini statik olarak sol üst köşeye göre konumlandırdı.
İkinci kutu için yazılan;
<div style="width:300px; height:180px; background:#c30; border:5px solid #000; color:#fff; font:bold 20px tahoma; text-align:center; padding:120px 0px 0px 0px; position:static; margin:50px 0px 0px 50px; ">
İKİNCİ KUTU
</div>kod parçasında statik konumlandırma yaptık. Normalde statik konumlandırma kendisinden önce olan nesneleri göz ardı eder. Ancak kendisinden önce olan nesne de statik olarak yerleştirildiğinden bir önceki nesneye göre kendini konumlandırdı.
Üçüncü kutu için yazılan;
<div style="width:300px; height:180px; background:#c30; border:5px solid #000; color:#fff; font:bold 20px tahoma; text-align:center; padding:120px 0px 0px 0px; position:relative; top:50px; left:50px; ">
ÜÇÜNCÜ KUTU</div>kod parçasında relative konumlandırması sayesinde kendini bir önceki kutuya göre konumlandırdı. Ancak dikkat statikten farklı olarak konumlandırma için margin yerine top, left ifadeleri kullanıldı.
Dördüncü kutu için yazılan;
<div style="width:300px; height:180px; background:#c30; border:5px solid #000; color:#fff; font:bold 20px tahoma; text-align:center; padding:120px 0px 0px 0px; position:absolute; top:50px; left:50px; ">
DÖRDÜNCÜ KUTU</div>
kod parçasıyla absolute konumlandırılması yapıldı. Görüldüğü üzere absolute, tamamen bağımsız bir şekilde, hiç bir nesneyi dikkate almaksızın doğrudan verilen top ve left birimlerine göre konumlandırma yaptı. Aynı zamanda kendisinden önce gelen nesneleri dikkate almadığı için önceden oluşturulan kutunun üzerinde yer aldı.
Beşinci kutu için yazılan;
<div style="width:300px; height:180px; background:#c30; border:5px solid #000; color:#fff; font:bold 20px tahoma; text-align:center; padding:120px 0px 0px 0px; position:fixed; top:500px; left:500px; ">
BEŞİNCİ KUTU</div>kod parçası, diğerlerine göre biraz daha farklı. Şimdi ilk başta yazdığımız ve altı kutunun bulunduğu kodda boş satırlar oluşturalım ve sayfayı aşağı doğru kaydıralım.
Diğer tüm kutular sayfa içerisinde konumlandırıldığı noktada sabit kalırken fixed ile konumlandırılan kutu ekrandaki yerini koruyacak ve sayfa kaydırılsa bile aynı yerinde gözükmeye devam edecektir. Bu, daha çok web sitelerin sağ kenar çubuğunun alt kısmında reklam yayımlamak için kullandıkları bir özelliktir.
<html>
<head>
<meta charset="utf-8">
<title>Başlıksız Belge</title>
</head>
<body>
<div style="width:300px; height:180px; background:#c30; border:5px solid #000; color:#fff; font:bold 20px tahoma; text-align:center; padding:120px 0px 0px 0px; ">
BİRİNCİ KUTU
</div>
<div style="width:300px; height:180px; background:#c30; border:5px solid #000; color:#fff; font:bold 20px tahoma; text-align:center; padding:120px 0px 0px 0px; position:static; margin:50px 0px 0px 50px; ">
İKİNCİ KUTU
</div>
<div style="width:300px; height:180px; background:#c30; border:5px solid #000; color:#fff; font:bold 20px tahoma; text-align:center; padding:120px 0px 0px 0px; position:relative; top:50px; left:50px; ">
ÜÇÜNCÜ KUTU</div>
<div style="width: 300px; height: 180px; background: #c30; border: 5px solid #000; color: #fff; font: bold 20px tahoma; text-align: center; padding: 120px 0px 0px 0px; position: absolute; top:50px; left:50px; ">
DÖRDÜNCÜ KUTU</div>
<div style="width:300px; height:180px; background:#c30; border:5px solid #000; color:#fff; font:bold 20px tahoma; text-align:center; padding:120px 0px 0px 0px; position:fixed; top:500px; left:500px; ">
BEŞİNCİ KUTU</div>
<div style="width:300px; height:180px; background:#c30; border:5px solid #000; color:#fff; font:bold 20px tahoma; text-align:center; padding:120px 0px 0px 0px; ">
ALTINCI KUTU</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>Şimdi bu kodu çalıştıralım ve tarayıcıdaki sayfanın en altına inelim;
Görüldüğü üzere sayfanın en altına inilince birinci, ikinci, üçüncü, dördüncü ve beşinci kutu gözden kayboldu. Altıncı kutu sayfadaki yerini muhafaza ediyor. Ancak beşinci kutu sayfadaki yerinden çok ekrandaki yerini korumaya devam ediyor. İşte fixed konumlandırılması bu tarz sabit konumlandırma işlemleri için kullanılır. Reklam yayınları için birebirdir.
şimdide float parametresini inceleyelim. Bu parametrede nesneleri kaydırmak için kullanılır. Öncelikle float:left kaydırmasını kullanalım.
<html>
<head>
<meta charset="utf-8">
<title>Başlıksız Belge</title>
</head>
<body>
<div style="width:300px; height:180px; background:#f00; border:5px solid #000; color:#fff; font:bold 20px tahoma; text-align:center; padding:120px 0px 0px 0px; ">
1. KUTUCUK
</div>
<div style="width:300px; height:180px; background:#0f0; border:5px solid #000; color:#fff; font:bold 20px tahoma; text-align:center; padding:120px 0px 0px 0px; ">
2. KUTUCUK
</div>
<div style="width:300px; height:180px; background:#00f; border:5px solid #000; color:#fff; font:bold 20px tahoma; text-align:center; padding:120px 0px 0px 0px; ">
3. KUTUCUK
</div>
<div style="width:300px; height:180px; background:#f00; border:5px solid #000; color:#fff; font:bold 20px tahoma; text-align:center; padding:120px 0px 0px 0px; float:left; ">
4. KUTUCUK
</div>
<div style="width:300px; height:180px; background:#0f0; border:5px solid #000; color:#fff; font:bold 20px tahoma; text-align:center; padding:120px 0px 0px 0px; float:left; ">
5. KUTUCUK
</div>
<div style="width:300px; height:180px; background:#00f; border:5px solid #000; color:#fff; font:bold 20px tahoma; text-align:center; padding:120px 0px 0px 0px; float:left; ">
6. KUTUCUK
</div>
</body>
</html>Burada numaralandırılmış 6 kutu var. İlk 3 kutuda herhangi bir kaydırma yapılmadı. Ancak 4, 5 ve 6 numaralı kutu, float:left ile sola göre kaydırıldı.
Aynı şekilde şimdide float:right ile sağa göre kaydırma yapalım.
<div style="width:300px; height:180px; background:#f00; border:5px solid #000; color:#fff; font:bold 20px tahoma; text-align:center; padding:120px 0px 0px 0px; ">
7. KUTUCUK
</div>
<div style="width:300px; height:180px; background:#0f0; border:5px solid #000; color:#fff; font:bold 20px tahoma; text-align:center; padding:120px 0px 0px 0px; ">
8. KUTUCUK
</div>
<div style="width:300px; height:180px; background:#00f; border:5px solid #000; color:#fff; font:bold 20px tahoma; text-align:center; padding:120px 0px 0px 0px; ">
9. KUTUCUK
</div>
<div style="width:300px; height:180px; background:#f00; border:5px solid #000; color:#fff; font:bold 20px tahoma; text-align:center; padding:120px 0px 0px 0px; float:right; ">
10. KUTUCUK
</div>
<div style="width:300px; height:180px; background:#0f0; border:5px solid #000; color:#fff; font:bold 20px tahoma; text-align:center; padding:120px 0px 0px 0px; float:right; ">
11. KUTUCUK
</div>
<div style="width:300px; height:180px; background:#00f; border:5px solid #000; color:#fff; font:bold 20px tahoma; text-align:center; padding:120px 0px 0px 0px; float:right; ">
12. KUTUCUK
</div>
Kaydırılan bir nesneden sonra gelen tüm nesneleri de kaydırmanız en doğru kod yapısını oluşturacaktır. Eğer kaydırma işleminden kaynaklanan bozuk bir görüntü oluşursa, görüntüsü bozuk olan nesneye clear:both parametresini ekleyin. Bu parametre bozuk görüntüyü giderecektir.
CSS’de birçok parametre ve etiket bulunmaktadır. Burada kullanıcı, ihtiyacı doğrultusunda gerekli olan etiketleri bulmalı ve parametreleri kullanmalıdır.
Bazı CSS parametreleri;
box-shadow parametresi
Bu parametre, gölgelendirme işlemi için kullanılır. Örnek kullanımı box-shadow:10px 5px 4px #0000; şeklindedir. Bu kod parçacığında sırasıyla 10 piksel sağ taraf gölge uzunluğu, 5 piksel alt taraf gölge uzunluğu, 4 piksel gölge yoğunluğu ve #000000 renk koduna sahip (siyah) gölge oluşturduk.
Örneğin;
<html>
<head>
<meta charset="utf-8">
<title>Başlıksız Belge</title>
</head>
<body>
<div style="width:300px; height:300px; background:#900; margin:40px auto 0px auto; box-shadow:10px 5px 4px #000000;"></div>
</body>
</html>
Sonuç;
Eğer gölgenin üste ve sağ tarafa doğru olmasını istiyorsanız girdiğiniz değerleri negatif değer vermeniz yeterli olacaktır.
border-radius parametresi
Köşe yuvarlatmak için kullanılır. Örnek kullanımı border-radius:10px 20px 30px 40px; şeklindeki gibidir.
Burada sırayla sol üst köşe, sağ üst köşe, sağ alt köşe ve sol alt köşe yuvarlatılmıştır
Örneğin;
<html>
<head>
<meta charset="utf-8">
<title>Başlıksız Belge</title>
</head>
<body>
<div style="width:300px; height:300px; background:#900; margin:40px auto 0px auto; border-radius:10px 20px 30px 40px;"></div>
</body>
</html>Sonuç;
transform:rotate parametresi
Nesneleri belirli bir açıyla döndürmek için kullanılır.
Örneğin;
<html>
<head>
<meta charset="utf-8">
<title>Başlıksız Belge</title>
</head>
<body>
<div style="width:300px; height:300px; background:#900; margin:40px auto 0px auto; transform:rotate(45deg)"></div>
</body>
</html>Sonuç;
CSS stil kodlarının <head></head> arasında yazılması
Buraya kadar CSS’in stil ifadelerini hep body etiketleri arasında kullandık. Örneğin <div style=” width=”800; height:600px; “> kod satırında div etiketinin stil kodları yani width (genişlik) ve height (yükseklik) stil kodlarını yine etiket içerisinde kullanıldı.
Bu, body etiketleri arasında çok fazla kalabalık kod kullanımına ve kargaşaya sebep olacaktır. Çünkü bir HTML ve CSS kodlarıyla sayfa tasarımı yapılırken bir hayli fazla stil kodu ve etiketler kullanılır. Bu stil kodlarıyla etiketlerin bir arada durması karmaşık bir görüntüye yola açar.
Bu yüzden stil kodlarını <head></head> etiketleri arasında yazabilir, body etiketleri arasında kullanacağımız etiket için bu stil kodlarını etkinleştirebiliriz. Bu başlık altında CSS’in farklı bir kullanımı ele alıp stil kodları head etiketleri arasında kullanacağız. Ancak
en doğru kullanım biçin CSS ifadelerin ayrı bir dosya içerisinde olup HTML ile oluşturulan iskelette CSS ifadelerin bu dosyadan çağırılmasıdır.
CSS’in en doğru kullanımı olan bu yöntemi ilerleyen zamanlarda göstereceğiz. Şuan ki CSS kullanımı stil kodlarının head bölümünde yer almasıyla oluşmaktadır.
Örnek;
<html>
<head>
<meta charset="utf-8">
<title>CSS UYGULAMALARI</title>
<style>
.kutu{width:300px;; height:300px; background:#C99; text-align:center;}
</style>
</head>
<body>
<div class="kutu"> MERHABA DÜNYA</div>
</body>
</html>Görüldüğü üzere head etiketleri arasında yazılan {width:300px;; height:300px; background:#C99; text-align:center;} stil kodları başında .kutu ifadesi sayesinde “kutu” için geçerli kılındı.
Sonrasında stil kodları daha önceden girilen “kutu” tasarımını body etiketleri arasında class=”kutu” parametresiyle çağrıldı.
Sonuç;
Şimdi az önce yazdığımız kodla biraz daha oynayalım. Örneğin yazının tipi, boyutu ve rengi fon etiketiyle düzeltiyordu. Bu etiket yazının stil kodlarından biridir. Bu yüzden body etiketleri arasında ayrı bir font etiketi kullanmak yerine yazının rengini, tipini ve boyutu stil kodları arasında değiştireceğiz.
Aynı zamanda stil kodlarının daha rahat anlaşılabilmesi için font etiketi, stil kodları arasında farklı bir şekilde kullanılacaktır.
Örnek;
<html>
<head>
<meta charset="utf-8">
<title>CSS UYGULAMALARI</title>
<style>
.kutu{width:300px;; height:300px; background:#C99; text-align:center; font-size:16; font-family:Tahoma; font-style:italic; color:#f00;}
</style>
</head>
<body>
<div class="kutu"> MERHABA DÜNYA</div>
</body>
</html>SONUÇ;
Görüldüğü üzere font birimi daha farklı bir şekilde kullanıldı. Etiketteki gibi kullanılabilirdi ancak bu tarz çoklu parametrelerin kullanımı doğru sırayla kullanmayı gerektirebilmektedir. Yani çok parametrelerin bir arada kullanılması için önce yazı tipi, sonra yazı boyutu, sonra yazı gibi sıralamalar gerektirebiliyor. Bu durumun sonucunda siz kodu doğru yazsanız bile sonuç yazdığınız gibi gözükmüyor.
Bu yüzden parametreleri parçalı bir şekilde kullanmanızı tavsiye ederiz. Örneğin; font ifadesi tek başına kullanılıp tüm birimleri bu ifadede tek seferde kullanmak yerine font-size:16; font-family:Tahoma; font-style:italic; color:#f00; çoklu parametre kullanımını tercih ettik. Bu kullanım, hem daha anlaşılır hemde hata payı daha düşük bir kullanımdır.
CSS stil kodlarının ayrı bir dosyada yazılması ve HTML’de bu dosyanın kullanılması
En doğru CSS kullanım biçimidir. Bu kullanım sayesinde HTML iskeleti içerisindeki kod yığınından kurtulabilirsiniz. Birinci kullanımı body etiketleri arasında hem HTML ifadelerinin hem de CSS ifadelerinin kullanılması yüzünden büyük bir kod kalabalığına sebep oluyordu.
İkinci kullanım şekliyse head etiketleri arasında kod kalabalığına sebep oluyordu. Ancak CSS stil kodları ayrı bir dosyada oluşturulup bu dosya, HTML iskeletinde çağırılarak kullanılırsa bu kod yığınından kurtulmuş oluruz.
Bu kullanım şekli için HTML taslağının yanında ayrı bir CSS taslağı oluşturulur. CSS taslağının içerisinde yazılan stil kodlarının kullanılabilmesi için HTML içerisinde tek satırdan oluşturulan bir kodun kullanılması yeterlidir.
Bu kullanımın nasıl olduğunu daha iyi anlayabilmek için basit bir örnek yapalım. Bu örnek Adobe Dreamweaver yazılımı üzerinden yapılmıştır.
Yazılım açıldığında karşımıza aşağıdaki gibi bir pencere çıkacaktır.
Görüldüğü üzere bu pencerede HTML taslağı ve CSS taslağı açılabilmektedir. Bu zamana kadar yapılan tüm uygulamalar sadece HTML taslağı üzerinde yapıldı. Şimdiyse boş bir HTML taslağının yanında boş bir CSS taslağı oluşturacağız.
Oluşturduğumuz boş CSS taslağının içerisine stil kodumuzu yazacağız.
@charset "utf-8";
/* CSS Document */
.kutu{width:300px;; height:300px; background:#C99; text-align:center; font-size:16; font-family:Tahoma; font-style:italic; color:#f00;}İlk iki satır her boş CSS taslağında hazır bir şekilde bulunur. Sonrasında HTML taslağında farklı olarak head etiketlerinin arasında <link href=”stil.css” type=”text/css” rel=”stylesheet”/> satırını ekleyeceğiz. Bu satır stil.css kaynaklı dosyayı HTML iskeletinde kullanmamızı sağlar.
<html>
<head>
<meta charset="utf-8">
<title>CSS UYGULAMALARI</title>
<link href="stil.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="kutu"> MERHABA DÜNYA</div>
</body>
</html>Sonrasında HTML taslağını masaüstünde html.html olarak kaydedeceğiz. Oluşturduğumuz css dosyasını da stil.css ismiyle kaydedeceğiz.
Sonrasında HTML dosyamızı açacağız.
Görüldüğü üzere HTML taslağında hiç bir stil kodu yazmamıza rağmen <link href=”stil.css” type=”text/css” rel=”stylesheet”/> ile stil.css dosyası içerisindeki stil kodlarını kullanabildik.
CSS’in bu kullanımı en doğru kullanımdır. Ancak bu içerikte kodları bir arada rahat görebilmeniz için ve birde çok kalabalık kod satırından oluşan tasarımlar yapmayacağımız için ikinci kullanım yoluyla tasarım kodlarını sizlerle paylaşacağız.
CSS ile HTML etiketlerine müdahale etme
CSS ile HTML etiketleri üzerinde çeşitli değişiklikler yapabilirsiniz. Örneğin sitenizin gövdesini oluşturan body etiketine müdahale edebilirsiniz. Yada başlık atmayı sağlayan h1 başlığının fontunu değiştirebilir ve varsayılan HTML görünümünden çıkarak farklı bir görünüm elde edebilirsiniz.
Örnek;
<html>
<head>
<meta charset="utf-8">
<title>CSS ÇALIŞMASI</title>
<style type="text/css">
body{background-color:#609;}
</style>
</head>
<body>
<font size="30" color="#ffffff">Merhaba dünya !</font>
</body>
</html>Dikkat ederseniz body etiketine müdahale edilirken body{background-color:#609;} satırı yazıldı ve başına “.” işareti koyulmadı. Var olan bir etikete, bir stile müdahale edilirken “.” işareti koyulmaz. Bu işaret sadece yeni bir stil elemanı oluştururken kullanılır.
Sonuç;
1.UYGULAMA: HTML VE CSS İLE MENÜ OLUŞTURMA
HTML ve CSS etiketleri ve parametreleri kullanıldıkça öğrenilen şeylerdir. Burada birçok parametre ve etiket anlatılsa da hepsinin tek bir içerikte bulundurulması neredeyse olanaksızdır. Ancak Adobe Dreamweaver ve benzeri yazılımlar kullanılırken uygulamalar yaptıkça hangi etiketlerin olduğunu ve hangi etiketler hangi parametrelerin kullanıldığını zaman geçtikçe öğrenebilirsiniz. Bunun için bol bol uygulama yapmanız yeterli olacaktır.
Şimdiyse HTML ve CSS kodlarını kullanarak her sitede olmazsa olmaz menü örnekleri yapalım.
Örnek;
<html>
<head>
<meta charset="utf-8">
<title>MENÜ</title>
<style type="text/css">
.menu{ width:200px; height:150px; margin:10px 0 0 0}
.menu ul{ margin:0; padding:0; list-style:none}
.menu ul li a{ display:block; width:125px; height:24px; background:#fedcba; color:#930; font:bold 12px tahoma; text-decoration:none; padding:8px 0 0 5px}
.menu ul li a:hover{ color:#000; background:#abcdef;}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="">Ana Sayfa</a></li>
<li><a href="">Hakkımızda</a></li>
<li><a href="">Gizlilik politikası</a></li>
<li><a href="">İletişim</a></li>
</ul>
</div>
</body>
</html>Burada aşağıdaki CSS stil kodları kullanılmıştır;
.menu{ width:200px; height:150px; margin:10px 0 0 0}
.menu ul{ margin:0; padding:0; list-style:none}
.menu ul li a{ display:block; width:125px; height:24px; background:#fedcba; color:#930; font:bold 12px tahoma; text-decoration:none; padding:8px 0 0 5px}
.menu ul li a:hover{ color:#000; background:#abcdef;}İlk satır olan .menu{ width:200px; height:150px; margin:10px 0 0 0} ile 200 px genişliği ve 150 px yüksekliği olan bir alan oluşturduk. margin:10px 0 0 0; ile bu alana dışarıdan ve üst taraftan 10 px bir boşluk verdik.
İkinci satır olan .menu ul{ margin:0; padding:0; list-style:none} ile menü elemanına ait bir liste stili oluşturduk. Bu listenin iç ve dış boşluklarında hiç bir boşluk olmayacak ve listeleme sembolleri bulunmayacak şekilde stil kodlarını girdik. Boşlukları en başından 0 olarak ayarladık ki sonrasında çeşitli bozuk görüntüler oluşmasın. Aksi takdirde bu bozuk görüntülerin hangi satırdan kaynaklandığını tespit etmek bir hayli zor olur.
.menu ul li a{ display:block; width:125px; height:24px; background:#fedcba; color:#930; font:bold 12px tahoma; text-decoration:none; padding:8px 0 0 5px} satırı ile menü elementinin içerisindeki sırasız liste içerisindeki elemanlara eğer link atanırsa bu link yada linkler “{}” içerisindeki tüm stil kodlarına göre şekil alacaktır. Buradaki “.menu ul li a” ifadesi iç içe olan parametrelerde yada etiketlerde istenilen herhangi bir elemana müdahale etmeyi sağlar. Dahah iyi anlamak için:
- .menu{} – “menu” isimli elemana müdahale et.
- .menu .ul{} – “menu” içerisindeki “ul” yani sırasız listeye müdahale et.
- .menu .ul li{} – “menu” içerisinde bulunan “ul” ifadesinin de içerisinde olan “li” yani liste elemanlarına müdahale et.
- .menu .ul li a{} – “menu” içerisinde bulunan “ul” ifadesinin de içinde olan “li” ifadesinin kapsadığı tüm “a” yani link yada linklere müdahale et.
Son olarak .menu ul li a:hover{ color:#000; background:#abcdef;} satırıyla, fare imleci, .menu elemanının içindeki sırasız liste elemanındaki linklere temas ettiğinde yazı renginin #000 ve arka planında #abcdef renginde olmasını sağladı.
Yani buradaki a:hover ifadesi, fare imlecinin linkin üzerine geldiğinde bazı stil kodlarının değiştirilmesini sağladı.
Sonuç;
Menünün dikey bir şekilde değil de yatay bir şekilde olması için kodu nasıl yazmamız gerekiyordu ? Kod içerisinde sadece .yataymenu ul li{ float:left} satırını kullanmak menü elemanlarını yan yana sıralanması sağlanacaktır. Böylece menümüz dikeyde değil yatayda oluşacaktır.
Örnek;
<html>
<head>
<meta charset="utf-8">
<title>CSS ÇALIŞMASI</title>
<style type="text/css">
.yataymenu{ width:600px; height:32px; margin:30px 0 0 0}
.yataymenu ul{ margin:0; padding:0; list-style:none}
.yataymenu ul li{ float:left}
.yataymenu ul li a{ display:block; width:120px; height:24px; background:#000; color:#fff; font:bold 12px tahoma; text-decoration:none; padding:8px 0 0 0; text-align:center}
.yataymenu ul li a:hover{ color:#00f; background:#aaa;}
</style>
</head>
<body>
<div class="yataymenu">
<ul>
<li><a href="">Ana Sayfa</a></li>
<li><a href="">Hakkımızda</a></li>
<li><a href="">Gizlilik politikası</a></li>
<li><a href="">İletişim</a></li>
</ul>
</div>
</body>Sonuç;
2.UYGULAMA: HTML VE CSS İLE AÇILIR MENÜ OLUŞTURMA
Şimdiyse menü tasarımlarımızı biraz daha geliştirelim. Menümüze açılır menü haline getirerek daha kullanışlı bir hale getirelim.
Örnek;
<html>
<head>
<meta charset="utf-8">
<title>AÇILIR DİKEY MMENÜ</title>
<style type="text/css">
.dikeymenu{width:190px; height:1200px;}
.dikeymenu ul{margin:0px; padding:0px; list-style:none;}
.dikeymenu ul li{position:relative;}
.dikeymenu ul li a{display:block; width:150px; height:40px; padding-top:15px; padding-left:40px; border:0px; font:bold 15px Verdana; text-decoration:none; color:#FFF; background:#93C;}
.dikeymenu ul li a:hover{color:#099; background:#C99;}
.dikeymenu ul li ul{display:none; position:absolute; left:190px; top:0px;}
.dikeymenu ul li:hover ul{display:block;}
</style>
</head>
<body>
<div class="dikeymenu">
<ul>
<li><a href="">1.SAYFA</a></li>
<li><a href="">2.SAYFA</a></li>
<li><a href="">3.SAYFA</a>
<ul>
<li><a href="">1. ALT SAYFA</a></li>
<li><a href="">2. ALT SAYFA</a></li>
<li><a href="">3. ALT SAYFA</a></li>
</ul>
</li>
<li><a href="">4.SAYFA</a></li>
</ul>
</div>
</body>
</html>Sonuç;
Şimdiyse son olarak yatay açılır menü tasarımı yapalım.
Örnek;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>YATAY ACILIR MENU</title>
<style type="text/css">
.menu5 { width:610px; height:150px;margin:50px 0 0 0; }
.menu5 ul { list-style:none; margin:0; padding:0}
.menu5 ul li { float:left; position:relative}
.menu5 ul li a{ display:block; padding:9px 0 ; color:#fff; background:#000 ; border:1px solid #abc; border-radius:10px; text-decoration:none; font:bold 12px Arial; width:120px; text-align:center }
.menu5 ul li a:hover { color:#fff; background:#3CF;}
.menu5 ul li ul { display:none; position:absolute; left:0; top:34px}
.menu5 ul li:hover ul { display:block}
</style>
</head>
<body>
<div class="menu5">
<ul>
<li><a href="">Ana Sayfa</a></li>
<li><a href="">Kategoriler</a>
<ul>
<li><a href="">Teknoloji</a></li>
<li><a href="">Yapay zeka</a></li>
<li><a href="">Bilim</a></li>
<li><a href="">Yazılım</a></li>
</ul>
</li>
<li><a href="">Topluluk</a>
<ul>
<li><a href="">Facebook grubu</a></li>
<li><a href="">İnstagram sayfası</a></li>
<li><a href="">LinkedIn</a></li>
<li><a href="">E-Posta aboneliği</a></li>
</ul>
</li>
<li><a href="">Forum</a></li>
<li><a href="">İletişim</a></li>
</ul>
</div>
</body>
</html>Sonuç;
3.UYGULAMA: SAĞ KENAR ÇUBUĞUNA EKLENEBİLİR SOSYAL MEDYA BUTONLARI
Neredeyse tüm sitelerin ana sayfasında yada sağ kenar çubuğunda “bizi takip edin” veya benzeri bir şekilde gözüken sosyal medya butonları bulunmaktadır. Eğer sosyal medya sizin markanız veya siteniz için çok ama çok önemliyse sosyal medya hesaplarınızı daha vurgulu bir hale getirmeniz gerekmektedir.
Bu konuda HTML ve CSS ile ziyaretçilerin sosyal medya hesaplarınızı ziyaret etmesini sağlayan büyük boylu butonlar tasarlayabilirsiniz. Aşağıdaki örnek kodu istediğiniz gibi değiştirebilir, özelleştirebilirsiniz. Aynı zamanda href parametresine link atayarak aktif bir şekilde kullanabilirsiniz.
Kod;
<html>
<head>
<meta charset="utf-8">
<title>SOSYAL MEDYA BUTONLARI</title>
<style type="text/css">
.kutucuk111{ width:300px; height:50px; margin-bottom:0px; }
.kutucuk111 a{ display:block; width:300px; height:34px; color:#fff; background:#93C; text-decoration:none; text-align:center; border-radius:0px; padding-top:10px; font-family:Trebuchet MS; font-size:20px; border-radius:999px;}
.kutucuk111 a:hover{color:#909; background:#99C;}
.kutucuk222{ width:300px; height:50px; margin-bottom:0px; }
.kutucuk222 a{ display:block; width:300px; height:34px; color:#fff; background:#0C3; text-decoration:none; text-align:center; border-radius:0px; padding-top:10px; font-family:Trebuchet MS; font-size:20px; border-radius:999px; }
.kutucuk222 a:hover{color:#093; background:#99C;}
</style>
</head>
<body>
<div class="kutucuk111"><a href="">YOUTUBE</a></div>
<div class="kutucuk111"><a href="">İNSTAGRAM</a></div>
<div class="kutucuk111"><a href="" target="_blank">TWİTTER</a></div>
<div class="kutucuk222"><a href="">ABONE OL</a></div>
</body>
</html>Sonuç;
4.UYGULAMA: REKLAM ALANI
HTML ve CSS dilini kullanarak web sitenizden gelir elde etmenize imkan tanıyan reklam alanları tasarlayabilirsiniz. Biz, burada 300×300 genişlik ve yükseklik değerlerinde bir reklam alanı tasarladık. Ancak siz bunu değiştirerek farklı genişlik ve yükseklik değerlerinde yapabilirsiniz.
Buradaki reklam alanı sabit bir görselden oluşmamaktadır. Aşağıdaki kodların canlı görünümünü kontrol edersiniz fare imleci reklam alanına temas ettiğinde ikinci görsel devreye girmektedir. Bu, reklam yayınlamada daha başarılı olmanızı sağlayabilir.
Örnek;
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.reklamalaniKARE{width:300px; height:300px; background:url(https://1.bp.blogspot.com/-wNR9kl2GOOA/XqcbEvz71mI/AAAAAAAAG8U/ylDtB3skPQwIQl83qPLo6EAX-GQi_JRFgCLcBGAsYHQ/s1600/D1.png) no-repeat; margin:0px auto;}
.reklamalaniKARE a{display:block; width:300px; height:300px; margin:0px auto;}
.reklamalaniKARE a:hover{background:url(https://1.bp.blogspot.com/-RN6csCT29Ws/XqcbEkzcMtI/AAAAAAAAG8Q/Nm5wa84nNooIwetqUrsbFCVTI257ti2EwCLcBGAsYHQ/s1600/D2.png) no-repeat;}
</style>
</head>
<body>
<div class="reklamalaniKARE">
<a href="" target="_blank"></a>
</div>
</body>
</html>Sonuç;
Benzer bir çalışma için aşağıdaki örneğe bakabilirsiniz.
Kod;
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.reklamalaniİLAN{width:300px; height:600px; background:url(https://1.bp.blogspot.com/-3srSG5lM1lI/XpBhb_7ZqKI/AAAAAAAAGrQ/JglOCdGH2J4RaCuc7Xbhd79As0zLcvNuwCLcBGAsYHQ/s1600/%25C4%25B01.png) no-repeat; margin:0px auto;}
.reklamalaniİLAN a{display:block; width:300px; height:600px; margin:0px auto;}
.reklamalaniİLAN a:hover{background:url(https://1.bp.blogspot.com/-rjGosjyKehY/XpBhb9-droI/AAAAAAAAGrU/aBO2Mo7nP90TYABfbWyP0w58E5QpuQNWwCLcBGAsYHQ/s1600/%25C4%25B02.png) no-repeat;}
</style>
</head>
<body>
<div class="reklamalaniİLAN">
<a href="" target="_blank"></a>
</div>
</body>
</html>Sonuç;
5.UYGULAMA: CSS ESNEK BİLDİRİM KUTUSU
Yeni bir bildirim, kampanya yada indirimi sitenize gelen ziyaretçilerinize göstermek için ana sayfanızda bir bildirim kutusuna ihtiyaç duyabilirsiniz.
Örnek;
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.bilgikutusu{width:auto; height:auto; background:#c36; color:#fff; padding:3px; font-family:Trebuchet MS; font-size:15px; text-align:center;}
.bilgikutusu:hover{ background:#d47; color:#dff; font-family:Trebuchet MS; font-size:15px;}
.logokutusu{ width:70px; height:70px; margin:5px auto;}
.bilgikutusualtkismi{width:auto; height:auto; margin:25px auto; padding:0 auto; text-align:center;}
</style>
</head>
<body>
<div class="bilgikutusu">
<div class="logokutusu"><img src="https://1.bp.blogspot.com/-UDojDxYVKgM/XbIYt-EqJBI/AAAAAAAAEuU/BMv0py_46NsOfaHW5b44_EERnexW6vf4gCLcBGAsYHQ/s1600/PARDUS_0opacity.png" width="70" height="70"></div>
Nike ayakkabılarında %30 indirim var !
<div class="bilgikutusualtkismi"><a href=""><b><font color="#ffffff">Gözat</font></b></a></div>
</div>
</body>
</html>Bu kod son derece esnektir. Esnek bir şekilde yazılan bu kodu sitenizin hangi alanına koyarsanız o alanın şeklini alır. Yani kodun belirli bir genişlik ve yükseklik değeri yoktur. Bu değerler kodun kullanıldığı yere göre değişkenlik gösterir.
Bu tarz esnek tasarımlar sayesinde yazdığınız kodlar masaüstü, dizüstü ve mobil cihaz ekranlarında yani farklı çözünürlükteki ekranlarda doğru bir şekilde görüntülenir. Hiçbir şekilde bozulma yaşamaz.
Sonuç;
ve
Okuduğunuz için kıvırcık bir yazılımcı olarak teşekkür ederiz. CSS nedir ? CSS etiketleri ve parametreleri kullanımı, Css Parametreleri nelerdi? tüm bu sorulara cevap vermeye çalıştık. Kodla kalın, iyi kodlamalar.
Bir Yorum