HTML Stilleri
HTML Stilleri

See the Pen style by ArmyYazılım (@armyyazilim) on CodePen.

HTML Stili Özniteliği

Bir HTML öğesinin stilini ayarlamak, styleöznitelik ile yapılabilir .

HTML styleözelliği aşağıdaki sözdizimine sahiptir :

<etiketadı style="özellik:değer;">

Özellik CSS özelliktir. Değer CSS değerdir.

Bu eğitimde daha sonra CSS hakkında daha fazla bilgi edineceksiniz.

Arka plan rengi

CSS background-colorözelliği, bir HTML öğesinin arka plan rengini tanımlar.

Bu örnek, bir sayfanın arka plan rengini powderblue olarak ayarlar:

<body style="background-color:powderblue;">

<h1>Bu bir başlık</h1>
<p>Bu bir paragraf.</p>

</body>

Çıktısı;

See the Pen arkaplan by ArmyYazılım (@armyyazilim) on CodePen.

Metin Rengi

CSS colorözelliği, bir HTML öğesinin metin rengini tanımlar:

<h1 style="color:blue;">Bu bir başlık</h1>
<p style="color:red;">Bu bir paragraf.</p>

Çıktısı;

See the Pen color text by ArmyYazılım (@armyyazilim) on CodePen.

Yazı

CSS font-familyözelliği, bir HTML öğesi için kullanılacak fontu tanımlar:

<h1 style="font-family:verdana;">Bu bir başlık</h1>
<p style="font-family:courier;">Bu bir paragraf.</p>

Çıktısı;

See the Pen font-family by ArmyYazılım (@armyyazilim) on CodePen.

Yazı Boyutu

CSS font-sizeözelliği, bir HTML öğesinin metin boyutunu tanımlar:

<h1 style="font-size:300%;">Bu bir başlık</h1>
<p style="font-size:160%;">Bu bir paragraf.</p>

Çıktısı;

See the Pen font-size by ArmyYazılım (@armyyazilim) on CodePen.

Metin hizalama

CSS text-alignözelliği, bir HTML öğesinin yatay metin hizalamasını tanımlar:

<h1 style="text-align:center;">Ortalanmış Başlık</h1>
<p style="text-align:center;">ortalanmış paragraf.</p>

Çıktısı;

See the Pen center text by ArmyYazılım (@armyyazilim) on CodePen.

Bölüm özeti

styleHTML öğelerini stillendirmek için niteliği kullanın

background-color Arka plan rengi için kullan

color Metin renkleri için kullanın

font-family Metin yazı tipleri için kullanın

font-size Metin boyutları için kullanın

text-align Metin hizalaması için kullanın.

İlginizi çekebilir…

WordPress Kişisel Blog Temaları! (Ücretli – Ücretsiz)

Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter ve İnstagram‘da da bulabilirsiniz …

HTML

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir