Project Zeta – CSS3 2 CSS3 Nedir & Temel Kavramlar


0

Merhaba.

CSS3 Eğitimlerimize bugün CSS3 Nedir & Temel Kavramlar konusu ile devam ediyoruz.

CSS Cascading Style Sheet İngilizce ifadesinin baş harflerinin birleşmesiyle oluşmuştur.

CSS en temelde var olan HTML şablonlu bir sitenize görünüm, şekil, tasarım kazandırmak için geliştirilmiş bir standarttır.

Daha önceki HTML yazılarımızı takip eden arkadaşlarımız bilir ki biz site içinde yaptığımız kodlamalar için etiketlere ait style özelliği ile şekillendirmeler yapıyorduk.

Aslında ne kadar meşakkatli bir iş olduğunu çalışırken sizde farketmiş olmalısınız. Ayrıca yazılan bir özellik sadece bir etikete ait oluyordu. Aynı etiketten kodladığınız bir sitede 100 lerce 1000 lerce olduğunu hayal edin. Bir gün bu etikette bir özelliğin değişmesi gerekti. Yapmanız gereken şey 1000 lerce etiketi bulup tek tek o özelliği değiştirmeniz olacaktır. İşte CSS ile bunu yönetmek çok kolay bir hale getirildi. Her etikete sınıfa hatta id değerlerine ait css ler oluşturulup tek kaynaktan kocaman bir site yönetimini yapmanızı sağladı. Renk kırmızıydı mavi olmasına karar verdiniz. Yapmanız gereken tek şey CSS dosyanız içerisinde etikete ait alanı bulup kırmızıyı mavi yapmanızdır. Sitenizde bulunan binlerce o etikete ait alan mirasını o dosyadan alıp uygulayacaktır.

Standart CSS Tanımı

VS Code programını çalıştıralım.

Bir önceki yazımızda oluşturduğumuz CSS3 Eğitimleri Klasörünü açalım.

index.html dosyamız içerisinde H1 etiketli bir başlık yazalım.

CSS tanımlamaları <head> </head> etiketleri arasında

<style> </style> tanımlaması ile gerçekleştirilir.

İlk etapta H1 etiketiyle başlığımızı attık. style etiketlerini de açtık.

Bir elemente ait özellikler tanımlanacaksa 

<style>

h1 {

Özellikler;

}

</style>

şeklinde yazılır.

Şimdi biz başlığımızın mavi, font ailesinin verdana, font büyüklüğünün 15px, border değerinin 1px solid ve red olmasını istiyoruz.

Bir özellik tanımlanırken

şeklinde tanımlanır.

Şimdi çalıştırarak kontrol edelim.

Şimdi hemen altına bir tane daha h1 etiketiyle bir başlık yazalım. Aynı değerleri nasıl onunda kullanabildiğini görmüş olalım.

Hatta bunu yaparken bir kaç değişiklik yapalım. Font size 30 px yapalım. Rengi beyaz olsun. Arkaplan rengi siyah olsun.

Etiket Gruplama

Şimdi şunu yapalım. h2, h3, h4 etiketleri ile değerler girelim ama bu etiketlerin özellikleri de aynı h1 etiketi gibi olsun istiyorum.

Bunun için aklımıza her etiket için bir özellik oluşturup kopyala yapıştır alalım gibi bir çözüm ilk etapta gelebilir ama bunun daha kolayını yapmışlar.

Aynı özellikleri alacak etiketler yan yana virgülle ayrılarak yazılabilir.

Bir kaç farklı etiket için özellik oluşturarak antrenman yapabilirsiniz.

Aynı Etikete Farklı Özellikler Verme

Örneğin projeniz içinde birden çok p etiketi kullanacaksınız. Ama hepsinin aynı özelliklere sahip olmasını istemiyorsunuz. Bunu nasıl çözeceğiz.

Burada class mantığı devreye giriyor. Her etiketin kendine ait bir sınıfı oluşturularak o etiket bağlı bulunduğu sınıfı etkileyecek duruma getirilebilir.

Kısaca ele alacak olursak etiket içinde 

<p class=”sagda”> class tanımlaması yapıyoruz. İstediğiniz ismi verebilirsiniz. 

Daha sonra CSS tarafına geçip hangi etiketin hangi sınıfına ait özellikleri yazacak ise etiket.sınıfismi şeklinde belirtip özelliklerimizi yazıyoruz.

Bugünlük bu kadar örneklerinizi bundan önceki etiketleriniz için artırıp tasarım denemeleri yapabilirsiniz. Ne kadar çok pratik yaparsanız olayların oturması o kadar kolay olacaktır.

Bir sonraki dersimizde görüşmek üzere.

 


Like it? Share with your friends!

0
muratbilginer

0 Comments

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