طريقة كتابة CSS: شرح مع الأمثلة لطرق الكتابة بشكل مبسط

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

في هذا المقال، سنقدم لكم أمثلة وشروحات لطرق الكتابة في CSS بشكل مبسط وسهل الفهم. سنستعرض أهم الأساليب والتقنيات التي يمكن استخدامها في كتابة CSS.

1. الكتابة المباشرة

أحد أسهل الطرق لكتابة CSS هو استخدام الكتابة المباشرة. يمكنك ببساطة كتابة القواعد المباشرة داخل عنصر HTML باستخدام العلامة <style>.

<style>
h1 {
color: red;
font-size: 24px;
} 
</style>

في المثال أعلاه، قمنا بتعيين لون العنوان <h1> إلى الأحمر وحجم الخط إلى 24 بكسل.

2. الكتابة الخارجية

طريقة أخرى شائعة لكتابة CSS هي استخدام الكتابة الخارجية. يتم وضع قواعد CSS في ملف منفصل بامتداد .css وتضمينه في صفحة HTML باستخدام العلامة <link>.

<link rel="stylesheet" href="styles.css">

في الملف styles.css، يمكنك كتابة قواعد CSS بشكل منفصل وتنظيمها بشكل أفضل.

3. الكتابة الداخلية

إذا كنت ترغب في تطبيق قواعد CSS على عنصر واحد فقط، يمكنك استخدام الكتابة الداخلية. يتم وضع القواعد داخل العنصر المراد تطبيقها عليه باستخدام العلامة <style> داخل العنصر نفسه.

<h1 style="color: red; font-size: 24px;">عنوان</h1>

في المثال أعلاه، قمنا بتحديد لون العنوان <h1> إلى الأحمر وحجم الخط إلى 24 بكسل.

4. الكتابة بواسطة الفئات والمعرفات

يمكنك أيضًا كتابة CSS باستخدام الفئات والمعرفات. يتم تعيين الفئة باستخدام العلامة “.” والمعرف باستخدام العلامة “#”.

.red-text {
    color: red;
}

#header {
    background-color: gray;
}

في المثال أعلاه، قمنا بتعيين لون النص داخل العناصر التي تحمل الفئة .red-text إلى الأحمر، ولون خلفية العنصر الذي يحمل المعرف #header إلى الرمادي.

استنتاج

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