درس 2: كيف تعمل تقنية CSS؟
في هذا الدرس ستتعلم كيف تقوم بإنشاء ملف التصميم الأول، ستتعلم أساسيات CSS وما هي الوسوم اللازمة لتستخدم CSS في وثيقة HTML.
الكثير من خصائص CSS تشبه تلك المستخدمة في HTML، لذلك إذا تعلمت HTML واستخدامتها لإنشاء التصاميم فأنت في الغالب ستتمكن من تعلم CSS بسهولة، لنلقي نظرة على هذا المثال الأساسي.
القواعد الأساسية لكتابة CSS
لنقل أننا نريد اللون الأحمر ليكون خلفية للصفحة:
باستخدام HTML يمكننا أن ننجز ذلك بهذه الطريقة:
مع CSS يمكن تحقيق نفس النتيجة بكتابة هذه الأوامر:
كما تلاحظ، أوامر CSS تتشابه كثيراً مع HTML، والمثال أعلاه يوضح لك الأسلوب الأساسي لكتابة CSS:
لكن أين نضع أوامر CSS؟ هذا هو ما سنتعلمه الآن.
تفعيل CSS في صفحة HTML
هناك ثلاث طرق يمكن أن تستخدمها لتفعيل CSS في صفحة HTML، هذه الطرق مشروحة أدناه، ونحن ننصح بأن تركز وتستخدم الطريقة الثالثة، وهي أن تضع CSS في ملف منفصل.
الطريقة 1: ضمن وسوم HTML باستخدام خاصية style
إحدى الطرق لتفعيل CSS في HTML هي باستخدام خاصية
style، لنأخذ مثالاً على أساس المثال أعلاه الذي أردنا فيه استخدام اللون الأحمر كلخفية للصفحة، يمكن تطبيق هذا الأمر بهذا الشكلExample<title></code></div> <div style="text-align: center;"> <span style="background-color: initial;"> </span><code style="background: 0px 0px; outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: neo; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;"></head></code></div> <div style="text-align: center;"> <span style="background-color: initial;"> </span><code style="background: 0px 0px; outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: neo; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;"><strong style="outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background: 0px 0px; color: rgb(204, 0, 0);"><body style="background-color: #FF0000;"></strong></code></div> <div style="text-align: center;"> <span style="background-color: initial;"> </span><code style="background: 0px 0px; outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: neo; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;"><p> This is a red page</p> </code></div> <div style="text-align: center;"> <span style="background-color: initial;"> </span><code style="background: 0px 0px; outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: neo; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;"></body></code></div> <div style="text-align: center;"> <span style="background-color: initial;"> </span><code style="background: 0px 0px; outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: neo; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;"></html></code></div> <div style="text-align: center;"> <span style="background-color: initial;"> </span></div> </pre> </div> <h3 style="text-align: center; outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: sans-serif, "trebuchet ms", "lucida grande", "lucida sans unicode", arial, helvetica, sans-serif; margin: 0px 0px 15px; padding: 0px; position: relative; border: 0px; vertical-align: baseline; background: 0px 0px white; color: rgb(94, 94, 94); font-size: 1.4em; font-weight: 100;"> الطريقة 2: ضمت ملف HTML باستخدام وسم style</h3> <div style="text-align: center; outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: sans-serif, "trebuchet ms", "lucida grande", "lucida sans unicode", arial, helvetica, sans-serif; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background: 0px 0px white; color: rgb(94, 94, 94); font-size: 16px;"> هذه طريقة مختلفة بأنها تستخدم وسم <code style="outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: neo; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background: 0px 0px;"><style></code>، وهذا مثال لكيفية تطبيق هذه الطريقة:</div> <div class="codebox" dir="ltr" style="outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: sans-serif, "trebuchet ms", "lucida grande", "lucida sans unicode", arial, helvetica, sans-serif; margin: 0px 0px 1em; padding: 0em 1em; border: 2px dotted gray; vertical-align: baseline; background: 0px 0px rgb(252, 251, 196); color: maroon; font-size: 16px; text-align: start;"> <pre style="outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: neo; padding: 0px; border: 0px; vertical-align: baseline; background: 0px 0px;"><div style="text-align: center;"> <span style="background-color: initial;"> </span><code style="background: 0px 0px; outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: neo; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;"><html></code></div> <div style="text-align: center;"> <span style="background-color: initial;"> </span><code style="background: 0px 0px; outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: neo; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;"><head></code></div> <div style="text-align: center;"> <span style="background-color: initial;"> </span><code style="background: 0px 0px; outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: neo; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;"><title>Example<title></code></div> <div style="text-align: center;"> <span style="background-color: initial;"> </span><code style="background: 0px 0px; outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: neo; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;"><strong style="outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background: 0px 0px; color: rgb(204, 0, 0);"><style type="text/css"></strong></code></div> <div style="text-align: center;"> <span style="background-color: initial;"> </span><code style="background: 0px 0px; outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: neo; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;"><strong style="outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background: 0px 0px; color: rgb(204, 0, 0);">body {background-color: #FF0000;}</strong></code></div> <div style="text-align: center;"> <span style="background-color: initial;"> </span><code style="background: 0px 0px; outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: neo; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;"><strong style="outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background: 0px 0px; color: rgb(204, 0, 0);"></style></strong></code></div> <div style="text-align: center;"> <span style="background-color: initial;"> </span><code style="background: 0px 0px; outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: neo; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;"></head></code></div> <div style="text-align: center;"> <span style="background-color: initial;"> </span><code style="background: 0px 0px; outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: neo; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;"><body></code></div> <div style="text-align: center;"> <span style="background-color: initial;"> </span><code style="background: 0px 0px; outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: neo; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;"><p> This is a red page</p> </code></div> <div style="text-align: center;"> <span style="background-color: initial;"> </span><code style="background: 0px 0px; outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: neo; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;"></body></code></div> <div style="text-align: center;"> <span style="background-color: initial;"> </span><code style="background: 0px 0px; outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: neo; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;"></html></code></div> <div style="text-align: center;"> <span style="background-color: initial;"> </span></div> </pre> </div> <h3 style="text-align: center; outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: sans-serif, "trebuchet ms", "lucida grande", "lucida sans unicode", arial, helvetica, sans-serif; margin: 0px 0px 15px; padding: 0px; position: relative; border: 0px; vertical-align: baseline; background: 0px 0px white; color: rgb(94, 94, 94); font-size: 1.4em; font-weight: 100;"> الطريقة 3: ملف خارجي</h3> <div style="text-align: center; outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: sans-serif, "trebuchet ms", "lucida grande", "lucida sans unicode", arial, helvetica, sans-serif; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background: 0px 0px white; color: rgb(94, 94, 94); font-size: 16px;"> هذه هي الطريقة الأفضل، وهي أن تقوم بوضع رابط لملف خارجي يحوي أوامر CSS، خلال هذا الدرس سنقوم باستخدام هذه الطريقة لجميع الأمثلة.</div> <div style="text-align: center; outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: sans-serif, "trebuchet ms", "lucida grande", "lucida sans unicode", arial, helvetica, sans-serif; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background: 0px 0px white; color: rgb(94, 94, 94); font-size: 16px;"> الملف الخارجي هو ببساطة ملف نصي يستخدم اللاحقة <strong style="outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: neo; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background: 0px 0px;">.css</strong>، ومثل الملفات الأخرى يمكنك أن تضعه في مزود موقعك أو على القرص الصلب.</div> <div style="outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background: 0px 0px white; text-align: start;"> <div style="color: rgb(94, 94, 94); font-family: sans-serif, "trebuchet ms", "lucida grande", "lucida sans unicode", arial, helvetica, sans-serif; font-size: 16px; text-align: center;"> مثلاً، لنقل أن ملف التصميم لديك اسمه <strong style="outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: neo; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background: 0px 0px;">style.css</strong> وهو موجود في مجلد اسمه <strong style="outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: neo; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background: 0px 0px;">style</strong>، هذه الحالة يمكن توضيحها أكثر من خلال هذا الرسم</div> <div class="separator" style="color: rgb(94, 94, 94); font-family: neo; font-size: 16px; outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background: 0px 0px; clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDr_UkBQ2ydU1e-LPJrrFJAZOYqp4Z3mTnkb8tzKYx5oW2j1lDu56Oezetu79HIY5eiRLYfZKtbIY-JKzytaP0G_l4Aj8t1YA64n2xAqty6rOLvZW8Irjrg4gxIFgtyDFGHd7-lz1hZ9K6/s1600/2.PNG" imageanchor="1" style="outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; margin: 0px 1em; padding: 0px; border: 0px; vertical-align: baseline; background: 0px 0px; text-decoration-line: none; color: rgb(231, 75, 59); clear: none !important; float: none !important;"><img border="0" data-original-height="106" data-original-width="168" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDr_UkBQ2ydU1e-LPJrrFJAZOYqp4Z3mTnkb8tzKYx5oW2j1lDu56Oezetu79HIY5eiRLYfZKtbIY-JKzytaP0G_l4Aj8t1YA64n2xAqty6rOLvZW8Irjrg4gxIFgtyDFGHd7-lz1hZ9K6/s1600/2.PNG" style="outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background: 0px 0px; position: relative; max-width: 100%;"></a></div> <div style="text-align: center;"> <span style="font-family: neo;"><br></span></div> </div> <div style="outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: sans-serif, "trebuchet ms", "lucida grande", "lucida sans unicode", arial, helvetica, sans-serif; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background: 0px 0px white; color: rgb(94, 94, 94); font-size: 16px; text-align: start;"> </div> <div style="text-align: center; outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: sans-serif, "trebuchet ms", "lucida grande", "lucida sans unicode", arial, helvetica, sans-serif; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background: 0px 0px white; color: rgb(94, 94, 94); font-size: 16px;"> المهم هنا هو إنشاء رابط بين ملف HTML وملف التصميم (style.css)، مثل هذا الرابط يمكن إنشاءه من خلال سطر واحد في HTML:</div> <div class="codebox" dir="ltr" style="outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: sans-serif, "trebuchet ms", "lucida grande", "lucida sans unicode", arial, helvetica, sans-serif; margin: 0px 0px 1em; padding: 0em 1em; border: 2px dotted gray; vertical-align: baseline; background: 0px 0px rgb(252, 251, 196); color: maroon; font-size: 16px; text-align: start;"> <pre style="outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: neo; padding: 0px; border: 0px; vertical-align: baseline; background: 0px 0px;"><div style="text-align: center;"> <span style="background-color: initial;"> </span><code style="background: 0px 0px; outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: neo; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;"><link rel="stylesheet" type="text/css" <strong style="outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background: 0px 0px; color: rgb(204, 0, 0);">href="style/style.css"</strong> /></code></div> <div style="text-align: center;"> <span style="background-color: initial;"> </span></div> </pre> </div> <div style="text-align: center; outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: sans-serif, "trebuchet ms", "lucida grande", "lucida sans unicode", arial, helvetica, sans-serif; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background: 0px 0px white; color: rgb(94, 94, 94); font-size: 16px;"> لاحظ كيف أن مسار الملف حددناه باستخدام خاصية <code style="outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: neo; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background: 0px 0px;">href</code>.</div> <div style="text-align: center; outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: sans-serif, "trebuchet ms", "lucida grande", "lucida sans unicode", arial, helvetica, sans-serif; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background: 0px 0px white; color: rgb(94, 94, 94); font-size: 16px;"> هذا الأمر يجب أن يوضع في قسم رأس الصفحة، أي بين وسمي <code style="outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: neo; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background: 0px 0px;"><head></code> و<code style="outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: neo; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; background: 0px 0px;"></head></code> كما في المثال الآتي:</div> <div class="codebox" dir="ltr" style="outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: sans-serif, "trebuchet ms", "lucida grande", "lucida sans unicode", arial, helvetica, sans-serif; margin: 0px 0px 1em; padding: 0em 1em; border: 2px dotted gray; vertical-align: baseline; background: 0px 0px rgb(252, 251, 196); color: maroon; font-size: 16px; text-align: start;"> <pre style="outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: neo; padding: 0px; border: 0px; vertical-align: baseline; background: 0px 0px;"><div style="text-align: center;"> <span style="background-color: initial;"> </span><code style="background: 0px 0px; outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: neo; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;"><html></code></div> <div style="text-align: center;"> <span style="background-color: initial;"> </span><code style="background: 0px 0px; outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: neo; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;"><head></code></div> <div style="text-align: center;"> <span style="background-color: initial;"> </span><code style="background: 0px 0px; outline: 0px; transition: all 0.3s ease 0s; box-sizing: border-box; font-family: neo; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;"><title>My document
...
هذا الرابط يخبر المتصفح بأن عليه استخدام التصميم من ملف CSS عندما يقوم بعرض ملف HTML.
الجميل هنا أنك تستطيع ربط العديد من ملفات HTML بملف تصميم واحد، بمعنى آخر يمكن لملف تصميم واحد أن يستخدم للتحكم بتصميم العديد من ملفات HTML.
هذه الفكرة يمكنها أن توفر عليك الكثير من الوقت والجهد، إذا أردت مثلاً أن تغير لون خلفية موقع يحوي 100 صفحة فملف التصميم يمكنه أن يوفر عليك الوقت فلا تحتاج إلى تعديل 100 ملف بنفسك، باستخدام CSS يمكن تغيير ما تريد خلال ثواني بتغيير سطر واحد في ملف التصميم.
لنتدرب على ما تعلمناه حتى الآن.
جرب بنفسك
قم بتشغيل برنامج المفكرة (Notepad) أو أي محرر نصي، وقم بإنشاء ملفين، أحدهما HTML والآخر CSS وضع فيهما هذه المحتويات:
default.htm
My document
My first stylesheet
style.css
body {background-color: #FF0000;}
الآن قم بوضع الملفين في نفس المجلد، تذكر أن تحفظ الملفين باستخدام اللاحقة الصحيحة لكل ملف.
قم بفتح ملف default.htm في متصفحك وانظر إلى الصفحة وهي تحوي اللون الأحمر كخلفية، تهانينا! لقد قمت بإنشاء ملف التصميم الأول!
أسرع واقرأ الدرس اللاحق حيث سنلقي نظرة على بعض خصائص CSS.
Post a Comment