- 14 Tem 2013
- 1,402
- 0
Merhaba arkadaşlar.Bugün CSS'te text ve font özelliklerinden bahsedeceğim.Dersin en sonundada size özelliklerin listesini vereceğim.Ancak bundan önce Türkçe karakter sorunu yaşamamanız için kullanabileceğiniz charsetleri belirticem.Aşağıdaki 3 charset ile türkçe karakter sorunun aşabilirsiniz.
<**** http-equiv=content-type content=text/html;charset=iso-8859-9>
<**** http-equiv=content-type content=text/html;charset=windows-1254>
<**** http-equiv=content-type content=text/html;charset=x-mac-turkish>
İlk Örneğimizle başlayalım.
<div class="alticizili">
<p id="kirmizi">Bu Yazının Altı Çizilidir ve Sarı Renklidir.</p>
<p id="yesil">Bu Yazının Altı Çizilidir ve Yeşil Renklidir.</p>
<p id="mavi">Bu Yazının Altı Çizilidir ve Mavi Renklidir.</p>
</div>
<div class="üstücizili">
<p id="siyah">Bu Yazının Üstü Çizilidir ve Siyah Renklidir.</p>
<p id="gri">Bu Yazının Üstü Çizilidir ve Gri Renklidir.</p>
<p id="kahverengi">Bu Yazının Üstü Çizilidir ve Kahverengi Renklidir.</p>
</div>
Html body etiketlerimiz arasına yukarıdaki kodumuzu yapıştırıyoruz.Kodu incelersek 2 tane class oluşturduk.1. classımız altı çizili yazılar için 2. class'ımız ise yazının ortasından çizili(üstü çizili) yazılar için.Şimdi Css ile kodlamaya başlıyalım.
.alticizili
{
font-family:Tahoma, Geneva, sans-serif;
/* Yazı Tipimiz.Bilgisayarda tahoma varsa onu,yoksa geneva,oda yoksa sans-serif'i kullan. */
font-size:36px;
/* Yazımızın büyüklüğü */
text-decoration:underline;
/*Altı çizili olmasını istediğimiz için text-decoration:underline; dedik */
}
.alticizili #kirmizi
{
color:red;
*/altıcizili class'ında kirmizi ID'sine sahip yazıya kırmızı renk verdik. */
}
.alticizili #yesil
{
color:green;
*/altıcizili class'ında yesil ID'sine sahip yazıya yesil renk verdik. */
}
.alticizili #mavi
{
color:blue;
*/altıcizili class'ında mavi ID'sine sahip yazıya mavi renk verdik. */
}
.üstücizili
{
font-family:Tahoma, Geneva, sans-serif;
font-size:36px;
text-decoration:line-through;
*/üstücizili yazılarımızı için üstücizili class'ımızı şekillendirmeye başladık.Bu üstü çizili olabilmesi için sefer text-decoration:line-through; dedik.*/
}
.üstücizili #siyah
{
color:black;
/* üstücizili classımız içindeki ID değeri siyah olan yazıya siyah renk verdik. */
}
.üstücizili #gri
{
color:gray;
/* üstücizili classımız içindeki ID değeri gri olan yazıya gri renk verdik. */
}
.üstücizili #kahverengi
{
color:brown;
/* üstücizili classımız içindeki ID değeri kahverengi olan yazıya kahverengi renk verdik. */
}
Ekran Çıktımız:
Gördüğünüz gibi basit bir şekilde classlarımızı ve idlerimizi tanımlayıp yaptık.Basit bir örnek oldu ancak sıklıkla kullanacağınız için sıkıntı çekmeyeceğinizi düşünüyorum ve yardımcı olması amacıyla özellik listesini veriyorum.
Font Özellikleri
font-family:Yazı türünü belirler.
font-style:Yazının normal veya sağa eğik olmasını sağlar.
font-variant:Yazının normal veya tümünün büyük harflerden oluşmuş olmasını sağlar.
font-weight:Yazının kalınlık-inceliğini belirler.
font-size:Yazının büyüklüğünü belirler.
Text Özellikleri
word-spacing : Kelimeler arasında bırakılacak boşluğu boşluğu belirler.
letter-spacing : Harfler arasında bırakılacak boşluğu boşluğu belirler.
text-decoration : Kelimenin altının , üstünün vs. çizili olup olmayacağını belirler.
underline : Kelimenin altının (Satır altından) çizili olmasını sağlar.
overline : Kelimenin üstünün (Satır üstünden) çizili olmasını sağlar.
line-through : Kelimenin ortasından çizili olmasını sağlar.
blink : Kelimenin yanıp sönmesini sağlar.(Netscape için)
vertical-align : Metnin yatay olarak nasıl hizalanacağını belirler.
text-transform: Kelimelerin büyük harf veya küçük harflerden oluşmasını sağlar.
capitalize : Kelimelerin ilk harflerinin büyük olmasını sağlar.
uppercase : Kelimelerin bütün harflerinin büyük olmasını sağlar.
lowercase : Kelimelerin bütün harflerinin küçük olmasını sağlar.
none : Kelimelerin orjinal metindeki gibi olmasını sağlar.
text-align: Metnin dikey olarak nasıl hizalanacağını belirler.
left : Metni sola yaslar.
right : Metni sağa yaslar.
center : Metni ortalar.
justify : Metni iki yana yaslar.
text-indent : Metnin ilk satırının soldan ne kadar içerden başlayacağını belirler.
line-height : Satırın yüksekliğini ayarlar.(Yüksek değer verildiğinde satırlar arasındaki boşluk artar.)
first-line : Metnin ilk satırının biçimlendirilmesini sağlar.
first-letter : Metnin ilk harfinin biçimlendirilmesini sağlar.
xMaterdom
<**** http-equiv=content-type content=text/html;charset=iso-8859-9>
<**** http-equiv=content-type content=text/html;charset=windows-1254>
<**** http-equiv=content-type content=text/html;charset=x-mac-turkish>
İlk Örneğimizle başlayalım.
<div class="alticizili">
<p id="kirmizi">Bu Yazının Altı Çizilidir ve Sarı Renklidir.</p>
<p id="yesil">Bu Yazının Altı Çizilidir ve Yeşil Renklidir.</p>
<p id="mavi">Bu Yazının Altı Çizilidir ve Mavi Renklidir.</p>
</div>
<div class="üstücizili">
<p id="siyah">Bu Yazının Üstü Çizilidir ve Siyah Renklidir.</p>
<p id="gri">Bu Yazının Üstü Çizilidir ve Gri Renklidir.</p>
<p id="kahverengi">Bu Yazının Üstü Çizilidir ve Kahverengi Renklidir.</p>
</div>
Html body etiketlerimiz arasına yukarıdaki kodumuzu yapıştırıyoruz.Kodu incelersek 2 tane class oluşturduk.1. classımız altı çizili yazılar için 2. class'ımız ise yazının ortasından çizili(üstü çizili) yazılar için.Şimdi Css ile kodlamaya başlıyalım.
.alticizili
{
font-family:Tahoma, Geneva, sans-serif;
/* Yazı Tipimiz.Bilgisayarda tahoma varsa onu,yoksa geneva,oda yoksa sans-serif'i kullan. */
font-size:36px;
/* Yazımızın büyüklüğü */
text-decoration:underline;
/*Altı çizili olmasını istediğimiz için text-decoration:underline; dedik */
}
.alticizili #kirmizi
{
color:red;
*/altıcizili class'ında kirmizi ID'sine sahip yazıya kırmızı renk verdik. */
}
.alticizili #yesil
{
color:green;
*/altıcizili class'ında yesil ID'sine sahip yazıya yesil renk verdik. */
}
.alticizili #mavi
{
color:blue;
*/altıcizili class'ında mavi ID'sine sahip yazıya mavi renk verdik. */
}
.üstücizili
{
font-family:Tahoma, Geneva, sans-serif;
font-size:36px;
text-decoration:line-through;
*/üstücizili yazılarımızı için üstücizili class'ımızı şekillendirmeye başladık.Bu üstü çizili olabilmesi için sefer text-decoration:line-through; dedik.*/
}
.üstücizili #siyah
{
color:black;
/* üstücizili classımız içindeki ID değeri siyah olan yazıya siyah renk verdik. */
}
.üstücizili #gri
{
color:gray;
/* üstücizili classımız içindeki ID değeri gri olan yazıya gri renk verdik. */
}
.üstücizili #kahverengi
{
color:brown;
/* üstücizili classımız içindeki ID değeri kahverengi olan yazıya kahverengi renk verdik. */
}
Ekran Çıktımız:
Gördüğünüz gibi basit bir şekilde classlarımızı ve idlerimizi tanımlayıp yaptık.Basit bir örnek oldu ancak sıklıkla kullanacağınız için sıkıntı çekmeyeceğinizi düşünüyorum ve yardımcı olması amacıyla özellik listesini veriyorum.
Font Özellikleri
font-family:Yazı türünü belirler.
font-style:Yazının normal veya sağa eğik olmasını sağlar.
font-variant:Yazının normal veya tümünün büyük harflerden oluşmuş olmasını sağlar.
font-weight:Yazının kalınlık-inceliğini belirler.
font-size:Yazının büyüklüğünü belirler.
Text Özellikleri
word-spacing : Kelimeler arasında bırakılacak boşluğu boşluğu belirler.
letter-spacing : Harfler arasında bırakılacak boşluğu boşluğu belirler.
text-decoration : Kelimenin altının , üstünün vs. çizili olup olmayacağını belirler.
underline : Kelimenin altının (Satır altından) çizili olmasını sağlar.
overline : Kelimenin üstünün (Satır üstünden) çizili olmasını sağlar.
line-through : Kelimenin ortasından çizili olmasını sağlar.
blink : Kelimenin yanıp sönmesini sağlar.(Netscape için)
vertical-align : Metnin yatay olarak nasıl hizalanacağını belirler.
text-transform: Kelimelerin büyük harf veya küçük harflerden oluşmasını sağlar.
capitalize : Kelimelerin ilk harflerinin büyük olmasını sağlar.
uppercase : Kelimelerin bütün harflerinin büyük olmasını sağlar.
lowercase : Kelimelerin bütün harflerinin küçük olmasını sağlar.
none : Kelimelerin orjinal metindeki gibi olmasını sağlar.
text-align: Metnin dikey olarak nasıl hizalanacağını belirler.
left : Metni sola yaslar.
right : Metni sağa yaslar.
center : Metni ortalar.
justify : Metni iki yana yaslar.
text-indent : Metnin ilk satırının soldan ne kadar içerden başlayacağını belirler.
line-height : Satırın yüksekliğini ayarlar.(Yüksek değer verildiğinde satırlar arasındaki boşluk artar.)
first-line : Metnin ilk satırının biçimlendirilmesini sağlar.
first-letter : Metnin ilk harfinin biçimlendirilmesini sağlar.
xMaterdom
Son düzenleme:
