CSS Ders-28 içerik Girme - Content
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

CSS Ders-28 içerik Girme - Content

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(1713)
RAPOR ET
Css eğitim serimize devam ediyoruz.Bu derste content methodunu işliyeceğiz.Content içerik girmemizi sağlayan bir method.Geçen derste before ve afterı anlattım.Onlarla başa ve sona içerik girmemizi sağlıyordu.Bu derste nasıl içerikler girmemizi sağlıyor ona bakacağız.Content methodu before ve after kullanılmadan işe yaramaz bunu söyleyerek başlatalım.

1-Metin


Normal metin girmemizi sağlıyor.
content:"metin";

en temel halidir bu.

2-Parametre


Seçtiğimiz objenin her hangi bir parametresini içerik olarak atamamıza sağlıyor.
a:after{content:attr(name);}

Buşekilde a tagının namesini alarak içerik olarak atadıık.

3-İndex


css counter-increment methodu ile saydaki bir çok objenin index numarasını alıp içerik olarak atayabiliriz.İndex numarası bilmeyenler için anlatayım.Sayfada benzer olan nesnelerin ilk eklenende son eklenene kadar bir numara veriyor.Bu numaraya index diyoruz.
.metin{counter-increment:index;}
.metin:before{content:counter(index);}

Yukarıda ilk önce indexi alıp sonra o numarayı başlarına ekledik.

4-Tırnak


Seçtiğimiz objenin başına ve sonuna tırnak eklememizi sağlıyır.Content methoduna open-quote dersek açılmış tırnak close-quote atarsak kapanmış tırnak atar.
.tirnak:before{content:open-quote;}
.tirnak:after{content:close-quote;}


5-Url


Seçtiğimiz objenin başına ve sonuna istediğimiz bir resmi girmek için kullanırız.
.resim:after{content:url(link);}

Bu şekilde linki yazarak direk resmi ekleriz.

Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<style type="text/css">

div:after{content:"dir...";color:red;}

a:after{content:attr(name);}

.metin{counter-increment:index;}
.metin:before{content:counter(index)"-";font-weight:bold;}

.tirnak:before{content:open-quote;font-size:30px;}
.tirnak:after{content:close-quote;font-size:30px;}

.resim:after{content:url(http://ustaderslik.com/resim/icon.png);}
.resim:before{content:url(http://ustaderslik.com/resim/icon.png);}
</style>
</head>
<body>

<div>Burası Metin</div>
<a href="#" name="ustaderslik"></a> <br /><br />

<span class="metin">Metin</span><br />
<span class="metin">Metin</span><br />
<span class="metin">Metin</span><br />
<span class="metin">Metin</span><br />
<span class="metin">Metin</span> <br />

<div class="tirnak">Tırnaklarla kapanacak burası.</div>

<div class="resim">Resim eklenecek başa sona.</div>

</body>
</html>




uzman13
uzman13 3 Yıl Önce Cevaplandı
güzel paylaşım



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol