İçindekilerGirişİndex
YukarıİlkÖncekiSonrakiSon
Geriİleri
Yazdır

CSS'de Text ve Font

Text'i Biçimlendirme

Css'de bir text'in rengini değiştirmek için color property'si kullanılır.

p{
	color:red;
} 

Bir text'i bir elemanın içinde (table,box vs..) nereye koyacağımızı text-align property'si belirler. Aşağıda div tag'inin içindeki yazı sola alınmaktadır

div{
	text-align:left;
} 

Yazının ilk satırının ne kadar içeride olması gerektiğini belirlemek için text-indent property'si kullanılır.

p{
	text-indent:5px;
} 

Bazı yazıların altı çizgili, bazı yazıların üstü çizgili gibi yazılara bazı decoration'lar verilebilir. bunun için text-decoration kullanılır. Örneğin link'lerdeki alt çizgi şu şekilde kaldırılabilir.

a{
	text-decoration:none;
} 

text-decoration tipleri none,underline,overline,blink(yanıp sönme),line-through'dur.

harfler arasındaki boşluk letter-spacing, kelimeler arasındaki boşluk ise word-spacing property'si ile sağlanır.

p{
	letter-spacing:0.1em;
	word-spacing:1em; 
} 

Text'in Font'nu Değiştirme

CSS'de font'un tipi font-family ile belirlenir. Font-style ile italik veya oblique yapılabilir. Font-weight ile bold yapılabilir. Bu propery ile bold'luğun derecesi verilebilir. Font-size ile yazının boyu ayarlanır. Aşağıdaki örnekte tüm bu özellikler kullanılmaktadır.

Göster Gizle Kopar Satır Gizle Satır Göster
  1 <html>
  2 	<head>
  3 		<style>			
  4 			h1,h2,h3{
  5 				font-weight:bold;
  6 			}
  7 			p{
  8 				font-family:Times;
  9 				font-size:10pt;				
 10 			}
 11 			.warning{
 12 				font-style:italic;
 13 				font-size:8pt;
 14 				font-family:Arial;		
 15 			}
 16 		</style>
 17 	</head>
 18 	<body>
 19 		<h1>Css Kitabı</h1>
 20 		<p>bu kitap çok önelidir. İşe yarar. Kulnanması kolaydır</p>
 21 		<p class="warning">dikkat dikkat bu bir uyarıdır</p>
 22 	</body>
 23 </html>

Dosya Listesi

İçindekilerGirişİndex
YukarıİlkÖncekiSonrakiSon
Geriİleri
Yazdır