Tasarım Kodlama

CSS Sözde Elementler (CSS pseudo-elements)

CSS web uygulamalarının sunumunu tanımlamak için kullanılan bağımsız bir dildir. Bu, renkler, yazı tipleri ve HTML öğelerinin düzeninin tam denetimi gibi kavramları içerir.

  • Bu, bu web uygulamalarının sunulduğu farklı ekranlara kadar uzanır (mobil cihazlar, tabletler, hatta yazıcılar)
  • CSS, herhangi bir XML merkezli biçimlendirme diliyle birlikte de kullanılabilir
  • Yalnızca HTML, içeriği ve yapıyı denetleme gücünün yarısını sağlar. Kalan yarısı görünüm ve his için ayrılmıştır ve stilin kullanışlı olduğu yer burasıdır.
  • Bu yazıda, basamaklı stil sayfalarındaki sözde öğelerle ve bunların uyumlulukla birlikte nasıl kullanıldığına dair pratik örneklerle tanışacaksınız.

CSS’deki sözde öğeler nelerdir?

CSS sözde öğesi, seçilen HTML öğesinin belirli bir bölümünü stilize etmenize olanak tanıyan bir CSS seçicisine eklenen bir anahtar kelimedir. CSS3’te, sözde sınıflardan ayırt etmek için genellikle iki nokta üst üste ile gösterilirler – örneğin, ::first-line Buna karşılık, CSS2 sözdizimi bir iki nokta üst üste kullanır (örneğin, :first-line). CSS2 ile hangi sözde elemanları kullanabileceğinizi belirttim.

Sözde öğeler sözdizimi

CSS sözde öğelerinin genel sözdizimi şöyle görünür:

Normal stil ifadeleri gibi görünür, ancak stil oluşturmak istediğiniz seçicide bulunan öğelerin belirli bir bölümünü belirtmek için iki nokta üst üste işareti vardır.

CSS’deki sözde öğeler

Şu anda CSS’de yedi sözde öğe var. Bunlar:

  1. ::after
  2. ::before
  3. ::first-letter
  4. ::first-line
  5. ::marker
  6. ::placeholder
  7. ::selection

Başkaları da var, ancak yine de deneysel teknoloji olarak kabul ediliyorlar. Bu nedenle, bu yazıda ana yedi sözde öğeye odaklanılacaktır.

::after (:after)

::after seçili bir HTML öğesinin son alt öğesini temsil eden bir sözde öğe oluşturur. CSS içerik özelliği ile işbirliği içinde bu belirli öğeye stil eklemek için kullanılır. Sözdizimi şuna benzer:

Aşağıdaki kodu index.html dosyanıza kopyalayın:

CSS Sözde Elementler (CSS pseudo-elements) After
CSS Sözde Elementler (CSS pseudo-elements) After

::before (:before)

::before seçili bir HTML öğesinin ilk alt öğesini temsil eden bir sözde öğe oluşturur. Varsayılan olarak satır içidir ve CSS içerik özelliğiyle işbirliği içinde bu belirli öğeye stil eklemek için kullanılır.

Çıktı:

CSS Sözde Elementler (CSS pseudo-elements) Before
CSS Sözde Elementler (CSS pseudo-elements) Before

::first-letter (:first-letter)

::first-letter bir resim veya tablodan sonra gelmediği sürece, bir blok öğesinin ilk satırının ilk harfini temsil eden bir sözde öğe oluşturur.

Bununla birlikte, bir öğenin ilk harfinin fark edilmesinin zor olabileceğini anlamak önemlidir. Noktalama işaretleri gibi şeyler mantıksal olarak ilk harf olarak sayılabilir. Bazı dillerde, Felemenkçe’deki IJ gibi, her zaman birlikte büyük harfle yazılan digraflar vardır. Bu durumlarda, digrafın her iki harfi de ::first-letter sözde öğesi ile eşleştirilmelidir.

::before sözde öğesi content özelliğiyle birlikte ilk öğeyi de oluşturabilir, bu nedenle CSS’nizde hata ayıklarken bunları aklınızda bulundurun.

::first-letter (:first-letter)
::first-letter (:first-letter)

::first-line (:first-line)

::first-line bir blok öğesinin ilk satırını temsil eden bir sözde öğe oluşturur. İlk harf gibi, ilk satır da öğenin genişliği, belgenin genişliği ve öğenin yazı tipi boyutu gibi birkaç faktöre bağlıdır.

::first-line (:first-line)
::first-line (:first-line)

::marker

::marker sözde öğesi, tipik olarak bir madde işareti veya sayı içeren bir liste öğesinin işaret kutusunu seçer. Liste öğelerinde ve özet öğesinde kullanılır.

::marker
::marker

::placeholder

::placeholder sözde öğesi, sununuzdaki, çoğunlukla formlarda bulunan girdi öğelerinin yer tutucusuna işaret eder. Çoğu tarayıcı varsayılan olarak yer tutuculara açık gri renk uygular.

::placeholder
::placeholder

::selection

::selection sözde öğesi, DOM’da vurgulanan öğeler için geçerlidir. Bu benim en sevdiğim sözde unsurlardan biridir.

::selection
::selection

::selection sözde öğesinde kullanılabilecek birkaç özellik vardır: colorbackground-colorcursorcaret-coloroutlinetext-decorationtext-emphasis-color, ve text-shadow

Diğer CSS Dersleri için buradaki bağlantıya tıklayın.

1 yorum