koddla

Yazılımcıları bilgi ile güçlendirir.

Uygulama – Yeni bilgilerimizi kullanalım

Bu değerlendirmede son birkaç yazıda öğrendiğiniz şeylerle basit metin belgelerini CSS kullanarak biçimlendireceğiz. 

Başlangıç ​​noktası

Başlangıç ​​noktası dosyasını bilgisayarınıza indirin. Bu, hem HTML’yi hem de başlangıç ​​noktası CSS’yi (belgenin başında) içeren tek bir dosyadır. İsterseniz, örneği yerel bilgisayarınızda oluşturduğunuzda bu CSS’yi ayrı bir dosyaya taşıyabilirsiniz. Alternatif olarak, aşağıdaki gibi bir çevrimiçi araç da kullanabilirsiniz: codepenjsFiddle, veya Glitch.

CSS ile Çalışmak

Aşağıdaki örnek, CSS kullanılarak stillendirilmiş bir biyografiyi sayfasını gösteriyor. Kullandığımız CSS özellikleri aşağıdaki gibi – her biri MDN’deki özellik sayfasına bağlantı verir, bu da size kullanımıyla ilgili daha fazla bilgi verecektir.

Aşağıdaki kutuda, bazı CSS’lerin zaten yerinde olduğunu göreceksiniz. Bu öğe seçicileri, sınıfları ve sözde-sınıfları kullanarak belgenin bölümlerini seçer. CSS’de aşağıdaki değişiklikleri yapın:

  1. CSS color anahtar sözcüğünü kullanarak birinci seviye başlığı pembe yapın: hotpink.
  2. Başlığa 10 piksel noktalı bir değer veren border-bottom özelliğini ekleyin. Bu özellikle CSS color anahtar sözcüğünü de kullanırsınız. Mor rengi verin: purple.
  3. 2. seviye başlığı yatık yazı yapın (italic).
  4. İletişim bilgilerinin olduğu ul için background-color olarak #eeeeee ve border için 5px solid purple değerini verin. padding kullanarak içeriği kenardan bir miktar uzağa içe itin.
  5. Bağlantıları üzerine geldiğinde yeşil renge dönüştürün: green

Sonuç olarak aşağıdaki gibi bir şey elde etmelisiniz:

Değerlendirmeyi tamamladıktan sonra örneğin nasıl görünmesi gerektiğinin ekran görüntüsü.

Daha sonra MDN CSS referansında bu sayfada belirtilmeyen bazı özellikleri aramayı deneyin ve maceracı olun!

Burada yanlış bir cevap olmadığını unutmayın – öğrenmenizin bu aşamasında biraz eğlenmeyi göze alabilirsiniz.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Back to top