Exprimarea IT

CSS completat de 10 ani de existenţă în acest an! Cei care au fost în jurul pentru un timp, castigand pâinea lor (sau nu) cu ajutorul CSS, atunci s-ar putea cunoştinţă modul în care am fost de foame pentru o bună selecţie de fonturi. Chiar şi cu lipsa de fonturi designeri, cum ar fi cele de la CSS Zen Garden s-au făcut uz de imagini de fundal CSS pentru a înlocui fonturi în căutarea de a face ceva dreptate la desenele lor. Am încercat, de asemenea, Flash / JavaScript ® hacks pentru a atinge obiectivele noastre de design. Prin nici un caz aceasta este o cale greşită de a obţine fonturi noi dorim în design web noastre, dar cu siguranta, aceasta nu este calea cea mai de dorit. şi peste web designer de ani, ca mine, s-au bazat în totalitate pe zece sau pentru fonturi pentru desenele lor.

Evoluţiile recente ale standardelor web şi formate de fonturi face posibilă pentru a face textul HTML în alte fonturi decât aceleaşi fonturi implicite vechi. Vine în "@ fontface" decleration CSS.

@ Fontface provids o soluţie pentru a face legătura la fişierul de font reală şi de a prelua de pe internet. Folosind @ fontface, proiectanţii pot folosi fonturi, fără a fi nevoie să îngheţe text ca imagini de fundal. Punere în aplicare este foarte drept înainte, aşa cum se arată mai jos, dar cum toate lucrurile bune au un rol CON pentru el, nu toate browserele suporta un singur "tip de font". Dacă intenţionaţi să utilizaţi @ fontface pe site-ul cu care necesită sprijin browser-ul cruce, atunci va trebui să furnizeze surse de la diferite tipuri de fonturi de aceeaşi.

1. TrueType - un format conceput pentru a arata bine pe ecran. Recomandat în special pentru browsere pentru Windows (Chrome).
2. OpenType (CFF) - Acest format este mai bine pentru munca de imprimare şi nu arată întotdeauna bine pe Windows.
3. EOT - Aveţi nevoie de acest format, dacă doriţi să vizaţi Internet Explorer. IE nu va folosi orice alt format. EOT nostru ar fi considerat "Lite", deoarece acestea nu sunt nici comprimate sau de domeniu limitat.
4. SVG - Acesta este un format XML, acceptat de unele browsere, inclusiv iPhone.
5. WOFF - Acest cross-browser, web-doar format font este usor (date de fonturi este zip comprimat) şi poate fi compilat fie cu fonturi TrueType sau PostScript (CFF) conturează. Ea este susţinută în prezent de Firefox 3.6 +.

Utilizarea @ fontface

  @ Font-face {
 font-family: "CalligraphyFLFRegular";
 src: url ("CalligraphyFLF.eot ');
 src: local ("CalligraphyFLF"), locală ("CalligraphyFLF"), format url ("CalligraphyFLF.woff") ("woff"), url ("CalligraphyFLF.ttf") format ("TrueType"), url ("CalligraphyFLF . svg # CalligraphyFLF ") format (" SVG ");
 }
 @ Font-face {
   font-family: "font ta";
   src: url ("fonturi / font_filename.eot");
   src: local ("nume alternativ"), locală ("Alternatename"),
     url ("fonturi / font_filename.woff") format ("woff"),
     url ("fonturi / font_filename.otf") format ("OpenType"),
     url ("fonturi / font_filename.svg # font_filename") format ("SVG");
   }
 h2 {font-family: "Your caractere", Georgia, serif;} 

După cum se poate vedea din exemplul de mai sus, pentru a include caractere fontul ales, o are de a lega la un set de caractere fonttypes pentru acelaşi. Prin urmare, oamenii se refera la ea ca "Kit Font".
Există seturi de caractere disponibile, care permite în mod explicit legătura cu CSS @ font-face de proprietate în temeiul End User License Agreement (EULA).

Resurse utile WebFont:

• Fonturi disponibile pentru @ font-face încorporarea pagina wiki la http://webfonts.info/wiki/index.php?title=Main_Page
  
• Ray Larabie . El este un designer de fonturi de renume, care a făcut sute de fonturi TrueType interesante primare disponibile pentru utilizare pe web. Fonturile sale sunt elegante, decorative, şi jucăuş.
• Dieter Steffmann este un alt designer de font mare. El, de asemenea, a făcut mai multe fonturi frumoase disponibile pentru oricine de a utiliza.
• Magazin Font : oferă fonturi proiectate special pentru utilizarea de web. Mai mult de 30 de familii FontFont mai de succes sunt acum disponibile ca FontFonts Web. FontShop are, de asemenea, o analiză detaliată a WebFont ghidul de folosire http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Squirrel Font : Vitrine toate fonturile pe care rotorul font oferă pentru utilizarea cu @ font-face încorporarea CSS. Squirrel font oferă o cantitate impresionantă de tip, face mort simplu pentru a alege unul afară, şi oferă autostrada "kituri" - caractere de alegerea dumneavoastră, în mai multe formate, ambalate cu demo-ul HTML si CSS care utilizeaza foarte actual @ font-face sintaxa . Acestea oferă, de asemenea, o modalitate de a face propriile @ font-face kituri . Dacă setul de caractere pe care doriţi să utilizaţi a fost autorizat în mod corespunzător (cei care vin cu computerul nu sunt neapărat bine), generatorul produce EOT, SVG, şi hei! Fişiere WOFF.

Un alt rapid ah. Aici este ceva simplu si frumos folosind puterea de CSS ... dar a fost concieve greu (şi cu siguranţă nu am fost eu) pentru a începe cu. Adăugarea Dropshadow, ar putea fi o peice de tort pentru mulţi dintre noi, folosind unele unelte de editare a imaginilor ca Photoshop ANF focuri de artificii, etc
Motivul de ce, am optat pentru umbra folosind CSS este că, de obicei, creând în acelaşi timp un design pagină / HTML a unei cereri, cerinţele de tine iterarea. Ce vreau să spun este, intr-un site existent, cu multe imagini, cum ar fi cele care afişează freinds listă sau o galerie de imagini, va fi dificil să se reprocesează întreaga încărcătură de imagini care au fost deja descărcate de a adăuga sau elimina umbrele, pentru că chestiune.
Deci, dacă aţi făcut o gândire puţin înainte în timp ce crearea HTMLS pentru a adăuga aceste diviziuni suplimentare sau, de obicei, situaţia este că aveţi o logică Buclă generatoare de aceste icoane / miniaturi în XSL, PHP. Java sau orice altă programare / limbaj de scripting, îl puteţi adăuga oricând, atunci este doar chestiune de spectacol şi ascunde aceste umbre folosind proprietatea display CSS, ca pe clientii cerinţele în continuă schimbare ... am havn't făcut acest tip de gândire înainte înainte de acest lucru ... dar ahev a început acum!

În exemplul de mai jos, imaginea originală este gratuit, iar umbra dropshadows sunt aplicate cum trebuie! De asemenea, am mers un pic extra, folosind trucuri de Tut mele anterioare (Well! acestea sunt, probabil, cel mai scurt varietate de tutoriale, asa ca este justificată doar numindu-le "Tut", "e) cu privire la utilizarea CSS proprietate clipului pentru a scoate în evidenţă doar

Imaginii originale

CSS DropShadow Rezultate

Vezi Demo | Descarca fişierelor sursă

De ce nu vreau să înţeleagă acest lucru??? Humm ...!!

Cele mai multe dintre scriitori CSS ar fi de acord că proprietatea CSS clipului este, probabil, unul dintre cele mai ne-utilizate proprietăţi CSS. A fost atât de adevărat pentru mine şi a fost cel mai fericit să-l neglijeze, până când am început modificarea mootools DOUA butonul (PIN) Componenta Slider (cu indicator de Range) .

Nu a fost o sugestie buna de la unul din utilizatorii de componente de a modifica componenta Slider folosind imagini tăiate o cercetare (faţă de o divizie de lăţime variabilă) pentru a indica gama slider. Astfel, a venit timpul meu pentru a intra distracţie, dar ne-Chartered (pentru mine, desigur), apele de proprietate Clip CSS.

Ei bine! cât de greu poate fi? Nu de mult la toate ... da şi nu. Sintaxa de a folosi proprietatea CSS clipului este destul de drept, dar sensul / usuage este un pic croocked. Cu o memorie ca a mea, de fiecare data cand stau de a prelucra pe Script Slider mea ... am tokeep de trimitere înapoi la utilizarea de această proprietate CLIP, pentru a reaminti mă logica pe care am creat în script-ul meu .... Prin urmare! gândit să-l stilou, cu o speranţă să-şi amintească că în viitor (şi, de asemenea, pentru beneficiul celor care par boggled de proprietate clipului CSS)

Ce face clipului CSS face?

Clipul este parte din modulul de efecte vizuale de CSS 2.1. Pur şi simplu pune, treaba lui este de a plasa o fereastră vizibil pe partea de sus a unui obiect care se tunde, tăiere, prin urmare, crearea de imagini şi miniaturi fără a crea fişiere suplimentare (am pus deja această funcţie pentru o mai bună utilizare în componenta Slider )

Utilizarea proprietăţii clipului CSS, se poate crea o decupare folosind forma de rect. Ca multe alte proprietăţi CSS (cum ar fi marja, etc padding), folosind rect nevoie de patru coordonate Sus, dreapta, jos, stânga (TRBL). Natura croocked a reflecta această proprietate, atunci când ia o privire mai atentă la modul în care calculează un clip regiunea de tăiere, utilizarea acestor patru coordonate (creierul trimite într-o aruncare pentru un timp). Acum, pentru a vă confunda partea de jos porneşte de la partea de sus, şi începe de la dreapta la stânga. . Puteţi vedea ce am spus? .... Prin urmare, acest post ...

Aceasta confuzie mica poate dispărea cu uşurinţă, cu această explicaţie vizuală a CSS Clip / rect proprietate de mai jos!!

CSS Clip Cerinţe

Sarcina am început este de a decupa imaginea în miniatură urmator intr-o imagine ovala caută (şi, de asemenea, o imagine cu unghi larg)

Thumbnal original / imagine	Cerinţe Clip pentru Sqaure Thumbmail

CSS Clip Rezultate

Vezi Demo | Descarca fişierelor sursă

Înainte de a avea de a face cu CSS pentru a crea machete noastre de pagină, alinierea parte a conţinutului în interiorul unei celule de tabel părea juca doar copil. Pur şi simplu setaţi "alinia" sau "valign" proprietate a tabelului pentru a avea alinierea la alegere, bucata de tort!
Cu aspecte CSS, deşi avem "vertical-align" proprietate pentru elemente, nu pare a fi la fel de simplu ca "alinierea" sau "valign" proprietăţi. Pentru a fi mai specifiic "vertical-align" nu pare să rezolve niciuna dintre problemele tale, mai ales în cazul în care se scrie o bucata de cross-browser CSS.

Fără utilizarea de tabele HTML, problema de centrare pe obiect, fie o imagine sau un text într-o divizie de conţinut, probabil a fost de fiecare UI / CSS coşmar dezvoltatorii la un moment dat. Această problemă se extrapolează în continuare de grijile de aliniere, în cazul în care obiectul care urmează să fie centrat este dinamic în natură, adică atunci când înălţimea acestuia este variabilă (înălţimea necunoscut).

Deşi nu există o soluţie cunoscut drept înainte, că ar lucra în gama de browsere pe care le avem de a face cu, soluţia pe care am încercat să ajungă la nu pare să funcţioneze în browserele cateva pe care eu l-am încercat în (IE6, IE 7 , FF).

SOLUTIE:
În browsere, cum ar fi Mozilla, Opera şi Safari, comportă ciudat "vertical-align" proprietate poate fi adus la simţurile sale, pur şi simplu prin stabilirea de "afişare" a diviziei de proprietate conţinând la "masa-celula" (afişare: masă de celule) .

Problema rămâne în continuare cu familia IE browsere, care, dar nu par să înţeleagă ce sa cu "masa de celule" de proprietate şi de ignorant cum sunt, ele ignora pur şi simplu. Soluţia de mai jos, deşi simple, anunturi câteva elemente mai DOM HTML la pagina dumneavoastră de a face lucrurile sa se intample.

CSS şi HTML arata ca acest
.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/> vizualizări: 3456 </ div>
</ Div>
</ Div>

Rezultatul arata ca aceasta: -

vezi demo aici | Files download source (Descarcat de 452 ori)

TOP Alinierea 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/> vizualizări: 1234 </ span>
</ Div>
</ Div>

Rezultatul arata ca aceasta: -

JOS Alinierea 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/> vizualizări: 1234 </ span>
</ Div>
</ Div>

Rezultatul arata ca aceasta: -

vezi demo aici | Descarcă de aici

Se pare ca varsta, deoarece am fost încercarea de a găsi o soluţie rezonabilă pentru această problemă de aliniere. Dar acum, cu această soluţie, mă simt la pace puţin.

Cu o speranta ca intr-o zi

• vertical-aliniere proprietate în CSS va funcţiona ca o face in interiorul unei celule de tabel, fără să bată mai mult în jurul lui Bush
• Cel puţin, stabilirea marjei de-top: auto si margin-bottom: auto, ca va da acelaşi rezultat ca şi cu marja de stânga şi de setul de marja de-a dreptul de auto
• Războaiele browser va fi peste o zi.
• Nu va fi doar un browser de ALL.

Descărcaţi CSS şi HTML de soluţie de mai sus, aici (Descarcat de 452 ori) .. pentru inteligibilităţii, CSS nu este optimizat

PS: Si apropo, cei care sunt miniaturi ale unor poze le-am dat clic pe ...

În cazul în care cerinţa este să împartă o valoare într-un nod XML, care conţine un şir delimitat de valoare, în elementele individuale, atunci aţi ajuns la locul potrivit ... avea o privire de la exemplul de mai jos. Dacă sunteţi familiarizat cu un pic de XML si XSL ... eu nu cred ca ar fi nevoie de nici o explicaţie.
De asemenea, acest exemplu de utilizare a include functii cum ar fi XSL xsl: call-şablon, XSL: subşir-înainte, XSL: subşir-după, în cazul în care este ceea ce sunt după.

XML pentru a fi transformate (food.xml): -
Presupunem sarcină este de a tokenize delimitat de coarde de virgulă, în tag-ul "Cuvinte cheie"

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

De ieşire HTML rezultat: -

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

Inutil să spun ... schimba doar parametrul "delimitr" la delimitatorul de alegerea dvs.

Dacă aţi făcut vreodată (sau de a face o) un meniu vertical cu ajutorul elementelor de listă (LI) tag-uri şi CSS, s-ar putea întâlni, aceasta încă un bug în Internet Explorer, în cazul în care IE 6 insertii de aceste diferenţe dintre elementele din listă care conţin elemente de nivel bloc, şi anume în cazul în care există spaţiu între elementele din lista de marcare. Multumesc, dar nu, mulţumesc, versiunea IE 7 pare a fi liber de acest bug.
În cazul în care ca mine, şi mai multe, vă aparţin, aceasta banda de dezvoltatori frustraţi, care încă mai au pentru a obţine lor de aspecte noi, care lucrează în IE6 de asemenea, atunci acest lucru s-ar putea dovedi util. Arunca o privire ...

Exemplu de marcare:

<ul id="menu">
<li> <a href="#"> Prima </ a> </ li>
<li> <a href="#"> Despre </ a> </ li>
<li> <a href="#"> Servicii </ a> </ li>
<li> <a href="#"> Portofoliu </ a> </ li>
<li> <a href="#"> Întrebări frecvente </ a> </ li>
<li> <a href="#"> Contactaţi-ne </ a> </ li>
</ UL>

S-ar putea crea unele CSS, similar cu cel de mai jos, pentru a transfrom markup-ul de mai sus într-un meniu vertical ....

Exemplu CSS ...
# Meniu {
0; padding:: Marja de 0; fundal: # FF9900;
lista-stil-tip: none; lăţime: 150px;
}
# Meniu li {margin: 0; padding: 0;}
# Un meniu {display: block;
color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px solid # FFF;
}

Rezultatele pe care le vor vedea ...

Soluţia pentru această problemă ... (modificat / CSS adăugat în caractere cursive aldine)

# Meniu {
0; padding:: Marja de 0; fundal: # FF9900; lista-stil-tip: none; lăţime: 150px;
float: left; / * aceasta conţine elemente pluteau listă * /
}
# Meniu li {
0; padding:: Marja de 0;
float: left; / * Aceasta stabileşte * /
Lăţime: 100%; / * bug spaţiu în IE6 * /
}
# Un meniu {
display: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px solid # FFF;
}

Dacă doesnot soluţie de mai sus par să lucreze (din motive cunoscute doar la IE6) ... încercaţi această metodă în locul

Adăuga doar acest stiluri IE6 doar pentru marcare ta ...

<- [If lt IE 7>
<style type="text/css">
# Meniu Li o {display: inline-block;}
# Meniu Li o {display: block;}
</ Style>
<[Endif] ->

Dacă XML / XSL Transformă este domian ta, atunci există momente când ne dorim un peice de cod dinamic pentru a fi utilizate element bibliotecă (să se facă re-utilizabile). Ce vreau să spun, probabil, ar putea fi mai clar, cu acest scenariu de exemplu.

Imaginaţi-vă că sunt crearea unui site web (si folosind XML, XSL transfroms desigur), şi de cele mai multe pagini ar avea un Modul Comentarii. Ei bine! apoi, fie copiaţi sau inseraţi acest cod în fiecare şablon de pagină (pe care I dont au spus, dar face de întreţinere şi revizie un cosmar) sau chiar mai bine, vă creaţi un includ fişiere care ar putea fi tras în cazul în care doriţi vreodată în pagina dvs. ( e) ...
Deci, cum vom crea un fisier XSL include şi o includ în interiorul alt fişier XSL? Iată cum ...

Doar pentru a face lucrurile clar ... aici este lista rapidă de fişiere pe care le-ar crea ... aici, noi vom fi, inclusiv informatii despre fructe şi legume într-o pagină părinte numit alimente.

1. food.xml - XML ​​fişier de date pe care transformarea va fi aplicat
2. food.xsl - principala XSL dosar, care va transforma food.xml nostru
3. inc_fruits.xsl - XSL include fişierul de date care vor face fructe
4. inc_vegtables.xsl - XSL include fişierul de date, care va face vetetables

Nu cred ca am explica mai mult, codurile de elementele de mai sus, va fi de sine explicativ ...

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

Descarcă toate fişierele de mai sus aici (253 de descărcări)

Mesaj IE 6, Microsoft Internet Explorer a fost un fel de ajuns pentru a ne dezvoltatorii UI prin adăugarea de câteva proprietăţi mai CSS standard pentru cele mai multe alte browsere standard. Un astfel de proprietate util în "min-height". Proprietate destul de drept înainte, care are nevoie de nici o explicaţie mult tărăgănat. Atunci când un min-înălţime pentru o divizie este stabilit, se păstrează întotdeauna că atunci când înălţimea set de conţinut pe care îl ocupă mai puţin de case se pot ţine şi mai important, (spre deosebire de simplu de vanilie "înălţime" proprietate), Balanta sau în cuvinte CSS, se comportă ca un divizare ale căror "înălţime" este setat pe "Auto" ...

Pentru unii dintre noi dezvoltatori sărace, care sunt inca necesare pentru a codului CSS care trebuie să lucreze, de asemenea, în IE6, ne-disponibilitate a "min-height", ar putea dovedi un dop de spectacol cândva ... donot disperare.

Din fericire, avem destule ciudatenii în IE, care ne-ar folosi pentru a beneficia în şi modificaţi prin modul nostru de a ajunge la scopul nostru ... adică face o Divizia ca şi cum de min-height în IE6

Soluţia 1: Utilizarea Hack Liniuţele de subliniere [ ... Citeste mai mult ]

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

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

---

Soluţia 2: Folosirea atributului CSS Selector de 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>


Hack CSS Selector de atribut se profite de fapt, mai devreme browsere IE6 THA ignorat atribute-selector. Notă cerinţa de alta divizie recipient cu class = "someclass". Doar presense de atributul class pentru această divizie, suprascrie înălţimea înapoi la auto pentru Opera, Mozilla şi MSIE7 şi mai târziu. IE6, care nu acceptă Selectoare de atribute, se ignoră.

Vezi Demo de hack min-înălţime pentru IE6

Dacă utilizaţi XML şi XSL, atunci este posibil să fi venit peste un timp, atunci când trebuie să joci în jurul cu atribute si valori de noduri XML în tine XSL. Ele sunt o mulţime de site-uri cu informatii tărăgănat mult timp despre acest lucru, dar nu am gasit au fost scurte şi precise ... Aceasta nu este o TUTORIAL XML / XSL, dar încercarea mea de a pune împreună-un fel de ieftin listă ...

Eşantion XML că vom lucra cu arata ca aceasta ...

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

Deci, haideţi începe transformarea XML nostru de mai sus folosind XSL

Exemplul 1: Afiseaza valoarea de la un atribut de ales

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

Rezultatul HTML va arata ca

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

Exemplul 2: Looping, prin afişarea şi toate numele XML atributul şi valorile lor

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

Rezultatul HTML va arata ca


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


Uita-te la acest spatiu, voi păstra actualizarea acestei descoperiri cu noi ...

Un Reset CSS este / sunt CSS pentru a seta un număr de stiluri element la o valoare de referinţă specific care creează coerenţă în browsere diferite.

Noi toţi am fost prin cosmaruri de scriere cross-browser CSS lui. Deci, atunci când am începe scrierea CSS nostru, este o practică de a reseta mai întâi pentru a elimina / reseta orice neconcordanta încrucişate browser. CSS Resetează, sunt cateva linii simple de CSS pe care le încep cu CSS, oferindu-vă o bază de curat pentru a începe construirea dvs. de pe.

Resetează CSS pe care am tendinta de a folosi în mod normal, arata ca acest

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: nici unul;
}

H1, H2, H3, H4, H5, H6 {
font-size: 100%;
font-greutate: normala;
}

Resetaţi dimensiunea fontului browser-ul
Reţineţi, de asemenea, de resetare, care a fost aplicat cu dimensiunea fontului browser-ul în următoarea linie ...

html {font-size: 76%;}

De mai sus CSS resetează dimensiunea fontului browser-ul de 10 de pixeli, iar acest lucru face posibil să se lucreze cu dimensiuni relative ale textului (ceea ce este important din fiecare o respectare WAI prespective)
De exemplu, în următoarea definiţie, font-size într-un interval este setat la 10 pixeli şi că, în paragarph este setat la 14 pixeli ...

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