הבעת IT

CSS סיים 10 שנות קיומה השנה! מי בסביבה כבר זמן מה, להרוויח את לחמם (או לא) באמצעות CSS, אז אולי מודעים עד כמה היינו רעבים לבחירה טובה של גופנים. גם עם חוסר של גופנים מעצבים כמו אלה על גן זן CSS עשו שימוש בתמונות-CSS רקע להחליף גופנים במרדף אחר לעשות קצת צדק עם העיצובים שלהם. ניסינו גם פלאש / JavaScript ® פריצות להשיג מטרות העיצוב שלנו. בשום פנים ואופן לא זה הדרך הלא נכונה להשיג את הגופנים אנו חפצים לתוך עיצובים האינטרנט שלנו, אבל בהחלט, זה לא הדרך הרצויה ביותר. ושוב מעצב אינטרנט שנים, כמוני, יש לסמוך באופן מלא על עשרה בערך גופנים עבור העיצובים שלהם.

ההתפתחויות האחרונות בתקני אינטרנט ותבניות גופן מאפשרים להפוך טקסט ב-HTML הגופנים שאינם הגופנים אותם ברירת המחדל ישנים. מגיע "@ fontface" decleration CSS.

@ Fontface provids פתרון קישור לקובץ גופן בפועל לאחזר אותה מהאינטרנט. באמצעות @ fontface, מעצבי יכול להשתמש בגופנים מבלי להקפיא את הטקסט כתמונות רקע. היישום הוא מאוד ישר קדימה, כפי שנראה בהמשך, אך כמו כל הדברים הטובים יש חלק CON אליו, לא כל הדפדפנים תומכים "סוג הגופן" אחת. אם אתם מתכננים להשתמש fontface @ באתר עם ​​המחייב תמיכה דפדפנים, אז תצטרך לספק מקורות שונים למוצרי סוגי גופנים של אותו דבר.

1. TrueType - פורמט שנועד להיראות טוב על המסך. מומלץ במיוחד עבור Windows דפדפנים (Chrome).
2. OpenType (CFF) - פורמט זה הוא טוב יותר לעבודת ההדפסה לא תמיד נראה טוב ב-Windows.
3. EOT - אתה צריך את זה בפורמט אם אתה רוצה למקד את Internet Explorer. IE לא להשתמש בכל תבנית אחרת. של EOT שלנו ייחשב "לייט", שכן הם דחוסים ולא תחום מוגבל.
4. SVG - זה בפורמט XML נתמך על ידי מספר דפדפני כולל iPhone.
5. WOFF - זה לדפדפנים, אינטרנט רק עיצוב הגופן הוא קל משקל (נתוני הגופן הוא דחוס), ואפשר גם עם הידור TrueType או PostScript (CFF) מתאר. היא נתמכת כיום על ידי פיירפוקס 3.6 +.

באמצעות @ fontface

  @ Font-הפנים {
 גופן משפחתי: "CalligraphyFLFRegular ';
 src: url ("CalligraphyFLF.eot ');
 src: מקומית ("CalligraphyFLF"), המקומית ("CalligraphyFLF '), בפורמט URL (" CalligraphyFLF.woff ") (" woff "), כתובת האתר (" CalligraphyFLF.ttf') בפורמט ("TrueType"), כתובת האתר ("CalligraphyFLF . SVG # CalligraphyFLF ') בפורמט ("SVG");
 }
 @ Font-הפנים {
   גופן משפחתי: "הגופן שלך";
   src: url ("גופנים / font_filename.eot");
   src: מקומית ("שם חלופי"), המקומית ("Alternatename"),
     ("גופנים / font_filename.woff") בפורמט URL ("woff"),
     ("גופנים / font_filename.otf") בפורמט URL ("OpenType"),
     ("גופנים / font_filename.svg # font_filename") בפורמט URL ("SVG");
   }
 h2 {font-family: "הגופן שלך", ג'ורג'יה, serif;} 

כפי שניתן לראות מהדוגמה לעיל, לכלול את הגופן גופן שנבחר, יש קישור לסדרה של fonttypes על גופן את אותו הדבר. ולכן אנשים מתייחסים אליו כאל "קיט גופן".
ישנן ערכות גופנים הזמינות במפורש מאפשר קישור עם נכס @ font-CSS הפנים לה על פי הסכם הרשיון למשתמש קצה (EULA).

WebFont משאבים שימושיים:

• עבור @ גופן פנים הטבעת גופנים בדף ויקי ב http://webfonts.info/wiki/index.php?title=Main_Page
  
• ריי Larabie . הוא מעצב בעל שם גופן שעשה מאות גופני TrueType מעניינים זמינים לשימוש חופשי באינטרנט. הגופנים שלו אלגנטי, דקורטיבי, ושובבה.
• דיטר Steffmann עוד מעצב גופן גדול. גם הוא עשה גופנים יפים רבים זמינים לכל אחד להשתמש.
• חנות גופן : מציעה גופנים שעוצבו במיוחד לשימוש באינטרנט. יותר מ 30 המשפחות FontFont המצליחים ביותר זמינה כעת FontFonts אינטרנט. FontShop גם WebFont מפורט הוראות שימוש http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• סנאי גופן : מציגה את כל הגופנים סנאי גופן מציע לשימוש עם הטבעה CSS @ font-הפנים. סנאי גופן מציע כמות מרשימה של סוג, עושה את זה פשוט מת לבחור אחד החוצה, בלי בעיות "מציע" - ערכות הגופנים על פי בחירתך, בפורמטים שונים, ארוזים עם הדגמה HTML & CSS המשתמשת הנוכחי מאוד @ font-הפנים בתחביר . הם גם מציעים דרך לגרום @ משלך גופן פנים ערכות . אם הגופן שבו ברצונך להשתמש כבר רישיון מתאים (אלה שמגיעים עם המחשב הם לא בהכרח בסדר), גנרטור מייצר EOT, SVG, ו - היי! קבצים WOFF.

תות נוסף מהירה. הנה משהו פשוט ונחמד באמצעות העוצמה של CSS ... אבל היה concieve קשה (וזה בטח לא אני) מלכתחילה. הוספת Dropshadow, יכול להיות peice עוגה עבור רבים מאיתנו, בעזרת כמה כלים לעריכת תמונות כמו פוטושופ ANF זיקוקים וכו '
הסיבה לכך, בחרתי הצללה באמצעות CSS היא, בדרך כלל תוך יצירת עיצוב הדף / html הבקשה, הדרישות לשמור iterating. מה זאת אומרת הוא, אתר אינטרנט קיים עם תמונות רבות, כמו אלה שמציגים freinds רשימה או גלריית תמונות, זה יהיה קשה לעבד מחדש את העומס של כל התמונות שהיו כבר פרקו להוסיף או להסיר את הצללים, בשביל זה משנה.
אז אם יש לך לעשות חשיבה קדימה מעט יצירת HTMLS להוסיף את חטיבות נוספות או בדרך כלל המצב הוא שיש לך הגיון Loop יצירת אלה סמלים / תמונות ממוזערות XSL, PHP. JAVA או כל שפה אחרת התכנות / scripting, אתה יכול להוסיף את זה בכל זמן, אז הוא רק עניין של הצגה והסתרה אלה הצללים באמצעות נכס תצוגה CSS, כמו לכל הלקוחות המשתנים דרישות ... אני havn't לעשות סוג כזה של חשיבה קדימה לפני זה ... אבל ahev התחיל עכשיו!

בדוגמה הבאה, התמונה המקורית היא צל בחינם את dropshadows מיושמים כנדרש! כמו כן, הלכתי עוד קצת, באמצעות טריקים של תות קודם שלי (Well! אלה הם ככל הנראה הקצר ביותר במגוון של הדרכות, אז זה מוצדק רק קורא להם "תות" של) על נכס באמצעות CSS קליפ עבור להשוויץ בלבד

התמונה המקורית

תוצאות DropShadow-CSS

הצג הדגמה | הורדה sourcefiles

מדוע אני רוצה להבין את זה??? הוממ ...!!

רוב הכותבים-CSS יסכימו נכס CSS קליפ הוא כנראה אחד בלתי בשימוש תכונות רוב CSS. זה היה נכון אז גם לי ושמחתי ביותר להזניח את זה, עד שהתחלתי שינוי שני MooTools (PIN) Knob Slider Component (עם מחוון טווח) .

היתה הצעה טובה מאחת משתמשים רכיב לשנות את רכיב Slider באמצעות תמונות backgroud גזומים (נגד חלוקת רוחב משתנה) כדי לציין את טווח המחוון. לכן הגיע הזמן שלי להיכנס כיף אבל בלתי שכר (לי ofcourse) המים של הנכס קליפ CSS.

טוב! כמה קשה זה יכול להיות? לא הרבה בכלל ... כן ולא. התחביר כדי להשתמש במאפיין קליפ CSS היא זקופה למדי, אבל המשמעות / usuage קצת croocked. עם זיכרון כמו שלי, כל פעם אני יושב לעבוד מחדש על התסריט Slider שלי ... יש לי tokeep מתכוון לחזור השימוש של נכס זה קליפ, כדי להזכיר לעצמי את ההיגיון שאני יצרתי בתסריט שלי .... מכאן! חשבתי בעט אותו, בתקווה לזכור אותו בעתיד (וגם לטובת אלה נראה שיגע ידי נכס קליפ CSS)

מה קליפ CSS לעשות?

הסרטון הוא חלק מודול אפקטים חזותיים של CSS 2.1. במילים פשוטות, את העבודה הוא להציב חלון גלוי על גבי האובייקט כי הוא מקוטע, ומכאן גזירת תמונות ויצירת תמונות ממוזערות מבלי ליצור קבצים נוספים (יש לי כבר את בתכונה זו כדי שימוש טוב יותר ברכיב Slider )

שימוש ברכוש קליפ CSS, אתה יכול ליצור את הצורה בעזרת חיתוך rect. כמו נכסים רבים אחרים-CSS (כמו וכו ', שולי הריפוד), תוך שימוש rect דורש ארבע קואורדינטות למעלה, למטה מימין, משמאל (TRBL). הטבע croocked של נכס זה משקף כאשר אתה לוקח נראה כיצד קליפ מחשב באזור גזר, תוך שימוש בארבע נקודות ציון (המוח שולח אל לזרוק קצת). עכשיו לבלבל אותך למטה מתחיל מלמעלה, ומיד מתחיל משמאל. . אתה רואה מה אמרתי? .... לכן זה לכתוב ...

זה בלבול קטן יכול בקלות להיעלם, עם הסבר זה ויזואלית של הנכס CSS קליפ / rect להלן!!

דרישות קליפ-CSS

המשימה התחלנו הוא קליפ תמונה ממוזערת הבאה לתמונה רבועים מחפש (וגם תמונה רחבת זווית)

Thumbnal התמונה המקורית /	קליפ דרישות Sqaure Thumbmail

תוצאות קליפ-CSS

הצג הדגמה | הורדה sourcefiles

לפני שהיינו צריכים להתמודד עם CSS כדי ליצור פריסות עמוד שלנו, יישור קצת תוכן בתוך תא בטבלה נראה משחק פשוט של הילד. כל שעליך לעשות הוא להגדיר "ליישר" או נכס "valign" של השולחן כדי לקבל את היישור של הבחירה שלך, חתיכת עוגה!
עם פריסות CSS, אם כי יש לנו "אנכי ליישר" נכס עבור היסודות, זה לא נראה פשוט כמו "ליישר" או "valign" מאפיינים. להיות specifiic יותר "אנכי ליישר" אף פעם לא נראה לפתור את כל הבעיות שלך, במיוחד אם הם כותבים חתיכת לדפדפנים CSS.

ללא שימוש טבלאות HTML, הבעיה של שבמרכזו אובייקט, בין אם מדובר בתמונה או טקסט במסגרת חלוקת המכיל, הייתה כנראה כל ממשק משתמש / CSS למפתחי סיוט בשלב כלשהו. הבעיה עוד יותר את אומדן הדאגות שלך על יישור, אם האובייקט להיות מרוכז דינמית בטבע, כלומר, כאשר הגובה שלה הוא משתנה (גובה לא ידוע).

אמנם אין פתרון ישר קדימה ידוע כי יעבוד על פני מגוון של דפדפנים לנו להתמודד עם, הפתרון שניסיתי להגיע אכן נראה לעבוד הדפדפנים כמה שניסיתי אותו (IE6, אינטרנט אקספלורר 7 , FF).

הפתרון:
בדפדפנים כמו Mozilla, Opera ו-Safari, מתנהג מוזר "אנכי ליישר" נכס ניתן להביא את החושים שלו, פשוט על ידי קביעת "תצוגה" נכס אגף המכיל את "תא הטבלה" (תצוגה: שולחן תאים) .

הבעיה עדיין נשארת עם המשפחה של הדפדפנים אינטרנט אקספלורר, אשר עדיין לא נראה להבין מה לעשות עם הנכס "שולחן תאים" ו בורים כפי שהם, הם פשוט להתעלם מזה. הפתרון כדלקמן, אם כי, מודעות פשוטים כמה אלמנטים של DOM מעט יותר ל-HTML שלך כדי לגרום לדברים לקרות.

CSS ו-HTML נראה כך
.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/> צפיות: 3456 </ p>
</ P>
</ P>

התוצאה נראית כך: -

הצג את הדגמת כאן | מקור הורדת קבצים (הורד 452 פעמים)

TOP יישור 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/> צפיות: 1234 </ p>
</ P>
</ P>

התוצאה נראית כך: -

התחתונה יישור 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/> צפיות: 1234 </ p>
</ P>
</ P>

התוצאה נראית כך: -

הצג את הדגמת כאן | הורד כאן

נראה כמו המון זמן, מאז אני מנסה למצוא פתרון סביר לבעיה זו יישור. אבל עכשיו עם הפתרון הזה, אני מרגיש שלם קטן.

בתקווה שיום אחד

• אנכי יישור נכס ב-CSS יעבוד כמו שהוא עושה בתוך תא בטבלה, מבלי להכות הרבה סחור
• לפחות, הגדרת margin-top: אוטומטי והרווחיות התחתונה: אוטומטי, ייתן כתוצאה זהה עם מרווח לשמאל ומערכת הביטחונות זכות אוטומטית
• המלחמות הדפדפן ייגמר יום אחד.
• שם זה רק דפדפן אחד עבור כולם.

הורד את ה-CSS ו-HTML של הפתרון הנ"ל כאן (הורד 452 פעמים) .. עבור understandability, CSS לא היה מותאם

נ.ב.: ודרך אגב, אלה תמונות ממוזערות של כמה תמונות אני שלחצת ...

אם הדרישה שלך היא לפצל את הערך צומת XML, המכיל מחרוזת תחום בעל ערך, לתוך פרטים בודדים, אז הגעתם למקום הנכון ... יש לראות בדוגמה למטה. אם אתה מכיר קצת XML ו XSL ... אני לא חושב שהיית צריך שום הסבר.
כמו כן, בדוגמה זו כוללת שימוש בפונקציות כמו XSL XSL: גיוס תבנית, xsl: מחרוזת, לפני, xsl: מחרוזת משנה אחרי, אם זה מה שאתה אחרי.

XML להשתנות (food.xml): -
נניח המשימה היא tokenize מופרד מיתר באמצעות פסיק, את את "מילות מפתח" תג

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

פלט 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>

אין צורך לומר ... פשוט לשנות את הפרמטר "delimitr" כדי מפריד על פי בחירתך

אם ביצעת אי פעם (או עושה 1) תפריט אנכי באמצעות פריטי הרשימה (li) תגיות CSS, אתה עשוי להיתקל, זה עוד באג ב-Internet Explorer, שם IE 6 מוסיף את הפערים האלה בין פריטי רשימה המכילים אלמנטים ברמת הבלוק, כלומר אם יש רווח לבן בין פריטי הרשימה סימון. תודה, אבל לא תודה, גרסת אקספלורר 7 נראה ללא הבאג הזה.
אם כמוני, ועוד רבים וטובים, אתה שייך ללהקה זו של היזמים מתוסכלים, שעדיין צריך לקבל את הפריסות החדשות שלהם, העובדים IE6 מדי, אז זה יכול להיות שימושי. שיהיה לך להסתכל ...

לדוגמא סימון:

<ul id="menu">
<LI> <a href="#"> בית </ a> </ li>
<LI> <a href="#"> אודות </ a> </ li>
<LI> <a href="#"> שירותים </ a> </ li>
<LI> <a href="#"> תיק </ a> </ li>
<LI> <a href="#"> שאלות נפוצות </ a> </ li>
<LI> <a href="#"> צור קשר </ a> </ li>
</ Ul>

אתה יכול ליצור כמה CSS, דומה לזה בהמשך, כדי transfrom סימון מעל לתוך התפריט האנכי ....

מדגם CSS ...
# התפריט {
שולי: 0; padding: 0; הרקע: # FF9900;
רשימת בסגנון מסוג: ללא; רוחב: 150px;
}
# בתפריט li {שולי: 0; padding: 0;}
# התפריט {תצוגה: לחסום;
color: # 555555;
text-decoration: none;
padding: 0 15px;
קו גובה: 2.5, הגבול התחתון: מוצק 1px # fff;
}

את התוצאות תוכלו לראות ...

פתרון הבאג הזה ... (שונה הוסיף / CSS בכתב נטוי מודגש)

# התפריט {
שולי: 0; padding: 0; הרקע: # FF9900; רשימת בסגנון מסוג: ללא; רוחב: 150px;
float: עזבו: / * זה מכיל פריטי רשימה ריחפו * /
}
# בתפריט li {
שולי: 0; padding: 0;
לצוף: עזבו; / * זה מתקן את * /
רוחב: 100%; / * רווח לבן באג ב IE6 * /
}
# התפריט {
לחסום; צבע:: הצגה # 555555;
text-decoration: none;
padding: 0 15px;
קו גובה: 2.5, הגבול התחתון: מוצק 1px # fff;
}

אם doesnot הפתרון הנ"ל נראה לעבוד (מסיבות הידועות רק IE6) ... תנסה בשיטה זו במקום

רק להוסיף סגנונות נוספים רק כדי IE6 סימון שלך ...

<- [אם lt IE 7>
<style type="text/css">
# בתפריט li {display: inline-block;}
# בתפריט li {display: block;}
</ Style>
<[Endif] ->

אם XML / XSL הופך הוא domian שלך, אז יש פעמים שאנחנו רוצים peice של קוד דינמי לשמש פריט בספריה (להיעשות מחדש שמיש). למה אני מתכוון, מן הסתם יכול להיות ברור יותר עם התרחיש הזה למשל.

תאר לעצמך שאתה יוצר אתר אינטרנט (באמצעות XML, XSL transfroms ofcourse) ורוב הדפים יהיה מודול תגובות. טוב! אז אם אתה מעתיק או להדביק את הקוד הזה לתוך התבנית כל דף (שבו אני לא צריך להגיד, אבל לעשות תחזוקה חוזרת סיוט) או אפילו טוב יותר, אתה יוצר קובץ לכלול שניתן נעצרה בכל מקום שבו אתה רוצה את זה בדף שלך ( ים) ...
אז איך אנחנו יוצרים קובץ XSL לכלול ולכלול אותו בתוך קובץ אחר XSL? הנה כמה ...

רק כדי להבהיר את הדברים ... הנה רשימה מהירה של קבצים תיצור ... כאן, אנחנו נהיה כולל מידע על פירות וירקות לתוך דף הורה שנקרא מזון.

1. food.xml - נתוני XML קובץ שבו השינוי יחול
2. food.xsl - קובץ XSL הראשי, אשר יהפכו food.xml שלנו
3. inc_fruits.xsl - XSL כוללים קובץ יעבד נתונים פירות
4. inc_vegtables.xsl - XSL כוללים קובץ יעבד נתונים vetetables

אני לא חושב שאני צריך להסביר הרבה, את הקודים המרכיבים הנ"ל, יהיה עצמית הסבר ...

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: תבנית>
</ 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>

להוריד את כל הקבצים הנ"ל כאן (253 הורדות)

הודעה IE 6, MSIE כבר די מספיק לנו מפתחי ממשק המשתמש על ידי הוספת כמה מאפיינים נוספים CSS הסטנדרטי למרבית הדפדפנים סטנדרטיים אחרים. אחד נכס שימושי כזה "גובה דקות". נכס די ישר קדימה כי צריך שום הסבר מייגעים. כאשר דקות גובה לחלוקה נקבע, כי תמיד נותרה כי הגדר גובה כאשר תוכן זה בתי תופסת פחות ממה שהוא יכול להחזיק חשוב (שלא כמו נכס רגיל וניל "גובה") קשקשים או במילים CSS, שהוא מתנהג כמו חלוקה אשר "גובה" מוגדר "אוטומטי" ...

עבור חלק מאיתנו מפתחים עניים, שעדיין נדרשים קוד ה-CSS, כי צריך גם לעבוד IE6, לבטל את הזמינות של "דקות גובה", יכול להוכיח פקק להראות מתישהו ... הייאוש Donot.

למרבה המזל, יש לנו מספיק שיגיונות ב-IE, כי אנחנו נשתמש לטובת החוצה לפרוץ את דרכנו כדי להגיע למטרה שלנו ... כלומר להפוך את ענף כאילו שלה דקות גובה ב IE6

פתרון 1: שימוש האק מדגישות [ ... קרא עוד ]

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

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

---

פתרון 2: שימוש האק בורר ב-CSS מאפיין

.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 תכונה מנצל את העובדה הדפדפנים מוקדם IE6 tha התעלם atribute-בורר. שים לב את הדרישה של אגף נוסף עם מיכל "someclass" class =. רק נוכחות של התכונה ברמה של חלוקה זו, עוקפת את גובה חזרה אוטומטית של אופרה, מוזילה ו MSIE7 ואילך. IE6, שאינה תומכת סלקטורים atribute, מתעלם ממנה.

הצג הדגמה של האק דקות גובה עבור IE6

אם אתה משתמש ב-XML ו-XSL, אז אתה יכול לבוא על פני זמן, כאשר אתה צריך לשחק עם התכונות והערכים של צמתים XML ב-XSL לך. הם המון אתרים עם מידע מייגעים על זה, אבל לא מצאתי היו קצרות ומדויקות ... זה לא TUTORIAL XML / XSL, אבל הניסיון שלי שם, יחד מעין רשימת לרמות ...

דגימת ה-XML אנו עובדים עם נראה כך ...

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

כך מאפשר להתחיל להפוך XML מעל שלנו באמצעות XSL

דוגמה 1: הצגת הערך תכונה נבחר

<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 ייראה

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

דוגמא 2: שהסתחררו ולהציג את כל שמות מאפיין XML וערכיהם

<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 ייראה


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


לראות את החלל הזה, אני אמשיך לעדכן את זה עם הממצאים החדשים ...

איפוס CSS הוא / הם CSS להגדיר מספר סגנונות אלמנט בסיסי ספציפי יוצר אחידות בין דפדפנים שונים.

כולנו כבר דרך סיוטי לילה של כתיבה לדפדפנים של CSS. לכן, כאשר אנחנו מתחילים לכתוב CSS שלנו, זהו למעשה לאפס את זה קודם כדי להסיר / לאפס את כל הסתירות דפדפנים. CSS מאפס, הם שורות פשוטות של CSS שתתחילו CSS שלך, נותן לך בסיס נקי להתחיל לבנות על שלך.

מאפס CSS כי אני בדרך כלל נוטים להשתמש נראה כך

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

UL ol, {
רשימת בסגנון: אין;
}

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

לאפס את גודל הגופן בדפדפן
שים לב גם לאפס את זה הוחל על גודל הגופן בדפדפן בתור הבא ...

html {font-size: 76%;}

מעל CSS מאפסת את הגופן בדפדפן בגודל 10 פיקסלים, וזה מאפשר לעבוד עם גודל הפונטים יחסית (שזה כל חשוב מקיום WAI prespective)
עבור למשל, בהגדרה הבאה, גודל הפונט בפרק זמן מוגדר 10 פיקסלים וכי paragarph מוגדר כ 14 פיקסלים ...

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