Home-theater-designers
Sahte öğeler, CSS'de kullanılabilen daha gelişmiş seçicilerden biridir. Bu seçicilerin arkasındaki ana amaç, belirli bir web sayfasının temel yapısını oluşturmak için kullanılan HTML belgesini değiştirmeden benzersiz bir stil oluşturmaktır.
CSS'de sözde öğeleri nasıl kullanacağınız aşağıda açıklanmıştır.
wii'ye homebrew nasıl koyulur
Ortak Sözde öğeler
Bir web geliştiricisinin hayatını kolaylaştıracak geniş bir sözde öğeler listesi vardır. Bu sözde unsurlardan bazıları şunlardır:
- Önce
- Sonrasında
- zemin
- İlk satır
- İlk harf
Belirli durumlarda, bazı sözde öğelerin diğerlerinden daha uygun olduğu kanıtlanacaktır, ancak sabit kalan tek şey, herhangi bir sözde öğeyi kullanmak için genel yapıdır.
Sözde elemanlar Yapı Örneği
selector::pseudo-element{
/* css code */
} Bir HTML öğesini seçici olarak kullanabilmenize rağmen, mizanpajınızda istenmeyen öğeleri hedeflemekten kaçınmak için bir sınıf veya kimlik kullanmanız önerilir. İstenilen konumda eklemek istediğiniz eleman, stil veya veriler kaşlı ayraçlar arasına yerleştirilmelidir.
Önce ve sonra sözde öğeler listede en popüler olanlardır ve bunları kullanmanın birçok pratik yolu olduğu göz önüne alındığında, nedenini anlamak zor değil.
CSS'de Before Pseudo öğesinin kullanılması
İmkansız olmasa da, CSS'de görüntüleri okunabilir metinle kaplamak zordur. Bunun nedeni çoğunlukla görüntünün ve metnin bir web sayfasında aynı konumu işgal etmesidir.
nispeten kolaydır bir metin grubunun arka planına bir resim gönder , ancak bu görüntü çok parlak olduğunda, üstündeki metni bunaltma eğilimi gösterir. Bu durumlarda, sonraki adım, opacity özelliğini kullanarak görüntüyü daha az opak hale getirmeye çalışmaktır.
Tek sorun, resim ve metin aynı pozisyonda yer aldığından, metnin de biraz şeffaf hale gelmesidir.
Bu sorunu çözmenin birkaç etkili yolundan biri, önceki sözde öğeyi kullanmaktır.
Sözde öğeden Önce Örneği Kullanma
.landingPage{
/* Arranges the text on the image overlay */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
/*sets the page to adjust to different screen sizes*/
height: 100vh;
}
.landingPage::before{
content:'';
/*imports an image*/
background: url(https://source.unsplash.com/_1EYIHRG014/1600x900)
no-repeat center/cover;
/*places an overlay on top of the image*/
opacity: 0.4;
/*makes the image visible*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}Yukarıdaki kod, aşağıdaki HTML açılış Sayfası sınıfıyla birlikte kullanılmak üzere oluşturulmuştur. Yukarıdaki kodda gösterildiği gibi, Before sözde elemanını kullanarak, görüntü metinle birleştirilmeden önce görüntüyü hedefleyebilir ve opacity özelliğini kullanabiliriz.
This is the result of using the before pseudo-element
to overlay and image with readable text.
Bu, aşağıdaki resimde gösterildiği gibi, resmin üzerine bir kaplama yerleştirilmesine ve üstte net bir metnin görüntülenmesine neden olacaktır:
CSS'de After Pseudo öğesini kullanma
After sözde öğesinin pratik bir kullanımı, bir HTML formunun oluşturulmasına yardımcı olmaktır. Çoğu form, formun başarıyla gönderilmesi için veri gerektiren bir dizi alanla oluşturulur.
Formdaki bir alanın veri gerektirdiğini belirtmenin bir yolu, bu alanın etiketinden sonra bir yıldız işareti koymaktır. after sözde öğesi, bunu yapmanız için pratik bir yol sağlar.
Sözde öğeden sonra örneğini kullanma
.required::after{
content: '*';
color: red;
} Yukarıdaki kodu formunuzun CSS bölümüne eklemek, gerekli sınıfı içeren her etiketin ardından doğrudan kırmızı bir yıldız işaretinin gelmesini sağlayacaktır. After sözde öğesi bu örnekte de pratiktir çünkü stili yapıdan ayırmaya yardımcı olur (yazılım geliştirmede her zaman idealdir).
çevrimdışı ücretsiz android müzik dinlemek için uygulamalar
İçerik Özelliği
Yukarıdaki sözde eleman örneğinde gösterildiği gibi, içerik özelliği bir web sayfasına yeni içerik eklemek için kullanılan araçtır. Bu özellik yalnızca önceki ve sonraki sözde öğelerle birlikte kullanılır.
Content özelliğine beslenebilecek herhangi bir içerik olmasa bile (yukarıdaki önceki sözde öğe örneğinde olduğu gibi), yine de before veya after parametreleri içinde content özelliğini kullanmanız gerektiğini belirtmek önemlidir. amaçlandığı gibi çalışmalarını sağlamak için sözde öğe.
Artık Sözde Öğeleri CSS'de Kullanabilirsiniz
Bu makalede, CSS programlarınızda sözde öğeleri nasıl tanımlayacağınızı ve kullanacağınızı öğrendiniz. Önce ve sonra sözde öğelerle tanıştınız ve her ikisini de kullanmanın pratik yolları verildi. Ayrıca, önceki ve sonraki sözde öğelerin başarılı bir şekilde kullanılması için content özelliğinin neden gerekli olduğunu da görebildiniz.
Paylaş Paylaş Cıvıldamak E-posta 10 Dakikada Öğrenebileceğiniz 10 Basit CSS Kodu ÖrneğiCSS ile ilgili yardıma mı ihtiyacınız var? Başlamak için bu temel CSS kodu örneklerini deneyin, ardından bunları kendi web sayfalarınıza uygulayın.
Sonrakini Oku İlgili konular- Programlama
- Web Tasarım
- CSS
Kadeisha Kean, Full-Stack Yazılım Geliştirici ve Teknik/Teknoloji Yazarıdır. En karmaşık teknolojik kavramların bazılarını basitleştirme konusunda belirgin bir yeteneğe sahiptir; her teknoloji acemisinin kolayca anlayabileceği malzeme üretmek. Yazmak, ilginç yazılımlar geliştirmek ve dünyayı gezmek (belgeseller aracılığıyla) konusunda tutkulu.
Kadeisha Kean'dan Daha FazlaHaber bültenimize abone ol
Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!
Abone olmak için buraya tıklayın