تخصيص CSS في Markdown

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

التنسيق الأساسي

تضمين CSS المضمن

<style>
.highlight {
  background-color: yellow;
  padding: 2px 5px;
}
</style>

هذا نص <span class="highlight">مميز</span>.

ربط أوراق أنماط خارجية

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

# المحتوى الخاص بي

تقنيات CSS المتقدمة

تخصيص رموز الكتل

pre {
  background: #2d2d2d;
  color: #f8f8f2;
  padding: 20px;
  border-radius: 8px;
  overflow-x: auto;
  direction: ltr;
}

code {
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 14px;
}

تصميم الجداول

table {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
}

th {
  background: #3498db;
  color: white;
  padding: 12px;
  text-align: right;
}

td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: right;
}

tr:nth-child(even) {
  background: #f9f9f9;
}

تحسين الروابط

a {
  color: #3498db;
  text-decoration: none;
  transition: color 0.3s;
}

a:hover {
  color: #2980b9;
  text-decoration: underline;
}

أطر عمل CSS

Bootstrap

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="alert alert-info" role="alert">
  هذه رسالة معلوماتية!
</div>

Tailwind CSS

<script src="https://cdn.tailwindcss.com"></script>

<div class="bg-blue-500 text-white p-4 rounded-lg">
  صندوق مصمم بـ Tailwind
</div>

أفضل الممارسات

1. التناسق: استخدام متغيرات CSS للألوان والمسافات
2. الاستجابة: جعل التصميم صديق للجوال
3. الأداء: تقليل CSS وتحميل الأساسي أولاً
4. الوصولية: ضمان تباين كافي ودعم قارئ الشاشة
5. الصيانة: تنظيم CSS في ملفات منطقية

الخلاصة

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

موارد إضافية

• دليل CSS MDN
• CSS-Tricks
• Can I Use