CSS(Cascading Style Sheets),web sayfalarında ki etiketlerin biçimlendirmesini sağlayan bir web teknolojisidir. Etiketlere verilen biçimlendirmeler sayesinde etiket arasında bulunan tüm yazı ve nesneleri istediğimiz gibi biçimlendirebiliriz.
Css 3 Farklı yerde kullanılabilir.
- Yerel Stil Şablonları (Tek bir etiket içinde kullanma)
- Global(genel) Stil Şablonları (Tek bir sayfadaki etiketler için)
- Harici Stil Şablonları (Çok sayıda sayfalar için)
Bir CSS ifadesi, selektör ve bildirim olmak üzere iki ana kısımdan oluşur. Selektör(selector) bir style sheet bildiriminin ilk öğesine verilen isimdir. Selektör CSS’lerde hangi etiket ile ilgili işlem yapacağımızı seçmeye yarar.
Bildirim (decleration) kısmı da kendi içinde özellik ve değer olarak 2 temel bileşene ayrılmaktadır.
1. Yerel Stil Şablonları (Tek bir etiket için)
Yerel stil şablonları, bir etiketin içine parametre olarak yazılan CSS kodlarından oluşur ve sadece o etiket için geçerli olur. Dolayısıyla etki alanı o etiketle sınırlıdır. Kullanımı şöyledir:
<etiket style="css Kodları">…</etiket>
Örnekte görüldüğü gibi h3 ve b etiketleri 2 şer defa kullanılmış ve sadece birer etikete stil özeliği verilmiştir.
2. Global(Genel) Stil Şablonları (Sayfadaki etiketler için)
Genel stil oluşturulurken, stil özellikleri <head> etiketleri arasında oluşturulur. <head> etiketi içinde
<style type="text/css"> …… </style>
Bölümünde stil özellikleri oluşturulur. Etikete ait oluşturulan stil özelliği sayfa içinde kullanılan o etiket için geçerli olur.
3. Harici Stil Şablonları (Çok sayıda sayfalar için)
Bölümünde stil özellikleri oluşturulur. Etikete ait oluşturulan stil özelliği sayfa içinde kullanılan o etiket için geçerli olur.
Harici stil uygulaması yapılacak ise öncelikle dosya_ismi.css şeklinde bir dosya oluşturulmalıdır. Bütün stil özellikleri bu CSS dosyası içine yazılır. CSS dosyasını HTML dosyamıza eklemek için aşağıdaki kod <head> etiketleri arasına yazılır.
<head> <link rel="stylesheet" type="text/css" href="isim.css"> <head>
Gruplama : CSS kullanırken birden çok seçiciye aynı tanım veya tanımlar verilebilir. Örneklerle bu konuyu inceleyelim;
h1,h2,h3,h4,h5,h6 { color: blue; } h2,h3 {color:#00ff00; font-size:x-small; } b,i { color:red;font-size:18pt;}
Yukarıda tüm başlıkların renginin mavi olmasını ayarladık. Diğerinde sadece h2,h3 etiketlerine özellik verdik. Bir diğer örnekte ise b,i etiketlerine özellik verdik. İstersek aşağıdaki örnekteki gibi birden çok özellikte ekleyebiliriz.
body,p,em,u,i
{
color: red;
font-size: 70%;
font-weight:lighter;
}
Ölçü Birimleri
- px (piksel): Ekranın görüntüleyebildiği en küçük noktanın ölçüsüdür. Tasarımlarınızda esnememesi gerekli bölgelerde kullanmanızı tavsiye edilir.
- pt (punto): Yazı karakteri ölçü cinsidir. Metin dışındaki elementler için de kullanılabilir
- em : (M yani alfabedeki en geniş karakterin ölçü birimidir.) Adından da anlaşılacağı gibi karakter boyutuna oranla ölçü vermeniz gereken yerlerde kullanabilirsiniz.
- % : Göreceli ölçü birimidir.
Aşağıdaki tabloda ölçülerin eşitlemesi verilmiştir. Biz çalışmalarımızda px olarak kullanalım.
Stil Elemanları
Her element örnek üzerinde tek tek anlatılacak.
|
Eleman |
Aldığı Değer |
Tanımı |
Kullanım Örneği |
|||||||||||||||||||||||||||||||||||||||||
|
Text(Metin) : Yazılarla ilgili metin biçimlendirme özeliklerinin değişmesini sağlayan elementlerdir. |
||||||||||||||||||||||||||||||||||||||||||||
Text(Metin) Elementleri |
color |
red #980000 |
Font rengini ayarlamak için. |
p { color:#FFC800 }
|
|||||||||||||||||||||||||||||||||||||||||
text-align |
left right center justify |
Metni sağa,sola yaslamaya veya ortalamaya yarar. |
h2 { text-align:center } |
||||||||||||||||||||||||||||||||||||||||||
vertical-align |
baseline |
Dikey hizalamayı sağlar |
img { vertical-align:text-top; } |
||||||||||||||||||||||||||||||||||||||||||
text-decoration |
none underline overline line-through |
underline: altının çizili overline: üstünün çizili line-through: üzerinin çizili none: çizgi yok |
p { text-decoration: underline } |
||||||||||||||||||||||||||||||||||||||||||
text-transform |
none uppercase lowercase capitalize |
uppercase: tüm harfleri büyük lowercase: tüm harfleri küçük capitalize: kelimelerin ilk harflerini büyük |
p { text-transform: capitalize } |
||||||||||||||||||||||||||||||||||||||||||
text-indent |
2px 19px |
Cümlelerin ilk satırı içerden başlatmaya yarar. |
p { text-indent: 15px } |
||||||||||||||||||||||||||||||||||||||||||
line-height |
10px 25px |
Satır aralarındaki boşluğu ayarlamaya yarar. |
p { line-height: 22px } |
||||||||||||||||||||||||||||||||||||||||||
letter-spacing |
5px 7px |
Harflerin arasındaki boşluğu ayarlamaya yarar. |
p { letter-spacing: 5px } |
||||||||||||||||||||||||||||||||||||||||||
white-space |
normal pre nowrap |
normal seçeneği metindeki extra boşlukların ihmal edilmesini, pre boşlukların olduğu gibi gözükmesini, nowrap ise metnin aşağı satıra geçmesini önler. |
p { white-space: nowrap } |
||||||||||||||||||||||||||||||||||||||||||
word-spacing |
3px 12px |
Kelimeler arasındaki boşluğu ayarlamaya yarar. |
p { word-spacing: 3em }
|
||||||||||||||||||||||||||||||||||||||||||
|
Fonts(Yazı): font özelliklerini tanımlamak için gerekli olan elementler. |
||||||||||||||||||||||||||||||||||||||||||||
Fonts(Yazı) Elementleri |
CSS, yazı tipi aile isimlerinden iki türü vardır: genel ailesi,font ailesi
|
||||||||||||||||||||||||||||||||||||||||||||
font-family |
Arial
Cursive |
HTML elemanının gösterileceği font ailesini belirtir. |
p { font-family: verdana, helvetica, arial, sans-serif } |
||||||||||||||||||||||||||||||||||||||||||
font-style |
normal italic |
Fontun stilini belirtir. |
p { font-style: italic } |
||||||||||||||||||||||||||||||||||||||||||
font-size |
..%,..pt,..px
Larger xx-small, x-small small, medium
large, x-large |
Font büyüklüğünü değiştirir. |
p { font-size: 150%; } |
||||||||||||||||||||||||||||||||||||||||||
font-variant |
normal small-caps |
Yazıyı boyutu küçük, büyük harflerle göstermek için. |
h1 { font-variant: normal; } |
||||||||||||||||||||||||||||||||||||||||||
font-weight |
normal lighter bold bolder |
Font kalınlığını ayarlamak için. |
p { font-weight: bold; } |
||||||||||||||||||||||||||||||||||||||||||
ü |
Arkaplan (Background) : CSS arkaplan özelliklerini bir elemanın arka plan etkileri tanımlamak için kullanılır. |
||||||||||||||||||||||||||||||||||||||||||||
Arkaplan (Background) |
background-color |
blue #0000FF inherit |
Art alan rengini belirtir. |
p { background-color: blue } h1 {background-color:#6495ed;} |
|||||||||||||||||||||||||||||||||||||||||
background-image |
url (resim yeri ve adı) inherit |
Art alana koyulacak resmi belirtir. |
body { background-image: url ('antalya.gif') } |
||||||||||||||||||||||||||||||||||||||||||
background-repeat |
repeat |
Art alana koyulan resmin tekrar edilip edilmeyeceğini belirtir. |
body { |
||||||||||||||||||||||||||||||||||||||||||
background-attachment |
scroll |
Arka plandaki resmin yerinde sabit kalıp kalmayacağını belirtir. |
body { |
||||||||||||||||||||||||||||||||||||||||||
background-position |
left top |
Art alandaki resmin yerini ayarlamamızı sağlar. |
background-position: center center ; |
||||||||||||||||||||||||||||||||||||||||||
Not |
inherit değeri ; inherit değeri atadığımız element üst elementinin değerlerini alacaktır. Elementle ilgili üst tanımlamalarda değer atanmış ise bu değeri alacaktır. Tüm elementlerde vardır. |
||||||||||||||||||||||||||||||||||||||||||||
Box( Kutu) : Kullanılan tüm etiketler kutu şeklindedir. Bunlarla ilgili olan elementler çerçeve,boşluk,boyut vb. |
|||||||||||||||||||||||||||||||||||||||||||||
Box( Kutu) Elementleri |
Html de tüm elementler(table, div, p, span vs.) bir kutu olarak ele alınır. CSS de elemanların yerleşimi ve tasarım hakkında konuşulurken kutu modeli terimi kullanılır. HTML deki elemanların(tablo,div,paragraf vs.) genişlik,yükseklik ve yerleşimini ayarlayabilmek için kutu modelinin nasıl çalıştığını bilmeliyiz. Kutu modelini aşağıdaki resme bakarak daha iyi anlayabiliriz. Kutu modelinde 4 parçadan bahsedebiliriz.
Margin : Html deki elemanın diğer elemanlara olan uzaklığıdır. Yandaki resimde en dıştaki açık mavi alandır.
Border : Html elemanlarının kenarlığıdır.yandaki resimde siyah çizgidir.
Padding : Html elemanın içeriği ile border arasındaki uz.aklıktır. beyaz alan
İçerik : Html elemanı içindeki yazı resimdir. Gri alan.
Margin’ler her zaman transparandır. Background sadece border içerisine uygulanabilir, yani padding ve içerik alanı kısmını içerir.İstenen bölge için değerler ayarlanabilir. Bütün olarakta ayarlanabilir. Örnek; margin-left: 10px; Soldan dış boşluk brakır. magrin: 5px; tüm alanlar. magrin: 5px 10px 5px 10px; magrin: üst sağ alt sol; şeklinde yazılabilir.
|
||||||||||||||||||||||||||||||||||||||||||||
margin |
0px 12px
|
Sağdan, soldan, yukarıdan ve aşağıdan boşluk bırakmaya yarar. |
p {
|
||||||||||||||||||||||||||||||||||||||||||
padding |
0px 12px
|
Nesnenin etrafında boşluk bırakmaya yarar. |
body { padding; 10px }
|
||||||||||||||||||||||||||||||||||||||||||
border (color, style, width) |
solid, double, groove, dashed, dotted |
Kenarlıkları şekillendirmeye yarar.
|
table {
border: 1px solid #000; border:[kenarkalınlık][stil] [renk]; border-width: 4px 2px 3px 1px; border-color:#000 #123 #456 #BBC; |
||||||||||||||||||||||||||||||||||||||||||
Aşağıdaki özellikler tek olarak da kullanılabilir.
border-width: 5px 10px 5px 10px;
|
|||||||||||||||||||||||||||||||||||||||||||||
width |
250px 80% |
Bir kutunun genişlik ve yükseklik değerlerini ayarlar. |
table {width:100%; } |
||||||||||||||||||||||||||||||||||||||||||
Genişlik ve yükseklik değerleri kutunun sadece işlene bilir alanıdır. Toplam Genişlik = width + left padding + right padding + left border + right border + left margin + right margin Toplam Yükseklik = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin |
|||||||||||||||||||||||||||||||||||||||||||||
List(Liste) : Listeleme özelliklerini değiştirmek için kullanılan elementlerdir. |
|||||||||||||||||||||||||||||||||||||||||||||
List(Liste) Elementleri |
list-style-type |
|
Listelemede kullanılacak işareti belirler. |
ul {list-style-type: square;} |
|||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||
list-style-image |
url (resim yeri ve adı) |
Liste biçiminin resim olmasını sağlar. |
ul {
|
||||||||||||||||||||||||||||||||||||||||||
Yukarıdaki gibi listeleme yaparsanız tüm tarayıcılarda aynı görünmez. Tüm tarayıcılarda aynı görünmesini istiyorsanız aşağıdaki işlemi yapabilirsiniz.
ul { |
|||||||||||||||||||||||||||||||||||||||||||||
Links(Köprüler): Link özellikleri için gerekli olan elementler. |
|||||||||||||||||||||||||||||||||||||||||||||
Links(Köprüler) Elementleri |
a: link veya a - normal, ziyaret edilmemiş link a: visited – ziyaret edilmiş bağlantı a: hover – fare ile üzerine gelme a: active – fare ile tıklandığı an
|
a:link{color:#FF0000;} veya a{color:#FF0000;}
a:hover {color:#FF00FF;} |
Seçiciler (Selectors)
Seçiciler bize oluşturduğumuz <h1>, <h2> ... gibi etiketlerin mevcut özelliklerini aynı bırakarak onlara yeni özellikler ekleme olanağı verdiği gibi istediğimiz bir kelimeye style özellikleri atayıp istediğimiz zaman çağırmamızı da sağlar. İki çeşit seçici vardır. Bunlar, Id seçicisi ve sınıf(class) seçicisi.
1. Id Selectors(Id Seçicileri) : HTML belgesinde kendi tanımlayıcı adlarına gönderme yaparak herhangi bir HTML etiketine stil vermekte kullanılır.
- Id seçicilerini tanımlayıcı adlarının önündeki “#“ işaretinden tanırız.
#idisim { ……. }
- Herhangi bir etiket ile çağırdığımızda etikete parametre olarak id=idisim şeklinde kullanırız.
<html> <head> <style type="text/css"> #idstil1 { color:red; } #idstil2 { color:blue; } </style> </head> <body> <h1 id=idstil1> 11 Bilişim B sınıfı</h1> <br> <h1 id=idstil2> 11 Bilişim B sınıfı </h1> </body> </html>
Html dosyası |
CSS dosyası |
<html> <head> <link rel="stylesheet" type="text/css" href="css/stil_4.css"> </head> <body> <h1 id=baslik1> 11 Billişim A Sınıfı</h1> <h1 id=baslik2> 11 Bilşim B Sınıfı </h1> <h1> Öğrenciler</h1> <ul> <li id=B-ogrenci>Tuba AYAZ <li id=A-ogrenci>Burak KAYA <li id=A-ogrenci>Emre DEREÇİÇEK <li id=B-ogrenci>İlknur ÇAKMAK <li id=B-ogrenci>Nurhan COŞAN <li id=A-ogrenci>Seda OLGUN </ul> </body> </html>
|
h1 { color:#557734; } #baslik1 { background-color:#33cc33; color:#fff; font-family:verdana,arial,serif; text-decoration:underline; } #baslik2 { background-color:#000; color:#fff; font-family:verdana,arial,serif; text-decoration:underline; } #A-ogrenci { color:#448899; border:1px solid #66cc66; font-size:16px; margin:2px; } #B-ogrenci { color:#aa2255; border:1px dashed #7711aa; font-size:16px; margin:2px; } |
2. Class Selectors (Sınıf Seçicileri): Bu seçiciyi sayfanızdaki h1 gibi etiketlerin tümünün aynı olmasını istemediğiniz durumlarda kullanabilirsiniz. Böylelikle genel bazı özellikleri koruyarak farklı özellikleri değiştirebilirsiniz. Sınıf seçicisinin iki türü vardır.
<html> <head> <title>Css</title> <style type="text/css"> h2.yesil { color:green } h2.gri {color:gray} </style> </head> <body> <h2 class="yesil">YEŞİL sınıf seçicisi ile </h2> <br> <h2 class="gri">GRİ sınıf seçicisi ile </h2> </body> </html>
Burada sınıf seçicisini sadece h2 için tanımladık. Sınıf seçicisinin ikinci türü de genel bir sınıf seçicisi tanımlamaktır.
<html> <head> <title>Css</title> <style type="text/css"> .yesil {color:green} .gri {color:gray} </style> </head> <body> <h3 class="yesil">YEŞİL sınıf seçicisi ile </h1> <br> <h4 class="gri">GRİ sınıf seçicisi ile </h1> </body> </html>
Yorum ekle