ورقة CSS المرجعية
آخر تحديث
المحدّدات
كيفية استهداف العناصر التي تريد تنسيقها.
| المحدّد | ما يطابقه |
|---|---|
* | كل العناصر |
p | كل عناصر <p> (حسب الوسم) |
.btn | العناصر ذات class="btn" |
#main | العنصر ذو id="main" |
div p | كل <p> داخل <div> (سليل) |
div > p | الأبناء المباشرون فقط |
a:hover | الروابط أثناء المرور بالمؤشر (صنف وهمي) |
li:first-child | أول <li> في أصله |
li:nth-child(2n) | كل <li> زوجي |
input[type="text"] | حقول الإدخال التي تملك تلك السمة |
p::before | محتوى مولّد قبل <p> (عنصر وهمي) |
نموذج الصندوق
كل عنصر هو صندوق: المحتوى، والحشو، والحدّ، والهامش.
| الخاصية | وظيفتها |
|---|---|
width / height | حجم صندوق المحتوى |
padding | المساحة داخل الحدّ |
border | 1px solid #333 - العرض والنمط واللون |
margin | المساحة خارج الحدّ |
box-sizing: border-box | جعل العرض يشمل الحشو + الحدّ |
margin: 0 auto | توسيط عنصر كتلي أفقيًا |
overflow: hidden | قصّ المحتوى الذي يفيض |
الطباعة واللون
| الخاصية | مثال |
|---|---|
color | color: #333 - لون النص |
background | background: #fff أو صورة/تدرّج |
font-family | font-family: system-ui, sans-serif |
font-size | font-size: 16px (أو rem أو em) |
font-weight | 400 (عادي) … 700 (عريض) |
line-height | 1.5 - التباعد بين الأسطر |
text-align | left و center و right و justify |
text-decoration | underline و none |
Flexbox
تخطيط أحادي البعد - صفوف أو أعمدة. اضبط display: flex على العنصر الأب.
| الخاصية (على الحاوية) | وظيفتها |
|---|---|
display: flex | جعل الأبناء عناصر flex |
flex-direction | row (افتراضي) أو column |
justify-content | المحاذاة على المحور الرئيسي (center و space-between) |
align-items | المحاذاة على المحور المتقاطع (center و stretch) |
gap | المسافة بين العناصر، مثل gap: 16px |
flex-wrap | wrap يسمح للعناصر بالتدفّق إلى أسطر جديدة |
flex: 1 (على ابن) | ينمو العنصر ليملأ المساحة المتاحة |
Grid
تخطيط ثنائي البعد. اضبط display: grid على العنصر الأب.
| الخاصية | وظيفتها |
|---|---|
display: grid | جعل الأبناء عناصر grid |
grid-template-columns | 1fr 1fr 1fr أو repeat(3, 1fr) |
grid-template-rows | تعريف أحجام الصفوف |
gap | المسافة بين الصفوف والأعمدة |
grid-column | 1 / 3 - امتداد عنصر عبر الأعمدة |
auto-fit / minmax | repeat(auto-fit, minmax(200px, 1fr)) للشبكات المتجاوبة |
place-items: center | توسيط كل عنصر في خليته |
التموضع والعرض
| الخاصية / القيمة | وظيفتها |
|---|---|
position: static | افتراضي - ضمن التدفّق العادي |
position: relative | إزاحة عن موضعه العادي |
position: absolute | يُموضَع بالنسبة لأقرب سلف متموضِع |
position: fixed | مثبّت على نافذة العرض |
position: sticky | يلتصق عند التمرير إلى عتبة |
top / right / bottom / left | إزاحات للعناصر المتموضِعة |
z-index | ترتيب التكديس (الأعلى = في المقدمة) |
display: none | يزيل العنصر من التخطيط |
display: inline-block | يتدفّق سطريًا لكنه يقبل العرض/الارتفاع |
الانتقالات والتحويلات
| الخاصية | مثال |
|---|---|
transition | transition: all 0.2s ease |
transform: translate | translate(10px, 0) - تحريك |
transform: scale | scale(1.1) - تغيير الحجم |
transform: rotate | rotate(45deg) |
opacity | 0 (غير مرئي) … 1 (معتم) |
box-shadow | 0 2px 8px rgba(0,0,0,.15) |
border-radius | 8px - زوايا مستديرة |
الوحدات والتصميم المتجاوب
| الوحدة / الميزة | المعنى |
|---|---|
px | بكسلات مطلقة |
% | نسبةً إلى العنصر الأب |
rem | نسبةً إلى حجم خط الجذر |
em | نسبةً إلى حجم الخط الحالي |
vw / vh | 1% من عرض / ارتفاع نافذة العرض |
fr | جزء من المساحة الحرّة (grid) |
@media (max-width: 600px) { … } | تطبيق القواعد تحت نقطة فاصلة |
المحدّدات، ونموذج الصندوق، و flexbox، و grid، والخصائص التي تنساها دائمًا - على صفحة واحدة. ورقة CSS المرجعية هذه هي مرجع سريع لتنسيق صفحات الويب وتخطيطها، من استهداف العناصر إلى توسيطها.
كل ما هنا هو CSS قياسية تعمل في المتصفحات الحديثة. انسخ قاعدة، أو جرّبها مباشرة في playground الخاص بـ HTML حيث يمكنك تحرير CSS مع معاينة فورية.
الأسئلة الشائعة حول ورقة CSS المرجعية
هل ورقة CSS المرجعية هذه مجانية؟
نعم. ورقة CSS المرجعية هذه مجانية دون تسجيل. أضِفها إلى المفضلة واستخدمها متى احتجت إلى البحث عن محدّد أو خاصية أو نمط تخطيط.
هل ينبغي أن أستخدم flexbox أم grid؟
استخدم flexbox للتخطيطات أحادية البعد - صف من الأزرار، أو شريط تنقل، أو عناصر في سطر أو عمود واحد. واستخدم grid للتخطيطات ثنائية البعد حيث تتحكم في الصفوف والأعمدة معًا في آنٍ واحد، مثل تخطيط صفحة أو معرض بطاقات. وهما يعملان معًا جيدًا: شبكة من البطاقات تستخدم كل بطاقة فيها flexbox داخليًا أمر شائع.
كيف أوسّط div باستخدام CSS؟
أبسط طريقة حديثة هي flexbox على العنصر الأب:
display: flex; justify-content: center; align-items: center; تُوسّط الابن أفقيًا وعموديًا معًا. وللتوسيط الأفقي فقط لعنصر كتلي بعرض محدّد، لا يزال margin: 0 auto يعمل.هل يمكنني التدرّب على CSS عبر الإنترنت؟
نعم. افتح playground الخاص بـ HTML لكتابة HTML و CSS معًا مع معاينة حيّة. وعندما ترغب في تعلّم منظّم، تغطّي دورة CSS التفاعلية المجانية من Coddy المحدّدات ونموذج الصندوق و flexbox و grid خطوة بخطوة.
هل هذه الورقة المرجعية مناسبة للمبتدئين؟
نعم. إنها تنتقل من المحدّدات ونموذج الصندوق (الأسس) إلى flexbox و grid والانتقالات، بحيث يمكنك البدء بالأقسام العلوية والتدرّج إلى التخطيط الحديث.
موارد ذات صلة
المزيد من الأوراق المرجعية
