CSS

CSS
لغة CSS

تركز مادة CSS على معرفة كيفية التحكم في الألوان والخلفيات وترتيب عناصر HTML على المتصفح بواسطة لغة CSS، فأهم ما يميز هذه اللغة هو تقسيم صفحة الويب إلى أقسام "sections"، وعرض كل section بطريقة منظمة؛ مما يؤدي في النهاية إلى تصميم حديث وجذاب لصفحة الويب.

التاريخ

24 نوفمبر 2020

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

365

المواضيع

24
الشروحات 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_outline 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
ماذا ستتعلم

ستتعلم مفاهيم CSS2 و CSS3، وتتتعرف على الأساسيات وتقنيات CSS الحديثة، بما في ذلك CSS animation.

ستتعلم عمل style على الـfont بلغة CSS.

ستتعلم كيفية وضع خلفيات لصفحة الويب أو بعض أجزائها بلغة CSS.

ستتعلم نظرية position وكيفية التحكم في طبقات HTML elements على المتصفح.

ستتعلم نظرية الـ box model وكيفية التحكم في موضع HTML elements على المتصفح.

الهدف من الدورة

القدرة على عمل واجهة مستخدم لتطبيقات الويب الحديثة متجاوبة مع جميع الأجهزة.

احتراف لغة CSS من خلال التدرج بدءًا من تنفيذ الأجزاء الأساسية حتى الوصول إلى تصميمات ضخمة.

إنشاء حركات إبداعية داخل صفحات الويب وذلك لإضفاء الحيوية والديناميكية على مواقع الويب الخاصة بك.

المتطلبات

الالتزام بالمهام المطلوبة.

إتمام مادة HTML بشكل كامل.

محتوى الدورة
CSS Syntax keyboard_arrow_down
play_circle_outline CSS Introduction مشاهدة الدرس
play_circle_outline CSS Syntax مشاهدة الدرس
play_circle_outline CSS Selectors مشاهدة الدرس
play_circle_outline CSS How To مشاهدة الدرس
play_circle_outline CSS Comments مشاهدة الدرس
play_circle_outline CSS Important مشاهدة الدرس
CSS Text keyboard_arrow_down
play_circle_outline CSS Text Color مشاهدة الدرس
play_circle_outline CSS Text Alignment مشاهدة الدرس
play_circle_outline CSS Vertical Alignment مشاهدة الدرس
play_circle_outline CSS Text Transformation مشاهدة الدرس
play_circle_outline CSS Text Spacing مشاهدة الدرس
play_circle_outline CSS Text White Space مشاهدة الدرس
play_circle_outline CSS Text Shadow مشاهدة الدرس
play_circle_outline CSS Text Direction مشاهدة الدرس
CSS Text Decoration keyboard_arrow_down
play_circle_outline CSS Text Decoration Line مشاهدة الدرس
play_circle_outline CSS Text Decoration Color مشاهدة الدرس
play_circle_outline CSS Text Decoration thickness مشاهدة الدرس
play_circle_outline CSS Text Decoration style مشاهدة الدرس
play_circle_outline CSS Text Decoration Shorthand مشاهدة الدرس
CSS Fonts keyboard_arrow_down
play_circle_outline CSS Font Size مشاهدة الدرس
play_circle_outline CSS Font Family مشاهدة الدرس
play_circle_outline CSS Font Style مشاهدة الدرس
play_circle_outline CSS Font Shorthand مشاهدة الدرس
play_circle_outline CSS Google Font مشاهدة الدرس
CSS Backgrounds keyboard_arrow_down
play_circle_outline CSS Background Color مشاهدة الدرس
play_circle_outline CSS Background Image مشاهدة الدرس
play_circle_outline CSS Background Size مشاهدة الدرس
play_circle_outline CSS Background Repeat مشاهدة الدرس
play_circle_outline CSS Background Attachment مشاهدة الدرس
play_circle_outline CSS Background Position مشاهدة الدرس
play_circle_outline CSS Background Shorthand مشاهدة الدرس
CSS Borders keyboard_arrow_down
play_circle_outline CSS Borders مشاهدة الدرس
play_circle_outline CSS Border style مشاهدة الدرس
play_circle_outline CSS Border Width مشاهدة الدرس
play_circle_outline CSS Border Color مشاهدة الدرس
play_circle_outline CSS Border Sides مشاهدة الدرس
play_circle_outline CSS Border Shorthand مشاهدة الدرس
play_circle_outline CSS Rounded Borders مشاهدة الدرس
CSS Outline keyboard_arrow_down
play_circle_outline CSS Outline مشاهدة الدرس
play_circle_outline CSS Outline style مشاهدة الدرس
play_circle_outline CSS Outline Width مشاهدة الدرس
play_circle_outline CSS Outline Color مشاهدة الدرس
play_circle_outline CSS Outline Offset مشاهدة الدرس
play_circle_outline CSS Outline Shorthand مشاهدة الدرس
CSS Box Model keyboard_arrow_down
play_circle_outline CSS Margin مشاهدة الدرس
play_circle_outline CSS Padding مشاهدة الدرس
play_circle_outline CSS Box Sizing مشاهدة الدرس
play_circle_outline CSS Box Model مشاهدة الدرس
CSS Dimensions keyboard_arrow_down
play_circle_outline CSS Height مشاهدة الدرس
play_circle_outline CSS Width مشاهدة الدرس
play_circle_outline CSS Max Height مشاهدة الدرس
play_circle_outline CSS Min Height مشاهدة الدرس
play_circle_outline CSS Max Width مشاهدة الدرس
play_circle_outline CSS Min Width مشاهدة الدرس
play_circle_outline CSS Calculator مشاهدة الدرس
CSS Position keyboard_arrow_down
play_circle_outline CSS Display مشاهدة الدرس
play_circle_outline CSS Visibility مشاهدة الدرس
play_circle_outline CSS Float مشاهدة الدرس
play_circle_outline CSS Clear مشاهدة الدرس
play_circle_outline CSS Position مشاهدة الدرس
play_circle_outline CSS Layers Orders z-index مشاهدة الدرس
play_circle_outline CSS Overflow مشاهدة الدرس
CSS Style keyboard_arrow_down
play_circle_outline CSS Links مشاهدة الدرس
play_circle_outline CSS Images مشاهدة الدرس
play_circle_outline CSS Lists مشاهدة الدرس
play_circle_outline CSS Tables مشاهدة الدرس
play_circle_outline CSS Transparency Opacity مشاهدة الدرس
CSS Navigation keyboard_arrow_down
play_circle_outline CSS Navigation Bar مشاهدة الدرس
play_circle_outline CSS Vertical Navigation Bar مشاهدة الدرس
play_circle_outline CSS Horizontal Navigation Bar مشاهدة الدرس
CSS Flex Box keyboard_arrow_down
play_circle_outline CSS Flexbox مشاهدة الدرس
play_circle_outline CSS Flex Direction مشاهدة الدرس
play_circle_outline CSS Flex Wrap مشاهدة الدرس
play_circle_outline CSS Flex Flow مشاهدة الدرس
play_circle_outline CSS flex Justify Content مشاهدة الدرس
play_circle_outline CSS flex Align Items مشاهدة الدرس
play_circle_outline CSS flex Align Content مشاهدة الدرس
play_circle_outline CSS Flex Order مشاهدة الدرس
play_circle_outline CSS Flex Basis مشاهدة الدرس
play_circle_outline CSS Flex Grow مشاهدة الدرس
play_circle_outline CSS Flex Shrink مشاهدة الدرس
play_circle_outline CSS Flex Align Self مشاهدة الدرس
play_circle_outline CSS Flex مشاهدة الدرس
CSS Grid System keyboard_arrow_down
play_circle_outline CSS Grid System مشاهدة الدرس
play_circle_outline CSS Grid Container مشاهدة الدرس
play_circle_outline CSS Grid Items مشاهدة الدرس
CSS Grid Columns keyboard_arrow_down
play_circle_outline CSS Grid Template Columns مشاهدة الدرس
play_circle_outline CSS Grid Column Start مشاهدة الدرس
play_circle_outline CSS Grid Column End مشاهدة الدرس
play_circle_outline CSS Grid Column مشاهدة الدرس
play_circle_outline CSS Grid Auto Columns مشاهدة الدرس
CSS Grid rows keyboard_arrow_down
play_circle_outline CSS Grid Template Rows مشاهدة الدرس
play_circle_outline CSS Grid Row Start مشاهدة الدرس
play_circle_outline CSS Grid Row End مشاهدة الدرس
play_circle_outline CSS Grid Row مشاهدة الدرس
play_circle_outline CSS Grid Auto Rows مشاهدة الدرس
play_circle_outline CSS Grid Template مشاهدة الدرس
CSS Grid Area keyboard_arrow_down
play_circle_outline CSS Grid Template Areas مشاهدة الدرس
play_circle_outline CSS Grid Area مشاهدة الدرس
CSS Grid Gaps keyboard_arrow_down
play_circle_outline CSS Grid Row Gap مشاهدة الدرس
play_circle_outline CSS Grid Gap مشاهدة الدرس
play_circle_outline CSS Grid Column Gap مشاهدة الدرس
CSS Grid keyboard_arrow_down
play_circle_outline CSS Grid Content مشاهدة الدرس
play_circle_outline CSS Grid Auto Flow مشاهدة الدرس
play_circle_outline CSS Repeat Function مشاهدة الدرس
CSS Responsive keyboard_arrow_down
play_circle_outline CSS Responsive Introduction مشاهدة الدرس
play_circle_outline CSS Responsive Viewport مشاهدة الدرس
play_circle_outline CSS Media Queries مشاهدة الدرس
play_circle_outline CSS Media Query Examples مشاهدة الدرس
play_circle_outline CSS Responsive Grid View مشاهدة الدرس
play_circle_outline CSS Grid Media Queries مشاهدة الدرس
play_circle_outline CSS Video Responsive مشاهدة الدرس
play_circle_outline CSS Image Responsive مشاهدة الدرس
play_circle_outline CSS Flex Responsive مشاهدة الدرس
CSS Text Effects keyboard_arrow_down
play_circle_outline CSS Text Overflow مشاهدة الدرس
play_circle_outline CSS Word Wrap مشاهدة الدرس
play_circle_outline CSS Writing Mode مشاهدة الدرس
CSS Advanced keyboard_arrow_down
play_circle_outline CSS Background Origin مشاهدة الدرس
play_circle_outline CSS Pagination مشاهدة الدرس
play_circle_outline CSS Buttons مشاهدة الدرس
play_circle_outline CSS Column Count مشاهدة الدرس
play_circle_outline CSS 2D Transforms مشاهدة الدرس
play_circle_outline CSS 3D Transforms مشاهدة الدرس
play_circle_outline CSS Transitions مشاهدة الدرس
play_circle_outline CSS Background Clip مشاهدة الدرس
play_circle_outline CSS Rounded Corners مشاهدة الدرس
play_circle_outline CSS Colors مشاهدة الدرس
play_circle_outline CSS Multiple Backgrounds مشاهدة الدرس
play_circle_outline CSS Color Keywords مشاهدة الدرس
play_circle_outline CSS Color Gradients مشاهدة الدرس
play_circle_outline CSS Border Images مشاهدة الدرس
play_circle_outline CSS Animations مشاهدة الدرس
play_circle_outline CSS Tooltip مشاهدة الدرس
play_circle_outline CSS Variables مشاهدة الدرس
play_circle_outline CSS Dynamic مشاهدة الدرس
Others keyboard_arrow_down
CSS Selectors keyboard_arrow_down
play_circle_outline CSS Combinator selectors مشاهدة الدرس
play_circle_outline CSS Pseudo Classes مشاهدة الدرس

الاختبارات و الشهادات

سجل الدخول لكي تتمكن من اجتياز جميع الاختبارات والحصول علي الشهادات
في ( الدورات - الدروس - المعسكرات )
مجانًا

سجل الآن مجانًا

هل لديك حساب؟ دخول

CLOSETAG CLOSETAG

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

الشروحات

HTML

CSS

JavaScript

الدورات

HTML5

CSS

Java Script

قانوني

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

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

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

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

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

الدعم

أسئلة وأجوبة

اتصل بنا

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