هل تتعلم تخطيط CSS؟ هل مازلت غير قادر على إتقان تخطيط CSS النقي بشكل كامل؟ عادة ما يكون هناك حالتان تعيقان تعلمك:
الاحتمال الأول هو أنك لم تفهم مبدأ معالجة صفحات CSS. قبل أن تفكر في الأداء العام لصفحتك، يجب عليك أولاً أن تفكر في دلالات المحتوى وبنيته، ثم قم بإضافة CSS للدلالات والبنية. ستخبرك هذه المقالة بكيفية بناء HTML.
سبب آخر هو أنك في حيرة من أمر خصائص طبقة العرض التقديمي المألوفة جدًا (مثل cellpadding، وhspace، وalign=left، وما إلى ذلك) ولا تعرف ما هي عبارات CSS التي تريد تحويلها إليها. بمجرد الانتهاء من حل المشكلة الأولى ومعرفة كيفية تنظيم HTML الخاص بك، سأقدم لك قائمة توضح بالتفصيل نوع CSS الذي يجب استخدامه لاستبدال سمات العرض التقديمي الأصلية.
HTML منظم
عندما نتعلم إنتاج صفحات الويب لأول مرة، فإننا نفكر دائمًا في كيفية تصميمها أولاً، مع الأخذ في الاعتبار الصور والخطوط والألوان وخطط التخطيط. ثم نستخدم Photoshop أو Fireworks لرسمها وتقطيعها إلى صور صغيرة. وأخيرًا، قم بتحرير HTML لاستعادة جميع التصميمات إلى الصفحة.
إذا كنت تريد أن يتم تصميم صفحة HTML الخاصة بك باستخدام CSS (متوافق مع CSS)، فأنت بحاجة إلى الرجوع والبدء من جديد. لا تفكر في "المظهر" أولاً، ولكن فكر أولاً في دلالات محتوى صفحتك وبنيتها.
المظهر ليس هو الشيء الأكثر أهمية. يمكن تقديم صفحة HTML جيدة التنظيم بأي مظهر، ويعتبر CSS Zen Garden مثالًا كلاسيكيًا. تساعدنا CSS Zen Garden أخيرًا على إدراك قوة CSS.
HTML ليس مخصصًا للقراءة على شاشة الكمبيوتر فقط. قد لا يتم عرض صورك المصممة بعناية في Photoshop على أجهزة المساعد الرقمي الشخصي والهواتف المحمولة وأجهزة قراءة الشاشة. ولكن يمكن عرض صفحة HTML جيدة التنظيم في أي مكان وعلى أي جهاز شبكة من خلال تعريفات مختلفة لـ CSS.
ابدأ بالتفكير
ابدأ بمعرفة ماهية البنية، والتي يسميها بعض الكتاب أيضًا علم الدلالة. ما يعنيه هذا المصطلح هو أنك تحتاج إلى تحليل كتل المحتوى الخاصة بك والغرض الذي يخدمه كل جزء من المحتوى، ثم إنشاء بنية HTML المقابلة بناءً على أغراض المحتوى هذه.
إذا جلست وقمت بتحليل وتخطيط بنية صفحتك بعناية، فقد ينتهي بك الأمر إلى شيء مثل هذا:
الشعار واسم الموقع
محتوى الصفحة الرئيسية
التنقل في الموقع (القائمة الرئيسية)
القائمة الفرعية
مربع البحث
المجالات الوظيفية (مثل عربة التسوق، الخروج)
التذييل (حقوق النشر والإشعارات القانونية ذات الصلة)
نستخدم عادة عناصر DIV لتعريف هذه الهياكل، على غرار ما يلي:
<div معرف=رأس></div>
<div معرف=محتوى></div>
<div معرف=globalnav></div>
<div معرف=subnav></div>
<div معرف=بحث></div>
<div معرف=متجر></div>
<div معرف=تذييل></div>
إنه ليس التخطيط، إنه الهيكل. هذا وصف دلالي لكتل المحتوى. عندما تفهم البنية الخاصة بك، يمكنك إضافة المعرف المقابل إلى DIV. يمكن احتواء أي كتلة محتوى داخل حاوية DIV، ويمكن تضمين DIV آخر بداخلها. يمكن أن تحتوي كتل المحتوى على أي عنصر HTML --- عناوين وفقرات وصور وجداول وقوائم وما إلى ذلك.
بناءً على ما سبق، أنت تعرف بالفعل كيفية تنظيم HTML، ويمكنك الآن تحديد التخطيط والأنماط. يمكن وضع كل كتلة محتوى في أي مكان على الصفحة، ويمكن تحديد اللون والخط والحد والخلفية وخصائص المحاذاة وما إلى ذلك للكتلة.
يعد استخدام المحددات أمرًا رائعًا
يعد اسم المعرف وسيلة للتحكم في كتلة محتوى معينة من خلال تغليف كتلة المحتوى هذه بـ DIV وإضافة معرف فريد، يمكنك استخدام محددات CSS لتحديد مظهر كل عنصر من عناصر الصفحة بدقة، بما في ذلك العناوين والقوائم والصور. أو روابط أو فقرات وما إلى ذلك. على سبيل المثال، إذا كتبت قاعدة CSS لـ #header، فيمكن أن تكون مختلفة تمامًا عن قاعدة الصورة في #content.
مثال آخر: يمكنك استخدام قواعد مختلفة لتحديد أنماط الارتباط في كتل المحتوى المختلفة. شيء من هذا القبيل: #globalnav a:link أو #subnav a:link أو #content a:link. يمكنك أيضًا تحديد أنماط مختلفة لنفس العنصر في كتل محتوى مختلفة. على سبيل المثال، حدد أنماط p في #content و #footer على التوالي من خلال #content p و #footer p. من الناحية الهيكلية، تتكون صفحتك من صور وروابط وقوائم وفقرات وما إلى ذلك. ولا تؤثر هذه العناصر في حد ذاتها على جهاز الشبكة الذي يتم عرضها عليه (المساعد الرقمي الشخصي أو الهاتف المحمول أو تلفزيون الإنترنت). ويمكن تعريفها بأنها أي مظهر للأداء.
تعتبر صفحة HTML المنظمة بعناية بسيطة للغاية، ويتم استخدام كل عنصر لأغراض هيكلية. عندما تريد وضع مسافة بادئة لفقرة، لا تحتاج إلى استخدام علامة الاقتباس، فقط استخدم علامة p وأضف قاعدة هامش CSS إلى p لتحقيق غرض المسافة البادئة. p عبارة عن علامة منظمة والهامش هو سمة عرض تقديمي. الأول ينتمي إلى HTML والأخير ينتمي إلى CSS. (هذا هو الفصل بين البنية والتعبير.)
لا تحتوي صفحات HTML جيدة التنظيم على علامات سمات تقريبًا. الكود نظيف وموجز للغاية. على سبيل المثال، الكود الأصلي <table width=80% cellpadding=3 border=2 align=left> يمكنه الآن كتابة <table> فقط في HTML، وجميع الأشياء التي تتحكم في الأداء مكتوبة في CSS، الجدول هو جدول، وليس أي شيء آخر (مثل استخدامه للتخطيط وتحديد الموضع).
تدرب على هيكلة نفسك
ما ورد أعلاه هو مجرد البنية الأساسية في التطبيق الفعلي، حيث يمكنك ضبط كتل المحتوى وفقًا لاحتياجاتك. غالبًا ما يحدث تداخل DIV، وسترى أن هناك طبقات أخرى في طبقة الحاوية، ذات بنية مشابهة لما يلي:
<div معرف=navcontainer>
<div معرف=globalnav>
<ul>قائمة</ul>
</div>
<معرف div=subnav>
<ul>قائمة أخرى</ul>
</div>
</div>
تتيح لك عناصر div المتداخلة تحديد المزيد من قواعد CSS للتحكم في العرض التقديمي، على سبيل المثال، يمكنك منح #navcontainer قاعدة لتوسيط القائمة على اليمين، وإعطاء #globalnav قاعدة لتوسيط القائمة على اليسار، وإعطاء #subnav قاعدة أخرى. قاعدة لتوسيط القائمة بالكامل.
استبدل الطرق التقليدية بـ CSS
ستساعدك القائمة التالية على استبدال الطرق التقليدية بـ CSS:
سمات HTML وأساليب CSS المقابلة لها
وصف طريقة سمة HTML CSS
محاذاة = اليسار
محاذاة = التعويم الأيمن: اليسار؛
float: right؛ استخدم CSS لتعويم أي عنصر: الصور، الفقرات، divs، العناوين، الجداول، القوائم، إلخ.
عند استخدام السمة العائمة، يجب عليك تحديد عرض للعنصر العائم.
هامش العرض = 0 الهامش الأيسر = 0 ارتفاع الهامش = 0 الهامش العلوي = 0 هامش: 0؛ باستخدام CSS، يمكن تعيين الهامش على أي عنصر، وليس فقط عنصر الجسم، والأهم من ذلك، يمكنك تحديد الجزء العلوي واليمين والأسفل واليسار من العنصر قيمة الهامش بشكل منفصل.
vlink=#333399 alink=#000000 link=#3333FF a:link #3ff;
ا:تمت الزيارة: #339;
أ:hover: #999;
أ:نشط: #00f;
في HTML، يتم تعريف لون الرابط كقيمة سمة للنص. نمط الارتباط هو نفسه في جميع أنحاء الصفحة. باستخدام محددات CSS، يمكن أن تختلف أنماط الارتباط في أجزاء مختلفة من الصفحة.
bgcolor=#FFFFFFخلفية اللون: #fff; في CSS، يمكن تحديد لون الخلفية لأي عنصر، وليس فقط عناصر النص والجدول.
bordercolor=#FFFFFF border-color: #fff; يمكن لأي عنصر تعيين حدود (boeder). يمكنك تحديد الأعلى واليمين والأسفل واليسار على التوالي.
الحدود=3
cellpacing=3 border-width: 3px; باستخدام CSS، يمكنك تحديد حدود الجدول كنمط موحد، أو يمكنك تحديد لون وحجم ونمط الحدود العلوية واليمنى والسفلية واليسرى على التوالي.
يمكنك استخدام محددات الجدول أو td أو th.
إذا كنت بحاجة إلى تعيين تأثير بلا حدود، فيمكنك استخدام تعريف CSS: border-collapse:lapse;
<br واضح=يسار>
<br واضح=يمين>
<br واضح=الكل>
واضح: يسار؛
واضح: صحيح؛
واضح: كلاهما؛
تستخدم العديد من التخطيطات المكونة من عمودين أو ثلاثة أعمدة السمة العائمة لتحديد الموضع. إذا قمت بتحديد لون الخلفية أو صورة الخلفية في الطبقة العائمة، فيمكنك استخدام السمة Clear.
حشوة الخلية=3
مسافة = 3
hspace=3 padding: 3px; باستخدام CSS، يمكن تعيين سمة الحشو على أي عنصر، وبالمثل، يمكن تعيين الحشو في الأعلى واليمين والأسفل واليسار على التوالي. الحشوة شفافة.
align=center text-align: center;
الهامش الأيمن: تلقائي؛ الهامش الأيسر: تلقائي؛
تعمل محاذاة النص فقط مع النص.
يمكن توسيط العناصر على مستوى الكتلة مثل div وp أفقيًا باستخدام هامش-يمين: تلقائي وهامش-يسار: تلقائي؛
بعض التقنيات المؤسفة وبيئة العمل
نظرًا للدعم غير الكامل لـ CSS من قبل المتصفحات، يتعين علينا أحيانًا اعتماد بعض الحيل (الاختراقات) أو إنشاء بيئة (حلول بديلة) للسماح لـ CSS بتحقيق نفس التأثير الذي تحققه الطرق التقليدية. على سبيل المثال، تحتاج العناصر على مستوى الكتلة أحيانًا إلى استخدام تقنيات التوسيط الأفقي، وتقنيات أخطاء نموذج الصندوق، وما إلى ذلك. تم تفصيل كل هذه التقنيات في مقالة Molly Holzschlag تصميم الويب المتكامل: استراتيجيات لإدارة اختراق CSS على المدى الطويل.
مصدر آخر لتقنيات CSS هو "الموقع هو كل شيء" بقلم بيج جون وهولي بيرجيفين.
فهم سلوك التعويم
سيساعدك كتاب "Containing Floats" الخاص بإريك ماير على إتقان كيفية استخدام السمات العائمة للتخطيط. تحتاج العناصر العائمة في بعض الأحيان إلى المسح، وستكون قراءة "كيفية مسح العناصر العائمة بدون العلامات الهيكلية" مفيدة جدًا.