مقدمة CSS الشاملة: دليل المطورين من البداية للاحتراف
مقدمة CSS الشاملة: دليل المطورين من البداية للاحتراف
دليل تخصصي من علاء عامر – مطور ومصمم مواقع وتطبيقات محترف
تعلم CSS (Cascading Style Sheets) من الأساسيات إلى المستوى المتقدم. اكتسب المهارات الضرورية لإنشاء تصاميم ويب حديثة ومتجاوبة.
2️⃣ طرق إدراج CSS
الطريقة الأولى: CSS داخلي (Inline)
<!DOCTYPE html>
<html>
<head>
<title>CSS Inline Example</title>
</head>
<body>
<h1 style="color: blue; font-size: 24px;">عنوان بتنسيق CSS مباشر</h1>
<p style="background-color: yellow; padding: 10px;">
فقرة بخلفية صفراء ومسافة داخلية
</p>
</body>
</html>
الطريقة الثانية: CSS داخل الـ Head
<!DOCTYPE html>
<html>
<head>
<title>CSS Internal Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
}
h1 {
color: #333;
text-align: center;
border-bottom: 2px solid #007bff;
padding-bottom: 10px;
}
.highlight {
background-color: #ffeb3b;
padding: 5px;
border-radius: 3px;
}
#main-content {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div id="main-content">
<h1>مرحباً بك في عالم CSS</h1>
<p>هذا نص عادي مع <span class="highlight">نص مميز</span> بالداخل.</p>
</div>
</body>
</html>
الطريقة الثالثة: ملف CSS خارجي (الأفضل)
ملف HTML:
<!DOCTYPE html>
<html>
<head>
<title>CSS External Example</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header class="main-header">
<nav class="navigation">
<ul class="nav-list">
<li><a href="#home">الرئيسية</a></li>
<li><a href="#about">من نحن</a></li>
<li><a href="#services">الخدمات</a></li>
<li><a href="#contact">اتصل بنا</a></li>
</ul>
</nav>
</header>
<main class="main-content">
<section class="hero-section">
<h1 class="hero-title">أهلاً وسهلاً</h1>
<p class="hero-description">نحن نقدم أفضل الحلول التقنية</p>
<button class="cta-button">ابدأ الآن</button>
</section>
</main>
<footer class="main-footer">
<p>© 2025 علاء عامر. جميع الحقوق محفوظة.</p>
</footer>
</body>
</html>
ملف CSS (styles.css):
/* إعدادات عامة */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Cairo", "Arial", sans-serif;
line-height: 1.6;
color: #333;
background-color: #f8f9fa;
}
/* تنسيق الهيدر */
.main-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 1rem 0;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.navigation {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.nav-list {
display: flex;
justify-content: center;
list-style: none;
gap: 2rem;
}
.nav-list a {
color: white;
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.nav-list a:hover {
background-color: rgba(255, 255, 255, 0.2);
}
/* تنسيق المحتوى الرئيسي */
.main-content {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
.hero-section {
text-align: center;
padding: 4rem 2rem;
background: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
margin-bottom: 2rem;
}
.hero-title {
font-size: 3rem;
color: #2c3e50;
margin-bottom: 1rem;
font-weight: 700;
}
.hero-description {
font-size: 1.25rem;
color: #7f8c8d;
margin-bottom: 2rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.cta-button {
background: linear-gradient(135deg, #ff6b6b, #ff8e53);
color: white;
padding: 1rem 2rem;
border: none;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(255, 107, 107, 0.3);
}
/* تنسيق الفوتر */
.main-footer {
background-color: #2c3e50;
color: white;
text-align: center;
padding: 2rem;
margin-top: 3rem;
}
4️⃣ الخصائص الأساسية
خصائص النص والخط
.typography-demo {
/* حجم الخط */
font-size: 18px;
/* نوع الخط */
font-family: "Cairo", "Arial", sans-serif;
/* وزن الخط */
font-weight: 600;
/* نمط الخط */
font-style: normal;
/* لون النص */
color: #2c3e50;
/* محاذاة النص */
text-align: right;
/* زخرفة النص */
text-decoration: none;
/* تحويل النص */
text-transform: uppercase;
/* ارتفاع السطر */
line-height: 1.6;
/* تباعد الأحرف */
letter-spacing: 1px;
/* تباعد الكلمات */
word-spacing: 2px;
}
خصائص الخلفية
.background-demo {
/* لون الخلفية */
background-color: #f8f9fa;
/* صورة الخلفية */
background-image: url("background.jpg");
/* تكرار الخلفية */
background-repeat: no-repeat;
/* موضع الخلفية */
background-position: center center;
/* حجم الخلفية */
background-size: cover;
/* تثبيت الخلفية */
background-attachment: fixed;
/* خاصية مختصرة */
background: linear-gradient(45deg, #ff6b6b, #4ecdc4) center/cover no-repeat
fixed;
}
خصائص الحدود
.border-demo {
/* عرض الحد */
border-width: 2px;
/* نمط الحد */
border-style: solid;
/* لون الحد */
border-color: #007bff;
/* خاصية مختصرة */
border: 3px dashed #28a745;
/* حدود مختلفة لكل جهة */
border-top: 1px solid #dc3545;
border-right: 2px dotted #ffc107;
border-bottom: 3px double #17a2b8;
border-left: 4px groove #6f42c1;
/* تقوس الزوايا */
border-radius: 10px;
/* تقوس زوايا مختلفة */
border-radius: 10px 20px 30px 40px;
}
6️⃣ نصائح وممارسات أفضل
تنظيم CSS
/* 1. إعادة تعيين وإعدادات عامة */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 2. إعدادات العناصر الأساسية */
body {
font-family: "Cairo", sans-serif;
line-height: 1.6;
color: #333;
}
/* 3. إعدادات التخطيط */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
/* 4. مكونات UI */
.btn {
/* أزرار */
}
.card {
/* بطاقات */
}
.modal {
/* نوافذ منبثقة */
}
/* 5. إعدادات الصفحات */
.homepage {
/* الصفحة الرئيسية */
}
.about-page {
/* صفحة من نحن */
}
/* 6. إعدادات الأجهزة المحمولة */
@media (max-width: 768px) {
/* تصميم متجاوب */
}
استخدام المتغيرات
:root {
/* الألوان الأساسية */
--primary-color: #007bff;
--secondary-color: #6c757d;
--success-color: #28a745;
--danger-color: #dc3545;
--warning-color: #ffc107;
--info-color: #17a2b8;
/* الخطوط */
--font-family-primary: "Cairo", sans-serif;
--font-size-base: 16px;
--font-size-lg: 1.25rem;
--font-size-sm: 0.875rem;
/* المسافات */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 3rem;
/* الظلال */
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
}
/* استخدام المتغيرات */
.btn-primary {
background-color: var(--primary-color);
padding: var(--spacing-md) var(--spacing-lg);
box-shadow: var(--shadow-md);
font-family: var(--font-family-primary);
}
الخلاصة
في هذا الدرس تعلمنا:
✅ أساسيات CSS ومفهومه ✅ طرق إدراج CSS المختلفة ✅ المحددات الأساسية والمتقدمة ✅ الخصائص الأساسية للنص والخلفية والحدود ✅ مشروع عملي لتطبيق المفاهيم ✅ أفضل الممارسات والتنظيم
في الدرس القادم سنتعمق في المحددات المتقدمة والخصائص الأساسية لنبني أساساً قوياً قبل الانتقال للمواضيع المتقدمة.
CSS
Web Development
Frontend
Styling
HTML
Responsive Design
Selectors
Properties
قسم المقالة
CSS
مقدمة CSS الشاملة: دليل المطورين من البداية للاحتراف
تعلم CSS من الأساسيات إلى المستوى المتقدم. دليل شامل يغطي جميع مفاهيم CSS الأساسية، الصيغة، والممارسات الأفضل للتطوير الحديث.
01
التواصل والاستشارة
تواصل مباشر عبر الواتساب أو الهاتف لفهم احتياجات مشروعك بدقة.
02
التخطيط والجدولة
وضع خطة عمل واضحة مع جدول زمني محدد لكل مرحلة من المشروع.
03
البرمجة والتطوير
تطوير المشروع بأحدث التقنيات لضمان الأداء والأمان العاليين.
04
المراجعة والتسليم
ختبار شامل ومراجعة دقيقة قبل التسليم النهائي للمشروع.
مقالات ذات صلة
المحددات المتقدمة والخصائص الأساسية في CSS: دليل شامل
Box Model ونموذج الصندوق في CSS: دليل شامل لفهم التخطيط
