انقر هنا للعودة إلى العمود التعليمي HTML HTML.
أعلاه: لغة الترميز - تحدث عن القائمة مرة أخرى
المصدر الأصلي الفصل 9 لايت علامات
في السابق ، واصلنا ذكر أن المحتوى المهيكل يمكنه تصنيف بنية وتفاصيل التصميم وتبسيط العلامات. ماذا يجب أن نفعل؟ يمكننا استخدام XHTML و CSS التي تلبي المعايير بدلاً من الجداول والصور لإنشاء التصميم الذي نحتاجه.
عند استخدام التكنولوجيا القياسية لإنشاء مواقع ويب (وخاصة مواقع الويب التي تعتمد بشكل كبير على CSS) ، فإننا نطور عادة عادة سيئة ، وهي إضافة علامات إضافية وسمات الفصل ، والتكنولوجيا لا تحتاج إليها على الإطلاق.
باستخدام محددات المنحدر في CSS ، يمكننا القضاء على خصائص <Div> و <span> وخصائص التصنيف. العلامات المبسطة تعني أنه سيتم قراءة الصفحات بشكل أسرع وأسهل في الحفاظ عليها. في هذا الفصل ، سنناقش عدة طرق بسيطة لإنجاز هذه المهمة. كيفية تبسيط العلامات عند إنشاء موقع ويب مع تقنية قياسية؟
العلامات المبسطة هي موضوع مهم يستحق المناقشة. عند إنشاء موقع ويب ، فإن إحدى الفوائد الضخمة التي يمكن الحصول عليها عن طريق الكتابة في XHTML المشروعة وإعداد تأثيرات العرض مع CSS هي علامات مبسطة. يمثل الرمز القصيرة سرعة تنزيل أسرع ، والتي هي بالتأكيد مفتاح المستخدمين الذين يستخدمون 56 كيلو هاتفي للوصول إلى الإنترنت. يمثل الرمز القصير أيضًا متطلبات مساحة الخادم وتقليل استهلاك عرض النطاق الترددي ، مما قد يجعل مدير Boss و System System سعيدًا.
المشكلة هي أن مجرد التأكيد على أن الصفحة تتوافق مع المواصفات القياسية لـ W3C لا تعني أنه سيتم اختصار الرمز المستخدم في المحتوى. بالطبع ، يمكنك إضافة العديد من العلامات غير المرغوب فيها إلى محتوى العلامة الذي يلبي المعايير. نعم ، إنها تفي بالمعايير ، لكنها ربما أضافت الكثير من التعليمات البرمجية غير الضرورية لتسهيل تصميم CSS.
لا تخف! هناك بعض النصائح التي تسمح لك بتصميم موجز ولديها محتوى علامات قياسي ، ولكن أيضًا تحتفظ بما يكفي من إمكانيات التحكم في نمط CSS. ثم دعونا نتعلم بعض النصائح البسيطة لتبسيط العلامات. محدد الميراث
سننظر هنا في طريقتين لتمييز الشريط الجانبي (بما في ذلك المعلومات والروابط والأشياء الأخرى) في موقع ويب شخصي. تعتبر جميع الأشياء الجيدة في <div> مع معرف الشريط الجانبي بحيث يمكن وضعها في نافذة المتصفح لاحقًا (سيناقش الجزء الثاني وظيفة تخطيط/نوع CSS). الطريقة أ: تصنيف سعيد
<div id = الشريط الجانبي>
<h3 class = passhoding> حول هذا الموقع </h3>
<p> هذا هو موقعي. </p>
<h3 class = rideshoding> روابط بلدي </h3>
<ul class = sidelinks>
<li class = link> <a href = archives.html> المحفوظات </a> </li>
<li class = link> <a href = about.html> عني </a> </li>
</ul>
</div>
لقد رأيت محتوى معلمًا مشابهًا للطريقة A على العديد من مواقع الويب. عندما اكتشف المصمم لأول مرة قوة CSS ، يكون من السهل أن تغمرها وتحديد فئة لكل علامة تريد إنشاء نمط خاص.
في المثال السابق ، ربما نعتقد أن <h3> يحدد الفئة = الاتجاه الجانبي لمساعدتهم على تحديد الأنماط المختلفة عن العناوين الأخرى داخل الصفحة ؛ تحديد فئة لـ <ul> و <li> هو أيضًا السبب نفسه. تصنيف CSS
عند تحديد النمط ، لنفترض أننا نريد أن يتحول العنوان إلى اللون البرتقالي ، استخدم خط Serif ، مع حافة رمادية فاتحة في الأسفل ، وتحتاج القائمة Sidelinks غير المرتبة إلى إزالة رمز النقطة الصغيرة وتغيير عنصر القائمة إلى Bold.
سيبدو محتوى CSS المطلوب بواسطة الطريقة A مثل هذا:
.sideheading {
Font-Family: Georgia ، Serif ؛
اللون: #C63 ؛
Border-Bottom: 1PX Solid #CCC ؛
}
.sidelinks {
نوع القائمة: لا شيء ؛
}
.وصلة {
خط الرصيف: جريئة ؛
}
يمكننا الرجوع إلى أسماء الفصول (الفئات) التي تم إنشاؤها في العلامات لتحديد أنماط خاصة لهذه العلامات ، ويمكنك حتى أن تتخيل أن أجزاء أخرى من الصفحة منظمة بهذه الطريقة: أشرطة التنقل ، نهاية الصفحة ومنطقة المحتوى ، يتم تشكيل كل علامة من أجل التحكم الكامل عليها.
نعم ، إنه يعمل ، ولكن هناك طريقة بسيطة لحفظ هذه الصفات الفئة ، في حين تجعل CSS أسهل في القراءة وأكثر تنظيماً. ثم انظر إلى الطريقة B. الطريقة ب: الاختيار الطبيعي
<div id = الشريط الجانبي>
<h3> حول هذا الموقع </h3>
<p> هذا هو موقعي. </p>
<h3> روابط بلدي </h3>
<ul>
<li> <a href = archives.html> المحفوظات </a> </li>
<li> <a href = about.html> عني </a> </li>
</ul>
</div>
الطريقة ب قصيرة وموجزة! لكن انتظر ، إلى أين تسير الفئات؟ حسنًا ... ستجد قريبًا أننا لا نحتاجهم حقًا ، وذلك أساسًا لأننا نحسم هذه العلامات في علاقة <Div> مع اسم فريد (في هذه الحالة ، الشريط الجانبي).
هذا هو المكان الذي يتم فيه استخدام محدد الميراث. نحتاج فقط إلى تحديد العلامات الموجودة داخل الشريط الجانبي مباشرةً مع اسم التسمية لإزالة خصائص التصنيف غير الضرورية هذه. حدد CSS مع المحتوى قبل وبعد العلاقة.
دعونا نلقي نظرة على نفس النمط مثل الطريقة A ، ولكن هذه المرة نستخدم محدد الميراث لتحديد العلامة الموجودة في الشريط الجانبي.
#sidebar H3 {Font-Family: Georgia ، Serif ؛
اللون: #C63 ؛
Border-Bottom: 1PX Solid #CCC ؛
}
#sidebar ul {نوع القائمة: لا شيء ؛
}
#sidebar li {خط الرصيف: جريئة ؛
}
من خلال الإشارة إلى معرف #sidebar ، يمكنك تحديد نمط خاص للعلامات الواردة فيه. على سبيل المثال ، فقط علامات <H3> الموجودة داخل <div id = الشريط الجانبي> ستقوم بتعيين قواعد CSS أعلاه.
طريقة تحديد الأنماط بناءً على العلاقة بين المحتوى قبل وبعد هي مفتاح تقصير المحتوى. عادة ، بعد تصميم الهيكل الدلالي للمحتوى ، ليست هناك حاجة لإضافة سمات التصنيف إلى الملصق. لا يستخدم فقط في الشريط الجانبي
نعرض فقط فقرة واحدة من الصفحة (أي الشريط الجانبي) ، ولكن يمكن تطبيق هذا النهج على بنية الصفحة بأكملها. ما عليك سوى تقسيم محتوى العلامة إلى عدة فقرات وفقًا للمنطق (ربما #NAV ، #Content ، #Sidebar ، #Footer) ، ثم استخدم محدد الميراث لإنشاء أنماط خاصة للعلامات في هذه الفقرة.
على سبيل المثال ، لنفترض أن الفقرات # -content و #sidebar داخل الصفحة تستخدم علامة <h3> ، وتريد منهم أن يستخدموا خط Serif ، ومع ذلك ، فأنت تريد عرض <h3> من فقرة واحدة باللون الأرجواني والآخر ليكون برتقالي.
هذا لا يتطلب أي تعديل علامة ، بالإضافة إلى خصائص التصنيف. يمكننا تحديد قواعد لجميع العلامات <h3> التي يجب مشاركتها بواسطة نمط عالمي ، ثم استخدام محدد الميراث لتعيين اللون وفقًا لموضع العلامة.
H3 {
Font-Family: Georgia ، Serif ؛ / * جميع H3s ليكون Serif */
}
#content h3 {
اللون: أرجواني
}
#sidebar H3 {
اللون: برتقالي.
}
حدد أن جميع علامات <H3> تستخدم خطوط Senif ، ويجب تحديد الألوان لاستخدام Purple أو Orange وفقًا لسياق المحتوى. في هذا الوقت ، لا نحتاج إلى تكرار قواعد المشاركة (في هذا المثال ، عائلة الخط) ، لذلك يمكن اختصار محتوى CSS ويمكن منع القواعد المكررة من الحدوث في عبارات متعددة.
لا يمكننا فقط تقليل مساحة العلامات الإضافية التي تتطلبها سمة الفصل ، ولكن بنية CSS تصبح أيضًا أكثر جدوى ، مما يسهل علينا قراءة محتواه وتنظيمه وفقًا لقطاعات الصفحة. يصبح من السهل جدًا تعديل قواعد محددة ، وهو أمر واضح بشكل خاص بالنسبة للأنواع الكبيرة والمعقدة ، لأنه في هذا الوقت قد يكون لديك مئات من قواعد CSS في نفس الوقت.
على سبيل المثال ، في هذا المثال ، إذا قمت بإضافة قواعد المشاركة إلى كل إعلان وترغب في استبدال جميع خطوط Sans serif لاحقًا ، فيجب عليك تعديل ثلاثة أماكن ، ولا توجد طريقة للقيام بذلك مرة واحدة. أقل تصنيفات ، أفضل صيانة
بالإضافة إلى تقليل مساحة التعليمات البرمجية المصدر التي يجب استخدامها ، فإن استبدال الفئات الزائدة مع محددات الميراث يمثل أيضًا سهولة توسيع المحتوى المستقبلي في المستقبل.
على سبيل المثال ، لنفترض أنك تريد أن تتحول الروابط داخل الشريط الجانبي إلى اللون الأحمر بدلاً من استخدام الأزرق مثل بقية الصفحة ، بحيث تقوم بإنشاء فئة حمراء تضيف إلى علامة المرساة مثل هذا:
<div id = الشريط الجانبي>
<h3> حول هذا الموقع </h3>
<p> هذا هو موقعي. </p>
<h3> روابط بلدي </h3>
<ul>
<li> <a href = archives.html class = red> المحفوظات </a> </li>
<li> <a href = about.html class = red> عني </a> </li>
</ul>
</div>
لتحويل هذه الروابط إلى اللون الأحمر (على افتراض أن لون الارتباط المسبق غير أحمر) يتطلب CSS مثل هذا:
ج: link.red {
اللون: أحمر.
}
هذه الإجراءات جيدة ويمكن أن تعمل بشكل طبيعي. ولكن ماذا لو غيرت رأيك في المستقبل وترغب في تغيير هذه الروابط إلى Green؟ أو أكثر عملية ، يقول رئيسك في بعض الأحيان أن اللون الأحمر هذا العام قديم ، لذا قم بتغيير روابط الشريط الجانبي هذه إلى Green! لا مشكلة ، تحتاج فقط إلى تعديل الفئة الحمراء في CSS وإنجازها ، ولكن سمة الفصل في محتوى العلامات لا تزال حمراء. من الواضح أن هذا لا يتماشى تمامًا مع الدلالات ، تمامًا مثل استخدام الألوان الأخرى كاسم تصنيف.
هذا ليس مكانًا جيدًا لاستخدام تأثيرات العرض كاسم تصنيف ، ولكن إذا لم نحدد تصنيفًا على الإطلاق ، فيمكننا توفير الكثير من الجهد (والرمز) في التعامل مع التصنيف ، وجعل دلالات المحتوى أكثر منطقية. قد نختار أيضًا روابط لهذه الأشرطة الجانبية مع محددات الميراث وتحديد الأنماط حسب الحاجة.
محتوى العلامة هو بالضبط نفس الطريقة B ، وسيكون CSS المطلوب لتعيين الرابط في الشريط الجانبي مثل هذا:
#sidebar li a: link {اللون: أحمر.
}
في الأساس ، هذا يعني أنه يجب أيضًا عرض علامات المرساة التي تستخدم سمة HREF في علامة <li> ضمن <div id = الشريط الجانبي> باللون الأحمر.
الآن ، نحافظ على محتوى وضع العلامات القصير والمرن ، والتحديثات المستقبلية تتطلب فقط CSS ، بغض النظر عما إذا كنا نريد أن يتحول الرابط إلى اللون الأحمر أو الأخضر أو الجريء أو المائل.
بعد ذلك ، دعونا نلقي نظرة على طريقة أخرى لتبسيط العلامات: القضاء على علامات <Div> غير الضرورية واستخدام علامات على مستوى الكتلة الحالية مباشرة.
الصفحة السابقة 1 2 3 الصفحة التالية اقرأ النص الكامل