Uygulama – Temel CSS kavrama

Bu modülde çok şey anlattık, bu yüzden sona ulaşmış olmak iyi hissettiriyor olmalı! Devam etmeden önceki son adım, modül için değerlendirmeleri denemek. Bu değerlendirmede bir kartvizit/oyun kartı/sosyal medya profili yapacağız.

Başlangıç ​​noktası

Bu değerlendirmeye başlarken şunları yapmalısınız:

• Egzersiz için HTML dosyası ve ilişkili görüntü dosyasını yerel bilgisayarınızdaki yeni bir dizine kaydedin. Kendi görüntü dosyanızı kullanmak ve kendi adınızı doldurmak isterseniz bunu da yapabilirsiniz – ancak görüntünün kare olduğundan emin olun.
• CSS kaynakları metin dosyasını indirin — bu, bu değerlendirmenin bir bölümünü yanıtlamak için incelemeniz ve birleştirmeniz gereken bir dizi ham seçici ve kural kümesi içerir.

Proje tanıtımı

Size bir ham HTML ve bir resim verildi. Bunu, bir oyuncu kartı veya sosyal medya profili olarak ikiye katlayabilecek şık, küçük bir çevrimiçi kartvizite dönüştürmek için gerekli CSS’yi yazmanız gerekiyor. Aşağıdaki bölümlerde yapmanız gerekenler açıklandı.

Temel kurulum:

• Her şeyden önce, HTML ve resim dosyalarınızla aynı dizinde yeni bir style.css dosyası oluşturun. 
• CSS’nizi bir <link> öğe aracılığıyla HTML dosyanıza bağlayın.
• CSS kaynak dosyasındaki ilk iki kural kümesi sizin için sağlandı. Şansınıza sevinmeyi bitirdikten sonra, bunları kopyalayıp yeni CSS dosyanızın en üstüne yapıştırın. CSS’nizin HTML’nize düzgün bir şekilde uygulandığından emin olmak için bunları test olarak kullanın.
• İki kuralın üzerine, bunların bir dizi genel stil kuralı olduğunu belirtmek için bir miktar CSS yorumu ekleyin: “Genel sayfa stilleri” gibi. Ayrıca kart kabının kurulumuna özel stilleri, üstbilgi ve altbilgiye özel stilleri ve ana kartvizit içeriğine özel stilleri belirtmek için CSS dosyasının altına üç yorum daha ekleyin. Bundan sonra, stil sayfasına eklenen sonraki stiller uygun bir yerde düzenleyin.

CSS kaynak dosyasında sağlanan seçicilere ve kural kümelerine dikkat edin:

• Sırada, dört seçiciye bakmanızı ve her birinin özgüllüğünü hesaplamanızı istiyoruz. Bunları daha sonra bulunabilecekleri bir yere yazın, örneğin CSS’nizin üst kısmındaki bir yorumaa.
• Şimdi doğru seçiciyi doğru kural kümesine koyma zamanı! CSS kaynaklarınızda eşleştirmek için dört çift seçici ve kural setiniz var. Bunları CSS dosyanıza ekleyin:
  • Ana kart kabına diğer şeylerin yanı sıra sabit bir genişlik/yükseklik, düz arka plan rengi, kenarlık ve kenarlık yarıçapı (yuvarlak köşeler!) verin.
  • Başlığa, daha koyudan daha açık olana giden bir arka plan gradyanı ve ana kart kabında ayarlanan yuvarlatılmış köşeler verin.
  • Altbilgiye daha açıktan koyuya giden bir arka plan gradyanı ve ayrıca ana kart kabında ayarlanan yuvarlatılmış köşeler verin.
  • Ana kartvizit içeriğinin sağ tarafına yapışması için resmi sağa kaydırın ve maksimum %100’lük bir yükseklik verin (hangi yükseklikte olursa olsun aynı şekilde büyümesini/küçülmesini sağlayan akıllıca bir numara )
• Dikkat! Sağlanan kural kümelerinde iki hata var. Bildiğiniz herhangi bir tekniği kullanarak, bunları takip edin ve devam etmeden önce düzeltin.

Yazmanız gereken yeni kural kümeleri:

• Hem kart üst bilgisini hem de kart alt bilgisini hedefleyen, her ikisine de hesaplanmış toplam 50 piksel yükseklik veren bir kural seti yazın (içerik yüksekliği 30 piksel ve her tarafta 10 piksel dolgu). Ancak bunu em ile ifade edin.
• Tarayıcı tarafından <h2> ve <p> öğelerine uygulanan varsayılan kenar boşluğu tasarımımıza müdahale edecektir, bu nedenle tüm bu öğeleri hedefleyen ve kenar boşluklarını 0’a ayarlayan bir kural yazın.
• Görüntünün ana kartvizit içeriğinden (<article> öğesi) dışarı taşmasını önlemek için ona belirli bir yükseklik vermemiz gerekir. <article> yüksekliğini 120 piksel olarak ayarlayın. Ayrıca, arka plan rengine yarı saydam siyah vererek, arka plan kırmızı renginin de biraz parlamasını sağlayan biraz daha koyu bir gölge elde edin.
• <h2> yazı boyutunu 20 piksele ayarlayın. Ayrıca başlığın içerik kutusunun ortasında kalması için uygun bir satır yüksekliği veren kural kümesi yazın. Daha önce içerik kutusunun yüksekliğinin 30 piksel olması gerektiğini hatırlayın – bu size satır yüksekliğini hesaplamak için ihtiyacınız olan tüm sayıları verir.
• Altbilginin içine 15 piksellik bir <p> kuralı tanımlayın. Altbilginin içerik kutusunun ortasına yerleşmesi için uygun bir satır yüksekliği veren kural kümesi yazın. Daha önce içerik kutusunun yüksekliğinin 30 piksel olması gerektiğini hatırlayın – bu size satır yüksekliğini hesaplamak için ihtiyacınız olan tüm sayıları verir.
• Son küçük bir dokunuş olarak, <article> sol kenarı <h2> ve alt bilgi paragrafıyla aynı hizada olacak şekilde paragrafın içine uygun bir dolgu değeri verin ve okunması kolay olacak şekilde rengini oldukça açık bir tona ayarlayın.

Düşünülmesi gereken diğer şeyler:

• CSS’nizi maksimum okunabilirlik için yazarsanız, her satırda ayrı bir bildirimle bonus puan alırsınız.

İpuçları ve püf noktaları

• CSS’yi HTML’nize uygulamak dışında HTML’yi hiçbir şekilde düzenlemeniz gerekmez.

Örnek

Aşağıdaki ekran görüntüsü, bitmiş tasarımın nasıl görünmesi gerektiğine dair bir örnek göstermektedir: