السلام عليكم، سنرى في هذا الدرس تقنيتا Longhand و Shorthand في CSS، حيث سنتعرف على مفهوم التقنيتين و الفرق بينهما.
Longhand
ما هي تقنية Longhand ؟
تقنية Longhand هي عبارة عن احتواء كود CSS على مجموعة أو فرد من الخواص إذ يمكن اعتبارها خاصة، حيث تشترط تقنية Longhand بأن تكون هذه الخواص من نفس النوع في كود CSS سواء كانت المجموعة كلها أو فقط البعض منها، و هذا لا يمنع تواجد خواص أخرى غير خاصة بالتقنية أو مجموعة أخرى من الخواص الخاصة بالتقنية رفقة هذه الخواص داخل نفس الكود CSS.
أمثلة عن مجموعات خواص تقنية Longhand
مجموعة الخواص من نوع Font
تتيح هذه الخواص إمكانية التعديل على الخطوط، و هي الخاصية 'FONT-STYLE'، الخاصية 'FONT-WEIGHT'، الخاصية 'FONT-SIZE'، الخاصية 'LINE-HEIGHT' و الخاصية 'FONT-FAMILY'، و لمعرفة تفصيلية أوضح تجاه خواص هذه المجموعة بالإمكان تفقد الدرس 17، و الدرس 18، و الدرس 19 من هذه الدورة.
مجموعة الخواص من نوع Border
تتيح هذه الخواص إمكانية إضافة الحواف أو التعديل عليها، و هي الخاصية 'BORDER-WIDTH'، الخاصية 'BORDER-STYLE' و الخاصية 'BORDER-COLOR'، و لمعرفة تفصيلية أوضح تجاه خواص هذه المجموعة بالإمكان تفقد الدرس 20 من هذه الدورة.
مجموعة الخواص من نوع Background
تتيح هذه الخواص إمكانية إضافة الخلفيات أو التعديل عليها، و هي الخاصية 'BACKGROUND-COLOR'، الخاصية 'BACKGROUND-IMAGE'، الخاصية 'BACKGROUND-REPEAT'، الخاصية 'BACKGROUND-ATTACHMENT' و الخاصية 'BACKGROUND-POSITION'، و لمعرفة تفصيلية أوضح تجاه خواص هذه المجموعة بالإمكان تفقد الدرس 16 من هذه الدورة.
مجموعة خواص Padding
تتيح هذه الخواص إمكانية إضافة فراغات بين العناصر و حوافها أو التعديل على هذه الفراغات، و هي الخاصية 'PADDING-TOP'، الخاصية 'PADDING-RIGHT'، الخاصية 'PADDING-BOTTOM' و الخاصية 'PADDING-LEFT'، و لمعرفة تفصيلية أوضح تجاه خواص هذه المجموعة بالإمكان تفقد الدرس 22 من هذه الدورة.
مجموعة خواص Margin
تتيح هذه الخواص إمكانية إضافة فراغات في حواف العناصر الخارجية أو التعديل على هذه الفراغات، و هي الخاصية 'MARGIN-TOP'، الخاصية 'MARGIN-RIGHT'، الخاصية 'MARGIN-BOTTOM' و الخاصية 'MARGIN-LEFT'، و لمعرفة تفصيلية أوضح تجاه خواص هذه المجموعة بالإمكان تفقد الدرس 22 من هذه الدورة.
الفيديو التوضيحي للدرس
Shorthand
ما هي تقنية Shorthand ؟
تقنية Shorthand هي عبارة عن اختصار لمجموعة خواص من نفس النوع في كود CSS، حيث تُختصر المجموعة في خاصية واحدة تسمى إنجليزياً بـ Shorthand Property، و يقحم في قيمة هذه الأخيرة قيم خواص المجموعة مفروقة بفراغ من نوع Space، و يستثنى إقحام القيم الشاملة.
أمثلة عن خواص تقنية Shorthand
تقنية Shorthand لمجموعة الخواص من نوع Font
تسمى Shorthand Property لمجموعة الخواص من نوع Font بـ 'FONT'، و تقحم في قيمة هذه الأخيرة قيم خواص المجموعة حسب ترتيبهم المذكور أعلاه في تقنية Longhand مفصولين بفراغ من نوع Space ما عدا قيمة الخاصية 'FONT-SIZE' و قيمة الخاصية 'LINE-HEIGHT' حيث يُفرق بينهما بعلامة Slash '/'.
تقنية Shorthand لمجموعة الخواص من نوع Border
تسمى Shorthand Property لمجموعة الخواص من نوع Border بـ 'BORDER'، و تقحم في قيمة هذه الأخيرة قيم خواص المجموعة حسب ترتيبهم المذكور أعلاه في تقنية Longhand مفصولين بفراغ من نوع Space، و لمعرفة تفصيلية أوضح تجاه الخاصية 'BORDER' بالإمكان تفقد الدرس 20 من هذه الدورة.
تقنية Shorthand لمجموعة الخواص من نوع Background
تسمى Shorthand Property لمجموعة الخواص من نوع Background بـ 'BACKGROUND'، و تقحم في قيمة هذه الأخيرة قيم خواص المجموعة حسب ترتيبهم المذكور أعلاه في تقنية Longhand مفصولين بفراغ من نوع Space.
تقنية Shorthand لمجموعة خواص Padding
تسمى Shorthand Property لمجموعة خواص Padding بـ 'PADDING'، و تقحم في قيمة هذه الأخيرة قيم خواص المجموعة حسب ترتيبهم المذكور أعلاه في تقنية Longhand مفصولين بفراغ من نوع Space، و لمعرفة تفصيلية أوضح تجاه الخاصية 'PADDING' بالإمكان تفقد الدرس 22 من هذه الدورة.
تقنية Shorthand لمجموعة خواص Margin
تسمى Shorthand Property لمجموعة خواص Margin بـ 'MARGIN'، و تقحم في قيمة هذه الأخيرة قيم خواص المجموعة حسب ترتيبهم المذكور أعلاه في تقنية Longhand مفصولين بفراغ من نوع Space، و لمعرفة تفصيلية أوضح تجاه الخاصية 'MARGIN' بالإمكان تفقد الدرس 22 من هذه الدورة.
الأكواد المستعملة في الدرس