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

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

إذا قررت إزالة تسطير الروابط، فستحتاج إلى بعض المعرفة حول بنية صفحة الإنترنت، وهي CSS.

إزالة الرابط الذي يسطير من الموقع بأكمله

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

زخرفة النص: لا شيء؛

سيؤدي هذا الخط الصغير إلى إزالة التسطير تمامًا من جميع العناصر المكتوبة باستخدام العلامة "a" في جميع أنحاء الموقع بأكمله.

ولكن ماذا لو لم يكن لديك إمكانية الوصول إليها ملف CSS?

في هذه الحالة، يُنصح باستخدام علامة النمط في بداية المستند. يعمل بنفس ملف CSS. لتطبيق الأنماط، من الضروري في بداية المستند (أو صفحات HTML) إضافة البناء الذي فيه المعتاد قواعد CSSالأنماط.

تنطبق هذه الأنماط فقط على صفحة محددة. ولن تنطبق على الأقسام أو المستندات الأخرى بالموقع.

قم بإزالة الرابط الذي تحته خط عند التمرير

ولكن ماذا لو كنت بحاجة إلى إزالة الرابط الذي تحته خط عند التمرير؟ يمكن أن يساعدنا CSS في هذه الحالة أيضًا. سيبدو الكود كالتالي:

زخرفة النص: لا شيء؛

إنها الفئة الزائفة ":hover" المسؤولة عن تزيين العناصر عند المرور فوقها.

من خلال الجمع بين هذين الخيارين، يمكننا جعل الرابط الذي تحته خط يظهر فقط عند التمرير، وإلا فإنه سيبدو كنص عادي:

زخرفة النص: لا شيء؛

زخرفة النص: تسطير؛

استخدام المعرفات والفئات

كما ترون مما سبق، فإن تغيير نمط عنصر ما على موقع ويب أو مستند HTML أمر سهل للغاية. تتمثل عيوب هذه الخيارات في استحالة تطبيق الأنماط بشكل انتقائي: ليس على الموقع أو المستند بأكمله، ولكن على رابط معين.

هناك عدة خيارات لحل هذه المشكلة.

يمكنك إزالة التسطير من الروابط المضمنة. على الرغم من أن هذا لا ينصح به بشكل صارم من وجهة نظر تحسين الموقع.

للقيام بذلك، تحتاج إلى تحديد معلمة النمط مباشرةً في علامة الارتباط:

الخيار الثاني هو أكثر قبولا.

نقدم فئة أو معرفًا إضافيًا للعنصر ونخصص الأنماط التي نحتاجها لهذه المحددات:

يتم كتابة الفصل بنقطة قبل اسمه:

لا شيء_ديكور(

زخرفة النص: لا شيء؛

يتم الإشارة إلى المعرف بالعلامة #:

#لا_ديكور(

زخرفة النص: لا شيء؛

تنطبق هذه القاعدة على كل من ملف CSS وعلامة النمط

تغيير نمط عرض الروابط في النص

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

وهذا أيضًا أمر بسيط جدًا:

لون :* تحديد اللون المطلوببأي تنسيق (*أحمر، #c2c2c2، rgb (132، 33، 65)*)*;

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

استبدال التصميم القياسي

ملاحظة أخيرة. بدلاً من إزالة تسطير الرابط، يمنحك CSS خيار الاستبدال القيم القياسيةتسجيل للقيام بذلك، ما عليك سوى استبدال القيم التالية في بنية زخرفة النص:

نمط زخرفة النص:

• إذا كنت بحاجة إلى خط متصل، فحدد القيمة الصلبة.
• لخط متموج - متموج.
• خط مزدوج - مزدوج على التوالي.
• يمكن استبدال الخط بسلسلة من النقاط - منقط.
• ضع خطًا تحت الكلمة كخط منقط - متقطع

يمكنك أيضًا تغيير موضع السطر بالنسبة للنص:

يمكن أن يأخذ بناء سطر زخرفة النص القيم التالية:

واللون (يجب عدم الخلط بينه وبين لون النص!):

سطر-زخرفة النص: (أي لون بأي شكل * أحمر، #c2c2c2، rgb (132، 33، 65)*).

للراحة، يمكن كتابة المواضع الثلاثة معًا في البناء:

زخرفة النص: أحمر، خطي، مموج.

تسطير لعناصر الكتلة مثل العلامة

يمكن القيام به بطريقتين. على سبيل المثال، قم بتعيين السطر الموجود أسفل النص على عرض الكتلة بالكامل، بغض النظر عن حجم النص. وقم أيضًا بوضع خط تحت النص فقط. بعد ذلك سننظر في كلا الخيارين.

ضع خطًا أسفل النص عبر عرض الكتلة بالكامل

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

مثال 1. خط العرض الكامل

HTML5 CSS 2.1 IE Cr Op Sa Fx

نص المثال

يمكن ضبط المسافة من السطر إلى النص عن طريق إضافة خاصية الحشو السفلي إلى محدد H1. نتيجة هذا المثاليظهر في الشكل. 1.

تسطير النص

لتسطير النص فقط، تحتاج إلى استخدام خاصية زخرفة النص مع القيمة تسطير، وإضافتها مرة أخرى إلى محدد H1 (المثال 2).

مثال 2. عرض السطر للنص

HTML5 CSS 2.1 IE Cr Op Sa Fx

نص المثال

العنوان الأسود يلفت الأنظار رغم أنه أسود وليس أبيض.

وتظهر نتيجة هذا المثال في الشكل. 2.

عند استخدام خاصية زخرفة النص، يتم ربط الخط بشكل صارم بالنص، لذلك لا يمكن تحديد موضعه ونمطه.

هناك العديد من العلامات لتنسيق النص. يتم استخدام بعضها كثيرًا (وسوف تتذكرها بسرعة)، والبعض الآخر نادرًا (لا تحتاج إلى تذكرها).

هنا سوف ننظر إلى تلك التي يتم استخدامها بشكل متكرر.

العلامات التي تجعل عناوين النص

تقوم هذه العلامات بتمييز النص كعناوين. أولئك. يبدأ كل عنوان بـ خط جديد، تم تمييزه بالخط العريض وله حجمه الخاص (عنوان المستوى الأول هو الأكبر، والمستوى السادس هو الأصغر).

يمكن استخدام هذه العلامات مع المعلمة المحاذاة الأفقية محاذاة. القيم المحتملة لهذه المعلمة:

• غادر- غادر،
• يمين- على اليمين،
• مركز- في المركز،
• يبرر- في العرض.

عينة من الرموز:

علامات فاصل الفقرة وفاصل الأسطر

بطاقة شعار
- علامة تغذية الخط القسري. يبدأ النص بعد هذه العلامة في سطر جديد.
العلامات تقسيم النص إلى فقرات. قبل بداية كل فقرة يجب عليك وضع علامة

علامة الإغلاق اختيارية. على عكس العلامة
يتم فصل الفقرات عن بعضها البعض بواسطة سطر فارغ.

عند العلامة

هناك معلمة محاذاة، الذي يحدد كيفية محاذاة النص داخل الفقرة. القيم المحتملة لهذه المعلمة:

• غادر- غادر،
• يمين- على اليمين،
• مركز- في المركز،
• يبرر- في العرض.

عينة من الرموز:

تنسيق HTML

هذه فقرة، وهي منفصلة عن بقية النص خطوط فارغةأعلى وأسفل ومحاذاة لليسار.

هذه فقرة، وهي مفصولة عن بقية النص بأسطر فارغة في الأعلى والأسفل ومحاذاتها إلى اليمين.

هذه فقرة، وهي مفصولة عن بقية النص بأسطر فارغة في الأعلى والأسفل ومحاذاتها للمركز.

إنه مجرد نص.
هذا نص على سطر جديد.

في نافذة المتصفح سيبدو هكذا:

العلامات التي تجعل النص مائلًا

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

عينة من الرموز:

تنسيق HTML هذا النص موجود في علامات الاستشهاد
هذا النص موجود في علامات dfn
هذا النص موجود في علامات em
هذا النص موجود في علامات i

في نافذة المتصفح سيبدو هكذا:

العلامات التي تجعل النص غامقًا

يتم استخدام كلاهما لتسليط الضوء على الأقسام المهمة من النص، ولكن الأول هو الأفضل.

عينة من الرموز:

هذا النص في العلامات قوية
هذا النص موجود في علامات ب

في نافذة المتصفح سيبدو هكذا:

العلامات التي تميز النص مع التسطير

يتم استخدام كلاهما لوضع خط تحت المقاطع المهمة من النص، ولكن يفضل استخدام الأول.

عينة من الرموز:

تنسيق HTML مجرد نص

هذا النص موجود في علامات u

في نافذة المتصفح سيبدو هكذا:

العلامات التي تعرض النص بخط أحادي المسافة

يتم عرض النص بخط أحادي المسافة، ولكن يفضل استخدام الخط الأول.

عينة من الرموز:

تنسيق HTML مجرد نص
هذا النص موجود في علامات kbd
هذا النص موجود في علامات سامب
هذا النص موجود في علامات tt

في نافذة المتصفح سيبدو هكذا:

العلامات التي تعرض النص بخط مرتفع ومنخفض

العلامات عرض النص أسفل مستوى السطر بحجم خط أصغر.
العلامات عرض النص أعلى مستوى السطر بحجم خط أصغر.
مريحة لاستخلاص الصيغ الرياضية والكيميائية.

عينة من الرموز:

تنسيق HTML y=x 2 - معادلة القطع المكافئ.

H2O هي صيغة الماء.

في نافذة المتصفح سيبدو هكذا:

علامة الخطومعلماتها

العلامات الإشارة إلى معلمات خط النص:

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

مقاس- حجم الخط في الوحدات التقليديةمن 1 إلى 7. حجم الخط الافتراضي هو 3.

لون- لون النص (الافتراضي - أسود).

هناك طريقتان لتعيين اللون: بالاسم وبالتحديد رمز سداسي عشريالألوان.

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

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

دعونا نسلط الضوء على كلمة "نص" باللون الأحمر:

نص

الآن دعونا نضيف علامات مائلة (تفتح على اليسار، وتغلق على اليمين):

نص

والآن - العلامات الجريئة:

نص

في كل مرة نضع جميع العلامات السابقة في علامات جديدة. وهذا ما يسمى ترتيب التعشيش. يمكنك استخدام علامات مختلفةلتنسيق النص، الشيء الرئيسي هو عدم انتهاك ترتيب التداخل.

بهذا نختتم الدرس الثالث، لقد نظرنا إلى الطرق الرئيسية لتنسيق النص، وفي الدرس التالي سننظر إلى علامات التنسيق الأقل قابلية للتطبيق. ومع ذلك، لن تكون فكرة سيئة أن تتعرف عليهم.

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

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

في هذا المثال، سنقوم بإزالة التسطير من الروابط، ثم نضيفها أو نزيلها عند تمرير الماوس.

مثال HTML وCSS: كيفية إزالة وإضافة التسطير من الروابط

وصف المثال

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

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

مثال HTML وCSS: تسطير الرابط المنقط

وصف المثال

1. أولاً، نقوم بإزالة التسطير القياسي من جميع الروابط، حيث سنستخدمه طرق غير قياسية. ثم نضيف حدًا سفليًا للرابط الأول باستخدام خاصية CSS ونجعله متقطعًا. وهذا سيكون التأكيد لدينا. لإزالة التسطير عند المرور فوق الرابط، نستخدم فئة زائفة ونجعل خلفية الإطار مماثلة لخلفية الصفحة، أي أننا ببساطة نخفيها. من الناحية النظرية، سيكون من الأفضل جعل خلفية الإطار شفافة، لكن IE6 يسيء فهم هذا المعنى.
2. مع الرابط الثاني، نفعل نفس الشيء كما هو الحال مع الأول، ولكننا نرسم خطًا متصلًا فقط. لزيادة المسافة من النص إلى التسطير، نعطي الرابط هامشًا سفليًا صغيرًا باستخدام خاصية CSS.
3. الرابط الثالث الخاص بنا يحتوي على تسطير متعدد الألوان، لذلك سنضيفه باستخدام الصورة الخلفية. لهذا نستخدم صورة صغيرة، والتي نربطها عبر CSS. ضع الخلفية في الجزء السفليالروابط (0 100%) والسماح بتكرارها أفقيًا فقط (كرر-x). التسطير جاهز، ولكنه قريب جدًا من النص؛ لإصلاح ذلك، أضفنا مسافة بادئة صغيرة إلى الرابط أدناه. هذا كل شيء.
4. في الإصدارين IE6 وIE7 القديمين، قد تكون هناك مشاكل في عرض الشرطة السفلية على الرابطين الأول والثاني. لإصلاح ذلك، قم بإضافة خاصية التكبير/التصغير:1، والتي تتضمن ما يسمى تَخطِيط. هذه الخاصية غير صالحة وهذه المتصفحات فقط هي التي تفهمها، لذا من الأفضل تمكينها تعليقات مشروطة.

في كثير من الأحيان، لإنشاء قائمة، لا تحتاج إلى إنشاء روابط نصية فحسب، بل تحتاج إلى إنشاء روابط حظر، حيث ستكون المنطقة النشطة هي النص نفسه ومنطقة معينة حوله.

وصف المثال

1. لإنشاء روابط كتلة نستخدم خاصية CSS:block، والتي تحولها إلى عناصر الكتلة، إنشاء سطر جديد قبل وبعد نفسه. إذا لم تكن هناك حاجة لفواصل الأسطر، فيمكنك استبدال القيمة بـ inline-block .
2. نظرًا لأن روابطنا أصبحت الآن عبارة عن كتل، فيمكننا تغيير عرضها (CSS) أو ارتفاعها (CSS) إذا لزم الأمر.
3. في هذا المثال، نحن لا نحدد ارتفاع الروابط على الإطلاق، ولكن نمنحها ببساطة حشوة داخلية (CSS)، مما يؤدي إلى توسيع الكتل.

وصف المثال

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

بدلاً من جعل لون الحدود مطابقًا لخلفية الصفحة، يمكن ضبطه على شفاف وجعله شفافًا، ولكن كما قلت، IE6 لا يتعامل معه بشكل صحيح.

مثال HTML وCSS: إنشاء روابط ثلاثية الأبعاد

وصف المثال

1. باستخدام خاصية CSS نقوم بإضافة إطارات إلى الروابط، وبمساعدة نقوم بتعيين لونها. في الوقت نفسه، نشير إلى ظل فاتح من اللون للحدود اليسرى والعلوية، وظلال داكنة للأسفل واليمين. بفضل توزيع الألوان هذا نحصل على روابط تبدو وكأنها أزرار ثلاثية الأبعاد.
2. لجعل الأمر يبدو وكأنه يتم الضغط على الأزرار عند تحريك مؤشر الماوس، فإننا نعكس ألوان حدود الروابط بفئة زائفة. للحصول على تأثير نقر إضافي، قم بتعيين الموضع النسبي (CSS:relative) وقم بإجراء إزاحة تصاعدية بمقدار بكسل واحد (CSS -1px).
3. حسنًا، لجعل كل شيء جميلًا تمامًا، قمنا بتعيين لون النص وخلفية الروابط الموجودة أسفل المؤشر أغمق قليلاً من الألوان المعتادة. مستعد.

في هذا المثال، سنقوم بإنشاء روابط تحتوي على أيقونات لا تحتوي فقط على صور لهذه الأيقونات، بل تحتوي أيضًا على نص تحتها. ومع ذلك، في المستقبل، يمكنك بسهولة تغييرها وترك، على سبيل المثال، الرموز فقط.

قبل البدء في العمل، سنقوم بإعداد عدة صور للأيقونات، في مجموعتين - للروابط العادية والروابط الموجودة أسفل مؤشر الماوس. يجب أن تكون المجموعة الثانية مختلفة خارجيًا عن المجموعة الأولى، ويتم التعبير عن ذلك في لوحة الألوان.

وصف المثال

1. لتقصير الكود، نستخدم فئتين في الروابط - "الروابط" (ذات الخصائص المشتركة) و"الصورة"، "الصوت"، "الفيديو" (شخصي لكل رابط). تم وصف هذه النقطة بالتفصيل في الطبقاتمرجع CSS.
2. حجم أيقوناتنا هو 50x50 بكسل وستكون موجودة على الروابط كخلفية (CSS)، والتي سنركزها في الأعلى (50% 0) ونمنعها من التكرار (بدون تكرار).
3. نقوم بإضافة حشوة (CSS) إلى الروابط بحيث لا يلتصق النص الموجود في الروابط بالحواف. وفي نفس الوقت، نجعل المسافة البادئة العلوية مساوية لارتفاع الأيقونات حتى لا يتداخل النص معها، لأن أيقوناتنا هي الخلفية.
4. إذا كان هناك نص صغير جدًا في الروابط، فسيتم قطع صور الأيقونات على الجانبين. ولمنع حدوث ذلك، قمنا بتعيين الروابط إلى الحد الأدنى للعرض (CSS) بحيث يكون مساويًا على الأقل لعرض الرموز. في حالتنا، نحتاج إلى الحصول على الحد الأدنى للعرض وهو 50 بكسل، ولكننا قمنا بتعيينه على 40 بكسل، حيث ستتم إضافة 10 بكسل أخرى بسبب الحشو الجانبي.
5. لتحقيق الحد الأدنى من العرض، نقوم بتحويل الروابط إلى كتل مضمنة (CSS: inline-block).

سيتعين على IE6 "العلاج" قليلاً:

1. لا يفهم IE6 خاصية الحد الأدنى للعرض، ولكنه يفسر خاصية CSS على أنها الحد الأدنى للعرض. ولذلك، فإننا نستخدم واحدة بسيطة لذلك hackوالتي سوف تحل هذه المشكلة.

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

للقيام بذلك، سنقوم أولاً بقص عدة صور فارغة في مجموعتين - للروابط والروابط العادية الموجودة أسفل المؤشر. بالنسبة لنا، سيختلف الأمر في وجود/غياب الظلال في الصور.

تحديد المواقع المطلقة*/ أعلى: 0; /* إزاحة علوية صفرية */ ) .links:before ( content: url("images/left_bok.png"); /* صورة الجانب الأيسر */ left: 0; /* إزاحة يسارية صفرية */ ) .links:hover: قبل ( content: url("images/left_bok_hover.png"); /* صورة الجانب الأيسر تحت مؤشر الماوس */ ) .links:after ( content: url("images/right_bok.png"); /* صورة من الجانب الأيمن * / يمين: 0؛ /* إزاحة صفر إلى اليمين */ ) .links:hover:after ( content: url("images/right_bok_hover.png"); /* صورة الجانب الأيمن أسفل الماوس المؤشر */ )

وصف المثال

لن نتوقف عند تقنية التقريب نفسها، إذا لزم الأمر، يمكنك أن تقرأ عنها في القسم المناسب من الموقع.

1. باستخدام خاصية CSS :inline-block نقوم بإنشاء روابط مضمّنة. على وجه الخصوص، يعد هذا ضروريًا حتى نتمكن من إعطاء الروابط ارتفاعًا دقيقًا يطابق ارتفاع الصور.
2. قم بإزالة التسطير وتوسيط النص (CSS:center). بشكل عام، في حالتنا، ليس من الضروري توسيط النص، نظرًا لأن الروابط تتكيف مع حجم النص الموجود فيها ولا يوجد مكان لمحاذاته. ولكن إذا كنت بحاجة إلى زيادة عرض الروابط (على سبيل المثال، ما يصل إلى 150 بكسل)، فستكون هذه المحاذاة مفيدة.
3. من أجل التغيير مظهرالروابط، عندما تكون تحت مؤشر الماوس - قم بإضافة محددات إضافية إلى الأنماط باستخدام فئة زائفة من CSS، والتي نشير فيها إلى أجزاء الصور الخاصة بنا، ولكن بدون ظل.

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

1. جوهر التغيير هو أنه بمساعدة التعبير نقوم بدمج نفس العلامتين داخل الروابط، ولكن فقط بدون السمات التي تحتوي على الأنماط. بدلاً من ذلك، نضيف الفئتين "left_bok" و"right_bok" إلى العلامات، ونضيف أنماطًا لهما ونكتبهما أدناه. هذه الأنماط هي نفسها تمامًا كما في كود CSS الرئيسي، ولكن هنا يتم استخدام جميع الصور كخلفية للعلامات.

زوايا مستديرة للروابط (الخيار الثاني)

دعونا نلقي نظرة على مثال آخر لتقريب زوايا الروابط، ولكن باستخدام أربع صور زاوية منفصلة.

وصف المثال

وهنا أيضًا لن نتحدث عن التقريب نفسه، بل سنحدد فقط النقاط المميزة.

1. باستخدام خاصية CSS :inline-blok، نقوم بتحويل الروابط إلى كتل مضمنة. ثم نزيل التسطير منها ونضيف إطارًا ونحاذي النص إلى المنتصف.
2. نظرًا لأن العناصر الزائفة التي ندير بها الزوايا موجودة داخل الروابط، فإن محتواها يتم توسيطه أيضًا، وبالتالي، لا يتم وضع زوايا الصورة المضافة بواسطة خاصية CSS في الزوايا كما نحتاج. لإصلاح ذلك، أضفنا ‎:left إليه، لنعيد القيمة التي تستخدمها المتصفحات افتراضيًا.

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

الاختلافات في التسطير

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

التأكيد على مظاهرة

لغة البرمجة

أولاً، لنقم بإنشاء عنصر ما، على سبيل المثال، خذ العلامة A. صفته ليست مهمة بالنسبة لنا، لأن معظم العمل سيتم تخصيصه للأنماط.

CSS

سيتكون التنفيذ من سطرين يمتدان من منتصف أسفل العنصر إلى حوافه.

نحن مسؤولون عن التأكيد خاصية زخرفة النص، ولكن ليس من المنطقي استخدامه هنا، لأن تنفيذ خطط الرسوم المتحركة لدينا في هذه الحالة ليس مناسبًا تمامًا. دعونا لا ننسى أنه يمكن تعيين عنصر زائف::before أو::after لكل عنصر. لذلك، سنقوم بتعيين جميع الخصائص عليها، ونقوم على الفور بتعيين المعلمات التالية على الرابط الخاص بنا:

A(عرض: كتلة مضمنة؛ الموضع: نسبي؛ زخرفة النص: لا شيء؛)

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

A::before( العرض: كتلة؛ الموضع: مطلق؛ المحتوى: ""؛ الارتفاع: 2 بكسل؛ العرض: 0؛ لون الخلفية: أحمر؛ الانتقال: العرض .5 ثانية لسهولة الدخول، اليسار .5 ثانية لسهولة الدخول- خارج؛ اليسار: 50%؛

أولئك. سيكون ارتفاع التسطير 2 بكسل، والطول 0، والأحمر، وتكون خاصية الانتقال مسؤولة عن الرسوم المتحركة. وبطبيعة الحال، المسافة البادئة اليسرى هي 50٪، أي. نقطة المركز. نقوم بتنفيذ نفس الإجراءات تقريبًا باستخدام العنصر الزائف ::after:

A::after( العرض: كتلة؛ الموضع: مطلق؛ المحتوى: ""؛ الارتفاع: 2 بكسل؛ العرض: 0؛ لون الخلفية: أحمر؛ الانتقال: العرض .5 ثانية لسهولة الدخول؛ اليسار: 50%؛ الأسفل: 0 ؛)

أ:تحويم::قبل (العرض: 50%؛ يسار: 0؛) أ:تحويم::بعد (العرض: 50%؛)

ومن الجدير بالذكر أن هذه مجرد طريقة واحدة لتنفيذ هذه الفكرة. يمكنك أن تفعل الشيء نفسه باستخدام عنصر زائف واحد فقط::before . الاشتراك في المواد واقتراح موضوعات للمقالات.