ورقة CSS المرجعية

جميع الأدوات
مجاني

مرجع CSS قابل للبحث والطباعة — المحددات ونموذج الصندوق وflexbox وgrid والطباعة والانتقالات والميزات الحديثة. مجاني.

Selectors

13
.class
Select all elements with the class
#id
Select the element with the id
a, b
Group: select a and b
a b
Descendant: b inside a
a > b
Direct child b of a
a + b
Adjacent sibling immediately after a
a ~ b
General sibling b after a
[type="text"]
Attribute selector
:hover :focus
Pseudo-classes for state
:nth-child(2n)
Every even child
::before ::after
Pseudo-elements (generated content)
:not(.x)
Negation: anything but .x
:is(h1, h2, h3)
Matches any selector in the list

Box model

7
box-sizing: border-box;
Include padding & border in width
margin: 0 auto;
Center a block horizontally
padding: 1rem 2rem;
Vertical 1rem, horizontal 2rem
border: 1px solid #ccc;
Width, style, color
border-radius: 8px;
Rounded corners
outline: 2px dashed red;
Outline (does not affect layout)
overflow: hidden;
Clip content that overflows

Flexbox

8
display: flex;
Create a flex container
flex-direction: row | column;
Main axis direction
justify-content: space-between;
Align along the main axis
align-items: center;
Align along the cross axis
flex-wrap: wrap;
Allow items to wrap
gap: 1rem;
Space between items
flex: 1;
Grow to fill space (1 1 0)
align-self: flex-end;
Override cross-axis for one item

Grid

8
display: grid;
Create a grid container
grid-template-columns: 1fr 1fr 1fr;
Three equal columns
repeat(3, 1fr)
Shorthand for repeated tracks
minmax(200px, 1fr)
Track between a min and max
grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
Responsive auto columns
gap: 1rem;
Row and column gap
grid-column: 1 / 3;
Span from line 1 to 3
place-items: center;
Center items on both axes

Typography

8
font-family: system-ui, sans-serif;
Font stack
font-size: 1.125rem;
Relative font size
font-weight: 600;
Bold weight
line-height: 1.6;
Line spacing
letter-spacing: .02em;
Tracking
text-align: center;
Horizontal text alignment
text-transform: uppercase;
Change letter case
text-overflow: ellipsis;
Truncate with … (needs overflow+nowrap)

Colors & background

7
color: #1f2937;
Text color
background: rgb(0 0 0 / 50%);
Modern rgb with alpha
background: linear-gradient(90deg,#f06,#48f);
Linear gradient
opacity: .5;
Element transparency
box-shadow: 0 4px 12px rgb(0 0 0 / .15);
Drop shadow
background-size: cover;
Scale image to cover
color-mix(in srgb, red 40%, blue);
Mix two colors

Positioning

6
position: relative;
Offset from normal position
position: absolute;
Relative to nearest positioned ancestor
position: fixed;
Relative to the viewport
position: sticky; top: 0;
Sticks when scrolling past
inset: 0;
top/right/bottom/left = 0
z-index: 10;
Stacking order

Transitions & animation

5
transition: all .2s ease;
Animate property changes
transform: translateY(-4px) scale(1.05);
Move, scale, rotate
@keyframes spin { to { transform: rotate(360deg); } }
Define an animation
animation: spin 1s linear infinite;
Run a keyframe animation
will-change: transform;
Hint the browser to optimize

Responsive & modern

7
@media (max-width: 768px) { ... }
Media query breakpoint
clamp(1rem, 2vw, 2rem)
Fluid value with min/max
aspect-ratio: 16 / 9;
Maintain an aspect ratio
var(--brand)
Use a custom property
:root { --brand: #4f46e5; }
Define a custom property
container-type: inline-size;
Enable container queries
@container (min-width: 400px) {…}
Container query

لا يوجد إدخال يطابق “:q”.

حول ورقة CSS المرجعية

يجمع دليل CSS هذا الخصائص التي تستخدمها يوميًا في صفحة واحدة قابلة للبحث: المحددات، نموذج الصندوق، flexbox، grid، الطباعة، الألوان والخلفيات، تحديد المواضع، الانتقالات والحركة، وقسم عن CSS الحديثة والمتجاوبة.

الدليل منظم بحيث تكون الإجابة عن سؤال "ما اسم هذه الخاصية؟" على بُعد بحث واحد — قسما flexbox وgrid تحديدًا يسردان خصائص المحاذاة والتخطيط بقيم يمكنك نسخها مباشرة إلى ورقة الأنماط، والقسم الحديث يبقي المزايا الأحدث في متناول يدك.

الدليل مجاني، يُحمَّل من جانب المتصفح، يصفّي مباشرة أثناء الكتابة، ويتيح لك نسخ أي تعريف بنقرة واحدة. جدول محتويات ثابت ينقلك بين الأقسام وزر الطباعة ينتج مرجعًا ورقيًا نظيفًا.

كيفية استخدام ورقة CSS المرجعية

  1. تصفح قائمة الأقسام — المحددات، نموذج الصندوق، Flexbox، Grid، الطباعة والمزيد.
  2. اكتب خاصية أو مفهومًا مثل grid أو hover أو transition في مربع البحث لتصفية كل صف.
  3. انتقل إلى قسم مثل تحديد المواضع عبر جدول المحتويات الثابت.
  4. انقر على مقتطف أو أيقونة نسخه لنسخ تعريف CSS.
  5. اطبع الدليل للحصول على مرجع CSS بجانب مكتبك.

الأسئلة الشائعة

تسعة أقسام: المحددات، نموذج الصندوق، flexbox، grid، الطباعة، الألوان والخلفيات، تحديد المواضع، الانتقالات والحركة، وميزات CSS المتجاوبة والحديثة.

نعم — كلاهما له قسم خاص يضم خصائص الحاوية والعنصر وقيم المحاذاة والصيغ المختصرة، وهي أكثر ما يبحث عنه المطورون.

نعم. إلى جانب الأساسيات الراسخة، يغطي قسم مخصص للمتجاوب والحديث الميزات الأحدث التي تصادفها في أوراق الأنماط الحالية، إلى جانب أنماط استعلامات الوسائط.

نعم. انقر على الكود أو على أيقونة النسخ عند التحويم فيُوضع التعريف في الحافظة، مع رسالة تأكيد قصيرة "تم النسخ!".

نعم، مجاني بالكامل — صفحة تعمل من جانب المتصفح مع بحث مباشر، دون تسجيل دخول واستخدام غير محدود.
شارك هذا
أدوات ذات صلة
ورقة JavaScript المرجعية مرجع قابل للبحث والطباعة لـ JavaScript الحديثة — البنية والمصفوفات والسلاسل والكائنات وasync/await وDOM وميزات ES2022+. مجاني. مجاني
محوّل HTML إلى JSX الصق HTML واحصل على JSX نظيف لـ React — تتحوّل class إلى className، وتُكتب الخصائص بصيغة camelCase، وتصبح سلاسل style كائنات، وتُغلق الوسوم ذاتياً. يعمل بالكامل في متصفحك. مجاني. مجاني
ورقة PHP المرجعية مرجع PHP 8.3+ قابل للبحث والطباعة — البنية والسلاسل والمصفوفات والدوال والأصناف والتعدادات والخصائص والميزات الحديثة. مجاني. مجاني
ورقة MySQL المرجعية مرجع MySQL قابل للبحث والطباعة — الاستعلامات والوصلات والفهارس والدوال وأنواع البيانات وأوامر الإدارة. مجاني. مجاني
ورقة Python المرجعية مرجع Python 3 قابل للبحث والطباعة — البنية وهياكل البيانات وعبارات الاستيعاب والدوال والأصناف والملفات والمكتبة القياسية. مجاني. مجاني
ورقة Shell المرجعية مرجع Bash / shell قابل للبحث والطباعة — التنقل والملفات والأنابيب والمتغيرات والحلقات والشروط وأسطر مفيدة من سطر واحد. مجاني. مجاني
عمليات البحث الشائعة
css cheat sheet قائمة css selectors خصائص css flexbox خصائص css grid مرجع css box model قيم css position صياغة css transition و animation مرجع خصائص css
هل تحتاج إلى مساعدة؟
هل واجهت مشكلة في هذه الأداة؟ أخبر فريقنا.
الإبلاغ عن مشكلة

أضف هذه الأداة المجانية إلى موقعك الخاص — انسخ والصق الكود أدناه.