İngilizce
açılımı Cascading Style Sheet olan kavram
Basamaklandırılmış Stil Katmanı anlamını taşımaktadır. CSS Nedir? sorusu
web tasarım ile ilgilenenlerin sıkça merak ettiği konulardan birisidir. Bu
makalemizde css dilini kapsamlı bir şekilde ele alacağız. Yazımızın
sonunda en çok kullanılan css
kodları hangileridir, css ile neler yapılabilir
detaylı bir şekilde öğrenmiş olacaksınız. Kodları yazmadan önce çalışma
ortamının nasıl kurulması gerektiğine bir göz atalım.
CSS Kodları İçin Çalışma Ortamının Kurulması
CSS Kütüphanesini Eklemek
CSS Kodları ve Kullanımları
Font Kodları
Stil Kodları
İç Boşluk Oluşturma Kodları
Dış Boşluk Oluşturma Kodları
CSS Kenarlık Oluşturmak
CSS Animasyon Ekleme İşlemleri
CSS Örnek Menü Oluşturma
CSS Kodları İçin Çalışma Ortamının
Kurulması
CSS
yazmaya başlamak için öncelikle bir text editörü programı indirmelisiniz. En
çok tercih edilen CSS yazılımları şunlardır:
Yukarıdaki listeden herhangi bir
programı indirip bilgisayarınıza kurduktan sonra kod yazmaya
başlayabilirsiniz. Editörü açtıktan
sonra ilk olarak HTML alanındaki yapınızı oluşturun. Ardından CSS alanı için
.css uzantılı bir klasör oluşturarak ilk kodunuzu yazın.
CSS Kütüphanesini Eklemek
CSS
kodları, web sitesinde doğru bir şekilde çalışabilmesi için HTML verilerine
ihtiyaç duyar. CSS kütüphanesini/kodlarını çalıştırmanın 4 farklı yolu bulunur.
1.Head Alanına Eklemek
Farklı bir
.css uzantılı sekme üzerinden işlem gerçekleştirilecekse bu kütüphanenin html
dizininde tanıtılması gerekmektedir. Bu işlem aşağıdaki gibi
yapılmaktadır:
<head>
<link rel=”stylesheet”
type=”text/css” href=”Uzantinizin-adi.css”
/>
</head>
2.Çoklu CSS Dosyalarını Eklemek
Elimizde birden
fazla css dosyası olması durumunda kullanabileceğimiz yöntemlerden birisidir.
Örneğin ilk-proje.css ve ikinci-proje.css isminde iki tane dosyamız olsun. Bu
iki dosyayı tek tek html alanına tanıtmak yerine iki dosyayı ayrı bir css alanı
içerisine alıp tanıtabiliriz. Css-projelerim.css isimli yeni bir dosya
oluşturup içerisine şu kodları
yazmalıyız:
@import url (/css/ilk-proje.css)
@import url (/css/ikinci-proje.css)
3.Head Dosyaları İçerisine Stil Alanı
Eklemek
Bu
yöntemde css verilerini oluşturmak için <div> </div> yapısından
faydalanacağız. İlk olarak css oluşturmak istediğimiz bir görsele ya da metine
id ya da class ataması yapmamız gerekiyor. Ardından bu atamayı head alanında
tanımlayıp kodları yazmaya başlayabiliriz.
ID olarak tanımlanan bir veri seti # , class ile tanımlanan ise . ile
temsil edilmektedir. Örnek olarak:
<head>
<style type=”text/css”>
#kirmiziRenk{
color:red;
font:14px ;
}
.turuncuRenk {
color:orange;
font:15px;
}
</style>
</head>
<body>
<div id=”kirmiziRenk“>Bu
metnin rengi kırmızıdır.</div>
<div class=”turuncuRenk“>Bu
metnin rengi turuncudur.</div>
</body>
HTML
Nedir? HTML Kodları ile Neler Yapılabilir? isimli yazımızı okuyarak html
etiketleri ile ilgili daha detaylı bilgi edinebilirsiniz.
4.Kod İçerisine Stil Tanımlaması Yapmak
En çok kullanılan css kodları sayfa içerisinde bulunan HTML nesnelerine
uygulanmaktadır. Örnek ile pekiştirmek gerekirse navbar alanındaki “Kategoriler” isimli
menünün renginin beyaz, arkaplan
renginin siyah olmasını istiyorsak şu kodları kullanabiliriz:
İlk olarak HTML’de bir div
tanımlayalım:
<div>Kategoriler</div> daha sonrasında bu divin içerisine stil
kodlarını yerleştirelim:
<div style=”background-color:black;
color:white;”>Kategoriler</div>
En Çok Kullanılan CSS Kodları ve Kullanımları
Bu bölümde
CSS3 ile gelen en çok kullanılan CSS özellikleri
nelerdir? ve CSS Kodları
Nelerdir? konularını detaylı bir şekilde ele alacağız. CSS yazılım dili içerisinde
kullanılan kodlar şunlardır:
Font Kodları
Font kodları
ile bir metnin ya da nesnenin görünüşü veya boyutları değiştirilebilir. Font
kodları ve anlamları aşağıdaki gibidir:
@font-face: Bu kod ile
sistem tarafından tanımlanan yazı tiplerinin (Calibri, Arial, Verdana, Times
New Roman) dışındaki yazı tiplerini de
kullanabiliyoruz. Kullanımı şu
şekildedir:
@font-face {
Font-properties (istenilen
özellikler bu alana girilecek)
}
Font : Tüm font
özelliklerini tek bir satırda yazmaya yarayan koddur.
Font-family : İçeriğimize yazı tipi ailesi eklemek için en çok kullanılan css kodlarından birisidir. Font-family değerinden sonra birden fazla yazı tipi
belirtildiğinde otomatik olarak ilk değer uygulanır. Fakat ilk değer tarayıcı
tarafından desteklenmediğinde bir sonraki değere geçilmektedir. Örneğin :
Font-family : arial, verdana;
Yukarıdaki örnekte arial tarayıcı tarafından
desteklenmediğinde yazı tipi verdana olarak belirlenecektir.
Font-size : Yazıların
boyutlarını belirlemek için kullanılan koddur.
Px ya da em gibi değerler ile ifade edilmektedir. Varsayılan değer
16px’dir.
Font-style : Yazının
görünümünü değiştirmek için kullanılmaktadır. 3 parametre bulunur:
- Italic: Yazıların
italik/eğik olarak gösterilmesi için kullanılır. Genellikle dergi ya da kitap
isimlerinde kullanımı yaygındır.
- Normal : Hiçbir değer
atanmadığındaki varsayılan değerdir.
- Oblique : İtalik ile
benzer bir görünüme sahiptir. Kullanımı italiğe göre daha azdır.
Font-variant : Yazıda bulunan küçük harflerin büyük hale
getirilmesi için kullanılmaktadır. Uzun paragraflarda hızlı işlem yapmak için
kullanılabilir. Yazıdaki tüm harfler
küçük karakterdeyse boyutları eşitlenerek
hepsi büyük karaktere dönüştürülür. Küçük ve büyük harfler karışık olması durumunda
küçük harfler büyütülür fakat büyük harfler boyut olarak büyütülmektedir. 2 parametre ile kullanılmaktadır:
- Small-caps : Karakteri
büyük hale getirir.
- Normal : Varsayılan
değerdir.
Font-weight : Yazıları
ince ve kalın olarak göstermek için kullanılmaktadır. Şu parametrelerle kullanılmaktadır:
- Bold : Yazıyı
kalınlaştırmak için kullanılır.
- Bolder : Yazıyı daha kalın
yapmak için kullanılmaktadır. Bold kodunda oluşan görünümden daha kalın görünüm
sağlanır.
- Lighter : Kalın olan
yazıyı inceltmek için kullanılmaktadır.
- Normal : Varsayılan değerdir. Hiçbir değer
girilmediğinde uygulanan parametredir.
100 ila 900 oranında değerler
verilebilir. 100 bir metin için en ince 900 ise en kalın olarak kabul
edilmektedir.
Stil Kodları
color : Metnin rengini
belirlemek için kullanılan koddur. Renk ataması yaparken ilgili rengin
İngilizce ismi yazılabildiği gibi hex ya da rgb kodları da kullanılabilir. Tüm
renk kodlarına buradan
ulaşabilirsiniz.
background-color : Metnin
arkaplan rengini belirlemek için kullanılır.
Daha iyi bir görünüm için color ile zıt renkler tercih edilerek
kullanılmaktadır. Örneğin beyaz renkli bir yazı için siyah arkaplan tercih
edilir.
letter-spacing : Kelimelerin
arasındaki boşluk sayısını arttırmak ya da azaltmak için kullanılır. Eksi değerler girildiğinde kelimeler birbirine
yakınlaşır artı değerlerde uzaklaşır.
line-height : Satırlar
arasındaki mesafeyi belirlemek için kullanılmaktadır.
word-break : Satır sonuna
gelen kelimenin tam olarak sığdırılması için kullanılan kod yapısıdır. Border yapılarında çokça tercih edilen
koddur. İki değer alabilir:
- keep-all : Hiçbir değer
girilmediğinde varsayılan olarak uygulanmaktadır. Satır sonları kesilmez fakat
uzun bir yazıda kötü bir görünüm oluşur.
- break-word : Satır
sonlarında uzun olan kelimeler metne eşit olacak şekilde kesilerek dağıtılır.
word-spacing : Kelimeler
arasındaki iç boşluğu arttırmak için kullanılan parametredir.
white-space: Yazılardaki
boşlukların tüm metne nasıl dağıtılacağını belirlemek için kullanılır. Tek
satır iki satır ya da dört satıra bölmek için bu özellik kullanılabilir. 5 değer alabilir. Bunlar:
- Normal
- Nowrap
- Pre
- Pre-line
- Pre-wrap
word-wrap : Karakter
alanına sığmayan kelimeleri bölmek için kullanılan komuttur. Normal ve break Word parametrelerini içerir.
writing-mode : Yazma
modunu değiştirmek için kullanılmaktadır.
Yazıları dikey ya da yatay olarak değiştirmeye yarar. 3 değer alabilir:
- horizontal-tb :
Yazının yatay hale gelmesini sağlar .
- vertical-lr
:Yazının soldan sağa doğru dikey hale gelmesini sağlar.
- vertical-rl :
Yazının sağdan sola doğru dikey hale gelmesini sağlar.
text-transform : Text-transform
özelliği yazıların boyutlarını değiştirmek için kullanılmaktadır. Küçük olan
yazıları büyük, büyük olan yazıları küçük ya da her kelimenin ilk harfi büyük
olacak şekilde ayarlamak için bu komut kullanılmaktadır. 3 değer alır:
- uppercase :
Yazıdaki tüm harfleri büyük yapmak için kullanılır.
- lowercase: Yazıdaki tüm harfleri küçük yapmak için
kullanılır.
- capitalize :
Her kelimenin ilk harfini büyük yapmak için kullanılır.
text-align : Yazıların
görsellerin ya da diğer nesnelerin yatay düzlemde hizalanması için
kullanılmaktadır. Yazıları ilgili
bölgeye sabitlemek için şu komutlar kullanılabilir:
- right: Yatay
düzlemde sağa hizalamak için kullanılır.
- left: Yatay
düzlemde sola hizalamak için kullanılır.
- center: Yazıyı ortalamak için kullanılır.
- justify: Sayfa
başına(en sola ) sabitlemek için kullanılır.
- end: Sağa sabitlemek için kullanılır.
- start: justify ile
aynı işlevi yerine getirir.
text-decoration : Maddeleme,
sıralama gibi özellikler için yazının üzerini çizmek ya da çizili olan
maddeleri kaldırmak için kullanılır.
Text-decoration komutunda 4
özellik bulunur:
- underline : Yazının
altını çizmek için kullanılmaktadır.
- line-through : Yazının
üzerini çizmek için kullanılan özelliktir.
- overline : line-through
ile benzer özelliktedir.
- none : Çizilen
madde ve çizgi işaretlerinin kaldırılması için kullanılmaktadır.
text-decoration-color: Yazılara
eklenen çizgilerin hangi renkte gösterileceğini bu kod ile belirleyebiliyoruz.
text-decoration -style : Yazılara
eklenen çizgilerin hangi şekilde olacağını belirlemek için kullanılır. Sürekli
çizgi, kesikli çizgi örnek olarak gösterilebilir.
text-indent : En sık
kullanımı paragraf başlarıdır. Yazıya başlarken bir iç girinti oluşturmak için
kullanılır. İstediğimiz değerlerde px
ölçüsü vererek girintiyi ayarlayabiliriz.
text-shadow : Metnin x ve
y koordinatlarına çeşitli değerler vererek gölgelendirme , konumunu değiştirme
ya da kalınlaştırma işlemleri yapılan komuttur.
Kullanımı şu şekildedir:
10px 15px 20px 25px
Yukarıdaki örnekte 10 px metnin x eksenine göre konumunu, 15px metnin
y eksenine göre konumunu, 20px
bulanıklaştırmayı 25px ise koyuluk değerini ifade etmektedir.
box-shadow: Görsellerin
gölgelendirme işlemleri için kullanılan özelliktir.
text-owerflow : Overflow
özelliği metnin taşma durumlarında kullanılan özelliktir. Yazı fazla uzun
olduğunda kullanıcılara yazının devamı olduğunu gösteren 3 nokta gösterilmektedir.
Şu değerleri alabilir:
- clip: Hiçbir değer girilmediğinde varsayılan olarak
işaretlenir.
- ellipsis: Yazıların taşma durumlarında üç nokta
ifadesini gösteren özelliktir.
İç Boşluk Oluşturma Kodları
Padding yani iç boşluk en çok
kullanılan css kodları arasındadır.
Metinleri birbirinden ayırarak daha efektif bir görünüm sağlamak için boşluk
komutları kullanılır. Padding özellikleri şunlardır:
- padding: En genel
ifadedir. Tüm özellikleri tek bir kodda göstermek için kullanılabilir. İç boşluk verirken Padding değeri px, pt, cm ya da % şeklinde
verilebilir.
- padding-top: Yukarıdan iç
boşluk vermek için kullanılan komuttur.
- padding-right : Sağ
taraftan iç boşluk vermek için kullanılan komuttur.
- padding-bottom: Aşağı
taraftan iç boşluk vermek için kullanılan komuttur.
- padding-left: Sol
taraftan iç boşluk vermek için kullanılan komuttur.
Dış Boşluk Oluşturma Kodları
CSS dilinde dış boşluk oluşturmak
için margin ifadesi kullanılmaktadır.
Margin değerleri konumuna göre 4
özellik ile kullanılabilir. Bunlar :
- margin-top: Üstten dış
boşluk vermeye yarayan komuttur.
- margin-right: Sağdan dış
boşluk vermeye yarayan komuttur.
- margin-bottom: Aşağıdan
dış boşluk vermeye yarayan komuttur.
- margin-left: Soldan dış
boşluk vermeye yarayan komuttur.
CSS Kenarlık Oluşturmak
CSS’te kenarlık oluşturmak için
border ifadesi kullanılmaktadır. Kenarlıkların yönünü şeklini ya da rengini
belirtmek için aşağıdaki ifadeler kullanılmaktadır:
border-top: Bir nesneye üst kenarlık vermek için kullanılır.
border-right: Bir nesneye sağ
kenarlık vermek için kullanılır.
border-bottom: Bir nesnenin
altına kenarlık vermek için kullanılır.
border-left: Bir nesneye sol
kenarlık vermek için kullanılır.
border-color: Oluşturulan
kenarlıkları renklendirmek için kullanılan komuttur.
border-top-color: Oluşturulan
kenarlığın üst bölgesini renklendirmek için kullanılır.
border-right-color: Oluşturulan
kenarlığın sağ bölgesini renklendirmek için kullanılır.
border-bottom-color: Oluşturulan
kenarlığın alt bölgesini renklendirmek için kullanılır.
border-left-color: Oluşturulan
kenarlığın sol bölgesini renklendirmek için kullanılır.
border-style: Kenarlık oluştururken
farklı stiller (kesik , noktalı ,düz) kullanmak için kullanılmaktadır. Kenarlıklar
için 10 farklı özellik kullanılabilir. Bunlar :
- dotted: Noktalı kenarlık
oluşturmak için kullanılır.
- dashed: Çizgili kenarlık
oluşturmak için kullanılır.
- solid: Düz/sürekli kenarlık oluşturmak için
kullanılır.
- double: Çift kenarlık
oluşturmak için kullanılır.
- groove : Oluk şeklinde 3B
kenarlıklar oluşturmak için kullanılır.
- ridge: Çıkıntılı kenarlık
oluşturmak için kullanılır.
- inset: İç kenarlık oluşturmak
için kullanılır.
- outset : Dış kenarlık
oluşturmak için kullanılır.
- none: Kenarlıkları
kaldırmak için kullanılır.
- hidden : Gizli bir
sınırlama oluşturmak için kullanılır.
border-top-style: Üst
kenarlığa stil vermek için kullanılır.
border-right-style: Sağ
kenarlığa stil vermek için kullanılır.
border-bottom-style: Alt
kenarlığa stil vermek için kullanılır.
border-left-style: Sol
kenarlığa stil vermek için kullanılır.
border-width: Tüm
kenarlıkların genişlik değerlerini belirlemek için kullanılır.
border-top-width: Üst
kenarlığın genişlik değerini belirlemek
için kullanılır.
border-right-width: Sağ
kenarlığın genişlik değerini belirlemek için kullanılır.
border-bottom-width: Alt kenarlığın genişlik değerini belirlemek için
kullanılır.
border-left-width Sol
kenarlığın genişlik değerini belirlemek için kullanılır.
border-top-left-radius:
Oluşturulan kenarlığın sol üst köşesini daha yuvarlak göstermek için
kullanılır.
border-top-right-radius: Oluşturulan
kenarlığın sağ üst köşesini daha yuvarlak göstermek için kullanılır.
border-bottom-left-radius: Oluşturulan
kenarlığın sol alt köşesini daha yuvarlak göstermek için kullanılır.
border-bottom-right-radius: Oluşturulan
kenarlığın sağ alt köşesini daha yuvarlak göstermek için kullanılır.
Not: Yuvarlatma işlemleri
oluşturulan kenarlıkların daha estetik görünmesini sağlar.
CSS Animasyon Ekleme İşlemleri
CSS
animasyon ekleme , çok fazla kullanılan bir işlemdir. Nesneleri
daha dinamik bir şekilde oluşturmak için animasyon yapılarından faydalanılmaktadır.
CSS dilinde animasyonlar @keyframes ifadesi ile bloklar oluşturularak from ve
to özellikleri ile birlikte
kullanılırlar. CSS animasyon kullanımı şu şekildedir:
Animasyon Oluşturma
Animation-name: Animasyonun
ismini belirtmek için kullanılır.
Animation-duration: Animasyonun
aktif olduğu süreyi belirlemek için kullanılır. Saniye için s milisaniye için
ms ifadesi kullanılır.
Animation-timing-function:
Animasyonun nasıl bir fonksiyonda olacağını belirtmek için kullanılır. Bu
değerden sonra verilen fonksiyon animasyonun nasıl oynatılacağını belirler. 5
değer ile birlikte kullanımı bulunur.
Ease: Varsayılan olarak
uygulanmaktadır. Animasyon yavaş bir biçimde başlayarak hızlanır. Bitişe doğru tekrardan
yavaşlayarak işlem sonlandırılır.
Ease-in: Animasyonun yavaş
bir biçimde başlatılmasını sağlar.
Ease-in-out: Animasyonun
hem yavaş başlamasını hem de yavaş bitmesini sağlar.
Ease-out: Animasyonun
bitişinin yavaş olmasını sağlar.
Linear: Animasyon başlangıcından
sonuna kadar sürekli olarak aynı hızda ilerler.
Animation-delay: Sayfa açıldıktan
sonra animasyonun ne kadarlık bir gecikme yaşayacağını bildirir. Bir süre
bekledikten sonra animasyonun oynamasını istiyorsanız saniye değerini yüksek tutmalısınız.
Animation-iteration-count:
Animasyonun yenilenme süresini belirlemek için kullanılır. Sürekli devam
etmesi için infinite (sonsuz) kodu ile birlikte kullanılmalıdır.
Animation-direction: Animasyonun
hangi yönde ilerlemesi gerektiğini bildiren koddur. Varsayılan değer normal ifadesi ile kullanılır. 3 farklı değer alabilir.
Reverse : İlgili
animasyon ters yönlü olarak çalışmaya başlar.
Alternate: Animasyon
kendi akışı içerisinde çalışır daha sonra ters yönlü olarak çalışmasını
sürdürür.
Alternate-reverse: Animasyon
önce ters yönlü olarak çalışmaya başlar daha sonra normal çalışmasına devam eder.
Animation-fill-mode: Animasyon
sona erdikten sonra hangi işlemin uygulanması gerektiğini belirler. None ifadesi varsayılan değerdir. 3 farklı değer ile tanımlama yapılabilir:
- Forwards: Animasyon
hangi durum ile sonuçlanıyorsa o durum kullanıcıya gösterilmeye devam eder.
- Backwards: Animasyon
bittikten sonra başlangıç değerine geri döner.
- Both: Yukarıdaki
iki değerle (forwards-backwards) birlikte kullanılmalıdır.
Animation-play-state: Animasyonun
oynatma özelliklerini belirlemek için kullanılır. 2 değeri vardır:
- Running: Animasyon
çalışmaya devam eder. Hiçbir değer girilmediğinde uygulanan varsayılan ifadedir.
- Paused: Çalışmaya
devam eden animasyonu durdurmak için kullanılır.
Tüm animasyon özelliklerini tek bir
satırda kullanmak için aşağıdaki örnekten faydalanabilirsiniz.
Animation : animasyonunAdi ease-out 3s infinite reverse
CSS Örnek Menü Oluşturma
Css örnek menü kodlarını yazmaya
başlamadan önce html yapısını oluşturmak gerekiyor. Nav-ul-li parent-child
yapısı ile html listesi şu şekilde oluşturulabilir:
<nav>
<ul>
<li><a href=”#”>Ana sayfa</a></li>
<li><a href=”#”>Kategoriler</a></li>
<li><a href=”#”>Makaleler</a></li>
<li><a href=”#”>Kayıt Ol </a></li>
<li><a href=”#”>Üye Girişi</a></li>
</ul>
</nav>
Bu yapıyı dikkate alarak aşağıdaki CSS
bloklarını oluşturabiliriz:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
Ul bloğunda maddeleme işaretlerinin ve
boşluk değerlerinin olmaması gerektiğini bildirdik.
li {
float: left;
}
Li bloğunda menünün sol tarafa yaslanması
gerektiğini bildirdik.
li a {
display: block;
padding:20px 10px;
background-color: black;
color:white;
text-decoration:none;
}
Li a alanında görünüm değerleri
belirtilerek renk atamaları yapıldı.
li a:hover{
background-color: yellow;
}
Bu alanda menünün üzerine fare ile
gelindiğinde arkaplan renginin sarı olması gerektiği bildirildi.
