Merhaba, <span> </span> tagı tek başına <p> tagı ile kullanımlarda çok fazla işlevi olmamaktadır. Fakat span tagını JavaScript ve Jquery kütüphanesi ile onclick,ondblclick,onmousedown... vb fonksiyonlar ile kullanabilirsiniz. Eğer CSS için kullanacaksanız <p> tagını kullanmak sizin için daha kolay olacaktır.
İyi çalışmalar...
Span, arkadaşların dediği gibi inline(satır içi) elementtir. Sadece arasındaki veriyi ortamdan farklı kılmak için kullanılır. Örnek: Uzun yazılarda vurgu yapmak.
"SPAN" yerine "P" tagı kullanırsanız satır başı paragraf yapacaktır
(Özelleştirilmediği durumlarda).
Örnek olarak,"Lorem Ipsum, <span style="color:red;">dizgi</span> ve <span style="color:blue; font-size:16px;">baskı</span> endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı <span style="color:green; font-size:20px; font-weght:bold; background-color:#f00;">1500</span>'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır."
Ekran çıktısı,"Lorem Ipsum,
dizgi ve
baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı
1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır." şeklinde olacaktır.
Span sadece içerisindeki veri kadar alan tutar. Bu yüzden ortalayamamaktasınız. Bu elemente "width" verseniz dahi bu özelliği almayacaktır.
Eğer siz "SPAN" tagını özelleştirip(css) ortalamak isterseniz "display" özelliğini "block" veya "inline-block" yapmak zorundasınız.
Örnek olarak,"Lorem Ipsum, <span style="color:red; ">dizgi</span> ve <span style="color:blue; font-size:16px;">baskı</span> endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı <span style="color:green; font-size:20px; font-weght:bold; background-color:#f00; width:300px; text-align:center;">1500</span>'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır."
Ekran çıktısı,"Lorem Ipsum,
dizgi ve
baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı
1500
'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır."
Örnek olarak,"Lorem Ipsum, <span style="color:red; ">dizgi</span> ve <span style="color:blue; font-size:16px;">baskı</span> endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı <span style="color:green; font-size:20px; font-weght:bold; background-color:#f00; width:300px; display:inline-block; text-align:center;">1500</span>'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır."
Ekran çıktısı,"Lorem Ipsum,
dizgi ve
baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı
1500
'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır."
Düzeltme:
Ekran çıktılarını yazarken gerçeği ile özleşteştiremedim. Kodları deneyerek sonuca ulaşabilirsin.
İyi çalışmalar.