BT ifade

CSS bu yıl 10 yıl varlığını tamamlandı! CSS kullanarak kendi ekmek (veya değil) kazanç, bir süredir edenler, o zaman biz yazı iyi bir seçim için açlıktan edilmiştir nasıl farkında olabilir. Hatta yazı eksikliği ile de bu gibi tasarımcıların CSS Zen Garden kendi tasarımları bazı adalet yapmanın peşinde fontları değiştirmek için CSS arka plan görüntülerinin kullanımı yaptık. Ayrıca Flash / JavaScript ® kesmek tasarım hedeflerine ulaşmak için çalıştık. Hiçbir şekilde bu bizim web tasarımları içine arzu yazı almak için yanlış bir yoldur, ama kesinlikle, bu en çok arzu edilen bir yol değildir. ve yıllar içinde web tasarımcısı, benim gibi, tamamen kendi tasarımları için on kadar yazı yararlanmıştır.

Web standartları ve yazı biçimleri son gelişmeleri aynı eski varsayılan yazı tipleri dışında yazı HTML metni oluşturmak mümkün kılar. "@ Font yüzü" CSS izleyen zamanlarda geliyor.

@ Font yüzü gerçek yazı dosyaya bağlantı ve web onu almak için bir çözüm provids. @ Font yüzü kullanarak, tasarımcılar arka plan görüntüleri gibi metin dondurmak zorunda kalmadan yazı tiplerini kullanabilirsiniz. Uygulanması, çok yalındır aşağıda gösterildiği gibi değil, bütün iyi şeyleri ona bir CON parçası olduğu gibi, TÜM tarayıcılar tek bir "yazı türü" destekler. Eğer çapraz tarayıcı desteği gerektiren sitesinde @ font yüzü kullanmayı planlıyorsanız, o zaman aynı çeşitli yazı türleri kaynaklardan sağlamak zorunda olacak.

1. TrueType - ekranda iyi bakmak için tasarlanmış bir biçimi. Özellikle Windows tarayıcıları (Krom) için önerilir.
2. OpenType (CFF) - Bu format baskı çalışması için daha iyidir ve her zaman Windows üzerinde iyi görünmüyor.
3. EOT - Internet Explorer hedeflemek istiyorsanız bu format gerekir. IE herhangi bir diğer biçimde kullanmaz. Bizim EOT Kullanıcı onlar ne sıkıştırılmış ne de çünkü etki alanı sınırlı "Lite" olarak düşünülebilir.
4. SVG - Bu iPhone dahil olmak üzere bazı web tarayıcıları tarafından desteklenen bir XML formatıdır.
5. ATKI - Bu çapraz tarayıcı, web sadece yazı biçimi (font verileri sıkıştırılmış zip olan) hafif ve TrueType ya da haşiye (CFF) özetliyor biriyle derlenebilir. Şu anda Firefox 3.6 tarafından desteklenen +.

@ Font yüzü kullanma

  @ Font-face {
 font-family: 'CalligraphyFLFRegular';
 src: url ('CalligraphyFLF.eot');
 src: local ('CalligraphyFLF'), yerel ('CalligraphyFLF'), url ('CalligraphyFLF.woff') formatında ('ATKI'), url ('CalligraphyFLF.ttf') formatında ('truetype'), url ('CalligraphyFLF . svg # CalligraphyFLF ') formatında (' svg ');
 }
 @ Font-face {
   font-family: "Senin yazı";
   src: url ("yazı / font_filename.eot");
   src: local ("Alternatif isim"), yerel ("Alternatename"),
     url ("yazı / font_filename.woff") formatında ("ATKI"),
     url ("yazı / font_filename.otf") formatında ("açıştürü"),
     url ("yazı / # font_filename font_filename.svg") formatında ("svg");
   }
 h2 {font-family: "Senin yazı", Gürcistan, serif;} 

Eğer, yukarıdaki örnekte görebilirsiniz seçilen yazı yazı dahil olarak, bir aynı yazı için fonttypes bir dizi bağlamak için vardır. Bu nedenle insanlar "Yazı Takımı" olarak bakın.
Açıkça Son Kullanıcı Lisans Anlaşması (EULA) altında için CSS @ font-face özelliği ile bağlantı sağlayan edinilebilir Yazı Kitleri vardır.

Faydalı yazıtipinin Kaynaklar:

• @ Font-face gömme kullanılabilir Fontlar az wiki sayfası http://webfonts.info/wiki/index.php?title=Main_Page
  
• Ray Larabie . O web'de kullanmak için serbestçe kullanılabilir ilginç TrueType yazı tipleri yüzlerce yaptı tanınmış bir yazı tipi tasarımcısı. Onun yazı, zarif dekoratif ve eğlenceli vardır.
• Dieter Steffmann başka büyük font tasarımcısı olduğunu. O da kullanmak herkes için pek çok güzel yazı yaptı.
• Yazı dükkanı : Web kullanımı için özel olarak tasarlanmış yazı tipleri sunuyor. En başarılı FontFont ailelerin 30'dan fazla artık Web FontFonts olarak mevcuttur. FontShop da ayrıntılı bir yazıtipinin kullanıcı kılavuzuna sahiptir http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Yazı Sincap : Font Sincap @ font-face CSS gömme kullanım için sunduğu tüm yazı tiplerini müzedir. Yazı Sincap, tipi, etkileyici bir miktar sunuyor birini almak için basit bir ölü yapar ve hiç zorlanmadan "kitleri" sunuyor - seçtiğiniz yazı tipi, çeşitli biçimlerde, demo HTML ve CSS ile paketlenmiş çok güncel @ font-face sözdizimi kullanır . Onlar da bir yol sunuyoruz kendi @ font-face kitleri olun . Kullanmak istediğiniz yazı (bilgisayarınızla birlikte gelen olanları mutlaka tamam değildir) uygun lisanslı olması durumunda, jeneratör EOT, SVG, ve hey! Üretir ATKI dosyaları.

Başka çabuk tut. Burada basit ve CSS GÜÇ kullanarak güzel bir şey ... ama başlamak zor kavrayabilme (ve kesinlikle ben değildim) idi. Dropshadow ekleme, Photoshop ANF Fireworks vb düzenleme araçları gibi bazı görüntü kullanarak, bir çoğumuz için kek bir peice olabilir
Ben CSS kullanarak gölge için tercih nedeni genellikle bir uygulama bir sayfa tasarımı / html oluştururken, gereksinimleri yineleme tutmak olmasıdır. Ben freinds listesinde veya bir resim galerisi gösteren olanlar gibi birçok görüntü ile var olan bir web sitesi olarak, ne demek, bunun için, işleyemeyiz zaten eklemek veya gölgeleri kaldırmak için boş olmuştu görüntüleri tüm yükünü zor olacak olsun.
Bu ekstra bölümler veya eklemek için htmls oluştururken biraz ileri görüşlü yapmış Eğer öyleyse, genellikle durum XSL, PHP bu simgeleri / küçük üreten bir döngü Mantık olması. JAVA veya başka herhangi bir programlama / betik dili, istediğiniz zaman ekleyebilirsiniz, sonra sadece gösteri ve sürekli değişen müşteri gereksinimleri uyarınca, CSS Display özelliğini kullanarak bu gölgeler gizleme meselesi ... Ben ileri düşünerek bu tür yapılan havn't Bu daha önce ... ama ahev şimdi başladı!

Aşağıdaki örnekte, orijinal resim gölge serbesttir ve dropshadows gerektiği gibi uygulanır! AYRICA, ben hakkında benim önceki Tut hileler (Well! bu muhtemelen Rehberler kısa çeşitli vardır, bu yüzden sadece onlara "Tut" çağırıyor haklıdır) kullanarak, biraz fazladan gitti CSS Klip özelliğini kullanarak göstermek için sadece

Orijinal Görüntü

CSS DropShadow Sonuçlar

Demo bilgileri | İndir Kaynak Kodlarını

Neden bunu anlamak istiyorum?? Humm ...!

CSS yazarların çoğu o CSS Klip özellik muhtemelen en un kullanılan CSS özelliklerini biri olduğu konusunda hemfikirdir. O da benim için çok doğruydu ve ben değiştirerek başlayana kadar, ihmal en mutlu oldu MooTools İKİ Tokmak (Pin) Slider Bileşeni (Range Gösterge ile) .

Kaydırıcıyı aralığı belirtmek için kırpılır backgroud görüntüleri (değişken genişlik bölünmeye karşı) kullanarak Slider bileşeni değiştirmek için bileşeni kullanıcıların birinden iyi bir öneri vardı. Böylece eğlenceli ama CSS Klip mülk suları (benim için tabii) un imtiyaz girmek için benim zamanım geldi.

Eh! ne kadar zor olabilir? Hiç benzemiyor ... EVET ve HAYIR. CSS Clip özelliği kullanmak için sözdizimi oldukça dik ama anlamı / usuage biraz croocked olduğunu. Benimki gibi bir hafıza ile, her şey benim Slider Senaryo üzerinde rework oturup ... kendimi benim komut oluşturduğunuz mantığı hatırlatmak için, bu CLIP özelliğinin kullanımını atıfta tokeep var .... Bu nedenle! gelecekte (ve ayrıca görünüyor olanların yararına CSS Klip Property tarafından boggled) hatırlamak için bir umut ile, kalem aşağı düşünülmektedir

CSS Klip ne yapar?

Klip CSS 2.1 görsel efektlerin modülü kısmıdır. Basitçe söylemek gerekirse, işini bu nedenle ek dosyaları (zaten Slider Bileşeni daha iyi kullanmak için bu özelliği koyduk oluşturmak zorunda kalmadan görüntüleri kırpma ve küçük oluşturmak, kırpılan bir nesnenin üzerine görünür bir pencere yerleştirmektir )

CSS Klip özelliğini kullanarak, rect şeklini kullanarak bir kırpma oluşturabilirsiniz. Rect kullanarak diğer birçok CSS Özellikleri (margin, padding vb) gibi gerektirir dört koordinatları Üst, Sağ, Alt, Sol (TRBL). Bu dört koordinatları (a bir süre atmak içine beyin gönderir) kullanarak, klip kırpma bölge nasıl hesapladığını bir yakından bakmak bu özelliğin croocked doğasını yansıtır. Şimdi şaşırtmak için alttan üstten başlar ve sağ sol başlar. . Sen bu söylediklerini bakın? .... Bu yüzden bu yazı ...

Bu küçük karmaşa kolaylıkla aşağıda CSS Klip / rect özelliği bu görsel açıklama ile yok olabilir!

CSS Klip Gereksinimleri

Biz başladık görevi (ve ayrıca geniş açılı görüntü) bir squarer görünen bir görüntü içine aşağıdaki Küçük resim derlemek için

Orijinal Thumbnal / Resim	Sqaure Thumbmail için Klip Gereksinimleri

CSS Klip Sonuçlar

Demo bilgileri | İndir Kaynak Kodlarını

Biz bir tablo hücresinde bazı içerik hizalayarak, bizim sayfa düzenleri oluşturmak için CSS ile uğraşmak zorunda kaldı önce, sadece çocuk oyuncağı gibiydi. Basitçe "align" veya seçtiğiniz hizalama, çocuk oyuncağı olması tablonun "valign" özelliğini ayarlayın!
Biz elemanları için özellik "vertical-align" sahip olsa css ile, bu "align" veya "valign" özellikleri gibi basit olması görünmüyor. Daha specifiic olmak "vertical-align" çapraz tarayıcı CSS parçası yazmak, özellikle de sizin sorunları çözmek için herhangi bir gibi görünüyor.

HTML Tabloları kullanımı olmadan, nesne üzerinde merkezleme ve SORUN, herhangi bir görüntü veya içeren bölümü içinde bazı metin, belki bir noktada her UI / CSS geliştiricileri kabusu olmuştur olacaktır. Bu sorun daha da ortalanmış olarak nesne doğada dinamik olursa, yüksekliği değişken olduğunda, yani uyumlaştırmak üzüntülerin extrapolates (bilinmeyen yükseklik).

Biz uğraşmak zorunda tarayıcılarının aralığında çalışacak bilinen hiçbir yalındır çözüm olsa da, ben yapar varmak için denedim çözüm (IE6, IE 7 ben bunu denedim birkaç tarayıcılarda çalışır gibi görünüyor , FF).

ÇÖZÜM:
Mozilla, Opera ve Safari gibi tarayıcılarda garip özelliği basitçe "table-cell" (display: table-cell) için içeren bölünme "ekran" özelliğini ayarlayarak, onun duyular getirilebilir "vertical-align" davranıyor .

Sorun hala, ama onlar, onlar sadece bunu görmezden gibi "table-cell" mülkiyet ve cahil ile ne anlamak için kim görünmüyor, tarayıcı IE ailesi ile kalır. Şeyler yapmak için HTML basit, reklamlar birkaç DOM öğeleri olsa da, aşağıda verilen çözüm.

CSS ve HTML bu gibi görünüyor
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> kez <br/>: 3456 </ div>
</ Div>
</ Div>

Sonuç şöyle: -

Burada demo görüntülemek | İndir Kaynak Dosyaları (450 kez indirildi)

TOP CSS Hizala
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> kez <br/>: 1234 </ div>
</ Div>
</ Div>

Sonuç şöyle: -

ALT CSS Hizala
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> kez <br/>: 1234 </ div>
</ Div>
</ Div>

Sonuç şöyle: -

Burada demo görüntülemek | buradan indirin

Bu uyum sorunu için makul bir çözüm bulmaya çalışan bu yana, yaşları gibi görünüyor. Ama şimdi bu çözüm ile, ben biraz huzur hissediyorum.

Bu gün bir umut

• CSS dikey hizalama özelliği çalının etrafında çok dövmeye sahip OLMADAN, bir tablo hücresinde yaptığı gibi çalışacak
• En azından, margin-top ayarı: otomatik ve margin-bottom: oto, margin-left ve margin-right seti auto ile aynı sonucu verecektir
• Tarayıcı savaşları bir gün bitecek.
• Orada olacak TÜM için sadece tek bir tarayıcı.

Burada yukarıdaki çözüm CSS ve HTML indirin (450 kez indirildi) .. anlaşılabilirliği için, CSS optimize edilmiş değil

PS: Bu arada, bu benim tıklandığında bazı resimlerin küçük olan ...

İhtiyaçlarınız değeri sınırlandırılmış bir dize içeren bir XML bir düğüm değeri bölmek ise, ürüne içine, o zaman doğru yere ulaşmış ... Aşağıdaki örnekte de bakabilirsiniz. XML ve XSL biraz aşina iseniz ... Ben herhangi bir açıklama gerekir sanmıyorum.
Xsl, call-template: substring-before, xsl: Ayrıca, bu örnekte xsl gibi XSL fonksiyonları kullanımını içerir substring-sonra, o senden sonrası buysa.

Dönüştürülmesi için XML (food.xml): -
Görev tag "anahtar kelimeler" in, virgülle ayrılmış dize tokenize olduğunu varsayalım

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<date>July 2008</date>
<description>All about things we eat everyday</description>
<keywords>Fruits, Vegetables, Pulses, Meat, Cereals </keywords>
</food>

XSL (food.xsl): -

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>XSL 1.0 Delimited String Tokeniser</title>
</head>
<body>
<xsl:value-of select="food/meta"/>
<div >
<xsl:call-template name="tokenize">
<xsl:with-param name="string" select="food/keywords" />
<xsl:with-param name="delimitr" select="','" />
</xsl:call-template>
</div>
</body>
</html>
</xsl:template>
<xsl:template name="tokenize">
<xsl:param name="string" />
<xsl:param name="delimitr" />
<xsl:choose>
<xsl:when test="contains($string, $delimitr)">
<div style="border:1px solid red;">
<h3><xsl:value-of select="substring-before($string,$delimitr)" /></h3>
<xsl:variable name="data" select="substring-before($string,$delimitr)"/>
</div>
<xsl:call-template name="tokenize">
<xsl:with-param name="string" select="substring-after($string, $delimitr)" /><xsl:with-param name="delimitr" select="$delimitr" /></xsl:call-template>
</xsl:when>
<xsl:otherwise>
<div style="border:1px solid red;">
<h3><xsl:value-of select="$string" /></h3>
</div>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
</xsl:stylesheet>

Sonuç HTML çıktı: -

<div>
<div style="border: 1px solid red;">
<h3>Fruits</h3>
</div>
<div style="border: 1px solid red;">
<h3> Vegetables</h3>
</div>
<div style="border: 1px solid red;">
<h3> Pulses</h3>
</div>
<div style="border: 1px solid red;">
<h3> Meat</h3>
</div>
<div style="border: 1px solid red;">
<h3> Cereals </h3>
</div>
</div>

Söylemeye gerek yok ... sadece seçtiğiniz sınırlayıcı parametre "delimitr" değiştirin

Hiç liste öğeleri (li) etiketleri ve CSS kullanarak (ya da bir yapım) Dikey Menü yaptıysanız, karşılaşabileceğiniz bu henüz IE blok düzeyi öğeleri içeren liste öğeleri arasındaki 6 ekler bu boşlukları, Internet Explorer, başka bir hata biçimlendirme liste öğeleri arasında herhangi bir boşluk varsa yani. Teşekkürler, ama hayır, teşekkürler, IE sürüm 7 Bu hata arınmış görünüyor.
Bana, ve daha birçok gibi, hala çok IE6 çalışarak yeni düzen, almak zorunda sinirli geliştiriciler, bu bant aitse, o zaman bu yararlı olabilir. Bir göz atın ...

Örnek biçimlendirme:

<ul id="menu">
<li> <a href="#"> Ana Sayfa </ a> </ li>
<li> <a href="#"> Hakkında </ a> </ li>
<li> <a href="#"> Hizmetler </ a> </ li>
<li> <a href="#"> Portföy </ a> </ li>
<li> <a href="#"> Yardım </ a> </ li>
<li> <a href="#"> Bize Ulaşın </ a> </ li>
</ Ul>

Bir dikey menü içine yukarıdaki biçimlendirme transfrom için, aşağıda bir benzer bazı CSS oluşturabilir ....

Örnek CSS ...
# Menu {
margin: 0; padding: 0; background: # FF9900;
list-style-type: none; width: 150px;
}
# Menu li {margin: 0; padding: 0;}
# Menu a {display: block;
color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solid # FFF;
}

Göreceksiniz sonuçları ...

Bu hata ... (değiştirilmiş / koyu italik olarak CSS eklendi) için çözüm

# Menu {
margin: 0; padding: 0; background: # FF9900; list-style-type: none; width: 150px;
float: left; / * Bu yüzen liste öğelerini içerir * /
}
# Menu li {
margin: 0; padding: 0;
float: left; / * Bu düzeltmeleri * /
width: 100%; IE6 / * boşluk hata * /
}
# Menüsünden bir {
display: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solid # FFF;
}

Yukarıdaki çözüm etmediğinden (sadece IE6 bilinen nedenlerle) çalışmıyor gibi görünüyor ... Eğer bunun yerine bu yöntemi deneyin

Sadece biçimlendirme için bu ek IE6 sadece stilleri eklemek ...

<! - [If lt IE 7>
<style type="text/css">
# Menu li a {display: inline-block;}
# Menu li a {display: block;}
</ Style>
<[Endif] ->

XML / XSL sizin Domian ise Dönüşümleri, o zaman (tekrar kullanılabilir yapılacak) kütüphane öğesi kullanılacak Dinamik kod takıyorum istediğiniz zamanlar vardır. Ne demek istediğimi, muhtemelen bu örnek senaryo ile daha net olabilir.

Eğer bir web sitesi oluşturmak (ve XML, XSL transfroms tabii kullanarak) ve sayfaların çoğu Yorumlar Modülü olurdu hayal edin. Eh! sonra da her sayfası şablonu (ki diyorum, ancak bakım ve tamir bir kabus yapmak Ağrı) veya daha da iyisi bu kodu kopyalayıp yapıştırın veya, sen (sayfanızda istediğiniz yere kadar çekti edilebilir bir INCLUDE dosyası oluşturmak lar) ...
Yani NASIL bir XSL INCLUDE dosyası CREATE ve başka bir XSL dosyası içine dahil MUSUNUZ? Burada nasıl ...

Sadece şeyleri açıklığa kavuşturmak için ... burada yaratacağını dosyalarını hızla listesi ... Burada, gıda adlı bir ana sayfa içine meyve ve sebzeler hakkında bilgi dahil edilecektir.

1. food.xml - dönüşüm uygulanacak xml veri dosyası
2. food.xsl - Bizim food.xml dönüştürecek ana XSL dosyası,
3. inc_fruits.xsl - XSL meyveler verileri işlerler dosya dahil
4. inc_vegtables.xsl - XSL vetetables verileri işlerler dosya dahil

Ben fazla açıklama olduğunu düşünüyorum değilsin, yukarıdaki öğeleri için kodları, kendini açıklayıcı olacaktır ...

FOOD.XML


<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<date>July 2008</date>
<description>All about things we eat everyday</description>
<fruits type="tropical">
<item name="mango" moreinfo="http://www.mango.com">Mango is the king of fruits</item>
<item name="banana" moreinfo="http://www.banana.com">Banana once a day , keeps the doctor away</item>
<item name="orange" moreinfo="http://www.orange.com">Orange is the color and rich in vitamin C</item>
<item name="Papaya" moreinfo="http://www.papaya.com">Papaya - Hot when raw, cold when ripe</item>
</fruits>

<vegetables>
<item name="spinach" moreinfo="http://www.spinach.com">Spinach is full of iron</item>
<item name="asparagus" moreinfo="http://www.asparagus.com">Asparagus contains loads of vitamin D </item>
<item name="fenugreek" moreinfo="http://www.fenugreek.com">Fenugreek is rich in vitamin C</item>
</vegetables>
</food>


<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:include href="inc_fruits.xsl" />
<xsl:include href="inc_vegetables.xsl" />
<xsl:template match="/">
<html>
<head>
<title>Title</title>
</head>
<body>
<h3><xsl:value-of select="/food/description" /></h3>
Modification Date : <xsl:value-of select="/food/date" />
<hr/>
<h5> About Fruits</h5>
<xsl:call-template name="about_fruits"/>

<hr/>
<h5> About Vegetables</h5>
<xsl:call-template name="about_vegetables"/>

<hr/>
</ Body>
</ Html>
</ Xsl: template>
</ Xsl: stylesheet>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_fruits">
<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br />
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_vegetables">
<xsl:for-each select="/food/vegetables/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br/>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

Burada Yukarıdaki tüm dosyaları (250 downloads) indirin

IE 6 Mesaj, MSIE çoğu diğer standart tarayıcılar için standart birkaç CSS özellikleri ekleyerek bize UI geliştiriciler için yeterli tür olmuştur. "Min-height" in böyle bir faydalı özellik. Hiçbir uzun soluklu açıklama ihtiyacı oldukça yalındır özelliği. Bu evler içeriği tutun ve önemlisi terazi (düz vanilya "yükseklik" mülkiyet aksine) veya CSS deyişle olabilir daha az kaplar, bir bölümü için min-height ayarlandığında, her zaman bu seti yüksekliği korur, bu gibi davranır bölümü olan "yükseklik" "otomatik" olarak ayarlanmış ...

Ayrıca IE6 çalışması gerektiğini hala kod CSS gerekmektedir bize bazı kötü geliştiriciler için, "min-height" ve un-durumu, bazen bir gösteri tıpa olabilecek ... donot umutsuzluk.

Neyse ki, biz dışarı avantaj olarak kullanmak ve hedefimize ulaşmak için yolumuzu kesmek olurdu IE yeterli tuhaflıklar var ... yani bir BÖLÜMÜ dağılımı yapmak sanki IE6 onun min-height

Çözüm 1: Altını Çiziyor Hack [kullanma ... Read more ]

.box1 {
min-height: 200px;
height:auto;
_height:200px;
}

HTML: -
<div class="box1">Some dynamic content with variable height ...</div>

---

Çözüm 2: CSS Özellik Seçici Hack kullanma

.box2 {
min-height:200px;
height:200px;
}
div[class] .box2 {
height:auto;
}

HTML: -
<div class="someclass">
<div class="box2 common">Some dynamic content with variable height ...</div>
</div>


CSS Özellik Seçici Hack tarayıcılar önceki tha IE6 bir atribute seçici göz ardı aslında yararlanır. Class = "someClass" ile başka bir kaba bölünme ihtiyacı unutmayın. Sadece bu bölümü için sınıf özniteliği içermesi, Opera, Mozilla ve MSIE7 için otomatik ve daha sonra geri yüksekliği geçersiz kılar. Atribute seçiciler desteklemiyor IE6, yok sayar.

IE6 min-height hilesi Demo bilgileri

XML ve XSL kullanırsanız, nitelik ve XSL XML düğümleri değerleri ile oynamak zorunda olduğunda, o zaman, bir zaman karşı karşıya kalabilirsiniz. Onlar bu konuda uzun soluklu bilgi ile sitelerin yükler vardır, ama hiçbiri bulundu kısa ve kesin idi ... Bu NO XML / XSL TUTORIAL, ama hile listesi çeşit-bir araya getirmek için benim girişimi ...

Birlikte çalıştığımız olacak örnek XML bu gibi görünüyor ...

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<fruits type="tropical">
<item name="mango" moreinfo="http://www.mango.com">Mango is the king of fruits</item>
<item name="banana" moreinfo="http://www.banana.com">Banana once a day , keeps the doctor away</item>
<item name="orange" moreinfo="http://www.orange.com">Orange is the color and rich in vitamin C</item>
<item name="Papaya" moreinfo="http://www.papaya.com">Papaya - Hot when raw, cold when ripe</item>
</fruits>
</food>

Bu yüzden XSL kullanarak bizim yukarıda XML dönüştürme başlayalım

Örnek 1: Seçilen Öznitelik az değeri gösteriliyor

<xsl:value-of select="/food/fruits/item[@name='orange']" /><br />
to get more information about <a href="{/food/fruits/item[@name='orange']/@moreinfo}" target="new" ><xsl:value-of select="/food/fruits/item[@name='orange']/@name" /> </a>

HTML sonuç gibi görünecek

Orange is the color and rich in vitamin C,
to get more information about <a href="http://www.orange.com" target="new">

Örnek 2: aracılığıyla Döngü ve tüm XML Öznitelik Adları ve Değerler görüntüleme

<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/>,
attribute value : <xsl:value-of select="."/> <br />
</xsl:for-each>

HTML sonuç gibi görünecek


attribute name : name, attribute value : mango
attribute name : moreinfo, attribute value : http://www.mango.com
attribute name : name, attribute value : banana
attribute name : moreinfo, attribute value : http://www.banana.com
attribute name : name, attribute value : orange
attribute name : moreinfo, attribute value : http://www.orange.com
attribute name : name, attribute value : Papaya
attribute name : moreinfo, attribute value : http://www.papaya.com


Bu alanı izle, yeni bulgular bu güncellemeye devam edeceğiz ...

Bir CSS Reset / CSS çeşitli tarayıcılar arasında tutarlılık oluşturur belirli bir başlangıca eleman stilleri bir dizi yapacaklarmış edilir.

Hepimiz çapraz tarayıcı CSS Kullanıcı yazma kabuslar yoluyla olmuştur. Yani bizim CSS yazmaya başladığınızda, herhangi bir çapraz tarayıcı tutarsızlıkları / kaldırmak sıfırlamak için ilk sıfırlamak için bir uygulamadır. CSS sıfırlar, sen üzerinde bina başlatmak için temiz bir temel vererek, ile CSS başlaması CSS basit birkaç satır vardır.

Normalde kullanma eğiliminde CSS sıfırlar bu gibi görünüyor

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

ol, ul {
list-style: none;
}

h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}

Tarayıcı yazı tipi boyutunu sıfırlayın
Ayrıca aşağıdaki satırı tarayıcı yazı tipi boyutunu uygulanmış reset dikkat ...

html {font-size: 76%;}

Yukarıdaki CSS sıfırlar tarayıcı yazı tipi boyutunu 10 piksel, ve bu da göreceli yazı tipi boyutunu (imkanlar SES bir WAI uyum her önemli olan) çalışmayı kolaylaştırır
Örneğin, aşağıdaki tanımı, bir span içinde font-size 10 piksel ve paragarph 14 piksel olarak ayarlanır ayarlanır ...

span {font-size: 1em;}
p {font-size: 1.4em;}