وقد تناولت المشاركات الأولى حول هذا الموضوع مقدمة أساسية للتاريخ خلف CSS بالإضافة إلى ما يمكن أن تفعله لتصميم الويب. اليوم سنناقش كيفية البدء في كتابة الشفرة نفسها. قبل أن تتمكن من كتابة التعليمات البرمجية، تحتاج إلى تطبيق يمكنه ترجمتها. هناك العديد من هذه الأنواع من التطبيقات هناك مثل Adobe Dreamweaver أو حتى المفكرة. بدأ العديد من مصممي الويب باستخدام المفكرة عندما بدأوا أول عملية ترميز. هذا حل مجاني جيد إذا كنت في ميزانية.
الآن لبدء الأمور. أولا، إذا لم تكن متأكدا من كيفية تطبيق CSS مع HTML استمر في التحقق من ذلك سيكون السلسلة التالية. للبدء معك يجب إنشاء ملف.css. هذا بسيط للغاية ويتطلب فقط حفظ الملف بامتداد.css. إذا أخترت إستخدام المفكرة (التي سأستخدمها في هذه التدوينة) ستحتاج إلى فهم أعمق قليلا لكيفية هيكلة الرمز. لذا أدخل لأن هنا نذهب.
الخطوة الأولى في إنشاء وثيقة css هي توضيح نوع الترميز الذي ستستخدمه (هناك أنواع مختلفة قليلة، يمكن العثور عليها هنا). بشكل عام معظم أوراق CSS٣ سوف تبدأ هكذا:
@charset "utf-٨"؛
من الجيد دائما أن نعلن نوع التشفير الذي تستخدمه ورقة نمط خارجية. خاصة إذا كان لديك أي حروف غير ASCII. يجب أن يكون إقرارك هو السطر الأول في ورقة النمط. لا يمكن أن يسبقها أي شيء بما في ذلك التعليقات. بمجرد ذكر هذا يمكنك الانتقال إلى اللحمة الفعلية لورقة النمط الخاصة بك. سيبدأ العديد من المصممين صفحاتهم بأسلوبهم مع تعليق متعدد الأسطر باسمهم، شركتهم، أو معلومات أخرى ذات صلة. هناك العديد من الطرق لتعليق تعليقك على التعليمات البرمجية، ولكنني سوف أتجاوز فقط ال ٢ التي أستخدمها أكثر. الطريقة الأولى هي تعليق متعدد السطور الذي تم تعريفه بواسطة
/* النص هنا */
تشير الأقواس (/* و */) إلى أن هذا التعليق يغطي عدة أسطر. من الواضح أن علامة الافتتاح (/*) تستخدم قبل الأول
الآن لبدء الأمور. أولا، إذا لم تكن متأكدا من كيفية تطبيق CSS مع HTML استمر في التحقق من ذلك سيكون السلسلة التالية. للبدء معك يجب إنشاء ملف.css. هذا بسيط للغاية ويتطلب فقط حفظ الملف بامتداد.css. إذا أخترت إستخدام المفكرة (التي سأستخدمها في هذه التدوينة) ستحتاج إلى فهم أعمق قليلا لكيفية هيكلة الرمز. لذا أدخل لأن هنا نذهب.
الخطوة الأولى في إنشاء وثيقة css هي توضيح نوع الترميز الذي ستستخدمه (هناك أنواع مختلفة قليلة، يمكن العثور عليها هنا). بشكل عام معظم أوراق CSS٣ سوف تبدأ هكذا:
@charset "utf-٨"؛
من الجيد دائما أن نعلن نوع التشفير الذي تستخدمه ورقة نمط خارجية. خاصة إذا كان لديك أي حروف غير ASCII. يجب أن يكون إقرارك هو السطر الأول في ورقة النمط. لا يمكن أن يسبقها أي شيء بما في ذلك التعليقات. بمجرد ذكر هذا يمكنك الانتقال إلى اللحمة الفعلية لورقة النمط الخاصة بك. سيبدأ العديد من المصممين صفحاتهم بأسلوبهم مع تعليق متعدد الأسطر باسمهم، شركتهم، أو معلومات أخرى ذات صلة. هناك العديد من الطرق لتعليق تعليقك على التعليمات البرمجية، ولكنني سوف أتجاوز فقط ال ٢ التي أستخدمها أكثر. الطريقة الأولى هي تعليق متعدد السطور الذي تم تعريفه بواسطة
/* النص هنا */
تشير الأقواس (/* و */) إلى أن هذا التعليق يغطي عدة أسطر. من الواضح أن علامة الافتتاح (/*) تستخدم قبل الأول
سمة تعليقك وعلامة الإقفال (*/) تستخدم بعد الحرف الأخير من تعليقك. إذا تعليق متعدد الخطوط في نهاية المطاف سيبدو هكذا:
/* المؤلف: جوش بيرس
الموقع: عنوان موقع الويب
مستند CSS */
بعض المصممين يحبون جعل تعليقاتهم تبدو أقرب قليلا باستخدام النجوم لإنشاء كتلة حول التعليق بأكمله. سيبدو هذا:
/*****************************************************************************
* الكاتب: جوش بيرس *
* الموقع: عنوان موقع الويب *
* وثيقة CSS *
* * * * *
**********************************************************************
هذا ليس بالأمر المطلوب، لكن بعض المصممين سيقومون بذلك فقط لإبقاء أوراق أسلوبهم تبدو أنيقة. بعد تعليقك الافتتاحي (إذا أخترت أن يكون لديك تعليق) فإنك تبدأ الإعلان عن العناصر المختلفة في صفحتك. أنا شخصيا أحب أن أرسم أوراق أسلوبي وأنا أرمز الصفحة نفسها. بهذه الطريقة أستطيع تصميم كل عنصر كما أقوم بصنعه. ولكن هذا مجرد تفضيل شخصي.
أول شيء يبدأ به العديد من المصممين هو إعلان رأس الصفحة. يتم ذلك بإحدى طريقتين. هاتان الطريقتان هما إما فترة (".") أو رطل ("#"). لتوضيح عنوان الرأس، يمكنك ببساطة كتابة ما يلي:
.ترويسة {
لون الخلفية: #FFFFFF؛
العرض: ١٠٠٪؛
نمط الحد السفلي: صلبة؛
عرض الحد السفلي: ٢px؛
لون الحدود: #٠٠٠٠٠٠؛
هامش سفلي: ٠px؛
محرك أقراص
حسنا، إذا هذا يبدو كمجموعة من الكلام الغامض صحيح؟ دعونا نمضي عبر هذا الخط الواحد في كل مرة. للبدء مع العلامة:
هذه القطعة من الشفرة تخبر المتصفح ببساطة أن لون الخلفية للرأس هو اللون الأبيض (#FFFFFFFFF يشير إلى اللون الأبيض باللون hex). نصف القولون في نهاية السطر يخبر المتصفح أنه نهاية ذلك السطر. على أي حال، كل شيء داخل الأقواس ({ و}) يقرأ كجملة واحدة (كل الرأس). يخبرنا السطر التالي للمستعرض كم هو واسع لعمل الرأس. في هذه الحالة إستخدمنا ما يسمى بالتموضع النسبي. بما أن هناك العديد من الشاشات ذات الأحجام المختلفة في مكان ما
في أيامنا هذه لا نعرف أبدا أي قرار يتخذه شخص ما. باستخدام الوضع النسبي يمكننا أن نقول للمستعرض حجم شيء ما كنسبة مئوية. في حالة التعليمات البرمجية المذكورة أعلاه، أخبرنا المتصفح أننا نريد أن يكون الرأس ١٠٠٪ من عرض الشاشة. يذكر السطر التالي: نمط الحدود السفلي: صلبة؛ هذا ببساطة يخبر المتصفح أن الرأس له حدود صلبة في الأسفل. هناك عدد من أنماط الحدود المختلفة التي يمكن للمستعرضات الحديثة أن تقدمها. الخط الرابع يوضح للمستعرض مدى اتساع الحدود. البيان:
ببساطة يخبر المتصفح أن الحد على الرأس هو ٢ بيكسل عرضا. يمكننا ضبط لون الحد نفسه بإضافة لون حدود الرمز: #٠٠٠٠٠٠؛ يغير هذا الرمز لون الحد إلى الأسود. آخر قطعة شفرة أستخدمتها في العبارة السابقة هي:
هذا البيان يخبر المتصفح فقط أن هناك هامش ٠ بيكسل في أسفل الرأس. هناك تنويعات في هذا الرمز التي ستتيح لك أن تجعل كل جانب من الرأس لون أو حجم مختلف. إذا كنت فقط تستخدم هامش الجملة: ٠px؛ سوف يضع المتصفح ببساطة هامش ٠ بيكسل على كل الجوانب الأربعة من الرأس.
هذا كل ما في الأمر هو النظر في الخطوات الأولى مع CSS. أحرص على الاشتراك في هذه السلسلة والتحقق منها في كثير من الأحيان حيث يتم تحديثها بانتظام.
/* المؤلف: جوش بيرس
الموقع: عنوان موقع الويب
مستند CSS */
بعض المصممين يحبون جعل تعليقاتهم تبدو أقرب قليلا باستخدام النجوم لإنشاء كتلة حول التعليق بأكمله. سيبدو هذا:
/*****************************************************************************
* الكاتب: جوش بيرس *
* الموقع: عنوان موقع الويب *
* وثيقة CSS *
* * * * *
**********************************************************************
هذا ليس بالأمر المطلوب، لكن بعض المصممين سيقومون بذلك فقط لإبقاء أوراق أسلوبهم تبدو أنيقة. بعد تعليقك الافتتاحي (إذا أخترت أن يكون لديك تعليق) فإنك تبدأ الإعلان عن العناصر المختلفة في صفحتك. أنا شخصيا أحب أن أرسم أوراق أسلوبي وأنا أرمز الصفحة نفسها. بهذه الطريقة أستطيع تصميم كل عنصر كما أقوم بصنعه. ولكن هذا مجرد تفضيل شخصي.
أول شيء يبدأ به العديد من المصممين هو إعلان رأس الصفحة. يتم ذلك بإحدى طريقتين. هاتان الطريقتان هما إما فترة (".") أو رطل ("#"). لتوضيح عنوان الرأس، يمكنك ببساطة كتابة ما يلي:
.ترويسة {
لون الخلفية: #FFFFFF؛
العرض: ١٠٠٪؛
نمط الحد السفلي: صلبة؛
عرض الحد السفلي: ٢px؛
لون الحدود: #٠٠٠٠٠٠؛
هامش سفلي: ٠px؛
محرك أقراص
حسنا، إذا هذا يبدو كمجموعة من الكلام الغامض صحيح؟ دعونا نمضي عبر هذا الخط الواحد في كل مرة. للبدء مع العلامة:
لون الخلفية: #FFFFFF؛
هذه القطعة من الشفرة تخبر المتصفح ببساطة أن لون الخلفية للرأس هو اللون الأبيض (#FFFFFFFFF يشير إلى اللون الأبيض باللون hex). نصف القولون في نهاية السطر يخبر المتصفح أنه نهاية ذلك السطر. على أي حال، كل شيء داخل الأقواس ({ و}) يقرأ كجملة واحدة (كل الرأس). يخبرنا السطر التالي للمستعرض كم هو واسع لعمل الرأس. في هذه الحالة إستخدمنا ما يسمى بالتموضع النسبي. بما أن هناك العديد من الشاشات ذات الأحجام المختلفة في مكان ما
في أيامنا هذه لا نعرف أبدا أي قرار يتخذه شخص ما. باستخدام الوضع النسبي يمكننا أن نقول للمستعرض حجم شيء ما كنسبة مئوية. في حالة التعليمات البرمجية المذكورة أعلاه، أخبرنا المتصفح أننا نريد أن يكون الرأس ١٠٠٪ من عرض الشاشة. يذكر السطر التالي: نمط الحدود السفلي: صلبة؛ هذا ببساطة يخبر المتصفح أن الرأس له حدود صلبة في الأسفل. هناك عدد من أنماط الحدود المختلفة التي يمكن للمستعرضات الحديثة أن تقدمها. الخط الرابع يوضح للمستعرض مدى اتساع الحدود. البيان:
عرض الحد السفلي: ٢px؛
ببساطة يخبر المتصفح أن الحد على الرأس هو ٢ بيكسل عرضا. يمكننا ضبط لون الحد نفسه بإضافة لون حدود الرمز: #٠٠٠٠٠٠؛ يغير هذا الرمز لون الحد إلى الأسود. آخر قطعة شفرة أستخدمتها في العبارة السابقة هي:
هامش سفلي: ٠px؛
هذا البيان يخبر المتصفح فقط أن هناك هامش ٠ بيكسل في أسفل الرأس. هناك تنويعات في هذا الرمز التي ستتيح لك أن تجعل كل جانب من الرأس لون أو حجم مختلف. إذا كنت فقط تستخدم هامش الجملة: ٠px؛ سوف يضع المتصفح ببساطة هامش ٠ بيكسل على كل الجوانب الأربعة من الرأس.
هذا كل ما في الأمر هو النظر في الخطوات الأولى مع CSS. أحرص على الاشتراك في هذه السلسلة والتحقق منها في كثير من الأحيان حيث يتم تحديثها بانتظام.
Aucun commentaire:
Enregistrer un commentaire