Alıştırma - Seçiciler

Tamamlandı

Önceki alıştırmada, html ve h1 gibi öğelere stil uyguladınız. Stil uygularken sık sık biraz daha dar olmanız gerekir.

Bu alıştırmada, sayfadaki sosyal medya ve deneyim bölümlerinin ve bağlantılarının stilini ayarlarsınız.

Sınıflara ve kimliklere stil uygulama

Sosyal medya ve deneyim bölümlerinin stilini ayarlayarak başlarsınız.

1. Önceki alıştırmada kullandığınız vscode.dev penceresine dönün.

2. index.htmliçinde, 10. satırda section kimliğine sahip öğeye dikkat edin; rengi maviye ayarlamak için bu bölüme stil uygularsınız.

3. style.css sonuna, sosyal medya öğesinin rengini ayarlamak için aşağıdaki CSS'yi ekleyin:

   #social-media {
       color: blue;
   }
   

4. Sayfa güncellenir ve sosyal medya bölümündeki içerik mavi olarak ayarlanır.

5. index.htmliçinde, sınıf deneyimi ile 28 ve 32. satırlardaki iki bölüme dikkat edin; Yazı tipini italik hale getirmek için bu bölümlere stil uygularsınız.

6. style.css sonunda, deneyim sınıfına sahip öğelerin yazı tipini değiştirmek için aşağıdaki CSS'yi ekleyin:

   .experience {
       font-style: italic;
   }
   

7. Sayfa, deneyim içindeki yazı tipini italik olarak ayarlayarak güncellenir.

Bağlantı stilini ayarlamak için sözde sınıfları kullanma

Birçok web geliştiricisi sayfadaki köprülerin rengini ve stilini değiştirir. Bağlantıların rengini yeşil olacak şekilde ayarlar ve bir kullanıcı imleci üzerlerine getirdiğinde bağlantıları vurgularsınız.

1. style.css sonuna, bağlantıları her zaman yeşil olacak şekilde ayarlamak için aşağıdaki CSS'yi ekleyin:

   a:visited {
       color: green;
   }
   
   a:link {
       color: green;
   }
   

2. Sayfa, bağlantıları yeşil olarak gösterecek şekilde güncelleştirilir.

3. Üzerine gelinirken bağlantıları vurgulamak için style.css sonuna aşağıdaki CSS'yi ekleyin:

   a:hover {
       background-color: yellow;
   }
   

4. Sayfadaki bağlantıların üzerine gelin ve bağlantıların vurgulandığına dikkat edin.

İnceleme

Aşağıdaki ekran görüntüsünde, uyguladığınız CSS'nin sonuçları gösterilmektedir. Belirli öğelere ve mantıksal öğe gruplarına stil uygulamak için sınıfları, kimlikleri ve sahte sınıfları kullandınız.