CSS'de Yazı Kalınlık, Adres, Link Eklemek

Bu yazımda, makalelerimizin veya yazılarımızın kalın olmasını istiyorsak ve belirledigimiz kelimerei Kalınlık,Adres,link vermek istersek nasıl kodlama yapacagımızı ele aldım.

Bu yazımda, makalelerimizin veya yazılarımızın kalın olmasını istiyorsak ve belirledigimiz kelimerei Kalınlık,Adres,link vermek istersek nasıl kodlama yapacagımızı ele aldım.

Yazı tipinin kalınlık incelik durumunu belirler. 100(ince)-900(kalın)
arasında bir deger alabildigi gibi kalın(bold), çok kalın(bolder) ve normal değerlerini de alır.

Makale sitelerinde önemli olan kısımların içeriğini vurgulamak değimiylede bilenen insanların dikkatini çekmesini sağlamak için makale içerisinde belirlediğimiz içerik yazıların kalın olmasını isteriz.İstegimizi Css aşağıdaki örnekteki kodlamalarla karşılamaktadır.

Örneğin;


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"

/>

<title>Yazıtipi(font) Özellikleri</title>

<style type="text/css">

p{

font-weight: bolder;

}

</style>

</head>

<body>

<p>Heralde çoğumuz dilenciye para vermişiz yada çalışsın kardeşim demiş yahut acaba gerçek dilenci mi diye düşünmüşüzdür. Ancak aşağıdaki mısralar bir dilencinin ağzından bize aktarılmış gibi görünsede asıl mesele toplumda yardıma muhtaç kimselere nasıl yardım edeceğimiz ve paylaşacağımız fikrinin vurgulanmasıdır.</p>

</body>



Örnek Çıktı:

Heralde çoğumuz dilenciye para vermişiz yada çalışsın kardeşim demiş yahut acaba gerçek dilenci mi diye düşünmüşüzdür. Ancak aşağıdaki mısralar bir dilencinin ağzından bize aktarılmış gibi görünsede asıl mesele toplumda yardıma muhtaç kimselere nasıl yardım edeceğimiz ve paylaşacağımız fikrinin vurgulanmasıdır.


Makalelerimizde belirli içeriklerin kalınlaştırmak:

Örneğin;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"

/>

<title>Yazıtipi(font) Özellikleri</title>

<style type="text/css">

.kalin {

    font-weight: bold;

}

</style>

</head>

<body>

Heralde çoğumuz dilenciye para vermişiz yada çalışsın kardeşim demiş yahut acaba gerçek dilenci mi diye <span class="kalin">düşünmüşüzdür</span>. Ancak aşağıdaki <span class="kalin">mısralar</span> bir dilencinin ağzından bize aktarılmış gibi görünsede asıl mesele toplumda <span class="kalin">yardıma</span> muhtaç kimselere nasıl yardım edeceğimiz ve paylaşacağımız fikrinin vurgulanmasıdır.

</body>


Çıktı:

Heralde çoğumuz dilenciye para vermişiz yada çalışsın kardeşim demiş yahut acaba gerçek dilenci mi diye düşünmüşüzdür. Ancak aşağıdaki mısralar bir dilencinin ağzından bize aktarılmış gibi görünsede asıl mesele toplumda yardıma muhtaç kimselere nasıl yardım edeceğimiz ve paylaşacağımız fikrinin vurgulanmasıdır.


Kod:

<style type="text/css">

.kalin {

    font-weight: bold;

}

</style>

<span class="kalin">yardıma</span> // Kelime



Not:

<span>

etiketi, isteğe bağlı verilerin gösterilmesi için yapısal ve görsel bir katman oluşturulmasını sağlar. SPAN, DIV etiketinden farklı olarak bir satır içi (inline) element olduğu için metnin içinde kullanılması durumunda ilgili metni kesmez.


<span>

elementi ilk anda herhangi bir görsel özelliğe sahip olmadığı için Style ve/veya CSS özelliklerinin ayrıca belirtilmesi gerekir.

Kalınlaştırılan Kelimelere Adres,Link Vermek:

Makelmizde ayrı bir özellik katmak için örneğin;makelmizdeki örnekteki gibi seçtiğimiz kelimlerimizin kalınlaştırdık vede kalınlaştırdığımız kelimelere adres,link vermek istersek aşağıdaki şekilde verebiliriz.

Örneğin:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"

/>

<title>Yazıtipi(font) Özellikleri</title>

<style type="text/css">

.kalin {

    font-weight: bold;

}

</style>

</head>

<body>

Heralde çoğumuz dilenciye para vermişiz yada çalışsın kardeşim demiş yahut acaba gerçek dilenci mi diye <span class="kalin"><a href="www.sanalkurs.net">düşünmüşüzdür</a></span>. Ancak aşağıdaki <span class="kalin"><a href="www.sanalkurs.net">mısralar</a></span> bir dilencinin ağzından bize aktarılmış gibi görünsede asıl mesele toplumda <span class="kalin"><a href="www.sanalkurs.net">yardıma</a></span> muhtaç kimselere nasıl yardım edeceğimiz ve paylaşacağımız fikrinin vurgulanmasıdır.

</body>



Çıktı:
Heralde çoğumuz dilenciye para vermişiz yada çalışsın kardeşim demiş yahut acaba gerçek dilenci mi diye düşünmüşüzdür. Ancak aşağıdaki mısralar bir dilencinin ağzından bize aktarılmış gibi görünsede asıl mesele toplumda yardıma muhtaç kimselere nasıl yardım edeceğimiz ve paylaşacağımız fikrinin vurgulanmasıdır.

Kod:

<span class="kalin"><a href="www.sanalkurs.net">mısralar</a></span>



Bu özellik size kaynak sayfayı kaynaktır ifadelerini alanda yer vemenizi önler.
  • Etiketler;
Zafer Başpınar
Zafer BAŞPINAR Web hizmetleri alanına 2000 yıllarında başlayarak web hizmetleri alanında eğitim ve öğretim hayatına katarak gelişmekte olan web hizmetleri teknolojisine ayak uydurmaya gayret göstermektedir. Şuan ki durumu eğitim ve öğretim hayatına yurt dışında lisans olarak devam etmektedir.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git