CSS Kartları

Kategori Sponsoru

CSS (Basamaklı Stil Sayfaları), Håkon Wium Lie tarafından oluşturulan, bir işaretleme dilinde yazılmış bir belgenin görünümünü ve biçimlendirmesini tanımlamak için kullanılan bir stil sayfası dilidir. World Wide Web'in kilit teknolojilerinden biridir ve belgenin sunumunu yapısından ayırmak için tasarlanmıştır. CSS, esnekliği ve güçlü stil özellikleri ile karakterizedir, sayfa öğelerinin düzeni, renkleri, yazı tipleri ve animasyonları üzerinde hassas kontrol sağlar. Bu dil, gelişmiş seçiciler ve özellikler sunar, geliştiricilere duyarlı, görsel açıdan çekici arayüzler oluşturmak için araçlar sağlar. CSS ayrıca stillerin modülerliğini ve yeniden kullanılabilirliğini destekler, performansı korur ve farklı tarayıcılar ve cihazlar arasında tutarlı tasarımlar oluşturulmasını sağlar.

Kart uygulamamız, CSS bilgisi gerektiren herhangi bir mülakata sizi etkili bir şekilde hazırlayacak kapsamlı cevaplarla dikkatle seçilmiş CSS mülakat sorularını içerir. IT Kartları sadece iş arayanlar için bir araç değildir - mevcut kariyer planlarınız ne olursa olsun bilginizi pekiştirmenin ve test etmenin harika bir yoludur. Uygulamayı düzenli kullanmak, en son CSS trendleriyle güncel kalmanıza ve becerilerinizi yüksek seviyede tutmanıza yardımcı olacaktır.

Uygulamamızdan örnek CSS kartları

Daha fazla ücretsiz kart almak için uygulamamızı App Store veya Google Play'den indirin veya tüm kartlara erişim için abone olun.

CSS'te sınıflar ve ID'ler arasındaki farklar nelerdir?

Sınıflar ve tanımlayıcılar, belirli HTML öğelerini stillendirmenizi sağlayan CSS araçlarıdır. Her iki seçim yöntemi neredeyse aynı olsa da, bazı farklılıklar vardır.

1. Eşsizlik: Sınıflar eşsiz değildir, bu demektir ki aynı sınıfları birçok farklı öğede kullanabilirsiniz. Diğer taraftan, tanımlayıcılar bir sayfada eşsizdir, bu demektir ki her tanımlayıcı bir sayfada sadece bir kez kullanılabilir.

2. Özgüllük: Tanımlayıcılar, sınıflara göre daha özgüldür. Bu, eğer stiller çakışıyorsa, tanımlayıcı stillerin sınıf stillerini geçerseyeceği anlamına gelir.

3. JavaScript Uygulaması: Tanımlayıcılar genellikle JavaScript kullanarak HTML öğelerini yönetmek için kullanılırken, sınıflar bu amaç için daha az kullanılır.

4. Ölçeklenebilirlik: Sınıf stilleri sayfadaki birçok öğe tarafından yeniden kullanılabilir. Tanımlayıcılar daha az esnektir ve genellikle çok belirli bölümleri stillendirmek için kullanılır.

Lütfen en iyi uygulamalardan birinin CSS stilleri için sınıfların ve JavaScript için tanımlayıcıların kullanılması olduğunu not edin.

Bir CSS stil sayfası HTML belgesine nasıl bağlanır?

Bir CSS stil sayfası, aşağıdaki yolların biriyle bir HTML belgesine eklenir:

1. **Satır içi stil:** Stiller, `style` özelliği kullanılarak doğrudan HTML öğelerine eklenir. Örnek:

<p style="color:red;">Bu metin kırmızıdır</p>

Bu yöntem nadiren kullanılır, genellikle "tek seferlik" stil değişiklikleri için.

2. **Dahili CSS:** Stiller, HTML belgesinin `<head>` bölümünde bulunan `<style>` etiketleri içinde dahil edilir. Örnek:

<head>
     <style>
       p { color: red; }
     </style>
   </head>

Bu yöntem, tek sayfalık HTML belgeleri için kullanışlıdır.

3. **Dış CSS:** CSS eklemek için en sık kullanılan yöntem. CSS sayfası ayrı bir dosyada (genellikle .css uzantılı) yazılır ve HTML belgesine `<head>` bölümünde bir link kullanılarak eklenir. Örnek:

<head>
     <link rel="stylesheet" type="text/css" href="styles.css">
   </head>

Bu yöntem en yaygın olarak kullanılır çünkü stil sayfalarının farklı HTML belgeleri arasında kolay güncelleme, bakım ve paylaşımına olanak sağlar.

CSS'te psödo-sınıflar nelerdir ve kullanımına bir örnek verin.

CSS'deki pseudo-sınıflar, belirli bir öğenin belirli bir durumunu tanımlayan seçicilere eklenen anahtar kelimelerdir. HTML öğelerinin stilini, yalnızca kodda doğrudan içerilen bilgilere dayanarak değil, aynı zamanda öğenin belirli bir bağlamı veya durumu üzerinde de sağlarlar.

Örneğin, :hover pseudo-sınıfı, bir elementin üzerine fare ile gelindiğinde görsel değişiklikler yapılabilmesini sağlar. Diğer kullanışlı pseudo-sınıflar arasında :active (element aktif veya tıklanıldığında), :visited (bir bağlantıyı ziyaret edildiğinde) veya :first-child (belirli bir elementin ilk çocuğunun stiller) bulunur.

Örnek kod, :hover pseudo-sınıfının, bir element üzerine fare ile gelindiğinde arka plan rengini değiştirmek için nasıl kullanılabileceğini gösterir:

button:hover {
  background-color: red;
}

Bu durumda, kullanıcı fare ile üzerine gelindiğinde düğmenin arka plan rengi kırmızıya döner. Böyle bir etkileşim, bir pseudo-sınıfın kullanımı olmadan mümkün olmazdı.

CSS'te öğelerin konumlandırılma yöntemleri nelerdir ve sınırlamaları nelerdir?

CSS'de, seçilebilecek birkaç farklı öğe konumlandırma yöntemi vardır:

1. Statik: Bu varsayılan ayarlardır, öğeler HTML yapısından belirlenen bir diğerinin ardından sıralanır. Öğenin konumu önemsizdir ve konum, üst, sağ, alt veya sol özelliklerin hiçbiri kullanılarak değiştirilemez. Sınırlama, öğenin yerleştirilmesi üzerinde kontrol eksikliğidir.

2. Göreceli: Bir öğenin konumunu orijinal konumuna göre değiştirmenize izin verir. Konum, üst, sağ, alt, sol özelliklere göre belirlenir, ancak diğer öğelerin düzenini etkilemez. Sınırlama, öğelerin basitçe kaydırılması ancak normal belge akışından çıkarılmasıdır.

3. Mutlak: Bir öğenin konumu, statik olarak konumlandırılmaktan farklı biçimde konumlandırılmış en yakındaki daha yüksek yapı öğesi ile ilişkilidir (göreceli, mutlak, sabit, yapışkan). Böyle bir öğe yoksa, konum belgeye göre belirlenir. Öğe, normal belge akışından çıkarılır ve diğer öğelerin düzenini etkilemez. Sınırlama, konumlandırma bağlamını kontrol etme ihtiyacıdır.

4. Sabit: Bir öğenin konumu, tarayıcı kenarlarına göre belirlenir. Sayfayı kaydırdığınızda bile böyle bir öğe taşınmaz. Normal belge akışından çıkarılır ve diğer öğelerin düzenini etkilemez. Sınırlama, sabit yerleştirilmiş bir öğenin diğer öğeleri perdeleme olasılığıdır.

5. Yapışkan: Bu, göreceli ve sabit konumlandırmanın bir kombinasyonudur. Öğe, en üst kenarı belirli bir yere (örneğin ekranın üst kenarına) ulaşana kadar statik olan gibi davranır, daha sonra öğe sabit konumlandırılmış gibi davranır. Sınırlama, tarayıcı desteğinin gerekli olmasıdır.