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>
UstaDerslik
