ورقة الغش CSS سريعة وعملية من Toptal

نشرت: 2022-03-11

Cascading Style Sheets ، أو CSS باختصار ، هي لغة ورقة أنماط مكتوبة بلغة ترميزية. تحدد CSS عناصر العرض التقديمي والشكل والتنسيق لمستندات الويب ، مثل التخطيط والألوان والخطوط.

بناء جملة CSS شامل ، وليس من السهل دائمًا معرفة البنية الدقيقة ، أو معرفة جميع خصائص CSS المتاحة والقيم المقابلة. لمساعدة مطوري ومصممي CSS ، أنشأ Toptal دليلًا مرجعيًا سريعًا وعرضه على المجتمع كتنزيل مجاني. يتضمن الدليل المرجعي لـ CSS بنية CSS وأهم المحددات والخصائص والأحجام والوحدات ومعلومات CSS مفيدة أخرى بتنسيق قصير وغني بالمعلومات. نأمل أن تجد ورقة الغش في CSS مورداً قيماً.

يمكنك أيضًا التحقق من صفحات موارد Toptal للحصول على معلومات إضافية حول أخطاء CSS الشائعة ودليل توظيف CSS وأسئلة مقابلة CSS ونصائح CSS وأفضل الممارسات.

قم بتنزيل ورقة الغش في CSS

انقر هنا لتنزيل ورقة الغش في CSS

ورقة الغش CSS

بناء الجملة

نموذج الصندوق

/* تعليقات */

@نوع الوسائط {

المحدد {

الملكية: القيمة ؛

}

}

ملاحظة: نوع الوسائط اختياري

CSS Box Model

أسلوب مضمّن

<tag>

نمط مضمّن

<head>

<style type = "text / css">

المحدد {الخاصية: القيمة؛ }

</style>

</head>

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

<head>

<link rel = "stylesheet"

اكتب = "text / css" href = "style.css" />

</head>

مربعات

حافة

الهامش العلوي
الهامش الأيمن
الهامش السفلي
الهامش الأيسر

المحددات

حشوة

أعلى الحشو
المساحة المتروكة لليمين
أسفل الحشو
المساحة المتروكة لليسار

*

كل العناصر

بطاقة شعار

جميع عناصر العلامة

الحدود

أعلى الحد
يمين الحدود
الحد السفلي
يسار الحد

بطاقة شعار *

جميع العناصر داخل العلامة

العلامة tag2

عناصر tag2 داخل العلامة

لون الحدود

لون أعلى الحدود
لون يمين الحدود
لون الحد السفلي
لون الحدود اليسرى

علامة ، علامة 2

جميع عناصر العلامة والعلامة 2

العلامة> tag2

tag2 هو تابع للعلامة

نمط الحدود

أعلى الحدود
نمط يمين الحدود
نمط الحد السفلي
نمط يسار الحد

علامة + علامة 2

tag2 مسبوقة بعلامة

.صف دراسي

عناصر مع فئة "class"

عرض الحدود

عرض أعلى الحد
عرض يمين الحد
عرض أسفل الحد
عرض يسار الحد

فئة العلامة

جميع العلامات مع فئة "class"

#هوية شخصية

عنصر بالمعرف "id"

الحجم والألوان

علامة # معرف

علامة بالمعرف "id"

الأحجام النسبية

م | rem | على سبيل المثال | الفصل

فولكس فاجن | vh | vmin | vmax | ٪

المحددات الزائفة

:نشيط

يضيف النمط إلى العنصر النشط

الأحجام المطلقة

سم | مم | في

مقصف | pt | الكمبيوتر

:بعد

يضيف محتوى بعد عنصر

:قبل

محتوى الإعلانات قبل العنصر

الألوان

عرافة # ff00ff

: أول طفل

يضيف النمط للطفل الأول

RGB rgb (255،0،255)

:الرسالة الأولى

يضيف النمط إلى الحرف الأول

التمركز

:السطر الأول

يضيف النمط إلى السطر الأول

وضع

مطلق | ثابت | نسبي | ثابت | يرث

:التركيز

يضيف النمط إلى العنصر المركز

:يحوم

يضيف النمط عندما ينتهي الماوس

يطفو

غادر | حق | لا شيء | يرث

:حلقة الوصل

يضيف نمطًا إلى الرابط غير المرغوب فيه

: زار

يضيف النمط إلى الارتباط الذي تمت زيارته

فوق على اليمين،
أسفل اليسار

يضبط الإزاحة من الحافة

نص

خط العائلة

يحدد عائلة الخط

صافي

غادر | حق | كلاهما | لا شيء | يرث

حجم الخط

يحدد حجم الخط

نوع الخط

عادي | مائل | منحرف | يرث

عرض

يحدد وضع العنصر في تدفق المستند

متغير الخط

عادي | قبعات صغيرة | يرث

تجاوز

مرئي | مخفي | التمرير | تلقائي | يرث

الخط

-وزن

عادي | جريئة | أكثر جرأة | أخف وزنا | كثافة العمليات (100-900) | يرث

الرؤية

مرئي | مخفي | انهيار | يرث

اللون

يضبط لون النص

ارتفاع خط

عادي | int | ٪ | يرث

الفهرس z

تلقائي | int | يرث

محاذاة النص

غادر | حق | مركز | يبرر | يرث

أبعاد

ارتفاع

تلقائي | int | ٪ | يرث

نص-

زخرفة

لا شيء | تسطير | تسطير | من خلال الخط | وميض | يرث

اقصى ارتفاع

لا شيء | int | ٪ | يرث

أقصى عرض

لا شيء | int | ٪ | يرث

المسافة البادئة النص

int | ٪ | يرث

أدنى ارتفاع

int | ٪ | يرث

نص-

تحول

لا شيء | تكبير | أحرف كبيرة | صغير | يرث

العرض الأدنى

int | ٪ | يرث

العرض

تلقائي | int | ٪ | يرث

عمودي

- محاذاة

int | ٪ | خط الأساس | الفرعي | سوبر | أعلى | منتصف أعلى النص | أسفل | أسفل النص | يرث

آخر

معرفتي

شكل:

الخلفية (اللون) (الصورة)

(كرر) (موقف)

أبيض

-الفضاء

عادي | ناراب | قبل | الخط المسبق | قبل التفاف | يرث

المؤشر

اضبط نوع المؤشر

تباعد الكلمات

عادي | الطول | يرث

يقتبس

تعيين نوع علامات الاقتباس