Jesprimi IT

CSS kompletati 10 snin eżistenza din is-sena! Dawk li ġew madwar għal xi ftit, jaqla ħobż tagħhom (jew le) bl-użu CSS, allura inti tista 'taf kif ilna starving għal għażla tajba ta' fonts. Anki man-nuqqas ta 'fonts disinjaturi bħal dawk fil CSS Garden Zen għamlu użu ta 'stampi isfond CSS biex jissostitwixxu fonts fl-insegwiment ta' kif isir xi ġustizzja disinni tagħhom. Għandna wkoll ippruvaw Flash / JavaScript hacks ® biex jintlaħqu l-miri tad-disinn tagħna. Bl-ebda mod dan huwa mod żbaljat biex jiksbu l-fonts aħna xewqa fis-disinji web tagħna, iżda ċert, mhuwiex l-aktar mod mixtieq. u aktar web designer snin, bħali, kompletament invokati għaxar jew hekk fonts għad-disinji tagħhom.

Żviluppi riċenti fl-istandards tal-web u formati font jagħmluha possibbli li l-test HTML tipa oħra għajr il-fonts istess default qodma. Jasal fil-"@ fontface" decleration CSS.

@ Fontface provids soluzzjoni biex tagħmel link mas-font fajl attwali u jerġgħu jieħdu lura mill-web. Bl-użu @ fontface, disinjaturi jistgħu jużaw fonts mingħajr ma jkollhom friża-test kif immaġini isfond. L-implimentazzjoni hija ferm ħafif, kif muri hawn taħt iżda bħala l-affarijiet tajba jkollhom parti CON lilha, mhux kollha browsers appoġġ għal wieħed "font tip". Jekk inti qed tippjana li tuża fontface @ fis-sit ma jeħtieġu l-appoġġ browser transkonfinali, allura inti se jkollhom jipprovdu sorsi għal diversi font-tipi ta 'l-istess.

1. TrueType - Format mfassla biex tħares tajba fuq l-iskrin. Rakkomandata b'mod partikolari għall-browsers Windows (Chrome).
2. OpenType (CFF) - Dan il-format huwa aħjar għal xogħol istampar u mhux dejjem jidhru tajbin fuq il-Windows.
3. EOT - Għandek bżonn dan il-format jekk inti tixtieq li mira Internet Explorer. IE mhux se jużaw kull format ieħor. Tal-EOT tagħna jkunux meqjusa bħala "Lite," peress li la huma kompressati u lanqas dominju ristretta.
4. SVG - Dan huwa format XML appoġġjati minn xi browsers inkluż l-iPhone.
5. WOFF - Dan cross-browser, il-format tat-tipa web biss huwa ħfief (data font huwa zip kompressata) u jistgħu jiġu kkumpilati bi jew TrueType jew PostScript (CFF) tiddeskrivi. Bħalissa huwa appoġġjat minn Firefox 3.6 +.

Bl-użu @ fontface

  @ Font-wiċċ {
 font-familja: "CalligraphyFLFRegular";
 src: url ("CalligraphyFLF.eot");
 src: lokali ("CalligraphyFLF"), lokali ("CalligraphyFLF"), il-format url ("CalligraphyFLF.woff") ("woff"), url ("CalligraphyFLF.ttf") il-format ("TrueType"), url ("CalligraphyFLF . SVG # CalligraphyFLF ") il-format (" SVG ");
 }
 @ Font-wiċċ {
   font-familja: "tipa" Your;
   src: url ("fonts / font_filename.eot");
   src: lokali ("isem alternattiv"), lokali ("Alternatename"),
     ("fonts / font_filename.woff") url format ("woff"),
     ("fonts / font_filename.otf") url format ("opentype"),
     ("fonts / font_filename.svg # font_filename") url format ("SVG");
   }
 h2 {font-familja: "tipa" Your, il-Ġorġja, Serif;} 

Kif tistgħu taraw mill-eżempju hawn fuq, biex tinkludi l-tipa font magħżul, wieħed għandu link għal sett ta 'fonttypes għall-istess tipa. Għalhekk in-nies jirreferu għaliha bħala "Kitt Font".
Hemm Kitts Font disponibbli li espliċitament jippermetti li tgħaqqad ma 'CSS @ font-wiċċ proprjetà lilha taħt il-Ftehim Tmiem License Utenti (EULA).

Riżorsi utli WebFont:

• Fonts disponibbli għall @ font-wiċċ inkorporazzjoni paġna wiki fil http://webfonts.info/wiki/index.php?title=Main_Page
  
• Ray Larabie . Huwa disinjatur font rinomata li għamlet mijiet ta 'fonts TrueType interessanti liberament disponibbli għall-użu fuq il-web. Fonts tiegħu huma eleganti, dekorattivi, u jilgħab.
• Dieter Steffmann ieħor huwa disinjatur font kbir. Huwa, wisq, għamlet fonts sbieħ ħafna disponibbli għal kull min juża.
• Ħanut Font : joffri fonts ddisinjati speċifikament għal użu web. Aktar minn 30 mill-familji FontFont akbar suċċess huma issa disponibbli bħala FontFonts Web. FontShop wkoll dettaljata WebFont utent gwida http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Isquirrel Font : vetrini l-fonts li isquirrel Font joffri għall-użu ma @ inkorporazzjoni CSS font-wiċċ. Isquirrel Font joffri kwantità impressjonanti tat-tip, jagħmilha mejta sempliċi li pick wieħed barra, u handily joffri "kits" - l-tipa tal-għażla tiegħek, f'formats diversi, ippakkjati bil demo HTML & CSS li juża ħafna attwali @ font-wiċċ sintassi . Huma wkoll joffru mezz biex jagħmlu stess @ tiegħek font wiċċ kits . Jekk it-tipa li trid tuża jkun liċenzjat xieraq (dawk li jiġu mal-kompjuter tiegħek mhumiex neċessarjament okay), il-ġeneratur tipproduċi EOT, SVG, u ħej! Fajls WOFF.

Ieħor quick Tut. Hawnhekk hija xi ħaġa sempliċi u sbieħ bl-użu POWER ta 'CSS ... iżda kien concieve diffiċli (u żgur ma kienx me) li tibda bil. Żieda Dropshadow, jista 'jkun peice kejk għal ħafna minna, bl-użu xi image editing għodod simili Photoshop ANF Fireworks eċċ
Ir-raġuni għaliex, I għażel dell qatra jużaw CSS huwa li, normalment waqt ħolqien ta 'disinn paġna / html ta' applikazzjoni, il-ħtiġiet iżommu mtennija. What I medja hija, Fil sit web eżistenti bi stampi ħafna, bħal dawk wiri freinds lista jew image gallery, se jkun diffiċli li mill-ġdid il-tagħbija kollha ta 'immaġini li kienu diġà maħtuta biex iżżid jew tneħħi l-dellijiet, għal dik kwistjoni.
Allura Jekk inti għamlu ħsieb quddiem ftit filwaqt li toħloq il-HTMLS biex iżżid dawn it-taqsimiet żejda jew normalment is-sitwazzjoni hija li inti għandek Loġika Loop jiġġeneraw dawn ikoni / thumbnails fil XSL, PHP. JAVA jew kwalunkwe programmar / scripting lingwa, tista 'żżid ghaċ, allura huwa biss il-kwistjoni ta' ispettaklu u ħabi dawn dellijiet tuża 'l-proprjetà Display CSS, skond il-klijenti dejjem jinbidlu rekwiżiti ... I havn't jsir dan it-tip ta' quddiem ħsieb qabel dan ... iżda ahev beda issa!

Fl-eżempju hawn taħt, l-immaġini oriġinali huwa dell ħielsa u l-dropshadows huma applikati kif meħtieġ! WKOLL, I marru ftit extra, billi tuża l-tricks tal Tut preċedenti tiegħi (Well! dawn probabbilment huma varjetà iqsar ta 'tutorials, u għalhekk huwa ġġustifikat biss titlob minnhom "Tut" "i) dwar Bl-użu tal-Proprjetà Clip CSS għall juru off biss

Oriġinali Image

DropShadow Riżultati CSS

Ara Demo | sourcefiles Download

Għaliex irrid biex jifhmu dan? Humm ...!!

Ħafna mill kittieba CSS jaqblu li l-proprjetà Clip CSS huwa probabilment waħda mill-proprjetajiet aktar CSS un użati. Kien veru għalija wisq u kienet l-aktar kuntenti li negliġenza tiegħu, sakemm bdejt timmodifika l- MooTools TNEJN pum (Pin) slider Komponent (bil Indikatur Medda) .

Kien hemm suġġeriment tajjeb minn wieħed mill-utenti komponenti li jimmodifika l-Komponent slider jużaw immaġini maqtugħ backgroud (kontra diviżjoni wisa varjabbli) li jindikaw il-medda slider. Għalhekk wasal iż-żmien tiegħi li jidħlu fil-gost imma un mikrija (għalija Naturalment) ilmijiet tal-proprjetà Clip CSS.

Ukoll! kemm hu diffiċli li jista 'jkun? Mhux ħafna fil-livelli kollha ... IVA u NO. Is-sintassi li jużaw il-proprjetà Clip CSS huwa pjuttost wieqaf iżda it-tifsira / usuage huwa daqsxejn croocked. Bil-memorja bħal mini, everytime I sit biex tinħadem mill-ġdid fuq Script slider tiegħi ... Għandi tokeep jirreferu lura għall-użu ta 'din il-proprjetà CLIP, biex ifakkru lili nnifsi l-loġika li I ħolqu b'kitba tiegħi .... Għalhekk! maħsub li pinna l-isfel, bil-tama li tiftakar il-futur (u wkoll għall-benefiċċju ta 'dawk li jidhru boggled mill-Proprjetà Clip CSS)

X'jagħmel Clip CSS do?

Clip hija parti mill-modulu effetti viżwali ta 'CSS 2.1. Fi kliem sempliċi, xogħol tagħha huwa li jqiegħed tieqa viżibbli fuq quċċata ta 'oġġett li qed jiġi maqtugħ, b'hekk ikklippjar immaġini u l-ħolqien thumbnails mingħajr ma jinħolqu fajls addizzjonali (diġà tpoġġi din il-karatteristika li użu aħjar fl-Komponent Slider )

Uża l-proprjetà Clip CSS, inti tista 'toħloq qtugħ bl-użu forma indiretti. Bħal Properties ħafna CSS oħra (bħall eċċ marġini ikkuttunar,), bl-użu indiretti teħtieġ erba 'koordinati Fuq, Dritt, qiegħ, xellug (TRBL). In-natura croocked ta din il-proprjetà jirrifletti meta inti tagħti ħarsa aktar mill-qrib lejn kif clip tikkalkula r-reġjun qtugħ, użu ta 'dawn koordinati erba (tibgħat moħħ fi toss għal waqt). Issa li jħawdu inti-qiegħ jibda mill-quċċata, u d-dritt tibda mill-xellug. . Inti tara dak I said? .... Għalhekk din il-kariga ...

Din il-konfużjoni ftit tista 'faċilment jisparixxu, ma din l-ispjegazzjoni viżwali tal-CSS Clip / indiretti proprjetà hawn taħt!!

Clip Rekwiżiti CSS

Il-kompitu aħna bdejna huwa li clip-immaġni Thumbnail ġej fi xbieha squarer tfittex (u wkoll xbieha ta 'angolu wiesa)

Thumbnal Oriġinali / Image	Clip Rekwiżiti għall sqaure Thumbmail

Clip Riżultati CSS

Ara Demo | sourcefiles Download

Qabel kellna biex jittrattaw CSS biex joħolqu layouts paġna tagħna, allinjament xi kontenut ġewwa ċelloli tabella deher play biss tat-tfal. Sempliċement jistabbilixxu l-"jallinjaw" jew "valign" proprjetà tat-tabella li jkollhom l-allinjament ta 'l-għażla tiegħek, biċċa kejk!
Bil taqsim CSS, għalkemm għandna "vertikali 'allinjament" proprjetà għall-elementi, ma jidhirx li tkun sempliċi daqs l-"jallinjaw" jew "valign" Properties. Biex wieħed ikun aktar specifiic l-"vertikali 'allinjament" qatt ma jidher li issolvi kwalunkwe problemi tiegħek, speċjalment jekk huma jiktbu biċċa ta' cross-browser CSS.

Mingħajr l-użu tat-Tabelli HTML, IL-PROBLEMA ta 'tiffoka fuq oġġett, kemm jekk tkun ta' immaġni jew xi test fi diviżjoni fihom, x'aktarx ilha kull lejl iżviluppaturi UI / CSS f'xi punt. Din il-problema aktar testrapola inkwiet tiegħek ta 'allinjament, jekk l-oġġett li jkun iffukat huwa dinamiku fin-natura, jiġifieri meta l-għoli tagħha hija varjabbli (tul mhux magħrufa).

Għalkemm m'hemm l-ebda soluzzjoni magħruf ħafif li tkun taħdem fuq il-firxa ta 'browsers għandna biex jittrattaw, is-soluzzjoni li jien ippruvajt li jaslu ma jidhirx li jaħdmu fil-browsers ftit li jien ippruvati f' (IE6, IE 7 , FF).

SOLUZZJONI:
Fil-browsers bħall Mozilla, Opera u Safari, Il-stramba iġib ruħu "vertikali 'allinjament" proprjetà jistgħu jinġiebu sensi tagħha, sempliċement billi jiġu ffissati l-"wirja" proprjetà tad-diviżjoni li fiha li "mejda taċ-ċelluli" (wirja: tabella taċ-ċelluli) .

Il-problema xorta tibqa 'familja IE ta' browsers, li, iżda ma jidhirx li jifhmu dak li mal-"tabella ta 'ċellula" proprjetà u injorant kif inhuma, huma biss jinjoraha. Is-soluzzjoni mogħtija hawn taħt, għalkemm sempliċi, ads ftit elementi aktar DOM għall HTML tiegħek biex tagħmel affarijiet jiġri.

Il-HTML u CSS tidher bħal dan
.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"/> <br/> opinjonijiet: 3456 </ div>
</ Div>
</ Div>

Ir-riżultat tidher bħal dan: -

tara l-demo hawn | Il Fajls Download Sors (ddawnlowdjati 450 darbiet)

TOP Tallinja CSS
.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"/> <br/> opinjonijiet: 1234 </ div>
</ Div>
</ Div>

Ir-riżultat tidher bħal dan: -

QIEGĦ Tallinja CSS
.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"/> <br/> opinjonijiet: 1234 </ div>
</ Div>
</ Div>

Ir-riżultat tidher bħal dan: -

tara l-demo hawn | Download hawn

Tidher bħal etajiet, peress li jien kien qed jipprova jsib soluzzjoni raġonevoli biex din il-problema allinjament. Imma issa ma din is-soluzzjoni, inħoss fil-paċi ftit.

Bil-tama li someday

• vertikali-allinjament proprjetà CSS se taħdem bhalu ma ġewwa ċelloli tal-mejda, mingħajr ma jkollhom jegħlbu ħafna madwar l-bush
• Mill-inqas, l-iffissar marġini ta 'fuq: awtomatiku u marġini tal-qiegħ: auto, ser jagħti l-istess riżultat bħal ma marġini tax-xellug u s-sett marġni tal-lemin l-awto
• Il-gwerer Browser se tkun fuq xi jum.
• Se jkun hemm biss ONE Browser għall KOLLHA.

Niżżel il-HTML u CSS tas-soluzzjoni hawn fuq hawn (ddawnlowdjati 450 darbiet) .. għal ftehim, il-CSS ma jkunx ġie ottimizzat

PS: U mill-mod, dawn huma thumbnails ta 'xi ritratti nkun għafast ...

Jekk ħtieġa tiegħek huwa li jaqsam node valur fi XML, li fih sensiela delimitata ta 'valur, fil-punti individwali, imbagħad inti lħaqt l-post dritt ... agħti ħarsa lejn l-eżempju hawn taħt. Jekk inti familjari ma 'ftit ta' XML u XSL ... ma naħsibx li għandek bżonn xi spjegazzjoni.
Ukoll, dan l-eżempju tinkludi l-użu tal-funzjonijiet XSL bħal XSL: sejħa mudell, XSL: substring-qabel, XSL: substring-wara, jekk dan huwa dak li inti wara.

XML għal trasformazzjoni (food.xml): -
Assumi l-kompitu huwa li tokenize l delimitata string minn virgola, fil-l-tikketta "keywords"

<?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>

Riżultanti produzzjoni HTML: -

<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>

M'hemmx għalfejn ngħidu ... biss jibdlu l-parametru "delimitr" għall-delimetru 'l-għażla tiegħek

Jekk ikollok qatt sar (jew jagħmlu waħda) Menu Vertikali jużaw punti lista (li) tags u CSS, inti tista 'tiltaqa, dan énième bug fl-Internet Explorer, fejn IE 6 inserzjonijiet dawn lakuni bejn oġġetti lista li fihom elementi livell blokk, jiġifieri jekk ikun hemm xi whitespace bejn l-oġġetti lista fil-markup. Grazzi, iżda l-ebda grazzi, il-verżjoni IE 7 jidher ħielsa minn dan bug.
Jekk simili me, u ħafna aktar, inti jappartjenu għal din il-medda ta 'żviluppaturi frustrati, li għad iridu jiksbu taqsim ġdid tagħhom, li jaħdmu fil IE6 wisq, allura dan jista' jkun utli. Agħti ħarsa ...

Awment Kampjun:

<ul id="menu">
<li> <a href="#"> Home </ a> </ li>
<li> <a href="#"> Dwar </ a> </ li>
<li> <a href="#"> Servizzi </ a> </ li>
<li> <a href="#"> Portafoll </ a> </ li>
<li> <a href="#"> FAQ </ a> </ li>
<li> <a href="#"> Contact Us </ a> </ li>
</ Ul>

Inti tista 'toħloq xi CSS, simili għal wieħed hawn taħt, biex transfrom-awment hawn fuq ġo menu vertikali ....

Kampjun CSS ...
# {Menu
marġni: 0; ikkuttunar: 0; isfond: # FF9900;
lista tal-istil tat-tip: xejn; wisa ': 150px;
}
# Menu LI {marġini: 0; ikkuttunar: 0;}
# Menu 1 {display: block;
kulur: # 555555;
test tiżjin: xejn;
ikkuttunar: 0 15px;
linja tal-għoli: 2.5; fruntiera tal-qiegħ: 1px solidu # FFF;
}

Ir-riżultati se tara ...

Soluzzjoni għal dan bug ... (modifikat / miżjud CSS b'tipa qawwija korsiva)

# {Menu
marġni: 0; ikkuttunar: 0; isfond: # FF9900; lista stil tat-tip: xejn; wisa ': 150px;
float: xellug; / * din tinkludi oġġetti lista imqiegħed * /
}
# Menu LI {
marġni: 0; ikkuttunar: 0;
float: xellug; / * Dan jiffissa l * /
wisa ': 100%; / * bug whitespace fil IE6 * /
}
# Menu 1 {
display: block; kulur: # 555555;
test tiżjin: xejn;
ikkuttunar: 0 15px;
linja tal-għoli: 2.5; fruntiera tal-qiegħ: 1px solidu # FFF;
}

Jekk il-doesnot soluzzjoni hawn fuq jidhru li qed jaħdmu (għal raġunijiet magħrufa li IE6 biss) ... tipprova dan il-metodu minflok

Just żid dan stili biss addizjonali IE6 għall Markup tiegħek ...

<-! [Jekk lt IE 7>
<style type="text/css">
# Menu LI 1 {display: inline-blokk;}
# Menu LI 1 {display: block;}
</ Style>
<[Endif] -!>

Jekk XML / XSL tittrasforma huwa domian tiegħek, allura hemm żminijiet meta aħna jixtiequ peice tal-kodiċi Dynamic li għandhom jintużaw partita librerija (li għandhom isiru mill-ġdid użabbli). What I medja, probabbilment tista 'ssir aktar ċara ma' dan ix-xenarju eżempju.

Immaġina li inti qed joħolqu website (u l-użu XML, XSL transfroms Naturalment) u ħafna mill-paġni jkollha Modulu Kummenti. Ukoll! mbagħad jew inti kopja jew paste dan il-kodiċi fis-kull mudell tal-paġna (li I dont jkollhom jgħidu, imma kun manutenzjoni u tinħadem mill-ġdid il-lejl) jew saħansitra aħjar, inti toħloq fajl INCLUDE li jistgħu jiġu miġbuda fit fejn qatt inti tixtieq li fil-paġna tiegħek ( i) ...
Allura kif nistgħu JINħOLOQ fajl INCLUDE XSL u jinkluduha ġewwa ieħor fajl XSL? Hawnhekk huwa kif ...

Just biex tagħmel affarijiet ċara ... hawnhekk hija lista ta 'malajr ta' fajls li inti toħloq ... hawn, se nkunu inkluż info dwar frott u ħxejjex fil-paġna ewlenija imsejħa ikel.

1. food.xml - xml fajl tad-data li fiha l-trasformazzjoni se jiġu applikati
2. food.xsl - fajl prinċipali XSL, li se jittrasforma food.xml tagħna
3. inc_fruits.xsl - XSL jinkludu fajl li se tirrendi data frott
4. inc_vegtables.xsl - XSL jinkludu fajl li se tirrendi data vetetables

I dont think I jkollhom jispjegaw ħafna, il-kodiċijiet għal elementi t'hawn fuq, se jkun awto spjegazzjoni ...

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/>
</ Korp>
</ 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>

Niżżel il-fajls kollha ta 'hawn fuq hawn (250 downloads)

Post IE 6, MSIE kien xorta biżżejjed biex lilna iżviluppaturi UI billi żżid ftit proprjetajiet ftit aktar CSS standard li ħafna browsers standard oħra. Wieħed proprjetà utli tali "min-għoli". Proprjetà pjuttost ħafif li teħtieġ ebda spjegazzjoni għal xejn b'xejn twil. Meta min-għoli għal diviżjoni huwa stabbilit, dejjem żżomm dak l-għoli sett meta l-kontenut huwa djar tokkupa inqas milli tista 'żżomm u importanti (b'differenza mill-pjanura vanilla "għoli" proprjetà) iskali jew fi kliem CSS, dan iġib ruħu bħala diviżjoni li "għoli" huwa ssettjat għal "auto" ...

Għal xi minna iżviluppaturi foqra, li għadhom huma meħtieġa għall-kodiċi CSS li għandu wkoll jaħdmu IE6, un disponibbiltà tal-"min-għoli", jista 'jinħass tapp juru f'xi ... disprament donot.

Fortunatament, għandna quirks biżżejjed fil IE, li aħna se tuża għall-vantaġġ out u Hack mod tagħna permezz biex jilħqu mira tagħna ... jiġifieri jagħmlu diviżjoni DIVIŻJONI bħallikieku tagħha min-għoli fil IE6

Soluzzjoni 1: Uża l-Hack jenfasizzaw [ ... Aqra iktar ]

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

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

---

Soluzzjoni 2: Uża l-attributi tas-CSS selettur Hack

.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>


Il-attributi tas-CSS selettur Hack jieħu vantaġġ mill-fatt l-browsers aktar kmieni IE6 THA injorati 1 atribute-selettur. Innota l-ħtieġa ta 'taqsima oħra kontenitur mal-klassi = "someclass". Biss il-presense 'l-attribut klassi għal din id-diviżjoni, tipprevali l-għoli lura għall-karozzi għall Opera, Mozilla u MSIE7 u aktar tard. IE6, li ma tappoġġjax seletturi atribute, tinjora dan.

Ara Demo tal-Hack min-għoli għall IE6

Jekk tuża XML u XSL, allura inti jista 'jkollok jiltaqgħu ma' żmien, meta għandek biex tilgħab madwar mal attributi u l-valuri ta 'għoqiedi XML fil inti XSL. Huma tagħbijiet ta 'siti info xejn b'xejn twil dwar dan, iżda ħadd sibt kienu qosra u preċiżi ... Dan huwa NO TUTORIAL XML / XSL, iżda tentattiv tiegħi li jitqiegħdu-flimkien xi tip ta' iqarrqu lista ...

Il-kampjun XML li aħna se taħdem ma tidher bħal dan ...

<?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>

Allura Tikri tibda trasformazzjoni XML hawn fuq tagħna bl-użu XSL

Eżempju 1: Din hi valur fi attributi magħżula

<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>

Riżultat HTML se look like

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

Eżempju 2: looping permezz ta 'u wiri kollha Ismijiet attribut XML u Valuri tagħhom

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

Riżultat HTML se look like


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


Watch dan l-ispazju, jien ser iżommu aġġornat dan ma 'sejbiet ġodda ...

A Irrisettja CSS huwa / huma CSS li jistabbilixxu numru ta 'stili element għal linja bażi speċifika li toħloq konsistenza madwar browsers differenti.

Aħna lkoll kienu permezz tal-inkubi tal-kitba bejn il-browser CSS. Allura meta aħna jibdew bil-miktub CSS tagħna, Hija prattika għal reset l-ewwel biex jitneħħew / reset xi inkonsistenzi browser transkonfinali. Jreġġa CSS, huma ftit linji sempliċi ta 'CSS li inti tibda CSS tiegħek ma', giving you bażi nadif biex jibda jinbena tiegħek fuq.

Il jreġġa CSS li jien normalment għandhom tendenza li jużaw tidher bħal dan

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 {
lista stil: xejn;
}

H1, H2, H3, H4, H5, H6 {
font-daqs: 100%;
font-piż: normali;
}

Irrisettja l-daqs tat-tipa browser
Wkoll in-nota l-reset li ġiet applikata għall-font browser daqs fil-linja li ġejja ...

html {font-size: 76%;}

Il jreġġa CSS fuq id-daqs tat-tipa browser sa 10 pixel, u dan jagħmilha possibbli li taħdem ma 'daqsijiet font relattivi (li huwa kull importanti minn konformità WAI prespective)
Pereżempju, fid-definizzjoni li ġejja, font daqs fil-medda huwa stabbilit għal 10 pixels u li fil-paragarph huwa stabbilit għal 14 pixels ...

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