التمرين - نمط HTML الخاص بك مع CSS

10 دقائق

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

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

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

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

CSS الخارجية

في الوحدة السابقة حول HTML، قمت بربط ملف CSS خارجي من HTML.

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Task Timeline</title>
  <link rel="stylesheet" href="main.css">
...

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

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

قواعد CSS

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

في Visual Studio Code، افتح main.css الملف وأدخل ما يلي:

body {
    font-family: monospace;
}

ul {
    font-family: helvetica;
}

يحتوي مقتطف التعليمات البرمجية هذا على قاعدتين. تحتوي كل قاعدة على:

محدد. body وهي ul محددات القاعدتين، وتستخدم لتحديد العنصر (العناصر) التي تنطبق عليها الأنماط.
قوس متعرج مفتوح ({).
قائمة بإعلانات الأنماط التي تحدد الشكل الذي يجب أن يبدو عليه العنصر (العناصر) المحدد.
قوس متعرج مغلق (}).

على سبيل المثال، ul يحدد <ul> المحدد عنصر HTML في الصفحة لتطبيق الأنماط عليه. الإعلان هو font-family: helvetica، ويحدد ما يجب أن يكون النمط. اسم الخاصيةهوfont-family، والقيمة هي helvetica.

كما ترى بعد ذلك، يمكنك تعريف الأسماء المخصصة الخاصة بك للعناصر.

أدوات التحديد

تتيح لك محددات المعرف والفئة تطبيق الأنماط على أسماء السمات المخصصة في HTML. يمكنك استخدام معرف لنمط عنصر واحد، بينما تستخدم الفئات لنمط عناصر متعددة.

انسخ التعليمات البرمجية التالية وأضفها إلى ملف CSS. الصقها بعد إغلاق القوس المتعرج للمحدد ul الذي أضفته مسبقا.
```
li {
  list-style: circle;
}

.list {
  list-style: square;
}

#msg {
  font-family: monospace;
}
```
تحتوي التعليمات البرمجية السابقة على ثلاث قواعد CSS، مع آخر قاعدتين باستخدام سمات مخصصة لتحديد العناصر: .list و#msg.
- .list هو محدد الفئات. كل عنصر HTML يحتوي على class مجموعة سمات للحصول list على الأنماط المعرفة داخل هذا المحدد.
- #msg هو معرف المحدد. عنصر HTML الذي تم تعيين السمة الخاصة به للحصول id على الأنماط التي تم تعريفها msg داخل هذا المحدد.
يمكن أن تكون الأسماء التي استخدمتها للمحددات الخاصة بك عشوائية طالما أنها تطابق ما قمت بتعريفه في HTML.
حفظ عملك باستخدام Control+S على Windows أو Command+S على macOS.

عرض في المستعرض

للمعاينة باستخدام Visual Studio Code، انقر بزر الماوس الأيمن index.html فوق الملف في Explorer، ثم حدد Open In Default Browser.

هام

على الرغم من أنك كنت تقوم بتحرير main.css الملف فقط، لمعاينة التغييرات، يجب عليك تحديد index.html الملف.

تفتح صفحة الويب في المستعرض الافتراضي.

هل أنماط الخط هي التي تتوقع رؤيتها؟ من المثير للاهتمام كيفية توريث الأنماط المطبقة <body> على العنصر <h1>. لم نحدد أي شيء لـ <h1>، ولكنه لا يزال يحتوي على الخط الذي تم تعريفه على <body>. آلية التوريث هذه من العناصر الأصلية إلى توابعها هي أحد الجوانب الرئيسية لـ CSS. ومع ذلك، فإن <li> العناصر لها خط مختلف. يتجاوز نمط <li> العناصر مجموعة الأنماط لأن <body><li> العنصر هو تابع للعنصر <ul> ، الذي قمت بتعريف نمط له.

عند استخدام Open In Default Browser في Visual Studio Code، فإنه يفتح علامة تبويب جديدة في المستعرض في كل مرة. لتجنب فتح علامة تبويب جديدة، يمكنك إعادة تحميل علامة التبويب التي تحتوي بالفعل على موقعك على ويب بدلاً من ذلك.

لإعادة تحميل علامة التبويب، اضغط على F5، وهو اختصار تحديث لوحة المفاتيح، أو اضغط على Ctrl+R على Windows أو Linux، و Command +R على جهاز Mac.

إضافة نسق فاتح

بعد ذلك، أضف دعمًا لنسق ملون لموقعك على الويب. ابدأ بتحديد نسق فاتح اللون باستخدام تعليمات برمجية للون الست عشري.

في ملف CSS (main.css)، أضف التعليمات البرمجية التالية في نهاية الملف.
```
.light-theme {
  color: #000000;
  background: #00FF00;
}
```
في هذا المثال، #000000 يحدد الأسود لون الخط، و#00FF00يحدد اللون الأخضر للون الخلفية.
في ملف HTML (index.html)، قم بتحديث <body> العنصر باسم light-themeالفئة . الآن، يقوم محدد الفئة للنسق الفاتح بتطبيق الأنماط بشكل صحيح.
```
<body class="light-theme">
```

عرض في المستعرض

للمعاينة باستخدام Visual Studio Code، انقر بزر الماوس الأيمن فوق index.html، ثم حدد فتح في المستعرض الافتراضي أو أعد تحميل علامة التبويب السابقة بالضغط على F5.

لاحظ أن النسق الفاتح باستخدام خلفية خضراء يظهر.

عرض CSS المطبق

في عرض المستعرض، افتح أدوات المطور.

انقر بزر الماوس الأيمن فوق الصفحة وحدد فحص، أو حدد الاختصار F12 أو Ctrl+Shift+I.
حدد علامة التبويب العناصر وحدد علامة التبويب أنماط داخل علامة التبويب العناصر (يجب تحديدها بالفعل بشكل افتراضي).
مرر مؤشر الماوس فوق عناصر HTML المختلفة، وحدد أيضاً بعض العناصر، لاحظ كيف تعرض أدوات المطور الأنماط التي يتم تطبيقها عليها في علامة التبويب Styles.
<body> حدد العنصر . لاحظ التطبيق light-theme .
حدد عنصر <ul> للقائمة غير المرتبة. لاحظ النمط font-family: helvetica;المخصص ، الذي يتجاوز نمط <body> العنصر.

لمعرفة المزيد حول عرض أنماط CSS في أدوات المطور، راجع مقالة بدء عرض أنماط CSS وتغييرها.

إضافة نسق داكن

بالنسبة للنسق الداكن، يمكنك إعداد البنية التحتية في التحضير للوحدة التالية، والتي سيتم فيها تمكين تبديل النسق على صفحة الويب.

لإضافة دعم لسمة داكنة إلى CSS الخاصة بك، استخدم الخطوات التالية.

في ملف CSS (main.css)، أضف بعض الثوابت إلى جذر الصفحة في بداية الملف.
```
:root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}
```
:root يمثل المحدد العنصر في <html> صفحة HTML. لهذا النوع من المهام، فإن أفضل الممارسات هو تعريف مجموعة من متغيرات CSS العمومية في قاعدة CSS بالمحدد :root. في هذا المثال، قمت بتحديد ثلاثة متغيرات ألوان. الآن، يمكنك استخدام هذه المتغيرات في قواعد CSS الأخرى.
في نهاية الملف CSS استبدل القاعدة light-theme باستخدام التعليمة البرمجية التالية لتحديثها وإضافة المحدد dark-theme.
```
.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}
.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}
```
في التعليمات البرمجية السابقة، قمت بتعريف متغيرين جديدين وهما bg وfontColor اللذين يعملان على تحديد لون الخلفية ولون الخط. تستخدم هذه المتغيرات الكلمة الأساسية var لتعيين قيم خصائصها إلى المتغيرات المحددة مسبقاً في المحدد :root الخاص بك.
بعد ذلك، في ملف CSS، استبدل المحدد body الحالي بالتعليمات البرمجية التالية.
```
body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}
```
في هذا المثال، يمكنك استخدام المحدد لتعيين body الخاصيتين وbackground، ولأن العناصر المرئية على صفحة الويب كلها داخل color العنصر، فإنها ترث الألوان المعينة على <body>.<body>
في ملف CSS، قم بإزالة القواعد باستخدام المحددين #msg وul بحيث ترث أيضاً نفس الخط من <body>.

تذكر حفظ الملف عن طريق تحديد Control+S أو Command+S.

يجب أن يبدو ملف CSS (main.css) الآن مثل هذا المثال:

:root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}

body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}

li {
  list-style: circle;
}

.list {
  list-style: square;
}

.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}

لعرض النسق الداكن، افتح الملف index.html وقم بتحرير النسق الافتراضي يدويا في سمة <body> الفئة إلى النسق الداكن (dark-theme). احفظ الملف وأعد تحميل الصفحة في المستعرض.
تحرير <body> سمة الفئة للتبديل الافتراضي مرة أخرى إلى نسق فاتح.

في الوحدة التالية، يمكنك استخدام JavaScript لتوفير التفاعل ودعم تبديل النسق.

استخدام GitHub Copilot لإضافة نسق

يمكنك استخدام GitHub Copilot في IDE لإنشاء CSS لإضافة نسق جديد. يمكنك تخصيص المطالبة لتحديد خصائص لتعريف أنماط عناصر HTML وفقا لمتطلباتك.

يعرض النص التالي مثالا لمطالبة Copilot Chat:

Add a medium colored theme in the CSS file using hex color codes for blue font and light blue background. Make font family as Arial.

GitHub Copilot مدعوم من الذكاء الاصطناعي، لذلك من الممكن حدوث مفاجآت وأخطاء. لمزيد من المعلومات، راجع الأسئلة المتداولة حول Copilot.

تعرف على المزيد حول GitHub Copilot في Visual Studio Code.

الملاحظات

هل كانت هذه الصفحة مفيدة؟