Uygulama – Yeni bilgilerimizi kullanalım

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

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.

Bu yazı topluluk tarafından oluşturuldu. Lisans bilgisine bakabilirsiniz. Yanlış veya eksik bilgileri düzenlemek için github üzerinden katkıda bulunabilirsiniz.

Kategoriler: CSS İlk Adımlar, CSS, Kılavuz

Okumaya devam et!

Arka planlar ve Kenarlıklar

Bu yazıda, CSS arka planları ve kenarlıkları ile yapabileceğiniz bazı yaratıcı şeylere göz atacağız.

Flex Öğeleri Sıralama

Flexbox ve Grid gibi yeni düzen yöntemleri, içeriğin sırasını kontrol etme olanağını da beraberinde getirir.

CSS’e başlarken

Bu yazıda basit bir HTML sayfası alıp ona CSS uygulayacağız, bu arada dil hakkında da bazı pratik şeyler öğreneceğiz.

Tür, sınıf ve kimlik seçicileri

Bu makalede muhtemelen en sık kullanacağınız en basit seçicilerden bazılarını inceleyeceğiz.

Yorum Gönderin

E-posta hesabınız yayımlanmayacak.

koddla
Tema Mundana by WowThemes.net.