CSS ile XML dökümanlarını Biçimlendirme
Bir önceki dökümanımın sonunda burda kalmıştık şimdi burdan
alıp konumuzda ustalaşmaya devam edelim..
Xml in belirli bi şekli olmadıgı için servera gelmeden önce
şekillendirildiginden bahsettim bir önceki dökümanımda. Aslında CSS [cascading
style sheets] Html düzenlemek için geliştirilmiş olsada biz XML içinde
kullanabiliyoruz gerçekte XML için geliştirilmemiş olması CSS i diger bir
düzenleyici olan XSL den biraz daha az özelliklere sahip olmasını
gerektirmiştir. Kısaca XSL [Extensible style language] xml düzenlerken daha geniş seçenekler
sunacaktır bizlere.
Birde biz görelim servera gemeden önce CSS ile nasıl
düzenleniyor nasıl kolaylık saglıyor.
ÖR/ bi xml dosyası oluşturalım Notepad de adını adı
uygulama1.xml olsun içerigine aşagıdakileri yazın:
<prestige>
<kitap>
<ad>Visual
Basic NET</ad>
<fiyat>50000YTL</fiyat>
</kitap>
<kitap>
<ad>Visual
C#</ad>
<fiyat>50000YTL</fiyat>
</kitap>
<kitap>
<ad>ASP.NET
2.0</ad>
<fiyat>50000YTL</fiyat>
</kitap>
</prestige>
undefined undefined
Bu xml halindeki dosyayı CSS ile düzenledigimizde:
uygulama1.css diye kaydedin aşagıdakileri.
undefined undefined
|
Kitap
{
display:block;
margin:20px
}
|
Çok önemli bi düzenleme yaptık aslında basit bir şekilde
20px yazılarımızın üste ve sol tarafa
olan uzaklıgımız oldu Display:block da her yeni kaydı tek tasırda
göstermemizi sagladı….
|
|
Ad
{
display:inline ;
font-family:Trebuchet MS;
color:Black ;
font-size:22pt ;
}
|
Ad elemnti diye tanımlamıştık ilk dökümanımızda işte ad elementinin
özellikleri sizinde farkettiginiz gibi tanımlanıyor display:inline aynı çizgi üzerinde gösterilmelerini
saglıyor.
|
|
Fiyat
{
display:inline ;
font-family:Trebuchet MS;
color:red ;
font-size:22pt;
font-weight:bold;
}
|
Fiyat elementini tıpkı ad elementi gibi özelliklerini
birer birer tanımladık
undefined undefined
|
undefined undefined
Şimdi ne yaptık bu neydi böyle diyen arkadaşlara Browserleri
yardım edicek J
Oluşturmuş oldugunuz uygulama1.xml dosyasını bowsere
tanıtmak için şu satırıda kodlarınızın üzerine ekleyip kaydedin
<?xml-stylesheet type=”text/css”
href=”uygulama1.css”?>
açık aslında ama birde ben telaffuz ediyim css ile xml
arasındaki baglantıyı sagladık.
Şimdi browserinizin adres çubuguna dosyanızın tam adresini
yazarak oluşturdugunuz dökümanı görün.
Şimdi bana kalırsa daha önemli bi nokta
kendinizi geliştirme noktasıdır.
Yazdıgım dökümana full konsantre bi arkadaş nedne fiyat
kısmında display:block ; eklemedik diye
farkedebilir. İşte kendinizi geliştirmek istiyorsanız kendiniz ekleyin kodu
kaydedip tekrar bakın yani verilen kodlar üzerinde oynayın haşır neşir olun J
Bu kadar özellik verdin bunları herkes biliyor diyen
arkadaşları da düşünüp extradan özellikleri şimdi veriyorum sevgili
yazılımgunlugu.com ziyaretçileri J
|
Display:block
|
Satır satır yazılmasını saglar
undefined undefined
|
|
Font:caption
|
Yazıyı başlık modunda büyük yazar
|
|
Font-size:xx-large
|
Yazı büyüklügünü ayarlar
|
|
Color:black
|
Yazı rengini ayarlıyor
|
|
Background-color:white
|
Zemin rengini ayarlıyor
|
|
Border-color:red
|
Çerçeve rengi
|
|
Border-width:medium
|
Çerçeve kalınlıgı
|
|
Border-style:double
|
Çerçeve sitilini belirliyor
|
|
Letter-spacing:11px
|
Harfler arası boşluk
|
|
Text-indent:20
|
Sol kısımdan mesafe (satır başı bi nevi)
|
|
Width:350px
|
Toplam genişlik
|
|
Word-spacing:28
|
Kelimeler arası boşluk
|
undefinedtakip eden dökümanımız XSL ile XML Döküman biçimlendirme şeklinde devam edicek .....undefined