Css content nedir ? nasıl kullanılır ?

Merhaba arkadaşlar,

Öncelikle CSS2 de gelen bu kadar güzel bir konuyu bu kadar geç anlattığım için hepinizden özür dilerim.

Bu yazının başlığı IE7’yi öldürelim olmalıydı aslında çünki bu kadar güzel ve kullanım kolaylılığı sağlayan özelliği kullanmamıza tek engel İnternet Explorer 7’dir.

Contentin aldığı değerler:

1 -> none : ezmek için kullanılır,
2 -> normal : ezmek için kullanılır,
3 -> counter : sıralı elementlerin sıra numarasını veriyor (counter-increment özelliği desteğiyle),
4 -> attr : o elementin var olan veya bizim belirlediğimiz attr değerini veriyor.
5 -> open-quote, close-quote, no-open-quote, no-close-quote : Tırnak açmak kapatmak ve ezmek için kullanılır,

Örneklere geçelim;

Örnek 1

İki noktayı “:” content özelliği ile label’e veriyoruz.

“:”yı label:after {content : “:”;} ile ekledik ve “:”nın pozisyonunu float ile belirledik. Bunu label’a position:relative;  vererek ve “:” ya position:absolute; right:0px; top:0px diyede tanımlayabiliriz.

 

Örnek 2

Oluşturduğumuz bir link topluluğuna content ve counter-increment özellikleri ile numara veriyoruz.

 

Örnek 3

content : (string) özelliği yani content : “Metininiz” yazıyoruz ve o belirttiğimiz elementin başına belirttiğimiz metin geçiyor.

 

Örnek 4

open-quote ve close-quote özellikleri ile tırnak açıyoruz ve tırnak kapatıyoruz.

 

Örnek 5

content : attr(href) ile belirttiğimiz elementin href attribute’sini alıyoruz. Not : burada sadece href değil bizim oluşturduğumuz bir tagın da değerini alabiliriz.

 

Örnek 6

content : url(XX.png); ile belirttiğimiz elemente resim verdik.

 

Kaynak

w3scholls – > http://www.w3schools.com/cssref/pr_gen_content.asp
css-tricks.com – >  http://css-tricks.com/css-content/

“Css content nedir ? nasıl kullanılır ?” üzerine 5 yorum

  1. Aradan bu kadar zaman geçmesine rağmen hala güncel ve faydalı bir bilgi… Çok teşekkür ediyorum. 🙂

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir