Merhabalar. Bu yazımda Css Nedir konusunu anlatarak Css’e giriş yapacağım. Böylece Css dersleri serisi hazırlamayı düşünüyorum.
CSS NEDİR – CSS’E GİRİŞ
Konumuza öncelikle Css ( Cascading Style Sheet ) nedir ile başlayalım. Html veya herhangi bir dil ile oluşturduğumuz web sitelerinin kullanıcıya nasıl görüneceğini Css ile ayarlayabiliriz
Birçok sayfadan oluşan bir sitemizin olduğunu düşünelim.Sayfamızdaki her linkin renginin mavi olmasını veya arka plan renginin sabit olmasını istiyoruz.Bunun için her html sayfasına aynı kodları yazmaktansa .css uzantılı bir dosyada stillerimizi saklayarak sitemizin hem hızlı açılmasını hem de her sayfaya aynı kodu yazma sıkıntısından kurtulmamızı sağlayabiliriz.Her sayfada değişiklik yapmaktansa tek bir dosyada stillerimiz değiştirebiliriz
Peki bu isteklerimizi html dosyalarına nasıl entegre edeceğiz? Bunun için 3 yol var
1) .css dosyaları oluşturarak html sayfamıza bunları aktarmak (harici)
2) Her etiketimiz içine style parametresi tanımlamak (inline)
3) <head> etiketinin arasına <style> etiketi ile tanımlama yapmak (dahili)
CSS SÖZ DİZİMİ
Bir Css ifadesi 2 bileşenden oluşur
- Seçici
- İfade
|
1 |
p { color:green; text-align:center;} |
*color ve text-align , özelliğimizdir
*green ve center kısımları ise bu özelliklere verdiğimiz değerlerdir
->Her özellik noktalı virgül (;) ile biter
->Css de yorum satırları /*……*/ ifadeleri arasına yazılır
——————————————————————————————————————————
CSS INLINE KULLANIMI
İlk olarak her etiket için style parametresinin kullanımına örnek verelim
|
1 2 3 4 5 6 |
<html> <body style="background-color:green;"> <h2 style="background-color:blue;">Mehmet Kirazlı </h2> <p style="background-color:red;">Web Sitesi</p> </body> </html> |
Öncelikle kodumuzun çıktısını göstererek daha sonra anlatmaya başlayalım
Burada görüldüğü gibi html den farklı olarak paragraf ve başlık etiketleri için de arka plan renkleri verilebiliyor. Style parametresi ile stil vermek için;
style=”background-color:green;” ==> Bu kod satırı arka plan rengi vermemize yarar
style=”font-family:verdana;” ==>Bu kod satırı yazı tipini belirler. “verdana” yazan kısma herhangi bir yazı tipi girilebilir.
Bu özellikleri toplu olarak 1 satırda kullanmak istiyorsak ;
|
1 |
style="font-family:arial;color:green;font-size:25px; |
kod satırını kullanmalıyız.Buna bir örnek verelim ve çıktısını inceleyelim;
|
1 2 3 4 5 6 |
<html> <body> <h1 style="font-family:verdana;">Mehmet Kirazlı</h1> <p style="font-family:arial;color:green;font-size:25px;background-color:yellow;">Web Sitesi</p> </body> </html> |
Çıktımızda anlaşıldığı üzere bir başlık ve paragraf yazımız olacaktır.Başlığımız verdana fontlu ,paragrafımız ise arial fontlu,yeşil renkli,sarı arka plana sahip ve font büyüklüğü 25 piksel olacaktır
*Bu yazdığımız etiketleri html de <font> etiketleri ile yaptığımızı hatırlatalım
Konumuzun detaylarına inmeden bu konuyu burada kapatıyoruz.İlerki konularda sık kullanılan sytle özelliklerini anlatacağım
CSS DAHİLİ KULLANIMI
Bu başlığımızda css kodlarını <head> elementi içinde tanımlamayı göreceğiz.Bunun için öğrendiğimiz bilgilerden yola çıkarak bir paragraf etiketleri içerisine metin giriyoruz ve <head> elementinin <style> etiketinin içinde bu paragraf için bir stil uyguluyoruz
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<html > <head> <style> p { color:green; text-align:left; background-color:yellow; } </style> <title>CSS GİRİŞ</title> </head> <body> <p>Fırtınalara yön veren kelebeklerin kanat çırpışlarıdır</p> </body> </html> |
<style> kısmında,hangi elemente stil vereceğimizi tanımladık.<body> kısmında tanımlayacağımız her <p> etiketi için bu stil uygulanacaktır.Aşağıda çıktımızı inceleyelim
CSS HARİCİ KULLANIMI
Yukarıda belirttiğimiz gibi harici kullanımda .css uzantılı bir dosyaya stillerimizi kaydediyoruz ve html sayfamızın içine bu dosyayı <link> etiketi ile çağırıyoruz.Bunun için ilk olarak Notepad++ programımızı açıyoruz.Dosya->Yeni diyoruz ve yeni bir sayfa oluşturuyoruz.Adına stil.css ismini vererek farklı kaydedelim.Buraya stil kodlarımızı yazacağız.Yani hangi elemente stil vermek istiyoruz.Şimdi stil.css sayfamıza şu kodları ekleyelim;
|
1 2 3 4 5 |
p{ color:red; background-color:green; text-align:left; } |
Burada p elementine birkaç özellik tanımladık.Şimdi ise tekrar Dosya->Yeni diyoruz ve onu da deneme.html olarak farklı kaydediyoruz.Buraya asıl sayfamızı yazacağız.Şimdi de aşağıdaki kodları bu deneme.html sayfamıza yazalım
|
1 2 3 4 5 6 7 8 9 |
<html> <head> <link rel="stylesheet" type="text/css" href="stil.css" /> <title>HARİCİ KULLANIM</title> </head> <body> <p>Bilginin efendisi olmak için,çalışmanın kölesi olmak gerekir</p> </body> </html> |
Şimdi ise deneme.html sayfamızda yazdığımız kodları anlatalım;
-> <link> etiketi ile stil.css dosyamızdaki verileri alıyoruz
-> rel=”stylesheet” olarak kalsın
-> href=”stil.css” yazarak stil dosyamızın yolunu belirtiyoruz
-> type=”text/css” ise şimdilik böyle kalmalı.Bunlar yazılması zorunlu alanlardır.
Notepad++ da yazdığımız kodları şu şekilde görelim;
Daha sonra deneme.html sayfamıza çift tıklarsak tarayıcımızda aşağıdaki gibi bir çıktı elde edeceğiz
