Väljendades IT

CSS lõpule 10 aastat olemasolu sel aastal! Need, kes on olnud juba mõnda aega, teenida oma leiba (või mitte), kasutades CSS, siis võib teada, kuidas meil on näljas hea valik fonte. Isegi vähene fonts disainerid nagu need, CSS Zen Garden on kasutanud CSS taustapilte vahetada fonts elluviimisel teeme mõned õigusemõistmise oma designs. Samuti oleme püüdnud Flash / JavaScript ® hacks, et saavutada meie disain eesmärke. Mitte sugugi see on vale viis saada kiri soovime meie web designs, kuid kindlasti ei ole kõige soovitavam viisil. ja aastate web disainer, nagu mina, on täiesti tugines 10 või nii fonte oma disainilahendustele.

Viimased arengud veebi standardeid ja font formaadid võimaldavad muuta HTML teksti kirjatüübid muud kui sama vana default fonte. Comes "@ fontface" CSS decleration.

@ Fontface provids lahendus siduda tegeliku font fail ja leidke veebist. Kasutades @ fontface, saaksid kasutada fonte ilma külmutada teksti tausta pilte. Rakendamine on väga lihtne, nagu allpool näidatud, kuid nagu kõik head asjad on CON osa see, et mitte kõik brauserid toetavad singel "font tüüp". Kui te plaanite kasutada @ fontface sisse saidi vajavad läbivoolu brauseri tugi, siis on pakkuda allikatest erinevaid font-tüüpi sama.

1. TrueType - formaat mõeldud hea välimusega ekraanile. Soovitatakse eriti Windows brauserid (Chrome).
2. OpenType (CFF) - See formaat on parem print tööd ja ei ole alati hea välja nägema Windows.
3. EOT - Sa pead selles formaadis, kui soovite sihtida Internet Explorer. IE ei kasuta muud formaati. Meie EOT s võiks pidada "Lite", sest nad ei suru ega domeeni piiratud.
4. SVG - see on XML formaadis toetasid mõned brauserid, sealhulgas iPhone.
5. WOFF - See cross-brauser, web-only font formaat on kerge (font andmed on zip pakitud) ning saab koostada kas TrueType või PostScript (CFF) piirjooni. Praegu on toetatud Firefox 3.6 +.

Kasutades @ fontface

  @ Font-face {
 font-family: "CalligraphyFLFRegular";
 src: url ("CalligraphyFLF.eot ');
 src: kohalik ("CalligraphyFLF"), kohalik ("CalligraphyFLF"), url ("CalligraphyFLF.woff) formaadis (" woff "), url (" CalligraphyFLF.ttf) formaadis ("truetype"), url ("CalligraphyFLF . svg # CalligraphyFLF) formaadis ("SVG");
 }
 @ Font-face {
   font-family: "Teie kirjas";
   src: url ("fonts / font_filename.eot");
   src: kohalik ("Alternatiivne nimi"), kohalik ("Alternatename")
     url ("fonts / font_filename.woff") formaadis ("woff")
     url ("fonts / font_filename.otf") formaadis ("OpenType")
     url ("fonts / font_filename.svg # font_filename") formaadis ("SVG");
   }
 h2 {font-family: "Teie kirjas", Georgia, serif;} 

Nagu näete eespool näiteks ka valitud font kirjatüüp, üks on link komplekt fonttypes sama kirjatüüpi. Seega inimesed nimetavad seda "Font Kit".
On Font Kits olemas, mis sõnaselgelt lubab sidumine CSS @ font-face vara all Lõppkasutaja litsentsileping (EULA).

Kasulik WebFont Ressursid:

• Fondid saadaval @ font-face kinnistades wiki lehele http://webfonts.info/wiki/index.php?title=Main_Page
  
• Ray Larabie . Ta on tuntud font disainer, kes on teinud sadu huvitavaid TrueType fonte vabalt kasutatavad veebis. Tema fondid on elegantne, dekoratiivsed ja mänguline.
• Dieter Steffmann on veel üks suur font disainer. Ka tema on teinud palju ilusaid fonte kättesaadavaks kõigile kasutada.
• Tähe pood : pakub fonts spetsiaalselt veebi kasutamiseks. Rohkem kui 30 kõige edukamad FontFont pered on nüüd saadaval Web FontFonts. FontShop on ka üksikasjalik WebFont kasutusjuhend http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Font Squirrel : tutvustatakse kõiki fonte, mis Font Squirrel pakub kasutamiseks @ font-face CSS kinnistades. Font Squirrel pakub muljetavaldav kogus tüübi, muudab surnud lihtne valida üks välja ja osavalt pakub "kits" - kirjatüüpi valitud, mitmes eri vormingus pakkida demo HTML & CSS, mis kasutab väga praegune @ font-face süntaks . Nad pakuvad ka võimalus teha oma @ font-face komplektid . Kui kirjatüüp, mida soovite kasutada on litsentseeritud sobivalt (need, mis tulevad arvuti ei pruugi kõik korras), generaator toodab EOT, SVG ja hei! WOFF faile.

Teine kiire TTÜ. Siin on midagi lihtsat ja kena kasutades võimu CSS ... aga oli raske concieve (ja see kindlasti ei olnud mina) alustada. Lisades Dropshadow, võib olla tükk kooki paljud meist, kasutades mõnd pilditöötlus vahendeid, nagu Photoshop ANF Ilutulestik jne
Põhjus, miks olen valinud varju kasutades CSS on see, et tavaliselt luues lehe disaini / html taotluse, nõuded hoida iterating. Mida ma mõtlen on olemasoleva veebilehe palju pilte, nagu need väljapanek freinds nimekirja või pildigaleriid, siis on raske ümber töödelda kogu koormus pilte, mis oli juba maha lisada või eemaldada varjud, sellel asi.
Nii et kui sa oled teinud natuke edasi mõelda luues HTMLS lisada need extra jaotumise või tavaliselt olukord, et sul on Loop Logic tekitavad need ikoonid / pisipildi XSL, PHP. JAVA või muu programmeerimine / skript keel, siis saad lisada selle igal ajal, siis on lihtsalt küsimus näidata ja peita need varjud kasutades CSS Display vara, kui ühe kliendi pidevalt muutuvaid nõudeid ... ma havn't teinud omamoodi edasi mõelda enne seda ... aga ahev hakkas nüüd!

Allpool toodud näites, originaal pilt on vari tasuta ja dropshadows on rakendatud kui vaja! Samuti olen läinud veidi ekstra, kasutades trikke minu varasem Tut (Well! need ilmselt on lühim erinevaid Tutorials, nii et see on õigustatud ainult kutsudes neid "TTÜ" 's), umbes Kasutades CSS Clip Property jaoks uhkeldama ainult

Original Image

CSS DropShadow Results

Vaata Demo | Lae sourcefiles

Miks ma tahan sellest aru?? ... Humm!!

Enamik CSS kirjanikud nõus, et CSS Clip vara on ilmselt üks kõige un kasutatud CSS omadused. See oli nii õige minu jaoks liiga ja oli väga õnnelik, et unustada seda, kuni ma hakkasin muutmise Mootools KAKS Knob (Pin) Slider Component (koos Range Indicator) .

Oli hea ettepanek ühe komponendi kasutajatel muuta Slider Component kasutades kärbitud backgroud pilte (võrreldes muutuva laiusega Division), mis näitab liugurit vahemikus. Seega tuli minu kord siseneda lõbus, kuid ÜRO prahitud (minu jaoks loomulikult) vetes CSS Clip vara.

Hästi! kui raske see võib olla? Mitte palju üldse ... Jah ja ei. Süntaksit kasutada CSS Clip vara on päris püsti, kuid tähendus / usuage on natuke croocked. Mis mälu nagu minul, everytime ma istun ümber tegema mu Slider Script ... Mul on tokeep viidates tagasi kasutamine käesoleva CLIP vara meelde mina loogikast, et olen loonud oma script .... HENCE! Arvatakse, et pen ta maha, lootuses, et mäletan seda tulevikus (ja ka kasuks, kes tunduvad boggled poolt CSS Clip Property)

Mida CSS Clip teha?

Clip on osa visuaalseid efekte moodul CSS 2,1. Lihtsamalt öeldes, tema töö on panna nähtav akna peal objekt, mis on lõigatud, seega lõikamine pilte ning luua pisipildid, ilma et luua täiendavaid faile (olen juba panna see funktsioon paremini kasutada Slider Component )

Kasutades CSS Clip vara, saate luua lõikamine, kasutades rect kuju. Nagu paljud teised CSS omadused (näiteks margin, padding jms), kasutades rect nõuab 4 koordinaadid Top, Right, All, Vasakul (TRBL). Croocked iseloomu vara kajastatakse siis, kui lähemalt vaadata, kuidas clip arvutab lõikamine piirkonnas, kasutades neid 4 koordinaadid (saadab aju Toss mõnda aega). Nüüd segadusse teid alt alustatakse ülevalt ja õigus algab vasakult. . Sa näed, mida ma ütlesin? .... Seega see post ...

See väike segadus lihtsalt kaob, selle visuaalne selgitus CSS Clip / rect vara alla!!

CSS Clip nõuded

Ülesande oleme hakanud on klipp järgmised Thumbnail pildi ruudukujulisemaks otsin pilti (ja ka lainurk-pilt)

Original Thumbnal / Image	Clip Nõuded sqaure Thumbmail

CSS Clip Results

Vaata Demo | Lae sourcefiles

Enne oli meil tegeleda CSS luua meie lehe paigutusega, viies mõned sisu sees tabeli lahtrisse tundus lihtsalt lapsemäng. Lihtsalt määrata "align" või "valign" vara tabelis on lähendada oma valiku, käkitegu!
CSS paigutust, kuigi meil on "vertikaalselt joondada" vara elemente, ei tundu olevat sama lihtne kui "viia" või "valign" omadused. Rohkem specifiic "vertikaalselt joondada" ei tundu, et lahendada kõik oma probleemid, eriti kui on kirjutada tükk piiriülese brauser CSS.

Ei kasutata HTML Lauad, probleem keskendudes objekt, olgu see siis pilt või mõni teksti sisaldavate rajoonis on ilmselt olnud iga UI / CSS arendajatele õudusunenägu mingil ajahetkel. See probleem veelgi ekstrapoleeritakse oma mured viia, kui objekti keskele on dünaamilise iseloomuga, st kui selle kõrgus on muutuv (teadmata kõrgus).

Kuigi ei ole teada, otse edasi, lahendus, mis teeks kogu valik brausereid peame tegelema, lahendus, et olen püüdnud jõuda ei tundu töötada mõned brauserid, et olen püüdnud seda (IE6, IE 7 , FF).

LAHENDUS:
Brauserites nagu Mozilla, Opera ja Safari, kummaline käituvad "vertikaalselt joondada" vara on võimalik tuua oma meeli, lihtsalt seades "Display" vara sisaldava rajoon "table-cell" (display: table-cell) .

Probleem endiselt IE pere brauserid, kes veel ei paista aru, mida koos "table-cell" vara ja asjatundmatu nagu nad on, nad lihtsalt ignoreerida. Lahendus toodud allpool, kuigi lihtne, reklaame veel paar DOM elemente oma HTML teha asju juhtuda.

CSS ja HTML näeb välja selline
.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/> Vaadatud: 3456 </ div>
</ Div>
</ Div>

Tulemus näeb välja selline: -

vaadata demo siin | Download Source Files (laetud 452 korda)

TOP joondamine 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/> Vaadatud: 1234 </ div>
</ Div>
</ Div>

Tulemus näeb välja selline: -

BOTTOM joondamine 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/> Vaadatud: 1234 </ div>
</ Div>
</ Div>

Tulemus näeb välja selline: -

vaadata demo siin | Lae alla siit

Tundub vanuses, sest ma üritasin leida mõistlik lahendus sellele viimine probleemi. Aga nüüd on see lahendus, tunnen pisut rahu.

Mis lootust, et ühel päeval

• vertikaal-viimine vara CSS töötab nagu see sees tabeli lahtrisse, ilma võita palju ümber bush
• Vähemalt, milles margin-top: auto ja margin-bottom: auto, mis annab sama tulemuse nagu margin-left ja margin-right seatud auto
• Browser sõda on möödas ühel päeval.
• Seal peavad lihtsalt üks brauser jaoks KÕIK.

Lae CSS ja HTML eespool lahendus siin (laetud 452 korda) .. ja arusaadavus, CSS ei ole optimeeritud

PS: Ja muide, need on pisipildid mõned pildid olen klõpsatud ...

Kui Teie nõue on jagada sõlme väärtuse XML, mis sisaldab delimited string väärtuse, võetakse iga ühiku kohta, siis olete jõudnud õigesse kohta ... on pilk näites. Kui te olete tuttav natuke XML ja XSL ... Ma ei usu, siis oleks vaja mingit selgitust.
Ka selles näites sisaldab kasutamine XSL funktsioone nagu xsl: call-template, xsl: alamstring-enne, xsl: alamstring-pärast, kui see, mida olete pärast.

XML ümber (food.xml): -
Endale ülesandeks on tokenize string piiritletud koma, mis märksõnaga "märksõnad"

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

Lõplikud väljund 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>

Ütlematagi selge ... lihtsalt muuta parameetri "delimitr", et eraldaja oma valik

Kui teil on kunagi teinud (või tegemise 1) vertikaalne menüü abil loendiüksuste (li) sildid ja CSS, siis võib tekkida see järjekordne viga Internet Explorer, kus IE 6 lisab need erinevused loendiüksuste mis sisaldavad ploki taseme elementide st kui on tühik vahel Loendiüksused märgistuskeel. Thanks, kuid tänu IE versiooni 7 tundub vabaks see viga.
Kui meeldib mulle, ja palju muud, te kuulute sellesse bänd pettunud arendajad, kes on veel saada oma uue paigutusega, töötades IE6 liiga, siis see võib osutuda kasulikuks. Have a look ...

Proovi märgistuskeel:

<ul id="menu">
<li> <a href="#"> Home </ a> </ li>
<li> <a href="#"> About </ a> </ li>
<li> <a href="#"> Services </ a> </ li>
<li> <a href="#"> Portfolio </ a> </ li>
<li> <a href="#"> KKK </ a> </ li>
<li> <a href="#"> Kontakt </ a> </ li>
</ Ul>

Sa võid luua mõned CSS, mis on sarnane 1 alla, et transfrom eespool juurdehindlus sisse vertikaalne menüü ....

Proovi CSS ...
# Menu {
margin: 0; padding: 0; background: # FF9900;
list-style-type: none; laius: 150px;
}
# Menu li {margin: 0; padding: 0;}
# Menu {kuva: block;
color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px solid # fff;
}

Tulemused näed ...

Lahendus see viga ... (muudetud / lisatud CSS paksus kaldkirjas)

# Menu {
margin: 0; padding: 0; background: # FF9900; list-style-type: none; laius: 150px;
float: left; / * see sisaldab paisati loendiüksuste * /
}
# Menu li {
margin: 0; padding: 0;
float: left; / * See fikseerib * /
Laius: 100%; / * tühik viga IE6 * /
}
# Menu {
kuva: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px solid # fff;
}

Kui eespool esitatud lahust doesnot tunduda tööle (põhjustel teada IE6 ainult) ... proovida seda meetodit asemel

Lihtsalt lisada see täiendava IE6 ainult stiilide märgistuskeel ...

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

Kui XML / XSL Muudab su Domian, siis on aegu, kui tahame tükk Dynamic koodi kasutada raamatukogu objekt (tuleb teha korduvkasutatavad). Mida ma mõtlen, ilmselt võiks teha selgemaks selle näiteks stsenaariumi.

Kujutage ette, olete loomas kodulehel (ja kasutades XML, XSL transfroms ofcourse) ja enamik lehti oleks Kommentaarid moodul. Hästi! siis kas sa kuuled või kleebi see kood iga lehekülje malli (mis ma dont on öelda, kuid teeb hoolduse ja ümbertegemine õudusunenägu) või veel parem, loote sisaldab faili, mida saaks tõmmatakse kus iganes sa tahad seda oma lehe ( s) ...
Nii Kuidas me loome XSL sisaldab faili ja lisada selle sees teise XSL faili? Siin on, kuidas ...

Just selleks, et asjad selgeks ... siin on kiire failide nimekirja, et teil oleks luua ... siin me ka infot puuviljade ja köögiviljade vanem leht nimega toitu.

1. food.xml - XML ​​fail mis ümberkujundamine hakatakse kohaldama
2. food.xsl - peamised XSL faili, mis muudab meie food.xml
3. inc_fruits.xsl - XSL sisaldab faili, mis muudab puu andmed
4. inc_vegtables.xsl - XSL sisaldab faili, mis muudab vetetables andmed

Ma ei usu mul selgitada palju, koodid nimetatud elementidest, on mõistetav ...

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

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

Lae kõigi eespool failid siin (253 downloads)

Postitus IE 6, MSIE on nii lahke, et meid UI arendajad, lisades veel mõned CSS omadused standardi kõige muu standard brauseritega. Üks selline kasulikku vara "min-height". Väga lihtne vara, mis ei vaja pikka Hengästynyt selgitus. Kui min-kõrgus jagamine on seadistatud, siis alati jääb, et maa kõrgus, kui sisu seda maja võtab vähem kui see mahub ja tähtsam (erinevalt plain vanilla "height" vara) kaalud või CSS sõnadega, see käitub jagunemine, kelle "height" on seatud "auto" ...

Mõned meist kehv arendajad, kes ikka veel on vaja koodi CSS et peab töötama IE6, un-kättesaadavus "min-height", võib osutuda Näita korgi millalgi ... Donot meeleheidet.

Õnneks on meil piisavalt quirks IE, et me kasutame välja ära ja häkkida oma teed läbi, et jõuda meie eesmärk ... st teha DIVISION rajoon kuigi tema min-kõrgus IE6

Lahendus 1: Kasutades alakriips Hack [ ... Loe edasi ]

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

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

---

Lahendus 2: Kasutades CSS omadus valija 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 omadus valija Hack ära asjaolu brauserid varem tha IE6 ignoreeritakse atribuudi-valijat. Märkus nõue teise konteinerisse osakonnale class = "someclass". Lihtsalt presense klassi atribuut selle jagunemine, alistab kõrgus tagasi auto jaoks Opera, Mozilla ja MSIE7 ja hiljem. IE6, mis ei toeta atribuuti selektorid, ignoreerib seda.

Vaata Demo on min-height hack jaoks IE6

Kui te kasutate XML ja XSL, siis oleks kohanud aeg, kui teil on mängida atribuudid ja väärtused XML tippe te XSL. Nad on koormatele saite pika Hengästynyt infot, kuid ükski leidsin oli lühike ja täpne ... See ei ole XML / XSL juhendaja, kuid minu katse panna-üheskoos mingi cheat nimekirja ...

Proovi XML, et me koostööd näeb välja selline ...

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

Nii saab alustada muudavad meie üle XML kasutada XSL

Näide 1: Kaubad väärtusega valitud omadus

<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 tulemus hakkab nägema

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

Näide 2: kokkujooksmine läbi ja näitab kõiki XML atribuutide nimed ja nende väärtused

<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 tulemus hakkab nägema


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


Jälgi seda ruumi, ma hoian ajakohastamine seda avastustega ...

CSS Reset on / on CSS seada mitu element stiile konkreetse ravi, mis loob järjepidevust erinevate brauseritega.

Meil kõigil on olnud läbi õudusunenäod kirjalikult piiriülese brauser CSS s. Nii et kui me hakake meie CSS, see on tava, et taastada kõigepealt eemaldada / reset tahes piiriülese brauseri vastuolud. CSS Taastab, on lihtsalt paar rida CSS, et te alustate oma CSS koos, andes sulle puhtale aluspinnale, et alustada hoone teie peale.

CSS taastab et ma tavaliselt kalduvad kasutama näeb välja selline

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

Reset brauseri font size
Samuti pange tähele, reset, et on kohaldatud brauser font suurus järgmine rida ...

html {font-size: 76%;}

Eespool CSS taastab brauser font suurus 10 pikslit, ja see võimaldab töötada suhteline font (mis on iga oluline WAI täitmise prespective)
Sest näiteks järgmistes määratlus, font-size in span seatud 10 pikslit ja et jao punkt on seatud 14 pikslit ...

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