Buradasınız

CSS Giriş

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.

  1. Yerel Stil Şablonları (Tek bir etiket içinde kullanma)
  2. Global(genel) Stil Şablonları (Tek bir sayfadaki etiketler için)
  3. 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 }
h1 { color:255,255,255 }

 

text-align

left

right

center

justify

Metni sağa,sola yaslamaya veya ortalamaya yarar.

h2 { text-align:center }

vertical-align

baseline
sub
super
top
text-top
middle
bottom
text-bottom

length
%

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

Genel ailesi

Font ailesi

Açıklama

Serif

Times New Roman
Georgia

Serif fontları bazı karakterler üzerinde ucunda küçük çizgiler var

Sans-serif

Arial
Verdana

"Sans" olmadan anlamına gelir - bu yazı karakter ucunda hattınız yok

Monospace

Courier New
Lucida Console

Tüm monospace karakterler aynı genişliğe sahip

 

font-family

Arial
Verdana
Serif
sans-serif

Cursive
vb.

HTML elemanının gösterileceği font ailesini belirtir.

p { font-family: verdana, helvetica, arial, sans-serif }
Paragraftaki yazı varsa Verdana yoksa helvetica yoksa arial o da yoksa sans-serif fontunu kullanacak.

font-style

normal

italic

Fontun stilini belirtir.

p { font-style: italic }

font-size

..%,..pt,..px

Larger
smaller

xx-small, x-small

small, medium

large, x-large
xx-large

Font büyüklüğünü değiştirir.

p { font-size: 150%; }
h3 { font-size: 18px; }
b { font-size: xx-large;}

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
repeat-x
repeat-y
no-repeat
inherit

Art alana koyulan resmin tekrar edilip edilmeyeceğini belirtir.

body {
                background-image:url('antalya.gif') ;
                background-repeat: repeat
           }
Sayfanın arka planındaki 'antalya.gif' adlı resmi, tüm sayfayı dolduracak şekilde tekrar ederek gösterir.

background-attachment

scroll
fixed
inherit

Arka plandaki resmin yerinde sabit kalıp kalmayacağını belirtir.

body {
                 background-image:url('antalya.gif') ;
                 background-attachment: fixed
          }
Arka plandaki resmi sabitledik.

background-position

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

x% y%
xpos ypos

inherit

Art alandaki resmin yerini ayarlamamızı sağlar.

background-position: center center ;
background-position=50% 40%;
Arka plandaki resmi, yatay ve dikey olarak ortaladık.

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
(left, right,  top, bottom)

0px

12px

 

Sağdan, soldan, yukarıdan ve aşağıdan boşluk bırakmaya yarar.

p {
            margin-left: 10px;
            margin-top:20px
 }
body {
            margin-left: 15px;
            margin-right:15px
 }

  • magrin: 5px; tüm alanlar.

  • magrin: 5px 10px 5px 10px;

  • magrin: üst sağ alt sol; -> şeklinde  yazılabilir.

padding
(left, right,  top, bottom)

0px

12px

 

Nesnenin etrafında boşluk bırakmaya yarar.

body { padding; 10px }
p {
            padding-top; 10px;
            padding-bottom: 10px
 }

  • padding: 5px; tüm alanlar.

  • padding: 5px 10px 5px 10px;

  • padding: üst sağ alt sol; -> şeklinde  yazılabilir.

border (color, style, width)


thick,

solid,

double,

groove,

dashed,

dotted

Kenarlıkları şekillendirmeye yarar.

 

 

table {
border-color: red;
border-style: solid;
border-width: 15px; }

 

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 : Tablonun kenarlarının şekillendirilmesini sağlar.

    border: 1px solid #000;

  • border-width : Tablonun kenarlarının kalınlığını belirler.

          border-width:15px;

            border-width: 5px 10px 5px 10px;

 

  • border-style: Tablonun kenarlık türünü belirler.

 

  • border-color : Tablonun kenarlarının rengini belirler.

width
height

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;}

Değer

Açıklama

none

yok

disc

Default. The marker is a

filled circle

circle

a circle

square

a square

armenian

The marker is traditional Armenian

umbering

decimal

a number

decimal-leading-zero

a number padded by initial zeros (01, 02, 03, etc.)

georgian

is traditional Georgian numbering (an, ban, gan, etc.)

lower-alpha

is lower-alpha (a, b, c, d, e, etc.)

lower-greek

is lower-greek (alpha, beta, gamma, etc.)

lower-latin

is lower-latin (a, b, c, d, e, etc.)

lower-roman

is lower-roman (i, ii, iii, iv, v, etc.)

upper-alpha

is upper-alpha (A, B, C, D, E, etc.) 

upper-latin

is upper-latin (A, B, C, D, E, etc.)

upper-roman

is upper-roman (I, II, III, IV, V, etc.)

 

list-style-image

url (resim yeri ve adı)

Liste biçiminin resim olmasını sağlar.

ul {
list-style-image: url('sqpurple.gif');
}

 

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         {
            list-style-type: none;
            padding: 0px;
            margin: 0px;
            }
li          {
            background-image: url(sqpurple.gif);
            background-repeat: no-repeat;
            background-position: 0px 5px;  (ayarlanmalı)
            padding-left: 14px;  (ayarlanmalı)
            }

 

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:visited {color:#00FF00;} 

a:hover {color:#FF00FF;} 
a:active {color:#0000FF;} 

 

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

Konuyla İlgili Yazılar

HTML Etiketleri 2

Metin Ve Görünüm Düzenleme Etiketleri <HX>(<h1>..<h6>): Bu etiketler, doküman içinde kullanılabilecek başlıklardaki yazıların büyüklüklerini... devamı...

HTML Etiketleri 3

HTML Etiketleri 2

HTML Etiketleri 4

HTML Etiketleri 1