انقر هنا للعودة إلى العمود التعليمي HTML HTML. إذا كنت ترغب في تصفح البرنامج التعليمي CSS ، يرجى النقر هنا.
أعلاه: لغة الترميز - علامات لايت . الفصل 10 تطبيق CSS
في الجزء الأول ، ينصب التركيز الرئيسي على مثال بناء جملة العلامات ، ونستكشف أيضًا كيفية تطبيق CSS على علامة التصميم وتحديد تفاصيل النمط. في الفصل الثاني ، سنناقش عدة طرق لتطبيق CSS على مستند أو موقع ويب أو حتى علامة واحدة. بالإضافة إلى ذلك ، سنناقش أيضًا كيفية إخفاء محتوى CSS من الإصدارات السابقة من المتصفحات حتى نتمكن من استخدام التقنيات المتقدمة دون التأثير على بنية العلامات التي يمكن قراءتها من قبل جميع المتصفحات والأجهزة.
في وحدة تمديد الطرف الأخيرة من الفصل ، سنقدم ممارسة تبديل الخطوط والألوان وصنع سمات متعددة دون الحاجة إلى كتابة نصوص - استبدال أوراق الأنماط. كيفية تطبيق CSS على الملفات؟
الآن سنناقش أربع طرق مختلفة لتطبيق CSS على المستندات. كل طريقة لها مزاياها وعيوبها. اعتمادًا على الموقف ، قد تكون الأساليب الأربعة هي الخيار الأفضل. تستخدم كل طريقة موضحة هنا هيكل بناء الجملة Transitial Legal XHTML 1.0 ، <html> و configuration <head>.
لنبدأ بالطريقة A. الطريقة A: <style> علامة
<! doctype html public -// w3c // dtd xhtml 1.0 transitional // en
http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<head>
<meta http-equiv = content-type content = text/html ؛ charset = utf-8 />
<title> تطبيق CSS </title>
<نوع النمط = text/css> <! [CDATA [... تم وضع بيان CSS هنا ...
]]> </style></head>
يصبح هذا النهج أيضًا ورقة أنماط مضمنة ، مما يتيح لك كتابة جميع إعلانات CSS مباشرةً في (X) HTML File ، وتقع علامة <style> في الصفحة <head> ويمكن وضعها بأي نمط تحتاجه.
يضمن النص/CSS المحدد لسمة النوع أن المتصفح يفهم لغة النمط التي نستخدمها ولا يمكن حذفها. نستخدم أيضًا بناء جملة شرح CDATA الموصى به من قبل W3C لإخفاء هذه المحتويات من المتصفحات التي لا تستطيع التعامل مع قواعد النمط (http://www.w3.org/tr/xhtml1/#h-4.8).
واحدة من العيوب الرئيسية لاستخدام الطريقة A هي أن بعض المتصفحات القديمة (وخاصة Internet Explorer 4.x و Netscape 4.x) ستقوم ببذل قصارى جهدها لعرض تأثير CSS المحدد في علامة <style>. إذا كنت تستخدم أي قواعد متطورة في وضع CSS وتحديد المواقع التي تدعم فقط أحدث المتصفح ، فقد يتسبب ذلك في مشاكل. إذا وضعت قواعد CSS معقدة في علامة <Style> ، فقد يتسبب ذلك في إرباك ويصعب قراءة نتائج التنسيق لمستخدمي المتصفحات القديمة. لا يمكن تخزينه مؤقتًا.
هناك عيب آخر في أوراق النمط المدمجة هو: إذا تم وضعها في الصفحة ، فيجب عليك تنزيلها معًا في كل مرة تقرأ فيها الصفحة. في المقابل ، يمكن أن تسمح الطرق الأخرى المقدمة لاحقًا بتنزيل ورقة الأنماط مرة واحدة فقط ، ثم استخدام ذاكرة التخزين المؤقت للمتصفح مباشرة. تعديله عدة مرات.
نظرًا لأن ورقة الأنماط المدمجة يتم تخزينها في صفحات XHTML ، إذا تم استخدام نفس النمط في العديد من صفحات الموقع ، فهذا يعني أن هذه الأنماط ستحتوي على العديد من النسخ المتطابقة. إذا كنت بحاجة إلى تغيير هذه الأنماط ، فيجب عليك تعديل جميع الصفحات التي تستخدم نفس النمط. يتذكر! سيكون تعديل العديد من المستندات في وقت واحد واجبًا. من المريح تطوير
عند الحديث عن الفوائد ، وجدت أنه عندما بدأت في كتابة واختبار CSS لأول مرة ، كان من المناسب للغاية كتابة جميع القواعد الموجودة في الصفحة التي استخدمتها للاختبار باستخدام الطريقة A. سمح لي ذلك بوضع العلامات والأنماط في نفس المستند ، والتي كانت مريحة للتعديل المتكرر. بعد الانتهاء من الاختبار ، سأطبق CSS على النسخة العامة بطرق مختلفة. دعونا نلقي نظرة على عدة طرق. الطريقة ب: ورقة النمط الخارجي
<! doctype html public -// w3c // dtd xhtml 1.0 transitional // en
http://www.w3.org/tr/2000/rec-xhtml1-20000126/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<head>
<meta http-equiv = content-type content = text/html ؛ charset = utf-8 />
<title> تطبيق CSS </title>
<link rel = typesheet type = text /css href = styles.css _fcksavedurl = styles.css /></head>
توضح الطريقة B ممارسة توصيل أوراق النمط الخارجي: ضع جميع محتوى إعلان CSS في مستند منفصل ، ثم الرجوع إلى محتوىه باستخدام علامة <ink> في (X) HTML <Head>.
نستخدم سمة HREF لتحديد موقع المستند. يمكن أن تكون هذه السمة مسارًا نسبيًا (مثل المثال أعلاه) ، أو المسار المطلق (مملوء في موضع HTTP: // الكامل من ورقة الأنماط). في الوقت نفسه ، لاحظ أن <link> هي علامة واحدة أو علامة فارغة ، ويجب إغلاقها في / في النهاية. فصل المستند = مريح للصيانة
هناك ميزة واضحة لوضع جميع قواعد CSS في المستندات التي تختلف عن المحتوى الموسومة: أي ، يمكن تعديل أي تغييرات في النمط على موقع الويب بأكمله لإكمال الملف دون الحاجة إلى تعديل عبارة CSS بشكل متكرر لكل صفحة ويب مثل استخدام الطريقة A.
بالطبع ، هذا أمر بالغ الأهمية لمواقع الويب واسعة النطاق. يمكن للمئات أو حتى الآلاف من الصفحات مشاركة نفس النمط في وثيقة واحدة. تنزيل مرة واحدة
تتمثل إحدى المزايا الإضافية لربط أوراق الأنماط الخارجية في أنه يتم تنزيل هذا المستند عادة مرة واحدة فقط ، وسيستخدم المتصفح ذاكرة التخزين المؤقت ، والتي يمكن أن توفر وقت التنزيل المطلوب عند تصفح نفس الصفحة أو الصفحات الأخرى التي تشير إلى ورقة النمط نفسها بشكل متكرر. لا يزال لا يمكن أن يكون مخفيًا تمامًا.
مثل الطريقة A ، يمكن أن تكون الطريقة B قديمة ولا تدعم سوى بعض وظائف CSS لتفسير المتصفحات. قد يتسبب أي نمط مصمم لآخر المتصفحات في تشويش كبير في المتصفحات غير المدعومة.
حسنًا ... هذه هي المرة الثانية التي ذكرت فيها هذه المشكلة ، يجب حل الطريقة التالية ، أليس كذلك؟ الطريقة ج: Import
<! doctype html public -// w3c // dtd xhtml 1.0 transitional // en
http://www.w3.org/tr/2000/rec-xhtml1-20000126/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<head>
<meta http-equiv = content-type content = text/html ؛ charset = utf-8 />
<title> تطبيق CSS </title>
<نوع النمط = text/css> <! [CDATA [ Import Styles.css ؛ ]]> </style></head>
على غرار الطريقة B ، يمكن أن يؤدي استخدام @import إلى استيراد تعريفات CSS من الملفات الخارجية ذات المسارات النسبية (مثل المثال أعلاه) أو المسارات المطلقة.
الطريقة C لها نفس مزايا استخدام علامة <ink>. نظرًا لأن ورقة الأنماط يتم وضعها في مستند خارجي ، فإن تعديل وتحديث مستند واحد يمكن أن يغير موقع الويب بأكمله ويمكن إكماله بسهولة وبسرعة. سيتم تخزين ورقة الأنماط الخارجية مؤقتًا من قبل المتصفح ، مما يوفر وقت التنزيل لاستيراد جميع الصفحات من ورقة الأنماط نفسها.
الفائدة الرئيسية لاستخدام الطريقة C هي أن الإصدارات التالية من NetScape 4.x لا تدعم بناء جملة IMPort ، لذلك سوف تخفي محتوى CSS المشار إليه. هذه بالتأكيد خدعة مفيدة ، لأنه يمكننا كتابة بناء جملة CSS المتقدمة للتعامل مع تفاصيل التصميم مثل التخطيطات ، بحيث يتم عرض أحدث المتصفحات التي يمكنها التعامل معها ، وكذلك جعل المتصفحات القديمة تتجاهل هذه الجملة.
تكمن مشكلة Netscape 4.x في أنها تعتقد أن قدرات دعم CSS جيدة مثل تلك التي يتم دعمها بالفعل. لذلك ، باستثناء Netscape 4.x ، يمكننا أن ندع المتصفح يقرر ما إذا كان سيتم عرض التأثير الصحيح من تلقاء نفسه.
هذه هي النقطة الرئيسية عند تصميم مواقع الويب بناءً على التصميم القياسي. حاول فصل رمز العلامة المهيكلة عن وضع العرض ، وتوفير تفاصيل التخطيط والأنماط الأخرى للمتصفحات المدعومة. تستخدم المتصفحات القديمة محتوى منظمًا يمكنهم القراءة والعرض بسهولة ، ولكن لن يتعامل مع قواعد CSS المتقدمة المخفية لهم. أنماط مفتوحة وأنماط قريبة.
انظر إلى الأشكال 10-1 و 10-2 ، وقارنها. هذا هو موقع الويب الخاص بي الشخصي باستخدام CSS الكامل ، ثم قم بإيقاف تشغيل تأثير عرض CSS (يجب أن يكون قريبًا جدًا من تأثير عرض المتصفحات القديمة). لا يزال الهيكل عند عدم استخدام CSS واضحًا للغاية ، ولا يزال من السهل على الجميع قراءته واستخدامه. إذا لم نخفي CSS المطلوبة لتخطيط العرض ، فقد يحصل مستخدمو المتصفحات القديمة على مجموعة من المحتوى الذي يصعب قراءةه.
الشكل 10-1 موقعي الشخصي ، باستخدام CSS
الشكل 10-2: قم بإزالة CSS على نفس الصفحة ، وقد يعرضه المتصفح القديم على أنه مزيج من الطريقة B والطريقة C لتطبيق ورقة نمط متعددة.
في بعض الأحيان ، قد يكون من المفيد إدخال العديد من أوراق الأنماط في مستند واحد ، على سبيل المثال ، يمكنك وضع جميع قواعد التخطيط في مستند واحد وخط خط في وثيقة أخرى ، والتي يمكن أن تجعل عمل الحفاظ على عدد كبير من القواعد أسهل بالنسبة للتصميمات الكبيرة والمعقدة. آثار الحرباء
عندما كنت أقوم بإنشاء موقع ويب لمجلة Fast Company ، أردت تغيير نظام الألوان للموقع كل شهر حتى يتمكن من مطابقة صورة الغلاف للمجلة الحالية. من أجل تبسيط أعمال التعديل المنتظم ، وضعت جميع قواعد CSS ذات الصلة بالألوان في مستند واحد ووضع قواعد أخرى لن يتم تعديلها كل شهر في وثيقة أخرى.
قد يكون من الأسهل والسريع تغطية جميع الألوان كل شهر ، دون الحاجة إلى العثور ببطء على المحتوى الذي يجب تغييره في مئات القواعد الأخرى التي تشكل التصميم. طالما تم تعديل هذا المستند ، سيتم تغيير لون الموقع بأكمله على الفور. كيف تفعل ذلك
لإدخال أوراق نمط متعددة مع الطريقة B والطريقة C ، تتمثل الطريقة في استخدام علامة <ink> في الصفحة للرجوع إلى المستند الرئيسي CSS ، مثل عرض الأسلوب B ، وربط STYLES.CSS.
يحتوي محتوى STYLES.CSS فقط على عدد قليل من قواعد IMPORT ويقدم ملفات CSS الأخرى المطلوبة.
على سبيل المثال ، إذا كنت ترغب في تقديم ثلاث أوراق أنماط ، واحدة لمعالجة التصميم ، واحدة لتحديد الخطوط ، وواحدة لتحديد اللون ، فإن محتوى الأنماط. قد يبدو CSS مثل هذا:
/*لن تفسر المتصفحات القديمة قواعد الاستيراد*/
IMPORT url (layout.css) ؛
url import url (fonts.css) ؛
Import url (colors.css) ؛
وبهذه الطريقة ، يمكن استخدام نفس علامة <Link> في جميع أنحاء الموقع ، ويتم الرجوع فقط إلى ملف STYLES.CSS. يمكن أن تستمر هذا المستند في استيراد أوراق الأنماط الأخرى باستخدام قاعدة Import. طالما تمت إضافة ورقة الأنماط الجديدة إلى هذا المستند ، يمكن أن تلعب دورًا في الموقع بأكمله.
هذا يجعل من السهل للغاية تحديث واستبدال CSS. وض
هناك خدعة أخرى لإخفاء CSS من المتصفحات القديمة باستخدام قاعدة Import للطريقة C. ، أي ، استخدم التأثير المتتالي لـ CSS ، واستخدام الطريقة A أو الطريقة B لتوفير المتصفحات القديمة والأحدث لدعم تأثيرات Lo-Fi ، ثم استخدام Import لتوفير تأثيرات متقدمة للمتصفحات المدعومة الأخرى.
ستحصل المتصفحات القديمة على محتوى يمكنهم دعمه فقط ، في حين أن المتصفحات الأحدث ستحصل على جميع الأنماط التي يرغبون في استخدامها.
دعونا نرى كيف يبدو رمز هذه التقنية:
<! doctype html public -// w3c // dtd xhtml 1.0 transitional // en
http://www.w3.org/tr/2000/rec-xhtml1-20000126/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<head>
<meta http-equiv = content-type content = text/html ؛ charset = utf-8 />
<title> تطبيق CSS </title>
<link rel = typesheet type = text /css href = lofi.css _fcksavedurl = lofi.css /> <نوع النمط = text/css> import hifi.css ؛ </style></head>
يجب أن تحتوي Lofi.css على قواعد CSS أساسية ، مثل لون الارتباط وحجم الخط ؛ بينما يحتوي Hifi.css على قواعد متقدمة ، مثل التصميم ، وتحديد المواقع ، وصور الخلفية ، إلخ.
يمكننا نقل كل من أنماط إصدار Lo-Fi و Hi-Fi دون الحاجة إلى كتابة البرامج النصية أو تحديد إصدارات المتصفح بأي طريقة على جانب الخادم. الأمر مهم
من المهم تحديد ترتيب العلامات <link> و <style> في رمز مصدر العلامة. يشير سلسلة CSS إلى أولوية القواعد ، والتي يتم تحديدها بناءً على ترتيب الحدوث.
على سبيل المثال ، نظرًا لأن معظم المتصفحات الأخيرة تدعم كلتا الطريقتين ، سيتم تنزيل جميع أوراق الأنماط وسيتم تطبيق جميع الأنماط الموجودة فيه. في هذا الوقت ، ستتجاوز قواعد النمط في Hifi.css الأنماط المحددة بواسطة Lofi.css لنفس العلامة. ما هو السبب؟ لأنه في رمز مصدر العلامة ، يظهر hifi.css بعد lofi.css.
تتجاهل المتصفحات القديمة hifi.css لأن قاعدة import غير مدعومة ، لذلك فهي تستخدم فقط النمط المحدد بواسطة lofi.css. احتضان ميزة سلسلة
يتم إحداث فوائد CSS Cascadedity بطرق مختلفة. على سبيل المثال ، لنفترض أن موقع الويب الخاص بك بالكامل يشارك CSS خارجية للتخطيط ، وتحديد المواقع ، ووضع الخطوط ، والألوان ، وما إلى ذلك ، ثم يجب عليك استخدام ورقة نمط import على كل صفحة لإخفاء هذه القواعد للمتصفحات القديمة.
إذا كانت هناك صفحة على موقع الويب تريد مشاركة إعدادات التخطيط والمواقع ، ولكنها تحتاج إلى ضبط الخط أو اللون. في هذه الصفحة (تختلف عن الصفحات الأخرى على موقع الويب) ، لا يزال من الممكن تقديم المستند الرئيسي CSS. بعد الانتهاء من المرجع ، سنشير إلى وثيقة CSS الثانية التي تحدد نمطًا خاصًا لهذه الصفحة. سيتم تفضيل أي قواعد في ملف CSS الثاني ، في الكتابة فوق قواعد النمط المحددة بواسطة ملف CSS الأول لنفس التسمية.
دعونا نلقي نظرة على المثال. يحتوي Master.css على بنية موقع الويب بالكامل ، والخطوط وقواعد CSS الأخرى ، بينما في Custom.css ، يتم الرجوع إليها فقط على صفحة محددة ، تغطي إعدادات نمط عدة علامات خاصة.
<! doctype html public -// w3c // dtd xhtml 1.0 transitional // en
http://www.w3.org/tr/2000/rec-xhtml1-20000126/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<head>
<meta http-equiv = content-type content = text/html ؛ charset = utf-8 />
<title> تطبيق CSS </title>
<نوع النمط = text/css> import master.css ؛ import custom.css ؛ </style></head>
نظرًا لأن Custom.css هو الثاني في رمز مصدر العلامة ، فإن النمط الذي يحدده لنفس العلامة سيتجاوز ما تم صياغته داخل master.css.
على سبيل المثال ، لنفترض أنه داخل Main.css ، نطلب علامة <H1> لاستخدام الخط الأحمر الرقيق ، و <h2> لاستخدام الخط الأزرق serif.
H1 {
Font-Family: Georgia ، Serif ؛
اللون: أحمر.
}
H2 {
Font-Family: Georgia ، Serif ؛
اللون: الأزرق.
}
في صفحة محددة ، نريد فقط تغيير إعدادات النمط لعلامة <H1> واتبع نمط <h2>. ثم في custom.css ، نحتاج فقط إلى إعلان النمط الجديد لـ <h1>.
H1 {
Font-Family: Verdana ، Sans-Serif ؛
اللون: برتقالي.
}
سيقوم هذا الإعلان بتجاوز الإعلان في Master.css (لأنه يتم تقديم Custom.css لاحقًا). إذا قدمت الصفحة أولاً master.css ثم custom.css ، فستستخدم علامة <H1> خط Verdana Orange ، بينما لا يزال <h2> خطًا زرقاء Serif. لأن الإعلان اللاحق في Master.css لم يتم تجاوزه بواسطة Custom.CSS.
تعد وظيفة Cascading of CSS أداة رائعة لمشاركة الأساليب الشائعة ، مما يتيح لك تغطية القواعد فقط التي تحتاج إلى تعديل.
<H1 Style = Font-Family: Georgia ، serif ؛ اللون: Orange ؛> هذا هو العنوان </h1>
هذه هي طريقة تطبيق CSS الرابعة التي تواصلنا معها - أنماط مضمنة. يمكن إضافة أي علامة تقريبًا بسمات النمط ، مما يتيح لك تطبيق قواعد نمط CSS مباشرة على العلامات ، تمامًا مثل المثال أعلاه.
نظرًا لأن الأنماط المضمنة هي أدنى طبقة من التراص ، فإنها تتجاوز جميع إعلانات وقواعد النمط الخارجي المعلنة ضمن علامة <Style> <head>.
هذه طريقة بسيطة لإضافة أنماط في جميع أنحاء الصفحة ، ولكن يجب دفعها مقابل استخدامها. يرتبط النمط بالتسمية
إذا كنت تعتمد كثيرًا على الطريقة D عند إنشاء أنماط للصفحة ، فلن تفصل بين المحتوى وعرض طرق العرض. عندما تعود وتعديل ، يجب عليك وضع علامة على الرمز المصدر في العمق ووضع CSS في الملف المنفصل ، والذي سيكون من الأسهل في الحفاظ عليه.
لا تختلف طريقة الإساءة D عن استخدام ملصقات تأثير العرض مثل <Font> لتلوث الكود المصدري. يجب دائمًا وضع تفاصيل التصميم هذه في مكان آخر. كن حذرًا في الاستخدام
في الواقع ، بالطبع ، في بعض الأحيان ، تتمثل الفرصة لاستخدام الأنماط المضمنة في حفظ حياتك عندما تحتاج إلى إضافة أنماط إلى الصفحة ، ولكن لا يمكنك الوصول إلى الملفات الخارجية ، أو لا يمكنك تعديل <Head> ، أو يمكنك استخدام النمط مؤقتًا وسوف تستخدمه أيضًا عندما لا تنوي مشاركتها مع علامات أخرى.
على سبيل المثال ، إذا كانت هناك صفحة على موقع الويب تقوم بمعنى عملية بيع خيرية ستتم إزالتها لاحقًا وتريد تصميم نمط فريد لهذه الصفحة ، فربما تضمن قواعد النمط في العلامة دون إضافتها إلى ورقة الأنماط الدائمة.
دعونا نفعل ذلك الآن ، ولكن كن على دراية بأن هذه الأنماط لا يمكن تغييرها بسهولة ، أو يتم استخدامها عبر الصفحة لموقع الويب بأكمله.
الصفحة السابقة 1 2 3 الصفحة التالية اقرأ النص الكامل