تعرف على كيفية إنشاء موقع الويب الخاص بك باستخدام HTML5 و CSS3


الدرس: تلخيص لخصائص CSS


الصفحة السابقة

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

القائمة ليست شاملة لأن هدفي هو عدم إدراج جميع خصائص CSS التي يمكن أن توجد: يوجد الكثير بالفعل (أكثر من مائتي!) وبعضها نادرًا ما يتم استخدامه.

تذكير

خصائص تنسيق النص


ألخص هنا معظم خصائص تنسيق النص .

ما هو تنسيق النص؟ هذا كل ما يتعلق بعرض النص نفسه: غامق ، مائل ، تسطير ، خط ، محاذاة ، إلخ.

خاصية أمثلة/قيمة وصف
font-family police1, police2, police3, serif, sans-serif, monospace اسم الخط
@font-face Nom et source de la police خط مخصص
font-size 1.3em, 16px, 120%... حجم النص
font-weight bold, normal دهن
font-style italic, oblique, normal مائل
text-decoration underline, overline, line-through, blink, none تسطير ، السطر أعلاه ، يتوسطه خط أو وميض
font-variant small-caps, normal عواصم صغيرة
text-transform capitalize, lowercase, uppercase عواصم
font سوبر الشرطة الملكية. الجمع: font-weight، font-style، font-size، font-variant، font-family.
text-align left, center, right, justify المحاذاة الأفقية
vertical-align المحاذاة العمودية (خلايا الجدول أو العناصر inline-blockفقط)
line-height 18px, 120%, normal... ارتفاع الخط
text-indent 25px فقرة
white-space pre, nowrap, normal انقطاع
word-wrap break-word, normal الواصلة القسرية
text-shadow 5px 5px 2px blue ظل النص

خصائص اللون والخلفية


خاصية أمثلة/قيمة وصف
color RGB(أحمر,أخضر,أزرق),
RGBA(أحمر,أخضر,أزرق,شفافية),
#CF1A20...
لون النص
background-color نفس اللون لون الخلفية
background-image url('image.png') صورة الخلفية
background-attachment fixed, scroll خلفية ثابتة
background-repeat repeat-x, repeat-y, no-repeat, repeat تكرار الخلفية
background-position (X Y), TOP, CENTER, BOTTOM, LEFT, RIGHT الموقف السفلي
background - سوبر الممتلكات من القاع. الجمع: background-image، background-repeat، background-attachment،background-position
opacity 0.5 شفافية

خصائص كتلة


خاصية أمثلة/قيمة وصف
width 150 بكسل ، 80 ٪ ... عرض
height 150 بكسل ، 80 ٪ ... ارتفاع
min-width 150 بكسل ، 80 ٪ ... الحد الأدنى للعرض
max-width 150 بكسل ، 80 ٪ ... أقصى عرض
min-height 150 بكسل ، 80 ٪ ... ارتفاع الحد الأدنى
max-height 150 بكسل ، 80 ٪ ... أقصى ارتفاع
margin-top 23px الهامش في الأعلى
margin-left 23px الهامش الأيسر
margin-right 23px الهامش الأيمن
margin-bottom 23px الهامش في القاع
margin 23px 5px 23px 5px (أعلى ، يمين ، أسفل ، يسار) سوبر الممتلكات الهامش. الجمع: margin-top، margin-right، margin-bottom، margin-left.
padding-left 23px الهامش الداخلي على اليسار
padding-right 23px داخل الهامش على اليمين
padding-bottom 23px داخل الهامش في القاع
padding-top 23px الهامش الداخلي في الأعلى
padding 23px 5px 23px 5px (أعلى ، يمين ، أسفل ، يسار) خاصية فائقة الهامش الداخلي. الجمع: padding-top، padding-right، padding-bottom، padding-left.
border-width 3PX سمك الحدود
border-color الاسم ، )أحمر ، أخضر ، أزرق( ، rgba )أحمر ، أخضر ، أزرق ، شفاف( ، # CF1A20 ... لون الحدود
border-style الصلبة ، منقط ، متقطع ، مزدوج ، الأخدود ، التلال ، أقحم ، البداية نوع الحدود
border 3px أسود صلب الملكية فائقة الحدود. الحصادات border-width، border-color، border-style. كما تتوفر أيضا border-top، border-right، border-bottom، border-left.
border-radius 5px تقريب الحدود
box-shadow 6px 6px 0px أسود )أفقي ورأسي وتلاشي ولون( ظل مربع

تحديد المواقع وعرض الخصائص


خاصية أمثلة/قيمة وصف
display block, inline, inline-block, table, table-cell, none... نوع العنصر ( block، inline، inline-block، none...)
visibility visible, hidden رؤية
clip rect (0px, 60px, 30px, 0px) RECT(TOP, RIGHT, BOTTOM, LEFT) عرض جزء من العنصر
overflow auto, scroll, visible, hidden السلوك في حالة التجاوز
float left, right, none عائم
clear left, right, both, none وقف العائمة
position relative, absolute, static وضع
top 20px موقف من الأعلى
bottom 20px موقف من الأسفل
left 20px موقف من اليسار
right 20px موقف من اليمين
z-index 10 عرض الترتيب في حالة التراكب. يتم عرض أكبر قيمة في الجزء العلوي من الآخرين.

قائمة الخصائص


خاصية أمثلة/قيمة وصف
list-style-type القرص ، دائرة ، مربع ، عشري ، السفلى الرومانية ، العليا الرومانية ، السفلى ألفا ، العليا ألفا ، لا شيء نوع القائمة
list-style-position الداخل والخارج موقف راحة
list-style-image رابط ( 'puce.png') رقاقة مخصصة
list-style - قائمة الممتلكات الفائقة. الحصادات list-style-type، list-style-position، list-style-image.

خصائص الجداول


قيمة أمثلة وصف
border-collapse collapse, separate اندماج الحدود
empty-cells hide, show إظهار الخلايا الفارغة
caption-side bottom, top موقف عنوان الجدول

خصائص أخرى


قيمة أمثلة وصف
cursor التقاطع ، الافتراضي ، مساعدة ، نقل ، نقطة ، تقدم ، نص ، انتظر ، تغيير حجم البريد ، تغيير حجم ، تلقائي ... مؤشر الماوس