CSS (Cascading Style Sheet)

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 kuralları temelde 2 kısımdan oluşur: 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 kuralları temelde 2 kısımdan oluşur: 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 kuralları temelde 2 kısımdan oluşur: 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.

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: Dahili Stillendirme Harici Stillendirme İmport ile Stillendirme Satır içi Stillendirme

CSS’i web dokümanlarına atamak için 4 farklı yöntem kullanılır: 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’i web dokümanlarına atamak için 4 farklı yöntem kullanılır: 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’i web dokümanlarına atamak için 4 farklı yöntem kullanılır: 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’i web dokümanlarına atamak için 4 farklı yöntem kullanılır: 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

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

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.

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.

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

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.

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 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.

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.

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 HTML dokümanı içinde block level (kutu seviyesi) elemanlardır. 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 olarak kullanılacak alt element selektörleri aşağıdaki gibidir: Child Selektörler Next Sibling (Bitişik Kardeş) Selektörler Attribute (Özelllik) Selektörleri Sözde Sınıf Selektörleri Sözde Eleman Selektörleri

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.

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.

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.

Child Selektörler

Child Selektörler Aşağıda verilen sayfada #context>p child selektörü ile hangi paragraflar seçilir?

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.

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.

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.

Attribute (Özelllik) Selektörleri

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.

Sözde Sınıf Selektörleri

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

Sözde Eleman Selektörleri

Kalıtsallık ve Selektör Gruplama
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
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 alt çizili olarak görüntüleyecek selektör grubunu görüyoruz. 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.

CSS (Cascading Style Sheet)

Benzer bir sunumlar

... konulu sunumlar: "CSS (Cascading Style Sheet)"— Sunum transkripti:

Benzer bir sunumlar

Proje hakkında

Geri bildirim

Giriş

Sosyal ağ üzerinden giriş yapmak:

CSS (Cascading Style Sheet)

Benzer bir sunumlar

... konulu sunumlar: "CSS (Cascading Style Sheet)"— Sunum transkripti:

Benzer bir sunumlar

Proje hakkında

Geri bildirim