Web Tabanlı Programlama – Stil Sayfalarına Giriş

3. Stil Sayfalarına Giriş

Proje olarak geliştirilen web sitemizde şu ana kadar sadece HTML kodları kullanıldı. Fakat tasarlamaya çalışılan web sayfası ile şuana kadar yapılanlar karşılaştırıldığında yapılacak çok işlemin olduğu görülür.

site ekran görüntüsüsite ekran görüntüsü2

Bu bölümde site görsel olarak yukarıdaki resme benzetilmeye çalışılacaktır. Bunun için kullanılacak kodlama Cascading Style Sheets (CSS)’ dir. CSS, bir HTML belgesinin stilini yani HTML öğelerinin nasıl görüntüleneceğini açıklar. Şu an en yeni standardı CSS3’tür. Her yeni standart kendinden önceki tüm standartları destekler. Şimdi şekildeki gibi bir görüntü elde etmek için ilk CSS kodlaması yapılacaktır. CSS kodlamanın üç yöntemi vardır.

CSS’in Yazılacağı Yere Göre Kodlama Yöntemleri

HTML Etiketleri İçinde CSS Kodlama

HTML Etiketleri İçinde CSS Kodlama

ilk CSS örneğimiz

Bir Stil Bloğu (<style></style>) İçerisinde CSS Kodlama

Bir Stil Bloğu İçerisinde CSS Kodlama

Harici Bir Stil Dosyası İçinde CSS Kodlama

Harici Bir Stil Dosyası İçinde CSS Kodlama

Bu yöntemde sadece stil kodları *.css (ör: temel.css) şeklinde kaydedilir. Daha sonra web sayfasının head bölümü içerisine css uzantılı kaydedilmiş dosya, bağlantı verilir.

Elementin Etiketine Göre CSS Kodlama

Sayfamızda biçimlendirme yaparken elementin etiketine (ör: div, body, input, article, header, footer) göre kodlama yapılır. Bu kodlama biçimini CSS kodlamanın 2. Yönteminde görüldü.

ELEMENTİN ETİKETİNE GÖRE CSS KODLAMA

Bu kodlama yöntemi tek bir css kodu ile sayfanızdaki benzer etiketlerin aynı şekilde görüntülenmesine olanak sağlar. Yukarıdaki örneğimizi ele alacak olursak, sayfamızdaki h1 etiketli tüm elementler için benzer biçimlendirme uygulanmıştır. Bazı h1 etiketli elementlerin farklı biçimlendirmeye sahip olması isteniyorsa ilk olarak “HTML etiketleri içinde CSS kodlama” yöntemi kullanılır. Fakat bu yöntem çok kullanışlı değildir.

HTML Etiketleri İçinde CSS Kodlama2

Kullanılacak diğer bir yöntem ise, “Elementin Özelliklerine Göre CSS Kodlama” dır.

Elementin Özelliklerine Göre CSS Kodlama

HTML elementlerinin özelliklerine göre css kodlama yöntemini açıklamadan önce, “Elementin Özellikleri” bilinmelidir. Aşağıdaki HTML kodlarını incelendiğinde etiket isimleri dışında kırmızı etikete özgü özellikler (kırmızı renkli) olduğu görülecektir. Bu özelliklerden id ve class tüm etiketlerdeki ortak özelliktir.

ELEMENTİN ÖZELLİKLERİNE GÖRE CSS KODLAMA

Elementlerin sahip olduğu özelliklere göre css kodlamada genellikle id ve class özellikleri kullanılır. Örneğin class özelliği “renkli” ya da id özelliği “renkli” olan herhangi bir elementin biçimi değiştirilebilir. Bunun için id’ye göre kodlama yaparken “#” simgesi, class’ a göre kodlama yaparken “.” simgesi ile başlanır.

ELEMENTİN ÖZELLİKLERİNE GÖRE CSS KODLAMA2

Herhangi bir kodlama yönteminin kullanılabilmesi için önce, biçimlendirme yapmak istenilen etikete id ya da class özellikleri girilir. Fakat bazen buna gereksinim olmadan da kodlama yapılabilir. Örneğin <a> etiketi ile bir bağlantı oluşturulduğunda:

ELEMENTİN ÖZELLİKLERİNE GÖRE CSS KODLAMA3

Bu etiketi href özelliği http://okulunuz.com olacak şekilde bir seçim yaparak biçimlendirilebilir.

ELEMENTİN ÖZELLİKLERİNE GÖRE CSS KODLAMA4

ELEMENTİN ÖZELLİKLERİNE GÖRE CSS KODLAMA5

ikinci CSS örneğimiz

İç İçe Geçmiş CSS Kodlama

Son olarak, iç içe geçmiş css kodlama örneklerini inceleyelim. Örnek:

Sadece header elementi içerisindeki class özelliği “renkli“ olan elementleri nasıl biçimlendirilir?

Sadece section elementi içerisindeki article elementi içerisinde olan h1 elementini nasıl biçimlendirilir?

Sadece footer elementi içerisindeki google sitesine link verilmiş a elementleri nasıl biçimlendirilir?

İçe Geçmiş CSS Kodlama

ncü CSS örneğimiz

Proje Sitesinin CSS İle Görselleştirilmesi

Varsayılan Ayarları

Bir web sitesinin CSS ile görselleştirilirken ilk olarak yapılması gereken varsayılan olarak kullanacağımız genel CSS ayarlarını oluşturmaktadır.

Varsayılan AyarlarıVarsayılan Ayarları2

Site Şablonundaki Temel Çerçevelerin Biçimlendirilmesi

Şablonumuzda, body etiketi içerisinde banner, content ve footer olmak üzere üç ana çerçeve oluşturulmuştur. Şimdi bu bölümlerin her biri içerisindeki etiketler için şablona uygun şekilde biçimlendirme yapılacaktır.

Banner Çerçevesinin Biçimlendirilmesi

“banner” çerçevesinin html kodlarını açarak en üsteki div elementinin class özelliği “çerçeve1”, sitenin logosunun ve açıklamasının bulunacağı div etiketinin id özelliği “logogrup” olarak değiştirilir.

Banner Çerçevesinin Biçimlendirilmesi

Şimdi en dıştaki elementten başlayarak en içteki elemente doğru banner çerçevesinin CSS ayarları yapılabilir.

Banner Çerçevesinin Biçimlendirilmesi2

Banner Çerçevesinin Biçimlendirilmesi3

header Çerçevesinin Biçimlendirilmesi

header Çerçevesinin Biçimlendirilmesi2

Content Çerçevesinin Biçimlendirilmesi

“content” çerçevesinin html kodlarını açarak etiketlere verilen id ve class özellikleri aşağıdaki gibi değiştirilir.

Content Çerçevesinin BiçimlendirilmesiContent Çerçevesinin Biçimlendirilmesi2

Şimdi en dıştaki elementten başlayarak en içteki elemente doğru content çerçevesinin CSS ayarları yapılır.

Content Çerçevesinin Biçimlendirilmesi3

Content Çerçevesinin Biçimlendirilmesi4

Content çerçevesinin görünümü

Footer Çerçevesinin Biçimlendirilmesi

Son olarak “footer” çerçevesinin html kodları açılır ve en üsteki div elementinin class özelliği “cerceve3” değiştirilir. Diğer etiketler anlamsal elementler olduğu için özel bir id ya da class belirtmeye gerek yoktur.

Footer Çerçevesinin Biçimlendirilmesi

Şimdi en dıştaki elementten başlayarak en içteki elemente doğru footer çerçevesinin CSS ayarları yapılır.

Footer Çerçevesinin Biçimlendirilmesi2

Sitenin genel görünümü

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir