2. 1
İçindekiler
CSS Nedir?.................................................................................................... 2
CSS Nasıl Ortaya Çıktı?................................................................................. 2
CSS3 ile Gelen Yenilikler............................................................................... 3
Text Properties...............................................................................................3
Layout Properties ...........................................................................................3
Animated Property Transitions .........................................................................3
Border Image.................................................................................................3
Gradients.......................................................................................................3
2D / 3D Transformations.................................................................................3
Web Fonts .....................................................................................................3
CSS Kullanmanın Avantajları........................................................................ 4
Görünüm Avantajları.......................................................................................4
Kullanım Kolaylığı ...........................................................................................4
Tasarım Tutarlığı ............................................................................................4
Gelecek Vaat Ediyor........................................................................................4
CSS ile Yapılabilenler.................................................................................... 5
CSS Öğrenmek için Gerekenler..................................................................... 5
CSS’ in Yapısı ................................................................................................ 5
CSS Yorumları................................................................................................6
ID Özel Seçicisi ile Çalışmak.............................................................................6
CLASS Özel Seçicisi ile Çalışmak .......................................................................7
Harici Stil Şablonu ..........................................................................................8
Dahili Stil Şablonu...........................................................................................9
Kaynakça .................................................................................................... 10
3. 2
1. CSS Nedir?
Açılımı (Cascading Style Sheets) olan CSS dilimizde Basamaklı Stil Sayfaları anlamına
gelmektedir. HTML ile yazılan kodların görsel açıdan daha zengin olmasını sağlamak
için kullanılır. Örneğin; CSS ile paragrafların metin renklerini tek bir noktadan
değiştirebilirsiniz. Burası önemlidir; çünkü CSS piyasaya çıkmadan önce her bir HTML
etiketi için ayrı ayrı stil tanımlaması yapmamız gerekiyordu. CSS ile birlikte bu sorun
ortadan kalktı. Artık tek bir dosya ile tüm sayfalarımızdaki içerikleri şekillendirebiliriz.
2. CSS Nasıl Ortaya Çıktı?
HTML (Hyper Text Markup Language) ilk üretildiğinde yazı rengi ve boyu gibi
özellikleri etiketler (tag) ile tanımlayacağı düşünülmedi. İlk Html sürümünde aşağıdaki
gibi temel taglar kullanıldı.
<h1>Başlıkyazısı</h1> <p>Paragraf yazısı</p>
Daha sonra HTML 3.2 sürümüyle gibi taglar sunulduğunda renk ve yazı boyu gibi alt
özellikler gelişmeye başladı. Fakat çok büyük web sayfalarında bu durum tasarımcı
için sıkıntılı olmaya başladı. Çünkü sonradan doğru tagı bulmak ve değiştirmek
zorlaşıyordu.
Bu sorunu çözmek için Dünya Çapında Ağ Birliği (W3C) HTML 4.0 sürümü ile CSS
yapısını geliştirdi. Böylece boyut ve şekil bilgileri sayfada olmak yerine CSS uzantılı
tek bir dosyada toplandı. Bu sayede web tasarımcı sayfanın görünümünü değiştirmek
istediğinde tek yapması gereken CSS dosyasını açmaktı. Böylece web sayfasında bir
anda birçok sayfa değişmiş oluyordu.
CSS' i geliştirmek, elbette ki önem arz eden bir adımdı fakat CSS' in tarayıcılarla
uyumluluğunu sağlamak en az geliştirmek kadar hatta belki de daha fazla önemli bir
adımdı. 2000 yılında CSS I ilk defa tam olarak Microsoft tarafından Macintosh‘a
üretilen IE 5 tarafından desteklendi. 2006 yılında ise IE 7 ile beraber İnternet
tarayıcılarının önemli bir kısmı CSS2'yi destekler oldu.
CSS3, Web dünyasına çok etkin ve aktif girdi. CSS3, artık anlık hareket etmekle,
yanıp sönmekle kalmayıp yumuşak geçişlerle Web sitelerinin ziyaretçilerine görsel
olarak hoş görüntüler sunuyordu. CSS3 ile birçok basit animasyon, yazıların istenildiği
gibi gölgelendirilmesi, kutulara yeni şekillerin verilmesi, fare hareketlerinden çeşitli
animasyonlar sergilenmesi yapılabiliyor.
4. 3
Hız açısından da CSS3, birçok kalabalık JavaScript kodlarını ve resim dosyalarının
yüklenmesi gibi vakit kayıplarını ortadan kaldırdı. Bu da, ziyaretçilerin Web sitesinde
daha çok kalması ve içerisindeki bilgiyi iyi bir şekilde elde edebilmesini sağladı.
Örneğin; bir Web sitesinde köşe yuvarlamak için imaj dosyaları kullanılıyordu. CSS3
sayesinde, yazılan stil kodları doğrultusunda gölge, köşe yuvarlama, renk geçişleri
gibi parçacıkları okuyarak vakit kaybını en aza indiriyor.
3. CSS3 ile Gelen Yenilikler
CSS ve CSS 2 web sayfalarındaki tüm objelere çeşitli stil özellikleri tanımlamaya
yarayan teknolojinin adıydı. CSS3′den önceki bu teknoloji bünyesinde nispeten daha
pasif ve sabit stil özelliklerini barındırıyordu. Internet sayfalarının daha aktif olma
ihtiyacı, web tasarımcılarının JavaScript’ i daha etkin kullanmaya başlaması ve jQuery
gibi CSS temelli teknolojilerin popülaritesini artırması, CSS için de yeni bir versiyon
ihtiyacını doğurdu. Sonuç olarak ortaya daha esnek, JavaScript ile daha iyi anlaşan ve
mobil cihazlar için daha etkili çözümler sunan CSS3 ortaya çıkmıştır.
CSS sayesinde gelişen web teknolojilerinin ihtiyaçlarına yönelik birçok yenilik
getirilmiştir. Bu yeniliklerden bazıları şunlardır;
3.1. Text Properties (Yazı özellikleri) : Yazıya gölge verme (text-shadow), text-
stroke, tarayıcı uyumlu özellikler ve RGB kullanarak saydamlık verme gibi
birçok özellik, web sayfalarında kullanılan yazılara etki edebilir hale
gelmiştir.
3.2. Layout Properties (Düzen özellikleri) : Kenarlıkları oval yapma (border-
radius), box-shadow (gölgelendirme), çoklu yazı kolonları (multi column
text) ve donukluk (opacity) gibi özellikler de CSS3 ile birlikte gelmiştir.
3.3. Animated Property Transitions (Animasyonlu Özellik Geçişleri) : CSS3 ile
birlikte gelen en etkileyici özelliklerden biri, HTML objelerinin özelliklerine
animasyonlu geçiş efekleri tanımlayabilmektir. Bu özellik ile ilgili örnekli
anlatımları CSS3 makaleleri altından takip edebilirsiniz.
3.4. Border Image (Kenarlık Resimleri) : CSS3 ile birlikte objelere uygulanan
kenarlıklar için resim tanımlaması yapılır hale gelmiştir.
3.5. Gradients (Geçişler) : Web sayfasındaki resimlere ve uygun objelere, linear
gradients (doğrusal geçişler), radial-gradients (radyal geçişler) mozilla web
kitleri gibi şık stil düzenlemeleri de yine CSS3 ile yapılabilmektedir.
5. 4
3.6. 2D / 3D Transformations (Dönüşümler) : CSS3 ile birlikte nesnelere 2 veya
3 boyutlu dönüşüm efekleri verilebilmektedir.
3.7. Web Fontları : CSS3 ile birlikte gömülü ve her browsera ayrı olarak
uyarlanabilecek yazı fontları ve formatları geliştirilmiştir. Ayrıca mobil
cihazlar için kullanılabilecek yeni fontlar da CSS3 ile birlikte gelen kullanışlı
yeniliklerdendir.
CSS3 her ne kadar web tasarımcıları için daha zengin ve daha dekoratif çözümler
getirse de henüz hala tüm browserlar tarafından tüm özellikleri desteklenmemektedir.
Maalesef hala web tasarımcıları farklı tarayıcılar için farklı önekler kullanarak ilgili
etkiyi yaratmaya çalışmaktalar.
4. CSS Kullanmanın Avantajları
4.1. Görünüm Avantajları
CSS HTML' e göre birçok stil özelliğine sahiptir. CSS' in sayfa içeriği öğelerinin sayfa
görünümü öğelerinden ayrılması için geliştirildiğini düşünürsek avantajı baştan
anlaşılmış olur.
4.2. Kullanım Kolaylığı
HTML' de her elemente artı özellikler eklemek için başka bir element ve özellik
eklememiz gerekiyor ve bu işlemi geniş çaplı bir sitede yaptığımızı düşünürseniz çok
büyük zaman kaybı ve uğraş gerektiğini göreceksiniz.
4.3. Tasarım Tutarlılığı
Tek CSS dosyası ile tüm sitenizi yönetebilirsiniz bu ayrıca sitenize tutarlılık
kazandıracaktır. Tüm sayfalarınıza aynı stil elementlerini ve özelliklerini atayarak
sayfa tutarlılığını sağlayabilirsiniz. Web sayfanızdaki ilk sayfadan son sayfaya kadar
tutarlılığınızı koruyarak ziyaretçinize düzenli bir içerik sunmuş olacak ve sitenizin
kendine has özelliklerini ziyaretçiye benimsetmiş olacaksınız. Sayfalar hızlı yüklenecek
ve doğru olarak yüklenecektir, çünkü aynı elementleri diğer sayfalarda tekrar
yüklemeyecek ve bu ziyaretçiye zaman kazandıracaktır. CSS+XHTML ile HTML göre
%50'ye varan performans ve hız artışları olacaktır.
4.4. Gelecek Vaat Ediyor
HTML giderek işlevselliğini kaybedeceği ve XML ve dolayısı ile XHTML' in işlevselliğini
arttıracağı düşünülürse, CSS gibi tümleşik bir standardın önemi daha çok anlaşılıyor.
6. 5
XHTML ile daha temiz kodlar üretilecek, farklı platformlara(pda,cep telefonu vs.)
uyum sayesinde bilgi dolaşımı kolaylaşacak, sayfalarımız arama motorları programları
tarafından daha anlaşılır olacaktır. CSS, XHTML teknolojisi ile tümleşik olarak çalışarak
bizlere gelecek vaat ediyor.
5. CSS ile Yapılabilenler
CSS kullanarak HTML ile yapılması zor olan ya da yapılamayan birçok şeyi
yapabilirsin. Bir sayfadaki tüm ögeleri veya belli bir kısım öğeyi, renk, boyut, arka
plan resmi, sayfadaki konumu, ve daha birçok özelliği yönünden CSS ile
tanımlayabilirsin. CSS öğrenmesi en kolay dillerden birisidir.
6. CSS Öğrenmek için Gerekenler
CSS öğrenmek için gereken en önemli bilgi Temel HTML bilgisidir. HTML bilmeden
CSS kodlarını kullanılması zor olacaktır. Çünkü CSS HTML koduna entegre olarak
çalışmaktadır.
7. CSS' in Yapısı
CSS' de seçici (selector) değiştirmek istediğimiz HTML etiketini belirtir. CSS ile
üzerinde oynama yapmak istediğimiz HTML etiketini seçmiş oluruz. { ve } işaretlerinin
arasında kalan alana scope ya da bildirim alanı denir. Bu alana CSS' in özelliğini ve
değerini yazarız.
7. 6
Özellikten sonra mutlaka (:) işareti gelir ve özelliğin değeri yazıldıktan sonra noktalı
virgül (;) işareti ile kapatılır. Yazım kuralı daima böyledir.
Örneğin; yukarıdaki örneğimizde <body> etiketimizi seçtik ve arka plan rengini
(background-color) gök mavisi (skyblue) olarak belirledik.
İlk örneğimize ek olarak body seçicimize font-family adına yeni bir özellik ekledik ve
değerini Verdana olarak belirledik. Bu şekilde <body> etiketi içine yazılan tüm
metinler Verdana fontu olarak gösterilecektir.
7.1. CSS Yorumları
Kod yazarken olduğu gibi, CSS ile çalışırken de çeşitli notlar tutma ihtiyacı olabilir.
İleride güncelleme yapılırken faydalı yorum satırları oluşturmak için /* ile başlayıp */
ile bitirmen gerekir.
7.2. ID Özel Seçicisi ile Çalışmak
Bir HTML elementine stil vermenin yanında CSS kendi özel seçicilerini oluşturmana da
izin vermektedir.
Bunlardan ilki id isimli seçicidir.
Tek bir elemente özel stil vermek için kullanılır.
/*Tek satırlık bir yorum*/
p{
color: Aqua;
/*Çok satırlık
bir
yorum*/
width: 200;
}
8. 7
Hazırlanan özel stil, uygulanmak istenen HTML elementinin id niteliğine verilerek
kullanılır. Özel stile isim verilirken, ismin önüne # işareti konulur (#ozel gibi).
Ardından HTML elemente <a id=”ozel”> şeklinde atanır.
7.3. CLASS Özel Seçicisi ile Çalışmak
Birden fazla elemente aynı stili vermek için kullanılan özel seçicidir. id seçicisinin
aksine class seçicisi birçok element üzerinde kullanılabilir. class seçicisi HTML class
niteliğini kullanır ve önüne nokta (.) koyularak tanımlanır.
<html>
<head>
<title>Merhaba CSS</title>
<style type="text/css">
#ozelStil
{
margin-top:20;
color:Aqua;
}
</style>
</head>
<body>
<ul>
<li id="ozelStil">Görsel alan</li>
<li>Bu alan ozelStil'den etkilenmez.</li>
</ul>
</body>
</html>
9. 8
Aşağıdaki class seçicisini kullanmak istediğinde HTML içerisinde class=”sagaHizali”
yazman gerekir.
7.4. Harici Stil Şablonu (External Style Sheet)
Bir şablon, birden fazla sayfaya atanmak istendiğinde harici stil şablonu kullanmak en
efektif yoldur. Harici bir dosya olarak hazırlanan CSS ile bütün bir web sitesinin
görüntüsünü tek bir dosyayı güncelleyerek değiştirebilirsin.
Her sayfada, CSS uzantılı dosyanın referansı olmalıdır. Bu, <head> etiketi içine
yazılacak <link> etiketi ile mümkün olur.
Harici stil şablonu, herhangi bir metin editörü ile hazırlanabilir. İçerisinde html
etiketleri yer almaz. Hazırlanan şablon, .css uzantılı bir dosya olarak kayıt edilir.
<html>
<head>
<style type="text/css">
.sagaHizali
{
text-align:right;
}
</style>
</head>
<body>
<h2 class="sagaHizali">Sağa dayalı yazı</h2>
<h4 class="sagaHizali">Sağa dayalı diğer yazı</h4>
</body>
</html>
10. 9
7.5. Dahili Stil Şablonu (Internal Style Sheet)
Bir web sayfası, kendine özgü bir stil kullanacaksa bu şablon tercih edilir. İlgili html
sayfasının <head> etiketi içerisinde stiller tanımlanır ve sadece tanımlandığı sayfa
içinde kullanılır.
<head>
<linkrel="stylesheet"type="text/css"href="stilDosyam.css"/>
</head>
<head>
<style type="text/css">
.sagaHizali
{
text-align:right;
}
</style>
</head>
