معربا عن تكنولوجيا المعلومات

أكملت CSS 10 عاما وجود هذا العام! أولئك الذين قد حول لفترة من الوقت، وكسب الخبز (أو لا) باستخدام CSS، فإنك قد ندرك كيف كنا يتضورون جوعا لمجموعة جيدة من الخطوط. حتى مع عدم وجود مثل تلك الخطوط المصممين في حديقة زن CSS جعلت استخدام الصور الخلفية المغلق لاستبدال الخطوط في السعي من أجل القيام ببعض العدالة لتصاميمهم. حاولنا أيضا فلاش / جافا سكريبت ® الخارقة لتحقيق أهداف التصميم لدينا. بأي حال من الأحوال وهذا هو الطريق الخطأ للحصول على الخطوط نرغب في تصاميم الويب الخاص بنا، ولكن بالتأكيد، ليس هذا هو الطريق الأكثر مرغوب فيه. وعلى مدى سنوات مصمم على شبكة الإنترنت، مثلي، وكانت تعتمد بشكل كامل على 10 أو نحو ذلك الخطوط لتصاميمهم.

التطورات الأخيرة في الشبكة العالمية للمعايير ونماذج الخط تجعل من الممكن تقديم نص HTML في طرز أخرى من الخطوط الافتراضية القديمة نفسها. يأتي ذلك في decleration "نوع الخط @" CSS.

@ نوع الخط provids حل لربط ملف الخط الفعلي والحصول عليه من شبكة الإنترنت. @ استخدام نوع الخط، يمكن للمصممين استخدام الخطوط دون الحاجة لتجميد النص كصور خلفية. تنفيذ مباشرة جدا الى الامام، كما هو مبين أدناه ولكن كما كل الأشياء الجيدة لديك جزء CON إليها، وليس كل المتصفحات دعم واحد "نوع الخط". إذا كنت تخطط لاستخدام @ نوع الخط في موقع مع اشتراط عبر دعم المتصفح، ثم سيكون لديك لتوفير مصادر لمختلف أنواع الخط من نفسه.

1. تروتايب - شكل مصمم لتبدو جيدة على الشاشة. وأوصت خاصة للمتصفحات ويندوز (كروم).
2. بنتيبي (CFF) - هذا الشكل هو أفضل للعمل الطباعة ولا تبدو دائما جيد على ويندوز.
3. EOT - تحتاج هذه الصيغة إذا كنت تريد استهداف برنامج Internet Explorer. سوف آي إي لا تستخدم أي شكل آخر. وستنظر محكمة تكافؤ الفرص لدينا في "لايت"، حيث يتم ضغط لا هم ولا يقتصر المجال.
4. SVG - وهذا هو تنسيق XML التي تدعمها بعض برامج التصفح بما في ذلك اي فون.
5. WOFF - وهذا عبر متصفح، على شبكة الانترنت لتنسيق الخط فقط وخفيفة الوزن (بيانات الخط البريدي مضغوط) ويمكن جمعه مع أي تروتايب أو الخطوط العريضة بوستسكريبت (CFF). معتمد حاليا من قبل فايرفوكس 3.6 +.

@ استخدام نوع الخط

  @ الخط وجه {
 الخط بين أفراد الأسرة: "CalligraphyFLFRegular '؛
 SRC: رابط ('CalligraphyFLF.eot')؛
 SRC: محلي ('CalligraphyFLF')، بالتوقيت المحلي ('CalligraphyFLF')، شكل رابط ('CalligraphyFLF.woff') ('WOFF')، عنوان ('CalligraphyFLF.ttf') شكل ('تروتايب')، عنوان ('CalligraphyFLF . SVG # CalligraphyFLF ') شكل (' SVG ')؛
 }
 @ الخط وجه {
   الخط بين أفراد الأسرة: "لديك محرف"؛
   SRC: رابط ("الخطوط / font_filename.eot")؛
   SRC: المحلي ("اسم بديل")، بالتوقيت المحلي ("Alternatename")،
     رابط ("الخطوط / font_filename.woff") شكل ("WOFF")،
     رابط ("الخطوط / font_filename.otf") شكل ("بنتيبي")،
     رابط ("الخطوط / font_filename.svg font_filename #") شكل ("SVG")؛
   }
 H2 {الخط بين أفراد الأسرة: "لديك محرف"، جورجيا، الرقيق؛} 

وكما ترون من المثال أعلاه، لتشمل محرف الخط المختار، أحد لديه لربط مجموعة من fonttypes لمحرف واحد. وبالتالي الناس تشير إليها بوصفها "مجموعة الخط".
هناك مجموعات الخط المتاحة التي تسمح صراحة ربط مع خاصية CSS الخط @ وجه إليها بموجب اتفاقية ترخيص المستخدم النهائي (EULA).

الموارد WebFont مفيدة:

• المتاحة لمواجهة الخط @ تضمين الخطوط في صفحة ويكي http://webfonts.info/wiki/index.php؟title=Main_Page
  
• شعاع Larabie . فهو مصمم الخط الشهير الذي جعل مئات من خطوط تروتايب للاهتمام متاحة بحرية للاستخدام على شبكة الإنترنت. الخطوط له أنيقة، ديكور، و لعوب.
• ديتر Steffmann آخر هو مصمم الخط كبير. هو، أيضا، حققت الخطوط الجميلة العديدة المتاحة على أي شخص استخدام.
• متجر الخط : تقدم الخطوط المصممة خصيصا للاستخدام على شبكة الإنترنت. أكثر من 30 من العائلات FontFont أنجح متاحة الآن كما FontFonts ويب. FontShop أيضا لديه دليل المستخدم WebFont مفصل http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• السنجاب الخط : يسلط الضوء على جميع الخطوط التي السنجاب الخط يقدم للاستخدام مع تضمين @ CSS الخط وجه. السنجاب الخط يوفر كمية هائلة من نوع، يجعل من القتلى بسيطة لاختيار واحد من أصل، ويقدم بشكل ملائم "مجموعات" - محرف من اختيارك، في العديد من الأشكال، وتعبئتها مع HTML و CSS التجريبي الذي يستخدم الحالية جدا @ الخط وجه بناء الجملة . كما أنها توفر وسيلة ل جعل بنفسك @ الخط وجه مجموعات . إذا كان قد تم الترخيص للمحرف الذي تريد استخدامه على النحو المناسب (تلك التي تأتي مع جهاز الكمبيوتر الخاص بك ليست بخير بالضرورة)، ومولد كهربائي ينتج EOT، SVG، ومهلا! ملفات WOFF.

آخر توت سريع. هنا هو شيء بسيط وجميل استخدام السلطة من CSS ... ولكن كان من الصعب concieve (وكان بالتأكيد ليست لي) لتبدأ. مضيفا Dropshadow، قد يكون من كعكة peice بالنسبة للكثيرين منا، وذلك باستخدام بعض الأدوات لتحرير الصور مثل فوتوشوب ضبطت الألعاب النارية الخ.
السبب، وأنا اختار شبح الهبوط باستخدام المغلق هو أنه، في حين عادة ما يخلق تصميم صفحات / HTML من تطبيق، ومتطلبات الحفاظ على بالتكرار. ما أعنيه هو، في موقع ويب موجود مع العديد من الصور، مثل تلك التي تعرض فريندز قائمة أو مكتبة الصور، سيكون من الصعب لاعادة معالجة حمولة كاملة من الصور التي تم تفريغها بالفعل إلى إضافة أو إزالة الظلال، لذلك المسألة.
إذا كان الأمر كذلك كنت قد فعلت التفكير قليلا إلى الأمام أثناء إنشاء HTMLS لإضافة هذه الانقسامات إضافية أو عادة الحالة هو أن يكون لديك منطق حلقة توليد هذه الرموز / الصور المصغرة في XSL، PHP. جافا أو أي لغة البرمجة / البرمجة، يمكنك ان تضيف إليها في أي وقت، ومن ثم مجرد مسألة عرض وإخفاء هذه الظلال باستخدام خاصية العرض المغلق، وفقا لمتطلبات العملاء المتغيرة ... وانا havn't القيام به هذا النوع من التفكير إلى الأمام قبل هذا ... ولكن ahev بدأت الآن!

في المثال أدناه، فإن الصورة الأصلية ظل الحرة ويتم تطبيق dropshadows كما هو مطلوب! أيضا، لقد ذهبت قليلا اضافية، وذلك باستخدام الحيل توت بلادي في وقت سابق (Well! هذه هي على الأرجح أقصر متنوعة من البرامج التعليمية، لذلك ما يبرره إلا وصفها بأنها "توت" 'ق) عن طريق CSS الملكية كليب للتباهي فقط

الصورة الأصلية

النتائج CSS DropShadow

عرض تجريبي | تحميل sourcefiles

لماذا أريد أن أفهم هذا؟ Humm ...!

ومعظم الكتاب يتفقون على أن CSS CSS الملكية كليب هو على الارجح واحدة من أهم خصائص CSS الأمم المتحدة استخداما. كان ذلك صحيحا بالنسبة لي أيضا، وكان في غاية السعادة لتجاهله، حتى بدأت بتعديل الثاني MOOTOOLS مكون المقبض المتزلج (دبوس) (مع مؤشر متوسط) .

كان هناك اقتراح جيد من أحد المستخدمين عنصر لتعديل المكون المتزلج باستخدام الصور backgroud قص (ضد تقسيم عرض متغير) للإشارة إلى نطاق التمرير. وهكذا جاء وقتي لدخول متعة ولكن الأمم المتحدة استأجرتها (بالنسبة لي فكورسي) المياه للعقار كليب CSS.

حسنا! كيف يمكن أن يكون من الصعب؟ ليس كثيرا على الإطلاق ... نعم و لا. بناء الجملة في استخدام الممتلكات كليب المغلق هو مستقيم جدا ولكن المعنى / usuage قليلا croocked. مع الذاكرة مثل الألغام، في كل مرة أجلس لإعادة صياغة سيناريو المتزلج على بلدي ... لدي tokeep مع الإشارة إلى استخدام هذه الخاصية مقطع، لأذكر نفسي المنطق الذي خلقت الكتابة في بلدي .... ومن هنا! يعتقد أن القلم عليه، على امل ان نتذكر انه في المستقبل (وأيضا لصالح أولئك الذين يبدو تحير للملكية كليب CSS)

ماذا CSS كليب تفعل؟

الكليب هو جزء من وحدة تأثيرات بصرية من CSS 2.1. ببساطة، وظيفتها هي وضع إطار مرئية على رأس كائن الذي يتم قص وتقليم الصور وبالتالي خلق الصور المصغرة دون الحاجة إلى إنشاء ملفات إضافية (وأنا قد وضعت بالفعل هذه الميزة لتحسين استخدام المكونات في المتزلج )

باستخدام خاصية CSS كليب، يمكنك إنشاء لقطة باستخدام الشكل المستطيل. مثل الكثير من خصائص CSS الأخرى (مثل الخ هامش الحشو،)، وذلك باستخدام احداثيات يتطلب أربعة إحداثيات أعلى، يمين، أسفل، يسار (TRBL). طبيعة croocked هذه الخاصية تعكس عند القاء نظرة فاحصة على كيفية كليب يحسب المنطقة لقطة، وذلك باستخدام هذه الإحداثيات الأربعة (يرسل الدماغ الى إرم لفترة من الوقت). الآن للتشويش على الجزء السفلي الذي يبدأ من أعلى، والحق يبدأ من اليسار. . ترى ماذا قلت؟ .... وبالتالي هذه الوظيفة ...

وهذا يمكن خلط القليل تختفي بسهولة، مع هذا التفسير البصري للممتلكات كليب / المستطيل CSS على النحو التالي!

متطلبات CSS كليب

المهمة بدأنا هو مقطع صورة مصغرة التالية في صورة squarer يبحث (وكذلك صورة واسعة الزاوية)

الأصلي Thumbnal / صورة	متطلبات كليب للحاوية فئة Thumbmail

النتائج CSS كليب

عرض تجريبي | تحميل sourcefiles

قبل كان لدينا للتعامل مع CSS لإنشاء تخطيطات الصفحات لدينا والتوفيق بين بعض المحتويات داخل خلية جدول بدا لعب الأطفال فقط ل. ببساطة تحديد "محاذاة" أو "valign" الملكية من الجدول لدينا في محاذاة اختيارك، قطعة من الكعكة!
مع تخطيطات المغلق، رغم ان لدينا "محاذاة عمودية" الملكية للعناصر، لا يبدو أن تكون بسيطة مثل "محاذاة" أو "valign" الخصائص. على أن تكون أكثر specifiic في "عمودي محاذاة" لا يبدو أن حل أي من المشاكل الخاصة بك، وخاصة إذا كتابة قطعة من عبر متصفح المغلق.

من دون استخدام جداول HTML، ومشكلة تركز على الكائن، سواء كان صورة أو بعض النص ضمن تقسيم المحتوية، ربما كان كل كابوس مطوري UI / المغلق في بعض نقطة. هذه المشكلة يستنبط المزيد من التوفيق بين همومك، إذا كان الكائن إلى أن تتركز الحيوية في الطبيعة، أي عندما ارتفاعه هو متغير (الارتفاع غير معروف).

على الرغم من أنه لا يوجد حل معروف على التوالي إلى الأمام من شأنها أن تعمل عبر مجموعة من المتصفحات علينا أن نتعامل مع، الحل الذي حاولت أن تصل إلى ما يبدو للعمل في برامج التصفح القليلة التي حاولت في (IE6، IE 7 ، وما يليها).

الحل:
في مثل متصفحات موزيلا، أوبرا وسفاري، وغريب التصرف "محاذاة عمودية" لا يمكن أن تتحقق الملكية إلى رشدها، وذلك ببساطة عن طريق تعيين "عرض" ملك للتقسيم تحتوي على "خلية الجدول" (العرض: جدول خلية) .

المشكلة لا تزال مع عائلة اي من المتصفحات، ومنظمة الصحة العالمية، حتى الآن لا يبدو أن نفهم ما لمع الخاصية "جدول الخلية"، والجاهل كما هي، وأنها تجاهله. الحل الواردة أدناه، على الرغم من البساطة، وإعلانات بعض العناصر أكثر 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 </ div> المصدر:
</ div> المصدر:
</ div> المصدر:

النتيجة يبدو مثل هذا: -

عرض تجريبي هنا | ملفات المصدر تحميل (التحميل 448 مرة)

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 </ div> المصدر:
</ div> المصدر:
</ div> المصدر:

النتيجة يبدو مثل هذا: -

محاذاة إلى الأسفل 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 </ div> المصدر:
</ div> المصدر:
</ div> المصدر:

النتيجة يبدو مثل هذا: -

عرض تجريبي هنا | حمل هنا

يبدو أن العصور، منذ كنت في محاولة لايجاد حل معقول لهذه المشكلة المحاذاة. ولكن الآن مع هذا الحل، أشعر أنني في سلام القليل.

مع الأمل في أن يوما ما

• وسوف عمودي الانحياز الملكية في CSS العمل كما يفعل داخل خلية جدول، دون الحاجة للتغلب على الكثير من اللف والدوران
• على الأقل، وتحديد هامش قمة: السيارات وهامش القاع: السيارات، كما سيعطي النتيجة نفسها كما هو الحال مع هامش اليسار واليمين هامش مجموعة لصناعة السيارات
• وسوف تكون حرب برامج التصفح على بعض يوم.
• هناك إرادة واحدة فقط متصفح للجميع.

تحميل CSS و HTML من الحل فوق هنا (تم تحميلها 448 مرة) .. عن الفهم، وعدم 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" على محدد من اختيارك

إذا كان لديك من أي وقت مضى (أو إجراء واحد) إلى قائمة عمودي باستخدام عناصر قائمة (لي) به والمغلق، فقد تواجه، بعد هذه علة أخرى في Internet Explorer، حيث IE 6 إدراج هذه الفجوات بين عناصر القائمة التي تحتوي على عناصر مستوى الكتلة، أي إذا كان هناك أي المسافات بين عناصر القائمة في العلامات. شكرا، ولكن بفضل لا، إصدار IE 7 يبدو خالية من هذا الخطأ.
إذا مثلي، وغيرها الكثير، كنت تنتمي إلى هذه الفرقة من المطورين المحبطين، الذين لا تزال لديها للحصول على تخطيطات الجديدة، والعمل في IE6 جدا، ثم وهذا قد يكون مفيدا. إلقاء نظرة ...

عينة العلامات:

<ul id="menu">
<LI> <a href="#"> الرئيسية </ a> </ لى>
<LI> <a href="#"> عن </ أ> </ لى>
<LI> <a href="#"> خدمات </ أ> </ لى>
<LI> <a href="#"> حقيبة </ أ> </ لى>
<LI> <a href="#"> مساعدة </ أ> </ لى>
<LI> <a href="#"> الاتصال بنا </ a> </ لى>
</ UL>

هل يمكن أن تخلق بعض المغلق، على غرار ما سيأتي، على transfrom العلامات أعلاه في القائمة رأسي ....

عينة المغلق ...
# القائمة {
هامش: 0؛ الحشو: 0؛ خلفية: # FF9900؛
قائمة على النمط من نوع: لا شيء؛ العرض: 150px؛
}
# القائمة لى {هامش: 0؛ الحشو: 0؛}
# قائمة 1 {العرض: كتلة؛
اللون: # 555555؛
النصوص الديكور: لا شيء؛
الحشو: 0 15px؛
خط الطول: 2.5؛ الحدود القاع: 1px الصلبة # FFF؛
}

النتائج التي سوف نرى ...

حل لهذا الخطأ ... (تعديل / إضافة CSS بخط مائل جريئة)

# القائمة {
هامش: 0؛ الحشو: 0؛ خلفية: # FF9900؛ قائمة على النمط من نوع: لا شيء؛ العرض: 150px؛
تعويم: غادر؛ / * هذا يحتوي على عناصر قائمة تعويم * /
}
# القائمة لى {
هامش: 0؛ الحشو: 0؛
تعويم: غادر؛ / * هذا حل * /
عرض: 100٪؛ / بقة بيضاء * في IE6 * /
}
# قائمة 1 {
عرض: كتلة؛ اللون: # 555555؛
النصوص الديكور: لا شيء؛
الحشو: 0 15px؛
خط الطول: 2.5؛ الحدود القاع: 1px الصلبة # FFF؛
}

إذا كان لا يتلقى الحل أعلاه يبدو للعمل (لأسباب معروفة للIE6 فقط) ... جرب هذه الطريقة بدلا من ذلك

فقط إضافة هذه الأساليب إضافية فقط IE6 إلى العلامات الخاصة بك ...

<- [إذا LT IE 7>
<style type="text/css">
# القائمة لى {العرض: مضمنة لبنة؛}
# القائمة لى {العرض: كتلة؛}
</ النمط>
<[ENDIF] ->

إذا XML / XSL تحول هو دميان الخاص بك، ثم هناك أوقات عندما نريد peice من رمز الحيوي لاستخدامه البند مكتبة (إلى أن يتم إعادة استخدامها). ما أعنيه، أن من المحتمل أن تكون أكثر واضح مع هذا السيناريو المثال.

تخيل أنك تقوم بإنشاء موقع على شبكة الانترنت (وباستخدام XML، XSL transfroms فكورسي)، ومعظم صفحات سيكون لها وحدة التعليقات. حسنا! ثم إما نسخ أو لصق هذه الشفرة في كل قالب الصفحة (التي لا تملك القول، ولكن جعل صيانة وإعادة صياغة كابوسا) أو حتى أفضل، يمكنك إنشاء ملف تضمين التي يمكن سحبها في أي وقت مضى حيث تريد في الصفحة الخاصة بك ( ق) ...
كيف لنا إذن أن إنشاء ملف تضمين 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: أنماط>

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

تحميل جميع الملفات المذكورة أعلاه هنا (249 تحميل)

إضافة IE 6، وكانت MSIE نوع ما يكفي لنا مطوري واجهة المستخدم من خلال إضافة عدد قليل من أكثر خصائص CSS القياسية لمعظم متصفحات القياسية الأخرى. خاصية واحدة مفيدة من هذا القبيل في "ارتفاع مين". الخاصية جميلة على التوالي إلى الأمام لا يحتاج إلى شرح طويل ينضب. عندما يتم تعيين مين ارتفاع للتقسيم، فإنه يحتفظ دائما أن ارتفاع مجموعة عندما يكون المحتوى من منازل تحتل أقل مما يستطيع تحمله، والأهم (على عكس سهل الفانيليا الممتلكات "ارتفاع") جداول أو بعبارة المغلق، فإنه يتصرف مثل ومن المقرر تقسيم الذين "الارتفاع" إلى "تلقائي" ...

بالنسبة للبعض منا مطوري الفقراء، الذين لا تزال هناك حاجة إلى رمز CSS التي يجب أن تعمل أيضا في IE6، ويمكن من الامم المتحدة وتوفر "مين ارتفاع"، يثبت وجود سدادة تظهر في وقت ما ... متأكدا اليأس.

لحسن الحظ، لدينا ما يكفي من المراوغات في آي إي، وأننا سوف تستخدم لمصلحة الخروج والإختراق من خلال طريقنا لتحقيق هدفنا ... أي جعل تقسيم شعبة وكأن لها مين ارتفاع في IE6

حل 1: استخدام المأجور نؤكد [ ... اقرأ المزيد ]

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

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

---

الحل 2: استخدام المأجور المغلق محدد سمة

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


وهاك المغلق محدد سمة يستفيد من حقيقة أن برامج التصفح في وقت سابق من IE6 ثا تجاهلت atribute-محدد. لاحظ شرط آخر تقسيم الحاويات مع "someclass" الطبقة =. فقط presense السمة فئة لهذا التقسيم، يتجاوز ارتفاع مرة أخرى إلى السيارات للأوبرا، وموزيلا MSIE7 وفي وقت لاحق. IE6، والذي لا يعتمد محددات atribute، يتجاهل ذلك.

عرض تجريبي للالإختراق مين ارتفاع عن IE6

إذا كنت تستخدم XML و XSL، ثم قد جئت عبر وقت واحد، عندما يكون لديك للعب مع حولها سمات وقيم العقد XML في كنت XSL. هم الكثير من المواقع التي تحتوي على معلومات ينضب طويل حول هذا الموضوع، ولكن لا شيء وجدت كانت مختصرة ودقيقة ... وليس هذا البرنامج التعليمي 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 الخاص، مما يتيح لك قاعدة نظيفة للبدء في بناء الخاصة بك عليه.

يعيد المغلق الذي أميل عادة إلى استخدام يشبه هذا

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 {
قائمة على غرار: لا شيء؛
}

H1، H2، H3، H4، H5، H6 {
حجم الخط: 100٪؛
الخط الوزن: طبيعي؛
}

إعادة تعيين حجم الخط في المتصفح
نلاحظ أيضا إعادة تعيين الذي تم تطبيقه على حجم الخط في المتصفح في السطر التالي ...

html {font-size: 76%;}

ما سبق CSS إعادة تعيين حجم الخط المستعرض ل10 بكسل، وهذا يجعل من الممكن للعمل مع أحجام الخطوط النسبية (والذي هو مهم كل من الامتثال WAI prespective)
لعلى سبيل المثال، في التعريف التالي، يتم تعيين حجم الخط في فترة زمنية إلى 10 بكسل وذلك في paragarph يتم تعيين إلى 14 بكسل ...

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