CSS (Cascading Style Sheet)
Öğr. Gör. Emine TUNÇEL
Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu
CSS Nedir?
 CSS, web dokümanlarına stil eklemek için kullanılan basit ve güçlü bir dildir.
 Web sayfaları yapısal olarak 3 katmandan oluşur:
 Davranışsal Uygulamalar (Javascript, Flash vb.): Ziyaretçilerin web
sitesiyle olan etkileşim gücünü arttırmak amacıyla eklenen katmandır.
Örneğin bir öğenin fare ile üzerine gelindiğinde açıklama gösteren
kutular, ileri/geri butonlarına tıklandığında kayarak yenilenen resim
galerileri, bir sitede arama yaparken açılan otomatik kelime
tamamlama yardımcıları gibi etkileşimi ve kullanılabilirliği arttıran
yöntemleri davranışsal uygulamalar olarak tanımlayabiliriz
 Görsel Sunuş (CSS/Stil Dokümanı): CSS yardımı ile içeriği stillendirme
katmanıdır. Ham içerikten ibaret olan HTML dokümanı, CSS dosyalarında
tanımlanan özelliklere sahip olacak şekilde estetik ve kullanışlı bir sunuşla
görüntülenirler.
 HTML(Doküman iskeleti ve içeriği):Web sayfasının iskeletini oluşturan
HTML’den ibarettir.
CSS Nedir?
 Bu 3 katman doğrudan HTML doküman iskeleti içinde de oluşturulabilir. Keza
css tabanlı tablosuz tasarım bir standart haline gelinceye kadar öyle
yapılıyordu.
 Ancak, bu 3 katmanı ayrı parçalar halinde oluşturup düzenlemek sayfaların
güncellenmesi ve değiştirilmesi esnasında size hem hız hem de esneklik
kazandıracak.
Niçin Tablosuz, CSS Destekli Tasarım?
 Eskiden içerik kısmı ve biçimlendirme kısmı içi içe kodlama yapılırdı, örneğin
yazıtipi tanımı için <font> etiketini kullanırdı.
 Bir web sayfasının görünümünü Photoshop ya da Fireworks gibi görsel
editörlerle hazırlayıp parçalara ayırdıktan sonra HTML kodu haline getiriyor,
bu tasarımların HTML dokümanında görünüşü ve konumlandırmasını
ayarlamak için tablolar, yani <table> etiketlerini kullanıyorduk.
 Ancak, HTML içinde <table> etiketinin görevi konumlandırma yapmak ya
da görsel elementleri bir arada tutmak değil, liste yapısına sahip verileri belli
bir düzende görüntülemektir.
 Bu dönem CSS’in web dokümanları üzerinde etkin rol oynamaya
başlamasıyla beraber kapandı.
 CSS tabanlı biçimlendirme ile artık sayfalarımız tasarım, içerik ve etkileşim
katmanlarından oluşuyor, tablo içermeyen esnek yapıları sayesinde kolayca
güncellenebiliyor ve örneğin mavi tonlardan oluşan bir web sitesini birkaç
saat içerisinde sarı tonlara sahip bambaşka bir tasarım görünümüne
kavuşturabiliyoruz.
Niçin Tablosuz, CSS Destekli Tasarım?
 CSS’in avantajları bunlarla da sınırlı değil.
 HTML dosyalarına entegre edeceğimiz bu stil dokümanları ile;
 CSS stillendirme dosyası gerektiğinde 1000 sayfalık bir web sitesine
atanarak ortak tasarım görünümüne sahip olan,
 İnternet Explorer, Firefox, Chrome, Opera ve Safari gibi popüler internet
tarayıcılarında ortak standart ve hatasız görünüme sahip,
 Html dosyası ile bunun görünümünü içeren Css dosyası birbirinden
ayrıldığı için eski yöntemlere oranla %60 oranına kadar daha hızlı
yüklenen ve daha az harcamaya neden olan bant genişliği sağlayan,
 CSS dokümanı ayrı bir dosya olarak saklandığı için tasarımsal değişiklik
ve güncellemesi oldukça kolay ve hızlı bir şekilde gerçekleşen,
 Arama motorlarında daha iyi ve üst sonuçlar veren,
 Maliyetleri düşüren,
 Daha fazla insan tarafından ziyaret edilen
web siteleri hazırlıyor olacağız.
CSS Kod Uygulama Yöntemi (Syntax)
 Her uygulama dilinde olduğu gibi Css’in kod uygulama yöntemi
kendine has kurallara sahiptir.
 Html dilinde dokümanda görüntülemek istediğimiz içeriğin türünü
belirlemek için ona has etiketler kullanırız.
 Css dokümanında da Html dokümanındaki içeriğin görünümüne
biçimlemek için CSS’e özel yazım yöntemini kullanacağız.
CSS Kod Uygulama Yöntemi (Syntax)
 CSS kuralları temelde 2 kısımdan oluşur:
1. Seçiçiler (Selektörler):
 HTML dokümanındaki elementleri seçerek, onların dilediğimiz özelliklerle
görüntülenmesini veya doküman içinde dilediğimiz pozisyonlara
dilediğimiz boyutlarla yerleşmelerini sağlarlar.
 Her selektör adlandırılıp oluşturulduktan sonra süslü parantez {} açılıp
kapatılmalıdır.
 Aşağıdaki örnekte HTML’deki paragraf (<p>) etiketini düzenlemek için
açılmış bir etiket selektörü görüyoruz.
 Selektör isimleri rakamla bitebilir ancak, rakamla başlayamazlar. Türkçe
karakterleri ve özel karakterleri içeremezler.
CSS Kod Uygulama Yöntemi (Syntax)
 CSS kuralları temelde 2 kısımdan oluşur:
2. Selektör Özellikleri (Property)-Deklarasyon Blokları
 Biçimlendirilmek istenen HTML elemanı selektör tarafından
belirlendikten sonra o elemanın hangi özelliğinin değiştirileceği
deklarasyon blokları ile tanımlanır.
 Her özellik kendine ait bir isme sahiptir ve bu özelliğe atanan
değerler özelliğin yapısını belirler.
 Her özellik değerinde iki nokta üst üste (:) ile ayrılır ve her özellik satırı
noktalı virgül (;) ile bitirilir.
 Aşağıda verilen örnekte paragraf elemanın zemin rengini sarı, yazı
rengini yeşil yapan bir css tanımı görülmektedir.
CSS Kod Uygulama Yöntemi (Syntax)
 CSS kuralları temelde 2 kısımdan oluşur:
2. Selektör Özellikleri (Property)-Deklarasyon Blokları
 Bazı özellikler birden fazla değere sahip olabilirler.
 Bu değerler birbirinden virgülle ayrılırlar.
 Aşağıdaki örnekte birden fazla yazı tipi tercih değerleri tanımlanmış
bir font özelliğinin oluşturulduğu bir <p> etiket selektörünü görüyoruz.
CSS Kod Uygulama Yöntemi (Syntax)
Yorum Satırları
 Css yorum satırları /* ile başlar */ ile biter.
CSS’in Web Dokümanlarına Atanması
 CSS’i web dokümanlarına atamak için 4 farklı yöntem kullanılır:
1. Dahili Stillendirme
2. Harici Stillendirme
3. İmport ile Stillendirme
4. Satır içi Stillendirme
CSS’in Web Dokümanlarına Atanması
 CSS’i web dokümanlarına atamak için 4 farklı yöntem kullanılır:
1. Dahili Stillendirme
 Bir html dokümanı içerisinde <head> etiketinin açılışı ile kapanışı
</head> arasına açılan <style> etiketi ile o dokümana css
stillendirmesi ekleyebiliriz.
CSS’in Web Dokümanlarına Atanması
 CSS’i web dokümanlarına atamak için 4 farklı yöntem kullanılır:
2. Harici Stillendirme
 Bu yöntemde ayrı bir stil dokümanı hazırlanıp .css uzantılı olarak
kaydedildikten sonra bu dosya HTML dokümanına <head> etiketinin
açılışı ile kapanışı </head> arasında açılan <link/> etiketi ile dahil
edilir.
CSS’in Web Dokümanlarına Atanması
 CSS’i web dokümanlarına atamak için 4 farklı yöntem kullanılır:
3. Import ile Stillendirme
 Bu yöntemde dahili stil dosyası oluşturulur gibi <style> etiketi açılır
ancak içeriğine css kodları (selektör ve özellikler) girmek yerine
import ile harici stil dosyasının yolu girilir.
CSS’in Web Dokümanlarına Atanması
 CSS’i web dokümanlarına atamak için 4 farklı yöntem kullanılır:
4. Satır içi Stillendirme
 Bu yöntemde, css kodları (selektör ve özellikler) uygulanmak istenen
html etiketine style özelliği eklenerek verilir.
Hangisini Kullanmalıyız?
 Tek bir HTML dokümanının görünüm özelliklerini değiştirmek için dahili
stillendirmeyi,
 Birden fazla HTML dokümanının ortak görünüme sahip olması için
harici stillendirmeyi,
 Bazen de bu ikisinin yetersiz kaldığı anlık durumlarda satır içi
stillendirmeyi yapmamız gerekebilir.
 Anlık ve mecburi durumlar haricinde satır içi stillendirme ile dolu bir
Html dokümanı hazırlamanın eski karmaşık ve düzenlenmesi sıkıntı
yaratacak tasarım yapısından pek farkı yoktur.
CSS Seçiciler (Selektör) ve Özellikler (Property)
Giriş
 Her zaman öncelikle web sitemizin veya HTML sayfamızın içeriğini
HTML kodları yardımıyla herhangi bir stillendirme yapmadan
oluşturacağız. Bu şekilde sayfanın iskelet ve içerik katmanı hazırlanır.
 Daha sonra css kodlamasına geçilerek HTML dokümanının
görünümünü etkileyecek olayları belirlemek için selektörler
oluşturulur.
 Selektörler 3 ana türde olmakla beraber bazı özel tanımlamalar için
gruplanmış ve alt element seçici gibi ara selektör tipleri de vardır.
 Bu 3 ana selektör aşağıda verilmiştir:
 Etiket (Tag) Selektörleri
 Class Selektörler
 ID Selektörler
CSS Seçiciler (Selektör) ve Özellikler (Property)
Etiket (Tag) Selektörleri
 Etiket selektörleri HTML dokümanı içindeki bir etiketi seçerek
doküman içinde o etiketin geçtiği her nokta da etiketin görünüşü
üzerinde değişiklik yapma olanağı sağlarlar.
 Bir etiket selektörü etiketin adının selektör adı olarak açılmasıyla
oluşturulur.
 Aşağıdaki örnek, <body> etiketinin biçimlenerek sayfanın tamamının
sarı arka plana sahip olmasını sağlar
CSS Seçiciler (Selektör) ve Özellikler (Property)
Etiket (Tag) Selektörleri
 Etiket selektörleri kullanıldıkları andan itibaren HTML dokümanında
adı geçen etiketin yer aldığı her noktada hakimiyete sahip olacaktır.
 Örneğin HTML dokümanındaki h1 elementini metin rengi yeşil olacak
şekilde etiket selektörü ile biçimleyecek olursak, doküman içinde yer
alan tüm h1 başlıklar stillenmiş olacaktır.
 Sonuç olarak, etiket selektörleri
çoğunlukla HTML dokümanının
içeriğini
biçimlendirmek
maksadıyla kullanılır.
CSS Seçiciler (Selektör) ve Özellikler (Property)
Class Selektörler
 Etiket selektörleri doküman içinde kullanıldıkları her noktada etkilidir.
 Peki, örneğin h1 başlıklarının tamamını yeşil renkli gösterirken
bunlardan bazılarını mor renkli yapmak istersek?
 İşte burada etiket selektörlerinin yetersiz kaldığı noktada class
selektörleri kullanılır.
 Class selektörleri etiket selektörlerinden farklı olarak, kendi
belirlediğimiz isimlendirmelerle, başına nokta (.) tanımlayıcısı ile
açılırlar.
 Yine etiket selektörlerinden farklı olarak, CSS içinde class selektörü
açmış olmak, biçimlendirmeyi gerçekleştirmez. Oluşturulan class
selektörün adı HTML dokümanında atanmak istenen elemente HTML
olarak uygulamak gerekir.
CSS Seçiciler (Selektör) ve Özellikler (Property)
Class Selektörler
 Bu örneğimizde tüm h1 başlık etiketlerini yeşil rengiyle tutarken bunlardan
bazılarını mor renkte görüntülemek içim morbaşlık adını vereceğimiz bir
class selektör ile CSS kodlarımıza bir ekleme yapalım:
 Şimdi
oluşturulan
morbaslik
isimli
class
selektörünü
HTML
dokümanımızdaki h1 elementlerinden bir tanesine uygulamak istersek
CSS Seçiciler (Selektör) ve Özellikler (Property)
Class Selektörler
 Class selektörler, bir HTML dokümanındaki elementlere birçok kez
atanabilir, doküman içerisinde tekrar tekrar kullanılabilirler.
 Etiket selektörlerinin yetersiz kaldığı noktalarda class selektörleri
kullanacağımızı söyledik. Ancak bunun dozunu kaçırıp, etiket
selektörünün yetmediği her noktada class selektör açmaya
başlarsak dokümanımızı gereksiz yere şişirmeye başlamış oluruz.
 Bu muhtemel yanlış algıyı ordan kaldırmak için ileriki konularda alt
element selektörleri göreceğiz.
 Sonuç olarak, etiket ve class selektörler ağırlıklı olarak HTML
dokümanının içeriğini ve sık kullanılacak içerik görünüm özelliklerini
belirlemek amacıyla kullanılırlar. Yapısal ve yerleşim ile alakalı
özellikleri belirlemek için ID selektörler kullanılmalıdır.
CSS Seçiciler (Selektör) ve Özellikler (Property)
ID Selektörler ve Dıv’ler (Division)
 Photoshop gibi görsel bir editör programında oluşturulan görsel
tasarım yapısını CSS ile nasıl hayata geçireceğiz ?
 Burada ID selektörler devreye giriyor.
 HTML içeriğinin görünümünü düzenlemek için etiket ve class
selektörler, yapısal yani kutu yerleşim ve sayfa düzenini oluşturma
maksatlı ID seçiciler kullanılır.
 ID selektörlerde oluşturma yöntemleri itibariyle class selektörler ile
birebir aynıdır. Tek farkla:
 ID selektörler tanımlanırken bu kez belirteç olarak diyez (#) işareti
kullanılır.
CSS Seçiciler (Selektör) ve Özellikler (Property)
CSS Box Model-Kutu Modeli
 HTML içerisinde oluşturduğumuz paragraflar, h1’den h6’ya kadar
olan başlıklar, div elementi ve tablolar, kısaca tüm block (kutu)
seviyesi elementler kutu modeline sahiptir.
 Bu, bizim CSS yardımıyla block
seviyesi elementlerin sahip
olduğu standart iç boşluk
(padding),
dış
boşluk
(margin), çerçeve (border),
arka plan (background) gibi
özelliklerini
kolayca
değiştirebilmemize
olanak
sağlar.
CSS Seçiciler (Selektör) ve Özellikler (Property)
ID Selektörler ve Dıv’ler (Division)
 Aşağıda anakutu adı verilerek açılmış bir ID selektör görüyoruz.
 Buradaki tanımlamalara göre anakutu adındaki ID selektörünün
atanacağı html elementi, 750 piksel genişliğe, 5 piksel siyah tek ton
çerçeveye, beyaz arkaplana sahip olacak ve bir üst elementine
göre yatay olarak tam ortaya yerleşecek şekilde hizalanacaktır.
CSS Seçiciler (Selektör) ve Özellikler (Property)
ID Selektörler ve Dıv’ler (Division)
 Şimdi anakutu isimli ID selektörünü HTML dokümanı içinde bir elemente
atayalım:
 ID selektörler class selektörlerden farklı olarak HTML dokümanı
içerisinde yalnızca bir kez kullanılabilirler.
Div’ler-Division’lar
 Bir önceki örneğimizde anakutu ID selektörünü html dokümanında bir div
elementine atadık.
 HTML içindeki div elementinin kullanım amaçları:
 Div elementleri
elemanlardır.
HTML
dokümanı
içinde
block
level
(kutu
seviyesi)
 Div’leri dokümanımızdaki yapısal bölümleri tanımlamak için kullanırız.
 Div’ler bizim sitemizin içeriğini oluşturacak tüm öğeleri kapsayabilir.
 Ancak div’ler diğer block level elementlerden farklı olarak kendilerine CSS
tarafından bir sti latanmadan hiçbir görsel değişiklik getirmezler.
 Yani bir div açıp içine içeriği girerseniz sonuçta elde edeceğiniz görüntü o
içeriğin div içinde olmadan alacağı örüntü ile aynıdır, herhangi bir görsel
değişim olmayacaktır.
 Dolayısıyla div’leri yani bu hayali kutuları daha çok CSS ile oluşturmak
istediğimiz hiyerarşik fiziksel yapılar için kullanacağız.
Alt Element Selektörleri
 Etiket seçicilerin yetersiz kaldığı durumlarda öncelikli
kullanılacak alt element selektörleri aşağıdaki gibidir:
1. Child Selektörler
2. Next Sibling (Bitişik Kardeş) Selektörler
3. Attribute (Özelllik) Selektörleri
4. Sözde Sınıf Selektörleri
5. Sözde Eleman Selektörleri
olarak
Alt Element Selektörleri
1. Child Selektörler
 Child selektörler, bir selektörün atandığı elementin hiyerarşik olarak
altında veya içinde bulunan elementlerin, yani alt elementlerin
biçimlendirilmesi için kullanılırlar.
 Örneğin, dokümanımızdaki tüm linklerin rengini kırmızı olarak
belirledik ancak, paragraf içinde yer alan linklerin doküman
genelinden farklı olarak yeşil renkli görünmesini istiyoruz.
 Bunu paragraf içindeki linklere class selektör atayarak yapabiliriz.
Ancak, gereksiz yere class selektörlerin kullanılması dokümanını
şişireceğinden bunun yerine child selektörlerin kullanılması daha
uygun olacaktır.
Alt Element Selektörleri
1. Child Selektörler
 Child selektörler, seçilecek alt elementin başına boşluk (" ") veya ">"
belirteci konarak onun ebeveyni olan selektör gelecek şekilde
oluşturulurlar.
 Aşağıdaki örnekte yalnızca paragraf(<p>) etiketi içindeki linklerin
yazı rengi kırmızı olacak, bunun dıındaki linklerde herhangi bir görsel
değişiklik yapılmayacaktır.
Alt Element Selektörleri
1. Child Selektörler
 Aşağıdaki örnekte de, anakutu ID selektörünün atandığı elementin
altında bulunan paragraftaki linklerin rengini kırmızı yapılacaktır.
 Bu değişim, anakutu içindeki paragraflar haricinde bulunan linklerin
rengini veya başka bir özelliğini etkilemeyecek, yalnızca anakutu
içindeki paragrafların kapsadığı linkler için geçerli olacaktır.
 Bu örnekte child selektör tanımlanırken , ">"
belirteci yerine boşluk (" ") kullanıldığını
görüyoruz.
 ">" belirteci ile yapılan tanımlamada bir ebeveyn elementin
hemen altındaki element(çocuk element) biçimlendirilirken, boşluk
(" ") kullanılarak yapılan tanımlamada o ebeveyn altındaki tüm
elementler biçimlendirilir.
Alt Element Selektörleri
1. Child Selektörler
Alt Element Selektörleri
1. Child Selektörler
 Aşağıda verilen sayfada #context>p child selektörü ile hangi
paragraflar seçilir?
Alt Element Selektörleri
2. Next Sibling (Bitişik Kardeş) Selektörler
 Next Sibling Selektörler, bir selektörün atandığı elementten hemen
sonra gelen aynı seviyedeki elementte uygulanır.
 Next Sibling Selektörler, seçilecek alt elementin başına artı (+)
belirteci konarak onun kardeşi olan selektör gelecek şekilde
oluşturulurlar.
 Aşağıda verilen örnekte paragraf (<p>) etiketinden sonra gelen
paragraf(<p>) etiketinin yazı renk özelliği değiştirilmiştir.
Alt Element Selektörleri
2. Next Sibling (Bitişik Kardeş) Selektörler
 Aşağıda
verilen
HTML
dokümanında
amacımız
yalnızca
Paragraf2’nin yazı tipi rengini değiştirmekse next sibling selekörleri
kullanabiliriz.
Alt Element Selektörleri
3. Attribute (Özelllik) Selektörleri
 Özellik selektörleri, HTML dokümanındaki bir elementin sahip olduğu
özelliğe ya da bu özelliğin değerine göre atama yapılmasını sağlar.
 Örneğin, sayfada bulunan 5 farklı resim var ve bu resimlerden
yalnızca birine title özelliği atanmış olsun.
 img[title]{border:1px solid black} tanımlaması ile yalnızca bu resme
çerçeve eklenebilir.
 Ya da bir form elemanı içinde yalnızca textbox elemanına stil
eklemek için,
 input[type="text"] {border:1px solid black} şeklinde bir tanımlama
kullanılabilir.
Alt Element Selektörleri
3. Attribute (Özelllik) Selektörleri
Alt Element Selektörleri
3. Attribute (Özelllik) Selektörleri
Alt Element Selektörleri
4. Sözde Sınıf Selektörleri
 :link : Henüz ziyaret edilmemiş sayfa linklerinin stil tanımlamasını
yapmak için kullanılır.
 :visited : Ziyaret edilmiş sayfa linklerinin stil tanımlamasını yapmak için
kullanılır.
 :active : Aktif elemana stil tanımlaması yapmak için kullanılır.
 :focus : Bir elemana odaklanıldığında uygulanacak stili belirlemek
için kullanılır.
 :hover : Bir elementin fare ile üzerine gelindiğinde uygulanacak stil –i
belirlemek için kullanılır.
 :first-child : Html dokümanında bulunan ebeveyn bir elementin ilk
çocuk elementine stil tanımlaması yapmak için kullanılır.
Alt Element Selektörleri
4. Sözde Sınıf Selektörleri
Alt Element Selektörleri
4. Sözde Sınıf Selektörleri
Alt Element Selektörleri
4. Sözde Sınıf Selektörleri
Alt Element Selektörleri
4. Sözde Eleman Selektörleri
 :first-letter : Belirtilen bir HTML elementinin yalnızca ilk harfine stil
tanımlaması yapmak için kullanılır.
 :first-line : Belirtilen bir HTML elementinin yalnızca ilk satırını stil
tanımlaması yapmak için kullanılır.
 :before : Belirtilen bir HTML elementinden önce içerik eklemek,
eklenecek içeriğin stilini belirlemek için kullanılır
 :after : Belirtilen bir HTML elementinden sonra içerik eklemek,
eklenecek içeriğin stilini belirlemek için kullanılır
Alt Element Selektörleri
4. Sözde Eleman Selektörleri
Alt Element Selektörleri
4. Sözde Eleman Selektörleri
Kalıtsallık ve Selektör Gruplama
Kalıtsallık
 HTML dokümanındaki elementler daima birbiri ile bağlantılıdır.
 Bu şu demek, eğer biz <body> etiketine ait bir etket selektörü açıp
yazı tipini Verdana yaparsak, body elementi altındaki tüm
elementlerin (paragraf, başlık, tablo, link vb.) de yazı tipi Verdana
olacak, yani ebeveyni olan bu elementten özelliği alacaklardır.
 Bu bize ebeveyn elementlerden birine bir özellik atadığımızda,
altındaki elementleri de biçimlendirmeye gerek kalmadan
düzenleme yapabilmemizi sağlar.
 Dolayısıyla yazıtipi örneğinde body’de yaptığımız Verdana
değişikliğini diğer elementlere de atamak zorunda kalmayız.
Kalıtsallık ve Selektör Gruplama
Selektör Gruplama
 HTML dokümanındaki bazı elementlerin ortak özelliklerde olmasını
sağlamak için örneğin h1’den H6’ya kadar tüm başlıklara alt çizgi
vermek için selektör gruplama kullanılır.
 Ortak özelliklere sahip olacak selektörler birbirinden virgülle (,)
ayrılarak toplu bir selektör grubu olarak açılır ve oluşturulur.
 Aşağıdaki örnekte tüm başlık etiketlerini
görüntüleyecek selektör grubunu görüyoruz.
alt
çizili
olarak
 Selektör gruplamayı kullanmasaydık, her başlık etiketi için
selektörlerini açarak altı çizili(underline) özellik değerini tekrar tekrar
vererek gereksiz yere CSS dokümanımızı şişirmiş olacaktır.
Download

CSS Giriş - Personel Web Sistemi