Blackinci » CSS » CSS Text Yazı Özellikleri
Üye Paneli


Give Me Everything

CSS Hayat İşte Genel Photoshop MyBB Temalar Özgür Yazım

«    May 2012    »
PtSaÇrPrCuCtPz
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 


blackinci.com da bir forum sayfası olsun mu?
Evet Olsun
Hayır Olmasın
Kararsızım
Fikrim yok

admin paneli, ajax, background, css, CSS3, dle, F1, form, forum, giris paneli, gölge, gölgeli yazı, highslide, iphone, md, mybb, mybbdestek, novaboard, oval, Seri 5, seri2, tasarim, tema, transform, vbulletin, Yarış, özellik

Eylül 2010 (4)
Ağustos 2010 (1)
Haziran 2010 (1)
Mart 2010 (4)
Şubat 2010 (2)
Ocak 2010 (1)
Makale Detayları
31 Mart 2008
Yazdır
7700 Kez Okunmuş
12 Yorum Yapılmış
 (Oy Sayısı: 23)


Benzer Konular

CSS Text Yazı Özellikleri

Sitemizin Yazıdan Oluşmayan yeri yokur heralde varsa bile çok nadir dir resimlerden oluşan sayfalar gibi peki bu yazı özellikleri nelerdir bunlara görelim
Color
Background Color
Letter Spacing
Line Height
Text Align
Text Decoration
Text İndent
Text Transform
Word Spacing


İlk önce renk özelliklerinden bahsedelim renk vermek renk seçimi yapmak bazen zor olabiliyor yaptığımız tasarımlara göre renk seçmek çok önemlidir aslında sadece yazı için geçerli değil bu durum her alanda her ksımda önemlidir kodlarımıza geçelim

color:

hex-decimal kodu ile renk verme
h2 {color: #FF0000;}

renk ismi ile renk verme
h2 {color: red;}

RGB ile renk verme
h2 {color: rgb(255,0,0);}

RGB ile renk verirken dikkat etmemiz gereken renk kodunun parantez içinde olmalı ve virgül ile ayırmalıyız - rgb(R,G,B)
Sonuc olarak görünüm hepsinde aynıdır örnek görünüm

CSS Text Yazı Özellikleri


background-color:

Bir makalede önemli yerleri belirtmek için arka plan rengi kullanabiliriz örnek vermek gerekirse
Bu makalede önemli olan yerlerler belirtilmiştir
kodumuz ise şu şekildedir
<span style="background-color: yellow;">önemli</span>
tabiki burada bir etiket hazırlayıp kullanabiliriz

letter-spacing:

letter-spacing kodumuzda yazıların bir birine yakınlığını uzaklığını ayarlarız A↔B örnek yapalım alttaki örnekte yazılarımız bir birine çok yakın olsunlar

Bu bir örnektir yazılarımız birbirine çok yakın olsunlar

burada kullandığımız kod şu şekildedir
#etiket {letter-spacing: -1px}
alttaki örnekte yazılarımızı birbirinden uzaklaştıralım

Bu bir örnektir yazılarımız birbirine çok uzak olsunlar

#etiket {letter-spacing: 4px}
(-) olarak verdiğimiz değerde birbirine yakınlaştırır normal verdiğimiz değer birbirinden uzaklaştırır

line-height:

line-height kodumuzda yazıların bir birne yakınlığı ve uzaklığı ile alakalı bir koddur fakat bu kodumuz üstten alta doğu yüksekliği ayarlar ↕

bu yazımızın üst ve alt aralığı bir birine yakın olsunlar
bu yazımızın üst ve alt aralığı bir birine yakın olsunlar

#etiket {line-height: 20px}
burada kullandığımız kodda pixel kullandım ama burada isteğe bağlı olarak % de kullanabiliriz santimde kullanabiliriz isteğe bağlı

text-align:

text-align hizalama kodumuzudur sola sağa ortaya olmak üzere 4 kodumuz var bunları sıralayalım hemen
text-align: left;
text-align: center;
text-align: right;
text-align: justify;

ilk kodumuz sola hizilama yapıyor ikincisi ortalıyor üçüncüsü sağa hizalıyor dörcünüsü hem sola hemde sağa yaslıyor yani iki yanı dolduruyor

text-decoration:

text-decoration yazılarımızın altını üstünü ve ortasına çizgi çekmemize yarar örneklerle devam edelim ilk olarak bir yazımısın altını çizelim

Bu yazının altını çizdik

alttaki kod yazımızın altını çizmektedir ve bu kod genelde linklerde kullanılır
#etiket {text-decoration: underline;}
diğer örnekte ise yazının üstünü çizelim

Bu yazının üst kısmını çizdik

alttaki kod yazımızın üst kısmını çiziyor
#etiket {text-decoration: overline;}
diğer örnekte ise yazımızın orta kısmını çizelim

Bu yazının orta kısmını çizdik

alttaki kodumuz yaznının orta kısmını çiziyor
#etiket {text-decoration: line-through;}

text-indent:

gazete yada dergilerde sıkca kullanılır okuyanlar bilir makalenin başlangıcı biraz boşlukla başlar bu kodda bunu yapmamıza yardımcı olur öernekle devam edelim

Nasılsınız iyimisiniz neler yapıyorsunuz, Nasılsınız iyimisiniz neler yapıyorsunuz ,Nasılsınız iyimisiniz neler yapıyorsunuz ,Nasılsınız iyimisiniz neler yapıyorsunuz, Nasılsınız iyimisiniz neler yapıyorsunuz ,Nasılsınız iyimisiniz neler yapıyorsunuz, Nasılsınız iyimisiniz neler yapıyorsunuz

kullandığımız kodda ise ben 1cm yani 1 santim boşluk verdim bunu pixel olarakta kullanabiliriz
#etiket {text-indent: 1cm;}

text-transform:

text-transform kodu yazıları BÜYÜK küçük ve Baş harfleri BÜYÜK göstermemize yarayan bir koddur örneklerle devam edelim ilk örnekte yazıların tamamını büyük olarak gösterelim

bu yazı aslında küçük harflerle yazıldı (kaynak koddan görebilirsiniz)

alttaki kod küçük yazılarımızı büyük harflerde yazmış gibi gösterir
#etiket {text-transform: uppercase;}
ikinci bir örnekte ise yazılarımızı küçük olarak gösterelim

BU YAZI ASLINDA BÜYÜK HARFLERLE YAZILDI (kaynak koddan görebilirsiniz)

#etiket {text-transform: lowercase;}
diğer öernekte ise küçük yazılarımızın sadece baş harflerini büyük yazılmış gibi göstermemizi sağlar

bu yazının baş harfleri küçük harflerle yazıldı (kaynak koddan görebilirsiniz)

#etiket {text-transform: capitalize;}

word-spacing:

word-spacing kodumuz ise yazı aralarındaki aralıkların yakınlığını ve uzaklığını belirlememizi sağlar ↔ örnekle devam edelim

Bu yazıda boşluk bırakılan yerler uzun olsun

kodumuz ise şu şekilde
#etiket {word-spacing: 1cm}
ben 1 santim boşluk verdim tabi isteğe bağlı olarak (px) pixel kullanılabilir birde direction kodumuz var fakat bu kod text-align kodu ile aynı görevi gördüğü için bahsetmeye gerek duymuyorum başka bir css başlığında görüşmek dileği ile hoşcakalın
1 Nisan 2008 14:19 2blackinci demiş ki:
css kolay kolay bitmez smile ama bitince uygulamalara geçerim heralde bilmiyorum

1 Nisan 2008 14:07 1Arno demiş ki:
Bunların hepsinin bir arada olması çok iyi olmuş :) Davut abi CSS bitecek yakında, ondan sonra ne anlatacan :D


Sessiz Kalma Sende Yorum Yap

Son Yapılan 10 Yorum
  • Konu
  • Yazar
  • Yorum
  • CSS3 Kutu Elementlerine Gölge Verme Box ...
  • demiş ki 
  • çok sağol üstad çok güzel anlatım olmuş. :)
  • Blackinci Seri 5 MyBB teması
  • blackinci demiş ki 
  • tamer,
    Resim görebilirsem daha yardımcı olurum
  • Blackinci Seri 5 MyBB teması
  • tamer demiş ki 
  • hocam temanın çok başarılı fakat saol taraf boşlukda sosyal medya yazısı çıkıyor bunu nasıl kaldırabilirim
  • Css ile Aktif Menü Buton Yapımı
  • blackinci demiş ki 
  • Webmaster,
    Ben daha önce bir defa mybb için ücretli tema hazırladım ama hiç satmadan tekrar ücretsiz olarak dağıttım şuan için soruyorsanız mybb yi bıraktım... başka bir forum sistmei ile ilgileniyorum.
    Kendiniz bir fiyat biçmek adına bilgi edinmek için soruyorsanız bu yaptığınız grafiklere, yazdığınız kodlara ve harcadığınız emeğe göre değişir ama şuan için ücretli tema yapmanızı tavsye etmem zira mybb nin vbulletin gibi ücretli olacağı dedikoduları dolaşıyor eğer bu gerçekleşirse işte ozaman güzel olur ve ücretli temaların önü açılmış olur ozaman daha rahat ve güvenilir tema hazırlayıp satabilirsiniz iyi günler.
  • Css ile Aktif Menü Buton Yapımı
  • Webmaster demiş ki 
  • Merhabalar
    Blackinci MyBB temalarını ücretli olursa ne kadar ücrete hazırlıyorsunuz? Buradan belirtirseniz sevinirim
    İyi günler
  • Css ile Aktif Menü Buton Yapımı
  • blackinci demiş ki 
  • Kadir Kaya,
    Bedava forum sistemi sunun sitelerin sistemi nasıl işliyor bilemiyorum ama gözükmemesi normaldir bu tür siteler çok kısıtlı çalışırlar.
  • Css Balon Büyüyen Menü
  • demiş ki 
  • Facebook un tasarımı senin sitenin tasarımının yanında halt yemiş hatta dünyanın bütün siteleri halt yemiş smile
  • Css ile Aktif Menü Buton Yapımı
  • demiş ki 
  • Usta emeğine sağlık ama tr.gg sitelerinde ve jindo.com sitelerinde çalışmıyor hatta hiç gözükmüyor niye anlayamadım.
  • Blackinci vBulletin Teması Seri 1
  • demiş ki 
  • Saol Güzel :)

Yukarı İletişim RSS Takip İstatistikler Site İçeriği

Copyright © 2007 - 2011 DLE Blackinci Edition Seri 2