مقدمة في CSS
CSS (Cascading Style Sheets) هي لغة تستخدم لتنسيق مظهر صفحات الويب المكتوبة بـ HTML. باستخدام CSS، يمكنك تحديد كيفية ظهور العناصر المختلفة على الصفحة من حيث الألوان، والخطوط، والأبعاد، والموقع، وغيرها من التنسيقات. الفكرة هي فصل المحتوى (HTML) عن التصميم (CSS).
كيفية ربط CSS بـ HTML:
في HTML، هناك 3 طرق لربط الـ CSS:
- التضمين داخل صفحة HTML باستخدام
<style>: يمكن إضافة أكواد CSS مباشرة داخل الـ HTML باستخدام الوسم<style>في القسم<head>. مثال:<html> <head> <style> body { background-color: lightblue; font-family: Arial, sans-serif; } h1 { color: darkblue; } </style> </head> <body> <h1>أهلاً بالعالم!</h1> <p>هذه صفحة بتستخدم CSS لتنسيق العناصر.</p> </body> </html> - استخدام ملف CSS خارجي: الأفضل والأكثر استخدامًا هو إنشاء ملف CSS خارجي ثم ربطه بصفحة HTML. بتستخدم الوسم
<link>لربط الملف الخارجي.- أولًا، أنشئ ملف
style.css:
body { background-color: lightgreen; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } h1 { color: darkgreen; }- ثم اربط هذا الملف بـ HTML باستخدام وسم
<link>داخل<head>:
<html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>أهلاً بك في CSS</h1> <p>صفحة بتستخدم ملف CSS خارجي لتنسيق الصفحة.</p> </body> </html> - أولًا، أنشئ ملف
- استخدام الـ CSS inline: يمكن أيضًا تطبيق CSS مباشرة على العناصر باستخدام خاصية
styleداخل الوسم نفسه. مثال:<h1 style="color: purple; text-align: center;">أهلاً بالعالم!</h1>
أهم خصائص CSS:
- الألوان (Colors):
يمكنك تعيين الألوان باستخدام الأسماء أو قيم HEX أو RGB.- مثال على الألوان باستخدام الأسماء:
body { background-color: lightyellow; } h1 { color: green; } - مثال باستخدام HEX:
h1 { color: #ff6347; /* Tomato color */ } - مثال باستخدام RGB:
p { color: rgb(255, 99, 71); /* Tomato color */ }
- مثال على الألوان باستخدام الأسماء:
- الخطوط (Fonts):
يمكنك تخصيص الخطوط باستخدام الخاصيةfont-family. مثال:body { font-family: 'Arial', sans-serif; } h1 { font-family: 'Georgia', serif; } - الهوامش والتباعد (Margins and Padding):
margin: هو المسافة بين العنصر وعناصر الصفحة الأخرى.padding: هو المسافة بين المحتوى وحدود العنصر.
h1 { margin-top: 20px; padding: 10px; } - الحجم (Size):
يمكنك تحديد حجم النصوص أو الأبعاد باستخدام خاصياتfont-sizeوwidthوheight.- حجم النصوص:
p { font-size: 16px; } - الأبعاد:
img { width: 100%; height: auto; }
- حجم النصوص:
تأثيرات CSS:
- الظل (Shadow):
box-shadow: لإضافة ظل حول العناصر.text-shadow: لإضافة ظل حول النصوص.
h1 { text-shadow: 2px 2px 4px #000000; } div { box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); } - الانتقالات والتأثيرات (Transitions and Animations):
transition: بتسمح بانتقال سلس بين القيم المختلفة.animation: لعمل حركات للعناصر.
button { background-color: blue; transition: background-color 0.3s ease; } button:hover { background-color: green; }
تخصيص العناصر باستخدام الـ Flexbox و Grid:
- Flexbox:
display: flex: بيخلي العناصر داخل الـ container تتحرك وتتوزع بشكل مرن.
.container { display: flex; justify-content: space-between; } - CSS Grid:
display: grid: بيخلي العناصر داخل الـ container تتوزع في شكل شبكي.
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); }
في الختام:
دلوقتي أنت عندك فكرة عن أساسيات الـ CSS، كيفية ربطه بـ HTML، وبعض الخصائص الأساسية مثل الألوان والخطوط والهوامش، وكذلك كيفية إضافة تأثيرات باستخدام CSS. استخدام CSS بيتيح لك التحكم في تصميم الصفحة بشكل كامل وتخصيص المظهر على حسب احتياجاتك. لو عندك أي استفسار أو تحتاج مساعدة في أي جزء، أنا هنا للمساعدة!
اترك تعليقاً