Griffin Premium
web tasarımı, css color özelliği, css dersleri, css örnekleri, css yazı biçimlendirme
html sayfalarına eklenilen metinlere CSS kullanarak biçimlendirme uygulanabilir. Bu yazımızda CSS ile sayfalarınıza eklediğiniz metinlere ne tür biçimler verebileceğinizi göreceksiniz.
color:
“color” özelliği kullanılarak sayfalarınıza eklediğiniz yazıları renklendirebilirsiniz. Bir sayfanın varsayılan metin rengini değiştirmek için color özelliği body etiketine uygulanmalıdır. Aşağıdaki örnekte sayfaya eklenmiş olan başlık ve paragrafın renklendirilmesini göreceksiniz.
Kodlar:
text-align :
Sayfaya eklenen metnin yatayda hizalanması amacıyla kullanılır. text-align özelliği aşağıdaki değerleri alabilir.
html sayfalarına eklenilen metinlere CSS kullanarak biçimlendirme uygulanabilir. Bu yazımızda CSS ile sayfalarınıza eklediğiniz metinlere ne tür biçimler verebileceğinizi göreceksiniz.
color:
“color” özelliği kullanılarak sayfalarınıza eklediğiniz yazıları renklendirebilirsiniz. Bir sayfanın varsayılan metin rengini değiştirmek için color özelliği body etiketine uygulanmalıdır. Aşağıdaki örnekte sayfaya eklenmiş olan başlık ve paragrafın renklendirilmesini göreceksiniz.
Kodlar:
CSS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>memoryhackers.org</title>
<style>
h1{
color: red;
}
p{
color: blue
}
</style>
</head>
<body>
<h1>CSS ile Metni Renklendirme</h1>
<p>color Özelliği metne rengini vermek için kullanılır. Bu özellik bir renk değeri kabul eder. Birçok farklı formatta, onaltılık değerleri ve RGB, RGBa, HSL ve HSLa değerlerini içerir. En fazla kontrolü en az çaba sarf ettikleri için onaltılık değerler en yaygın olanlardır.</p>
</body>
</html>text-align :
Sayfaya eklenen metnin yatayda hizalanması amacıyla kullanılır. text-align özelliği aşağıdaki değerleri alabilir.
- center : Ortala
- left : Sola hizala
- right : Sağa hizala
- justify : Her iki yana yasla
- inherit : Üst kapsayıcıdan devral.
Aşağıdaki örnekte sayfaya eklenen dört paragrafa yukarıdaki özelliklerin uygulanması görülmektedir.
Kodlar:
Kodlar:
CSS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>memoryhackers.org</title>
<style>
#p1{
text-align: center;
color: rebeccapurple;
}
#p2{
text-align: left;
color: red;
}
#p3{
text-align: right;
color: royalblue;
}
#p4{
text-align: justify;
}
</style>
</head>
<body>
<p id="p1">Bu metin ortalanmıştır.</p>
<p id="p2">Bu metin sola hizalanmıştır.</p>
<p id="p3">Bu metin sağa hizalanmıştır.</p>
<p id="p4">Bu metin iki yana yaslanmıştır. memoryhackers.org. Bu metin iki yana yaslanmıştır. memoryhackers.org. Bu metin iki yana yaslanmıştır. memoryhackers.org. Bu metin iki yana yaslanmıştır. memoryhackers.org. Bu metin iki yana yaslanmıştır. memoryhackers.org. Bu metin iki yana yaslanmıştır. memoryhackers.org. Bu metin iki yana yaslanmıştır. memoryhackers.org. Bu metin iki yana yaslanmıştır. memoryhackers.org. Bu metin iki yana yaslanmıştır. memoryhackers.org. Bu metin iki yana yaslanmıştır. memoryhackers.org. Bu metin iki yana yaslanmıştır. memoryhackers.org. Bu metin iki yana yaslanmıştır. memoryhackers.org. </p>
</body>
</html>
Ekli dosyalar
Son düzenleme:
