Ilmaista sitä

CSS valmistui 10 vuotta olemassaolon tänä vuonna! Ne, jotka ovat olleet jo jonkin aikaa, ansaita leipänsä (tai ei) CSS, niin saatat tietää miten olemme nälkää hyvä valikoima fontteja. Vaikka puute fonttien suunnittelijoiden kaltaisissa CSS Zen Garden on käyttänyt CSS taustakuvia korvata kirjasimet harjoittamisesta tekee joitakin oikeutta niiden mallit. Olemme myös yrittäneet Flash / JavaScript ® hakata saavuttaa suunnittelun tavoitteita. Missään tämä on väärä tapa saada fontit haluamme osaksi Web-malleja, mutta ehdottomasti ei ole halutuin tapa. ja yli vuoden web designer, kuten minä, ovat täysin luottaa kymmenkunta fontit niiden malleja.

Viimeaikainen kehitys web-standardien ja fontin formaatit mahdollistavat tehdä HTML tekstin kirjasimet muuta kuin samaa vanhaa oletus fontteja. Tulee "@ fontface" CSS decleration.

@ Fontface provids ratkaisu linkittää todellista fontin tiedosto ja hakea sitä verkosta. Käyttämällä @ fontface, suunnittelijat voivat käyttää fontteja ilman jäädyttää tekstin taustakuvina. Täytäntöönpano on hyvin suoraviivainen, kuten alla, mutta kaikki hyvät asiat ovat CON osa sitä, kaikki selaimet eivät tue single "fontti". Jos aiot käyttää @ fontface on sivusto vaatii risti selain tukee, niin joudut antamaan lähteitä eri font-tyyppisiä saman.

1. TrueType - formaatti on suunniteltu näyttämään hyvältä ruudulla. Suositellaan erityisesti Windows selaimilla (Chrome).
2. OpenType (CFF) - Tämä formaatti on parempi tulostaa työn ja ​​ei aina näytä hyvältä Windows.
3. EOT - Tarvitset tätä muotoa, jos haluat kohdistaa Internet Explorer. IE ei käytä mihinkään muuhun muotoon. Meidän EOT: n katsottaisiin "Lite", koska ne eivät ole pakattuja eikä domain-rajoitettu.
4. SVG - Tämä on XML-muotoa tukevat jotkut selaimet kuten iPhone.
5. WOFF - Tämä cross-selain, web vain fontin on kevyt (fontti data on zip-pakattu), ja voidaan kääntää joko TrueType-tai PostScript (CFF) linjaa. Se on tällä hetkellä tue Firefox 3.6 +.

Käyttämällä @ fontface

  @ Font-face {
 font-family: "CalligraphyFLFRegular";
 src: url ('CalligraphyFLF.eot');
 src: paikallinen ('CalligraphyFLF), paikallinen (' CalligraphyFLF), url ('CalligraphyFLF.woff)-muodossa ("woff), url (' CalligraphyFLF.ttf)-muodossa (TrueType), url ('CalligraphyFLF . svg # CalligraphyFLF)-muodossa (SVG);
 }
 @ Font-face {
   font-family: "Your kirjasin";
   src: url ("fonts / font_filename.eot");
   src: paikallinen ("Alternate name"), paikallinen ("Alternatename"),
     url ("fonts / font_filename.woff") muodossa ("woff"),
     url ("fonts / font_filename.otf") muodossa ("OpenType"),
     url ("fonts / font_filename.svg # font_filename") muodossa ("SVG");
   }
 h2 {font-family: "Your kirjasinlajia", Georgia, serif;} 

Kuten näette yllä esimerkiksi sisällyttää valitun fontin kirjasinlajin, täytyy linkittää joukko fonttypes samaa kirjasintyyppiä. Siksi ihmiset kutsuvat sitä "Font Kit".
On Font Sarjat että nimenomaisesti sallitaan yhdistäminen kanssa CSS @ font-face omaisuutta sille loppukäyttäjän lisenssi (EULA).

Hyödyllisiä WebFont Resurssit:

• Fonttia @ font-face upottamisen wikisivu osoitteessa http://webfonts.info/wiki/index.php?title=Main_Page
  
• Ray Larabie . Hän on tunnettu fontin suunnittelija, joka on tehnyt satoja mielenkiintoisia TrueType vapaasti käytettävissä verkossa. Hänen fontit ovat tyylikäs, koristeellinen, ja leikkisä.
• Dieter Steffmann on toinen suuri fontti suunnittelija. Hänkin on tehnyt monia kauniita fonttia kenen tahansa käytettävissä.
• Font kauppa : tarjolla fontit on suunniteltu nimenomaan web-käyttöön. Yli 30 menestyneimmistä FontFont perheet ovat nyt saatavissa Web FontFonts. FontShop on myös yksityiskohtainen WebFont käyttäjän opas http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Font Orava : Vitriinit kaikki fontit Font Orava tarjoaa käytettäväksi @ font-face CSS upottamisen. Font Orava on vaikuttava määrä tyyppiä, tekee kuolleet helppo valita yksi, ja kätevästi tarjolla "sarjat" - fontilla valinta, eri formaateissa pakattu demo HTML & CSS, joka käyttää hyvin nykyiset @ font-face syntaksia . Ne tarjoavat myös tapa tehdä oman @ font-face sarjat . Jos kirjasintyypin haluat käyttää on lisensoitu asianmukaisesti (ne, jotka tulevat tietokoneen eivät ole välttämättä kunnossa), generaattori tuottaa raskaat, SVG ja hei! WOFF tiedostoja.

Toinen nopea TTY. Tässä on jotain yksinkertaista ja mukava käyttää POWER CSS ... mutta oli vaikea concieve (ja se varmasti ollut minä), aluksi. Lisääminen Dropshadow, saattaa olla peice kakkua monille meistä, käyttäen joitakin kuvankäsittelyn työkalut, kuten Photoshop ANF Ilotulitus jne.
Syy miksi olen valinnut varjon CSS on, että yleensä luotaessa sivujen suunnittelu / html hakemuksen, vaatimukset pitää iteroimalla. Tällä tarkoitan sitä, In olemassa sivusto, jossa paljon kuvia, kuten ne näyttävät freinds luetteloa tai kuvagalleria, on vaikea käsitellä uudelleen koko kuorma kuvia, jotka oli jo purettu lisätä tai poistaa varjoja, sillä asia.
Joten jos olet tehnyt hieman eteenpäin ajattelua luotaessa HTMLS lisätä nämä ylimääräiset osastojen tai yleensä tilanne on se, että sinulla on Loop Logic tuottaa näitä kuvakkeita / miniatyyrit XSL, PHP. JAVA tai muu ohjelmointi / skriptikieli, voit lisätä sen milloin tahansa, niin on vain kysymys näyttää ja piilottaa nämä varjot käyttämällä CSS-ominaisuutta display, kohti asiakkaiden alati muuttuviin tarpeisiin ... En havn't tehnyt tällaista eteenpäin ajattelu ennen tätä ... mutta ahev jo nyt!

Alla olevassa esimerkissä, alkuperäinen kuva on varjo vapaa ja dropshadows sovelletaan tarpeen mukaan! Lisäksi olen mennyt vähän ylimääräistä, käyttämällä temppuja minun aiemmin Tut (Well! nämä luultavasti on lyhin erilaisia ​​Tutorials, joten se on perusteltua vain kutsuen heitä "Tut": n) noin CSS Clip Property for leveillä vain

Alkuperäinen kuva

CSS DropShadow Tulokset

Katso esittely | Lataa sourcefiles

Miksi haluan ymmärtää tämän??? ... Humm!!

Useimmat CSS kirjoittajat samaa mieltä siitä, että CSS Clip omaisuus on luultavasti yksi kaikkein un käytettyjä CSS-ominaisuuksia. Se oli niin totta minullekin ja oli erittäin iloinen jättää huomiotta sitä, kunnes aloitin muokkaamalla MooTools KAKSI Knob (Pin) Slider Komponentti (Alueen Indicator) .

Oli hyvä ehdotus yhdestä komponentin käyttäjät voivat muokata Slider Component käyttäen leikattu taka kuvia (vasten muuttuja leveys jako) osoittamaan liukusäädintä alue. Näin tuli minun aikani tulla hauska, mutta un-charter (minulle tietysti) vedet CSS Clip omaisuutta.

No! kuinka vaikeaa voi olla? Ei paljon ollenkaan ... Kyllä ja ei. Syntaksi käyttää CSS Clip omaisuus on melko pystyssä, mutta merkitys / usuage on vähän croocked. Kun muisti kuin minun, Everytime I istua muokata minun Slider Script ... Minulla tokeep viittaa takaisin käyttöön tämän CLIP omaisuuden muistuttaa itseäni logiikkaa, että olen luonut minun script .... Näin! ajattelin kynä alas ja toivoa muistaa se tulevaisuudessa (ja myös Niille, jotka näyttävät boggled jota CSS Clip Property)

Mitä CSS Clip tekee?

Clip on osa visuaalisia tehosteita moduulin CSS 2.1. Yksinkertaisesti sanottuna, sen tehtävänä on asettaa näkyvän ikkunan päälle esine, joka on leikattu, joten syväyspolku kuvia ja luoda pikkukuvia ilman luoda uusia tiedostoja (Olen jo laittaa tämän ominaisuuden käyttää paremmin Slider Component )

Käyttämällä CSS Clip ominaisuuden avulla voit luoda rajaavan käyttäen rect muodon. Kuten monet muutkin CSS-ominaisuudet (kuten margin, padding jne.) käyttäen rect vaatii neljä koordinaatit Top, Oikea, Ala, Vasen (HÄIRIÖ). Croocked luonne ominaisuus heijastaa kun otat tarkemmin miten clip laskee rajaavan alueen käyttäen nämä neljä koordinaatit (lähettää aivot heittää hetkeksi). Nyt hämmentää teitä pohja alkaa ylhäältä ja oikealla alkaa vasemmalta. . Näet mitä sanoin? .... Siksi tämä viesti ...

Tämä pieni sekaannus voi helposti kadota, tämä visuaalinen kuvaus CSS Clip / rect omaisuuden alla!!

CSS Clip Vaatimukset

Tehtävä olemme alkaneet on leikata seuraavat Pienoiskuva kuvan squarer näköinen kuva (ja myös laajakulma kuva)

Alkuperäinen Thumbnal / Image	Clip vaatimukset Sqaure Thumbmail

CSS Clip Tulokset

Katso esittely | Lataa sourcefiles

Ennen meidän piti käsitellä CSS luomme sivun asetteluja kohdistamalla joitakin sisällön sisällä taulukon solun tuntui vain lastenleikkiä. Aseta vain "align" tai "valign" ominaisuuden taulukon on linjaus, valinnan, pala kakkua!
CSS ulkoasuja, vaikka meillä on "vertical-align" omaisuutta elementtejä, se ei näytä olevan yhtä yksinkertaista kuin "align" tai "valign" ominaisuuksia. Ollakseen specifiic "vertical-align" ei tunnu koskaan ratkaista mitään ongelmia, varsinkin jos ne kirjoittavat pala rajat selaimen CSS.

Ilman käyttää HTML taulukot, ongelma keskitys esineen, olipa se sitten kuva tai jonkin tekstin sisältävä alue on todennäköisesti ollut jokaisessa UI / CSS kehittäjät painajainen jossain vaiheessa. Tämän ongelman lisäksi ekstrapoloi huolet yhdenmukaistaa, jos kohde on keskellä on dynaaminen luonteeltaan, eli kun sen korkeus on vaihteleva (tuntematon korkeus).

Vaikka ei tiedetä suoraviivaista ratkaisua, joka toimisi kaikissa eri selaimilla meidän on käsiteltävä, ratkaisu, olen yrittänyt päästä ei tunnu töihin harvat selaimet, joita olen kokeillut sitä (IE6, IE 7 , FF).

RATKAISU:
Vuonna selaimet, kuten Mozilla, Opera ja Safari, outo käyttäytyä "vertical-align" omaisuus saadaan järkiinsä, yksinkertaisesti asettamalla "näyttö"-ominaisuuden sisältävän divisioonan "table-cell" (display: table-cell) .

Ongelmana on edelleen IE perheen selaimissa, joka vielä ei näytä ymmärtävän, mitä on "table-cell"-ominaisuus, ja tietämätön kuin ne ovat, he vain välitä siitä. Ratkaisu alla, mutta yksinkertainen, mainoksia muutama DOM-elementtejä HTML saada asioita tapahtumaan.

CSS ja HTML näyttää tältä
.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/> Views: 3456 </ div>
</ Div>
</ Div>

Tulos näyttää tältä: -

Katso esittely tästä | Download Source Files (Downloaded 454 kertaa)

TOP Kohdista 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/> Views: 1234 </ div>
</ Div>
</ Div>

Tulos näyttää tältä: -

BOTTOM Kohdista 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/> Views: 1234 </ div>
</ Div>
</ Div>

Tulos näyttää tältä: -

Katso esittely tästä | Lataa tästä

Tuntuu aikojen, kun yritin löytää järkevä ratkaisu linjaus ongelmaan. Mutta nyt tähän ratkaisuun, tunnen pienin rauhassa.

Kun toivoa, että jonain päivänä

• pystysuora tasaus kiinteistön CSS toimii kuten se tekee sisälle taulukon solun ilman voittamaan paljon ympärillä pensas
• Ainakin, jossa margin-top: auto ja margin-bottom: auto, antaa kuin samaan tulokseen kuin margin-left ja margin-right asetettu auto
• Selain sodat on ohi joskus.
• Siellä tulee vain yksi selain KAIKILLE.

Lataa CSS ja HTML edellä ratkaisulta (Downloaded 454 kertaa) .. ja ymmärrettävyyden, CSS ei ole optimoitu

PS: Ja muuten, ne ovat pikkukuvat joitakin kuvia olen napsauttanut ...

Jos vaatimus on jakaa solmun arvo XML, joka sisältää eroteltu merkkijono arvon, tulee yksittäisiä kohteita, niin olet tullut oikeaan paikkaan ... vilkaista alla oleva esimerkki. Jos olet perehtynyt hieman XML ja XSL ... enkä usko sinun olisi mitään selitystä.
Myös tämä esimerkki sisältää käyttö XSL toimintoja, kuten xsl: call-malli, xsl: merkkijono-ennen, xsl: merkkijono-jälkeen, jos se mitä olet jälkeen.

XML muokkaamisen (food.xml): -
Oletetaan tehtävänä on tokenize merkkijono erotettu pilkulla, on tunnisteen "avainsanat"

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

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

Tarpeetonta sanoa ... vain muuttaa parametri "delimitr", jotta erotin valitsemaasi

Jos olet joskus tehnyt (tai toisten) Vertical valikon avulla luettelokohteita (li), tagit ja CSS, saatat kohdata, tämä taas yksi virhe Internet Explorerissa, kun IE 6 lisää nämä erot luettelosta kohteet, jotka sisältävät lohkoelementtien, eli jos on tyhjätilamerkit välillä luettelokohteita markup. Kiitos, mutta ei kiitos, IE 7-version näyttää vapaana tämän vian.
Jos kuten minä ja monet muut, kuulut tähän yhtye turhautuneet kehittäjät, joilla vielä on saada uusia ulkoasuja, jotka työskentelevät IE6 myös tämä voi osoittautua hyödylliseksi. Tutustu ...

Näyte markup:

<ul id="menu">
<li> <a href="#"> Home </ a> </ li>
<li> <a href="#"> Tietoa </ a> </ li>
<li> <a href="#"> Services </ a> </ li>
<li> <a href="#"> Portfolio </ a> </ li>
<li> <a href="#"> Ohje </ a> </ li>
<li> <a href="#"> Ota yhteyttä </ a> </ li>
</ Ul>

Voit luoda joitain CSS, samanlainen kuin alla, jotta transfrom edellä markup tulee pystysuoraan menu ....

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

Tulokset näet ...

Ratkaisu tämän vian ... (muutettu / lisätty CSS lihavoidulla kursiivilla)

# Menu {
margin: 0; padding: 0; background: # FF9900; list-style-type: none; width: 150px;
float: left; / * tämä on uittaa luettelokohteiden * /
}
# Menu li {
margin: 0; padding: 0;
float: left; / * Tämä korjaa * /
leveys: 100%; / * välilyönnillä bugi IE6 * /
}
# Menu {
display: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solid # fff;
}

Jos mainittu ratkaisu doesnot näytä toimivan (syistä tiedetään IE6 vain) ... kokeile tätä menetelmää sen sijaan

Lisää vain tämä ylimääräinen IE6 vain tyylejä markup ...

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

Jos XML / XSL muunnokset on sinun domian, niin on hetkiä, jolloin haluamme peice Dynamic koodia käytetään kirjastokohdetta (tehtävä uudelleen käytettävissä). Mitä tarkoitan, ehkä voitaisiin tehdä selväksi tämän esimerkin tilanteessa.

Kuvittele luot sivuston (ja XML, XSL transfroms tietysti) ja useimmat sivuilla olisi Kommentit Module. No! sitten joko kopioit tai liitä tämä koodi jokaiselle sivulle malliin (joka minulla ei ole sanottavaa, mutta elatusapua ja työstää painajainen) tai jopa parempi, luot include-tiedostoon, joka voidaan vetää sisään minne haluat sen sivun ( s) ...
Joten Miten luoda XSL ovat tiedostojen ja sisällyttää se sisällä toista XSL? Tässä on, miten ...

Vain tehdä asiat selväksi ... tässä on nopea lista tiedostoista syntyisi ... täällä, tulemme myös tietoa hedelmien ja vihannesten pääsivun nimeltään ruoka.

1. food.xml - xml tiedosto, johon muutosta haetaan
2. food.xsl - tärkeimmät XSL-tiedoston, joka muuttaa meidän food.xml
3. inc_fruits.xsl - XSL sisältää tiedoston, joka tekevät hedelmiä tietoa
4. inc_vegtables.xsl - XSL sisältää tiedoston, joka tekevät vetetables tietoa

I dont ajatella minulla on selittää paljon, koodit edellä mainitut seikat, on itsestään selvä ...

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>

Lataa kaikki edellä tiedostot täältä (256 lataukset)

Viesti IE 6, MSIE on ystävällisesti meille UI kehittäjille lisäämällä muutaman CSS-ominaisuuksia vakiona useimpiin muihin standardin selaimilla. Eräs tällainen käytännöllinen omaisuutta "min-height". Aika suoraviivainen ominaisuus joka ei kaipaa pitkiä winded selitystä. Kun min korkeus jako on asetettu, se jää aina että joukko korkeudelle, kun sisältöä on talot vie vähemmän kuin sille mahtuu ja tärkeintä (toisin kuin plain vanilla "height" omaisuus) asteikkojen tai CSS sanoen, se käyttäytyy kuin jako, jonka "korkeus" on "auto" ...

Joillekin meistä huonon kehittäjille, jotka edelleen vaaditaan koodin CSS on työskenneltävä myös IE6, un-saatavuus "min-height" saattaa osoittautua näytä tulppa joskus ... antaja epätoivoon.

Onneksi meillä on tarpeeksi koukero IE, että voisimme käyttää pois etua ja hakata tiemme läpi saavuttaa tavoitteemme ... eli tehdä DIVISION divisioona ikään kuin sen min-height on IE6

Ratkaisu 1: Käyttämällä alaviivaa Hack [ ... Lue Lisää ]

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

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

---

Ratkaisu 2: Käyttämällä CSS ominaisuus valitsin 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>


CSS Määritteiden valitsin Hack hyödyntää siitä selaimet aiemmin tha IE6 sivuuttaa atribute-valitsin. Huomaa vaatimus toiseen astiaan rajapinnan class = "jokinLuokka". Vain presense luokan attribuutin Tämän jaon, ohittaa korkeus takaisin auto, Opera, Mozilla ja MSIE7 ja myöhemmin. IE6, joka ei tue atribute valitsimet, ohittaa sen.

Katso esittely ja min-height hakata IE6

Jos käytät XML ja XSL, niin saatat törmännyt aika, kun on leikkiä määreitä XML solmujen sinua XSL. Ne ovat kuormien sivustoja pitkä hengästynyt tietoa tästä, mutta kukaan löysin olivat lyhyitä ja tarkkoja ... Tämä ei ole XML / XSL TUTORIAL, mutta minun yrittää laittaa keskustelutilaisuuteen jonkinlainen huijari lista ...

XML, että saamme työskennellä tämän näköinen ...

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

Joten avulla alkaa muuttaa meidän edellä XML XSL

Esimerkki 1: Tuotteet arvo on valittu ominaisuus

<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 tulos näyttää

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

Esimerkki 2: läpiohjaus ja näytetään kaikki XML-attribuuttien nimet ja niiden arvot

<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 tulos näyttää


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


Tilaihme, aion pitää päivittää tähän uusia tuloksia ...

CSS Reset on / ovat CSS määrittää useita elementin tyylejä perusindikaattorit joka luo yhdenmukaisempia eri selaimissa.

Olemme kaikki olleet kautta painajaiset kirjoittamisen rajat selaimen CSS-luvulla. Joten kun alamme kirjoittaa myös CSS, se on käytäntö palauttaa se ensin poistaa / nollata cross selain epäjohdonmukaisuuksia. CSS Nollaa, ovat yksinkertaisia ​​muutaman rivin CSS aloitat CSS kanssa, antaa sinulle puhdas pohja alkaa rakentaa heti.

CSS nollaa, että olen yleensä käyttävät yleensä näyttää tältä

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: normaali;
}

Palauta selaimen fonttikokoa
Huomaa myös reset joka on otettu käyttöön selaimen fontin koko seuraava rivi ...

html {font-size: 76%;}

Edellä CSS nollaa selaimen fonttikoko on 10 pikseliä, mikä mahdollistaa työskennellä suhteellisen fonttikoot (mikä on aina tärkeää WAI noudattamisesta prespective)
Esim. seuraavassa määritelmässä, font-size in span on asetettu 10 pikseliä ja että paragarph on asetettu 14 pikseliä ...

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