| Üye Paneli | ||
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 vermeh2 {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 gerekirseBu 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 olsunlarBu 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 #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 hementext-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ı çizelimBu 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 edelimNası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österelimbu 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 edelimBu 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 |
||
31 Ocak 2011 23:31 12tahsin demiş ki: emeğinize sağlık hocam çok güzel anlatım Allah razı olsun |
||||
2 Mart 2010 18:51 11blackinci demiş ki: pervin arslan, bu .dnm ismini verdiğiniz element nedir ? örnek <div class="dnm"> |
||||
2 Mart 2010 08:11 10pervin arslan demiş ki: .dnm a:link{ text-decoration: none; color: #00CC66; } .dnm a:hover { text-decoration: none; color:#FFFFFF; } .dnm a:visited { text-decoration: none; color:#FFFFFF; } .dnm a:active { text-decoration: none; color:#FFFFFF; } bu kodları yazınca sayfamdaki tüm linklere uyguluyo tek bir linke uygulamak için ne yapmam gerek . . . |
||||
29 Eylül 2008 05:41 9blackinci demiş ki: Font Özelliklerini inceleyin |
||||
28 Eylül 2008 12:27 8Kerem demiş ki: Merhaba.Tebrık ederım sıte cok guzel fakat bana yazı kucultme kodu lazım buraya yazarsanız sevınırım .Ara sıra bakıcam bu sayfaya cok guzel.emege saygı |
||||
23 Nisan 2008 15:28 7blackinci demiş ki: Teşekkür ederim aradığınız şey text özelliklerinde geçmediği için yer vermedim istediğiniz yazıların ilk harfi şu şekilde yapabilirsiniz p:first-letter { color: #ff0000; font-size: xx-large; } <p>merhaba hosgeldiniz</p> gazetedekiler gibi bir görünüm elde edebilirsiniz |
||||
23 Nisan 2008 15:20 6Volkan demiş ki: Güzel bir çalışma olmuş ancak ben aradığım şeyi bulamadım galiba. Her kelimenin ilk harfini diğerlerinden daha farklı yapmak istiyorum bunu nasıl yapabilirim acaba? |
||||
14 Nisan 2008 15:54 5blackinci demiş ki: Vakit buldukca uygulamalarada yer vermeye çalışıyorum teşekkür ederim |
||||
13 Nisan 2008 20:25 4Fırat demiş ki: Harikasınız Birde Uygulamalara geçseniz daha da mükemmel olacak :) |
||||
2 Nisan 2008 18:52 3dj_kriz demiş ki: bi ara hepsini öğreneceğim. Tşkler |
||||
| Son Yapılan 10 Yorum | ||
|
||
|
Yukarı
İletişim
RSS Takip
İstatistikler
Site İçeriği
Copyright © 2007 - 2011 DLE Blackinci Edition Seri 2 |