CSS

CSS Font Shorthand
إختصار خصائص font في لغة CSS

ستتعلم في هذا الدرس إختصار جميع أوامر خصائص font في أمر واحد وهو خاصية font في لغة CSS بدلاً من كتابة مجموعة خصائص كتابة خاصية واحدة تقوم بنفس الوظيفة.

التاريخ

23 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1837

المواضيع

24
chevron_right التالى
17%
السابق chevron_left
الشروحات chevron_left CSS Font Shorthand chevron_left CSS
CSS Syntax keyboard_arrow_down
check check_circle_outline 1 - CSS Introduction
check check_circle_outline 2 - CSS Syntax
check check_circle_outline 3 - CSS Selectors
check check_circle_outline 4 - CSS How To
check check_circle_outline 5 - CSS Comments
check check_circle_outline 6 - CSS Important
CSS Text keyboard_arrow_down
check check_circle_outline 7 - Text Color
check check_circle_outline 8 - Text Alignment
check check_circle_outline 9 - Vertical Alignment
check check_circle_outline 10 - Text Transformation
check check_circle_outline 11 - Text Spacing
check check_circle_outline 12 - White Space
check check_circle_outline 13 - Text Shadow
check check_circle_outline 14 - Text Direction
CSS Text Decoration keyboard_arrow_down
check check_circle_outline 15 - Decoration Line
check check_circle_outline 16 - Decoration Color
check check_circle_outline 17 - Decoration thickness
check check_circle_outline 18 - Decoration Style
check check_circle_outline 19 - Decoration Shorthand
CSS Fonts keyboard_arrow_down
check check_circle_outline 20 - Font Size
check check_circle_outline 21 - Font Family
check check_circle_outline 22 - Font Style
check check_circle 23 - Font Shorthand
check check_circle_outline 24 - Google Font
CSS Backgrounds keyboard_arrow_down
check check_circle_outline 25 - Background Color
check check_circle_outline 26 - Background Image
check check_circle_outline 27 - Background Size
check check_circle_outline 28 - Background Repeat
check check_circle_outline 29 - Background Attachment
check check_circle_outline 30 - Background Position
check check_circle_outline 31 - Background Shorthand
CSS Borders keyboard_arrow_down
check check_circle_outline 32 - CSS Borders
check check_circle_outline 33 - Border style
check check_circle_outline 34 - Border Width
check check_circle_outline 35 - Border Color
check check_circle_outline 36 - Border Sides
check check_circle_outline 37 - Border Shorthand
check check_circle_outline 38 - Rounded Borders
CSS Outline keyboard_arrow_down
check check_circle_outline 39 - CSS Outline
check check_circle_outline 40 - Outline style
check check_circle_outline 41 - Outline Width
check check_circle_outline 42 - Outline Color
check check_circle_outline 43 - Outline Offset
check check_circle_outline 44 - Outline Shorthand
CSS Box Model keyboard_arrow_down
check check_circle_outline 45 - CSS Margin
check check_circle_outline 46 - CSS Padding
check check_circle_outline 47 - Box Sizing
check check_circle_outline 48 - Box Model
CSS Dimensions keyboard_arrow_down
check check_circle_outline 49 - CSS Height
check check_circle_outline 50 - CSS Width
check check_circle_outline 51 - Max Height
check check_circle_outline 52 - Min Height
check check_circle_outline 53 - Max Width
check check_circle_outline 54 - Min Width
check check_circle_outline 55 - Calculator
CSS Position keyboard_arrow_down
check check_circle_outline 56 - CSS Display
check check_circle_outline 57 - CSS Visibility
check check_circle_outline 58 - CSS Float
check check_circle_outline 59 - CSS Clear
check check_circle_outline 60 - CSS Position
check check_circle_outline 61 - Layers Orders
check check_circle_outline 62 - CSS Overflow
CSS Style keyboard_arrow_down
check check_circle_outline 63 - CSS Links
check check_circle_outline 64 - CSS Images
check check_circle_outline 65 - CSS Lists
check check_circle_outline 66 - CSS Tables
check check_circle_outline 67 - CSS Transparency
CSS Navigation keyboard_arrow_down
check check_circle_outline 68 - CSS Navigation Bar
check check_circle_outline 69 - Vertical Navigation
check check_circle_outline 70 - Horizontal Navigation
CSS Flex Box keyboard_arrow_down
check check_circle_outline 71 - CSS Flexbox
check check_circle_outline 72 - Flex Direction
check check_circle_outline 73 - Flex Wrap
check check_circle_outline 74 - Flex Flow
check check_circle_outline 75 - Justify Content
check check_circle_outline 76 - Align Items
check check_circle_outline 77 - Align Content
check check_circle_outline 78 - Flex Order
check check_circle_outline 79 - Flex Basis
check check_circle_outline 80 - Flex Grow
check check_circle_outline 81 - Flex Shrink
check check_circle_outline 82 - Align Self
check check_circle_outline 83 - CSS Flex
CSS Grid System keyboard_arrow_down
check check_circle_outline 84 - Grid System
check check_circle_outline 85 - Grid Container
check check_circle_outline 86 - Grid Items
CSS Grid Columns keyboard_arrow_down
check check_circle_outline 87 - Template Columns
check check_circle_outline 88 - Column Start
check check_circle_outline 89 - Column End
check check_circle_outline 90 - Grid Column
check check_circle_outline 91 - Auto Columns
CSS Grid rows keyboard_arrow_down
check check_circle_outline 92 - Template Rows
check check_circle_outline 93 - Row Start
check check_circle_outline 94 - Row End
check check_circle_outline 95 - Grid Row
check check_circle_outline 96 - Auto Rows
check check_circle_outline 97 - Grid Template
CSS Grid Area keyboard_arrow_down
check check_circle_outline 98 - Template Areas
check check_circle_outline 99 - Grid Area
CSS Grid Gaps keyboard_arrow_down
check check_circle_outline 100 - Row Gap
check check_circle_outline 101 - Grid Gap
check check_circle_outline 102 - Column Gap
CSS Grid keyboard_arrow_down
check check_circle_outline 103 - Grid Content
check check_circle_outline 104 - Grid Flow
check check_circle_outline 105 - Repeat Function
CSS Responsive keyboard_arrow_down
check check_circle_outline 106 - RWD Introduction
check check_circle_outline 107 - RWD Viewport
check check_circle_outline 108 - Media Queries
check check_circle_outline 109 - Media Examples
check check_circle_outline 110 - RWD Grid View
check check_circle_outline 111 - RWD Grid Media
check check_circle_outline 112 - RWD Video
check check_circle_outline 113 - RWD Image
check check_circle_outline 114 - Flex Responsive
CSS Text Effects keyboard_arrow_down
check check_circle_outline 115 - Text Overflow
check check_circle_outline 116 - Word Wrap
check check_circle_outline 117 - Writing Mode
CSS Advanced keyboard_arrow_down
check check_circle_outline 118 - Background Origin
check check_circle_outline 119 - CSS Pagination
check check_circle_outline 120 - CSS Buttons
check check_circle_outline 121 - Column Count
check check_circle_outline 122 - 2D Transforms
check check_circle_outline 123 - 3D Transforms
check check_circle_outline 124 - CSS Transitions
check check_circle_outline 125 - Background Clip
check check_circle_outline 126 - Rounded Corners
check check_circle_outline 127 - CSS Colors
check check_circle_outline 128 - Multiple Backgrounds
check check_circle_outline 129 - Color Keywords
check check_circle_outline 130 - Color Gradients
check check_circle_outline 131 - Border Images
check check_circle_outline 132 - CSS Animations
check check_circle_outline 133 - CSS Tooltip
check check_circle_outline 134 - CSS Variables
check check_circle_outline 135 - CSS Dynamic
CSS Selectors keyboard_arrow_down
check check_circle_outline 136 - Combinator selectors
check check_circle_outline 137 - Pseudo Classes

CSS Font Shorthand
إختصار خصائص font في لغة CSS

</> CSS Font Shorthand
إختصار خصائص font في لغة CSS

خاصية font تستخدم بدلاً من كتابة جميع خصائص font  لتختصر أوامر وسطور في أمر وسطر واحد في لغة CSS,تُصف قيم جميع الخصائص في خاصية font والخصائص هي:

  • font-style
  • font-variant
  • ,font-weight
  • font-size
  • font-family
CSS font Shorthand

الخاصية هي font والقيم بداخلها هي نفس القيم التي تُكتب في الخصائص السابقة إُختصرت إلي خاصية واحدة فقط. 

font: italic small-caps bold 12px/30px Georgia, serif;
ملاحظة
قيمة خاصية font-size وقيمة خاصية font-family أمر ضروري عند إستخدام إختصار الخطوط في لغة CSS.

</> CSS font property
خاصية font في لغة CSS

تًستخدم خاصية font في لغة CSS لأختصار عدة أوامر إلي أمر واحد فقط وإختصار مجموعة سطور في سطر واحد فقط وهذة الخاصية تشمل جميع خصائص fonts.
CSS font property

خاصية font في لغة css. 

p.a {
  font: 20px Arial, sans-serif;
}

p.b {
  font: italic small-caps bold 12px/30px Georgia, serif;
}
جربها بنفسك chevron_right
مصطلحات الدرس
Shorthand
Shorthand

إختصار

Font
Font

الخط

Property
Property

خاصية

Properties
Properties

خصائص

Family
Family

عائلة

Height
Height

ارتفاع

Line
Line

السطر

Size
Size

حجم

Weight
Weight

وزن

Variant
Variant

البديل

Style
Style

نمط أو شكل

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
link
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات
chevron_right التالى
السابق chevron_left

CLOSETAG CLOSETAG

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

الشروحات

HTML

CSS

JavaScript

الدورات

HTML5

CSS

Java Script

قانوني

الأحكام والشروط

اتفاقية الترخيص

سياسة الخصوصية

معلومات حقوق النشر

سياسة ملفات الارتباط

الدعم

أسئلة وأجوبة

اتصل بنا

حقوق النشر © 2023 CLOSETAG كل الحقوق محفوظة
CLOSETAG