ورقة الأنماط المتتالية (CSS) هي نظام لترميز مواقع الويب يسمح للمصممين بمعالجة العديد من الميزات في وقت واحد عن طريق تعيين عناصر معينة للمجموعات. على سبيل المثال ، باستخدام رمز لخلفية موقع الويب ، يمكن للمصممين تغيير لون الخلفية أو الصورة في جميع صفحات موقع الويب بتغيير واحد لملف CSS. إليك كيفية إنشاء CSS لموقع ويب أساسي.
خطوات
جزء 1 من 4: كتابة CSS مضمنة
الخطوة الأولى: تأكد من أن لديك فهمًا أساسيًا لعلامات HTML
يجب أن تعرف كيف تعمل العلامات و
src
و
href
صفات.
الخطوة 2. تعلم بعض خصائص CSS الأساسية
سوف تجد أن هناك العديد من العقارات. ومع ذلك ، ليس من الضروري تعلمهم جميعًا.
-
بعض خصائص CSS الأساسية الجيدة التي يجب معرفتها هي
اللون
و
خط العائلة
- .
الخطوة الثالثة. تعرف على قيم كل خاصية معينة
كل الخصائص تحتاج إلى قيمة. بالنسبة إلى
اللون
الخاصية ، على سبيل المثال ، يمكنك وضع
أحمر
القيمة.
الخطوة 4. تعرف على المزيد حول
نمط
سمة HTML.
يتم استخدامه داخل عنصر مثل
href
أو
src
. لاستخدامها ، ضمن علامات الاقتباس بعد علامة المساواة ، ضع سمة CSS ونقطتين ثم قيمة الخاصية. يُعرف هذا باسم قاعدة CSS.
الخطوة 5. افهم أن CSS المضمنة لا تستخدم عادة لمواقع الويب من قبل مطوري الويب المحترفين
يمكن أن تضيف CSS المضمن فوضى غير ضرورية إلى مستند HTML. ومع ذلك ، فهي طريقة رائعة للتعرف على كيفية عمل CSS.
جزء 2 من 4: كتابة CSS الأساسية
الخطوة 1. قم بتشغيل البرنامج الذي ترغب في استخدامه
يجب أن يسمح لك بإنشاء ملفات HTML و CSS.
إذا لم يكن لديك برنامج خاص مثبت ، يمكنك استخدام برنامج Notepad أو محرر نصوص آخر. ما عليك سوى حفظ الملف كملف نصي وملف CSS
الخطوة 2. افتح ملف HTML لموقعك على الويب
يجب عليك فتح هذا باستخدام محرر HTML أيضًا ، إذا كان لديك محرر مثبت.
تتيح لك برامج تحرير HTML تحرير HTML و CSS في نفس الوقت
الخطوة الثالثة. قم بإنشاء علامة داخل رأس HTML الخاص بك
سيتيح لك ذلك كتابة CSS دون الحاجة إلى ملف منفصل.
الخطوة 4. اختر العنصر الذي تريد إضافة نمط إليه واكتب اسم العنصر متبوعًا بمجموعة من الأقواس المتعرجة ({})
لجعل شفرتك أكثر وضوحًا ، ضع دائمًا الدعامة المتعرجة الثانية على السطر الخاص بها.
الخطوة 5. بين الأقواس ، اكتب قواعد CSS كما تفعل مع ملف
نمط
ينسب.
يجب أن ينتهي كل سطر بفاصلة منقوطة (؛). لجعل الكود الخاص بك مقروءًا ، يجب أن تبدأ كل قاعدة من السطر الخاص بها ويجب وضع مسافة بادئة لكل سطر.
من المهم جدًا ملاحظة أن هذا النمط سيؤثر على جميع عناصر النوع المحدد على الصفحة. سيتم تغطية التصميم الأكثر تحديدًا في القسم التالي
جزء 3 من 4: CSS أكثر تقدمًا
الخطوة الأولى: قم بإنشاء ملف CSS وليس ملف HTML واحفظه باستخدام امتداد
.css
تمديد.
افتح ملف HTML أيضًا.
الخطوة 2. قم بإنشاء علامة في رأس HTML الخاص بك
سيسمح لك ذلك بربط ملف CSS منفصل بمستند HTML الخاص بك. تحتاج علامة الارتباط الخاصة بك إلى ثلاث سمات:
rel
نوع
، و
href
-
rel
تعني "علاقة" وتخبر المتصفح عن العلاقة بمستند HTML. هنا يجب أن يكون لها قيمة
"ورقة الأنماط"
- .
-
نوع
يخبرك بنوع الوسائط التي يتم ربطها. هنا يجب أن يكون لها قيمة
"text / css"
-
href
- هنا يستخدم بشكل مشابه لكيفية استخدامه في عنصر ، ولكن هنا يجب أن يرتبط بملف CSS. إذا كان ملف CSS موجودًا في نفس المجلد مثل ملف HTML ، فيجب كتابة اسم الملف فقط ضمن علامات الاقتباس.
الخطوة 3. حدد عناصر من أنواع مختلفة تريد إضافة نفس التصميم إليها
أضف
صف دراسي
السمة إلى هذه العناصر وتعيينها مساوية لاسم فئة من اختيارك. سيعطي هذا عناصرك نفس التصميم.
الخطوة 4. تحديد التصميم الذي سيحصل عليه الفصل
اكتب اسم الفئة في ملف CSS الخاص بك بنقطة (.) تسبقه (على سبيل المثال
.صف دراسي
).
الخطوة 5. حدد العناصر الفردية التي تريد إضافة نمط خاص إليها وأضف ملف
هوية شخصية
ينسب.
يتم إنشاء المعرفات في CSS باستخدام رمز الجنيه (#) بدلاً من نقطة.
المعرف أكثر تحديدًا من الفئات ، لذلك سيتجاوز المعرف أي نمط فئة إذا كان يحتوي على سمة ذات قيمة مختلفة عن الفئة
جزء 4 من 4: تعلم المزيد
الخطوة 1. قم بزيارة مدارس w3
إنه موقع رسمي يهدف إلى تعليم مهارات تطوير الويب. يحتوي w3 على الكثير من المراجع المدرجة في HTML و CSS ، بالإضافة إلى لغات الويب الأخرى.
الخطوة الثانية: ابحث عن مواقع أخرى تهدف تحديدًا إلى تعلم وتعليم HTML و CSS
تهدف مواقع مثل CSS tricks.com تحديدًا إلى تعليم مهارات تصميم مواقع الويب و CSS. سيساعدك العثور على مصادر حسنة السمعة في رحلة التعلم الخاصة بك.
الخطوة الثالثة. تواصل مع مصممي ومطوري الويب
يمكن لخبرتهم ومعرفتهم أن تعلمك معرفة ومهارات قيمة.
الخطوة 4. اعرض الكود المصدري لمواقع الويب التي تصادفك
يمكن أن يوضح لك عرض CSS لمواقع الويب المطورة طرقًا لتصميم أجزاء من مواقع الويب. يمكن أن يساعدك نسخها كممارسة والتلاعب بالشفرة في تعلم كيفية استخدام سمات CSS المختلفة.
