تعلم لغة CSS ©️
Open in Telegram
قناة خاصة بتعلم لغة CSS لنجعلها مرجع للجميع بهذه اللغه. لمتابعة الدورة كاملة من البداية من هذا الرابط : https://programmer-tech.com/category/css
Show moreThe country is not specifiedArt & Design60 913
214
Subscribers
No data24 hours
No data7 days
No data30 days
Data loading in progress...
Similar Channels
No data
Any problems? Please refresh the page or contact our support manager.
Tags Cloud
No data
Any problems? Please refresh the page or contact our support manager.
Incoming and Outgoing Mentions
---
---
---
---
---
---
Attracting Subscribers
October '23
October '23
+214
in 0 channels
Channel Posts
Repost from Muhammad Alush
⭐️أداة رائعة لمطورين #فرونت_اند (2):
تساعدك على توليد تدرجات لونية أكثر من رائعة ويمكنك بعدها نسخ كود #CSS للتدرج ولصقه في مشروعك بكل سهولة
رابط الموقع :
https://www.magicpattern.design/tools/gradient-generator
〰️➖➖➖➖➖➖〰️
t.me/MuhammadAlush0997
تابعني على :
Telegram | instagram | facebook | Twitter | YouTube
| 2 |  تستخدم خلفيات CSS لتعيين صورة أو لون لخلفية العنصر. ويمكن تعيين خلفية لأي عنصر في صفحة HTML، سواء كانت صورة أو لونًا أو حتى تدرج للألوان. لتعيين خلفية لعنصر في CSS، يمكن استخدام الخاصية background، ويمكن تحديد الخلفية باستخدام قيم مختلفة، مثل اللون والصورة والتدرج والصور المتحركة (GIF) والفيديو.
سوف نتعرَّف اليوم على كيفية إضافة اكثر من لون لخلفية الموقع دون إضافة صور أو أي شي آخر فقط من خلال الألوان, توجد عدة طريق للقيام بهذا الأمر فسوف نختار طريقتين للقيام به. ويمكن إنشاء خلفيات متعددة الألوان في لغة CSS باستخدام خاصية الخلفية المتعددة (background) وفصل الألوان بفواصل.
https://programmer-tech.com/%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d8%ae%d9%84%d9%81%d9%8a%d8%a7%d8%aa-%d9%85%d8%aa%d8%b9%d8%af%d8%af%d8%a9-%d8%a7%d9%84%d8%a3%d9%84%d9%88%d8%a7%d9%86-%d9%81%d9%8a-%d9%84%d8%ba%d8%a9-css-11/ | 190 |
| 3 | يعتبر Flexbox نموذجًا لتصميم عناصر الواجهة الخاصة بالصفحات الإلكترونية، حيث يُمكِّن Flexbox من توزيع عناصر الواجهة بطريقة مرنة وسهلة، سواءً في اتجاه الصف أو العمود. وبشكل عام، يتم تطبيق Flexbox على العنصر الأب (parent) الذي يحتوي على مجموعة من العناصر الأخرى المراد توزيعها.
يختلف الـ flexbox عن غيره في ترتيب العناصر element’s على Layout حيث يُعرَف بسهولة الإستخدام لكن flexbox لها قيم Values كثيرة يأخذها كل من المدير او الموظف, نقصد هنا أن هناك بعض الخصائص Property يأخذها كل من Parent و هناك Property يأخذها كل من Child, الـ flex-box لها كثير من Property, و هذا الجزء الأصعب في تعلم flexbox لكن يُسِّهل علينا تقسيم العناصر Element في Layout, لنتعرَّف على ماهو flex وكيف يستخدم.
https://programmer-tech.com/%d8%aa%d8%b1%d8%aa%d9%8a%d8%a8-%d8%a7%d9%84%d8%b9%d9%86%d8%a7%d8%b5%d8%b1-%d8%a8%d8%a5%d8%b3%d8%aa%d8%ae%d8%af%d8%a7%d9%85-flexbox-%d9%81%d9%8a-css-10/ | 168 |
| 4 | يمكن استخدام عناصر div و span في CSS لتجميع العناصر وتنظيمها بشكل أفضل على الصفحة.
✅عنصر div يستخدم عادة لتجميع مجموعة من العناصر التي تشكل جزءًا من التصميم الرئيسي للصفحة، مثل العناصر التي تشكل عنوانًا أو قائمة أو مقطعًا كبيرًا من النص.
✅عنصر span يستخدم عادة لتجميع مجموعة من العناصر الصغيرة التي تشكل جزءًا من التصميم الرئيسي للصفحة، مثل العناصر التي تشكل نصًا مؤقتًا أو عنصرًا فرعيًا في صفحة. يمكن تطبيق الأنماط الشائعة في CSS مثل التحكم في الخطوط والألوان والحواف والتباعد والمسافات لتنظيم العناصر المجمعة باستخدام div و span.
https://programmer-tech.com/%d8%aa%d8%ac%d9%85%d9%8a%d8%b9-%d8%a7%d9%84%d8%b9%d9%86%d8%a7%d8%b5%d8%b1-%d8%a8%d8%a5%d8%b3%d8%aa%d8%ae%d8%af%d8%a7%d9%85-div-%d9%88-span-%d9%81%d9%8a-css-9/ | 145 |
| 5 | خاصية opacity البسيطة جداً تسمح لنا بالإشارة إلى مستوى الشفافية أو التعتيم للصفحة أو عنصر ما في صفحة الويب أي عندما نقوم بإستعمال القيمة 1 سوف يكون العنصر غير شفاف و بحالته الطبيعية, و هذا هو السلوك الإفتراضي, و عندما نقوم بإستعمال القيمة 0 سوف يكون العنصر شفاف, لذلك يتوجب إختيار القيمة بين 0 و 1 و بالتالي حينما نُعطي القيمة 0.6 سوف يكون العنصر معتم حتى المستوى 60٪ و هذا يمكننا الرؤية من خلاله.
https://programmer-tech.com/%d8%b4%d8%b1%d8%ad-%d8%ae%d8%a7%d8%b5%d9%8a%d8%a9-%d8%a7%d9%84%d8%b4%d9%81%d8%a7%d9%81%d9%8a%d8%a9-opacity-%d9%81%d9%8a-css-8/ | 130 |
| 6 | تجميع العناصر في CSS, في بعض الأحيان تود أن تقوم بعمل تنسيق على عنصر أو مجموعة من العناصر بإستخدام الفئة class و المعرفات id يمكن ان تجمع مجموعة من العناصر للتنسيق, تجميع العناصر بإستخدام الفئات class و الآن ننتقل إلى الأمثلة بشكل مباشر لنتعرف اكثر على تجميع العناصر بإستخدام class.
https://programmer-tech.com/%d8%aa%d8%ac%d9%85%d9%8a%d8%b9-%d8%a7%d9%84%d8%b9%d9%86%d8%a7%d8%b5%d8%b1-%d8%a8%d8%a5%d8%b3%d8%aa%d8%ae%d8%af%d8%a7%d9%85-%d8%a7%d9%84%d9%83%d9%84%d8%a7%d8%b3-%d9%81%d9%8a-css-7/ | 120 |
| 7 | خصائص تنسيق النصوص, في الدرس السابق تعلمنا الفئة الزائفة و استخدمنا بعض الخصائص من الدروس السابقة و هذا يجب أن يُعطيك فكرة عن الإمكانيات التي تستطيع CSS أن تفعلها, في هذا الدرس سوف نعلمك كيف تحدد خصائص معينة لمجموعة من العناصر أو لعنصر معين.
https://programmer-tech.com/%d8%ae%d8%b5%d8%a7%d8%a6%d8%b5-%d8%a7%d9%84%d8%aa%d9%86%d8%b3%d9%8a%d9%82-%d9%81%d9%8a-css-6/ | 112 |
| 8 | تنسيق الروابط التشعبية بإستخدام CSS, سنقوم بإستخدام ما تعلمناه في درس تنسيق النصوص على الروابط, وكما نعرف جميعنا أن الروابط تشكل خيوط العنكبوت على الانترنت, لا شك أن يكون لها لون جميل يقوم بجذب الزائر على الموقع من خلال تنسيق الروابط Links بالإضافة لمؤثرات جميلة عليه.
https://programmer-tech.com/%d8%aa%d9%86%d8%b3%d9%8a%d9%82-%d8%a7%d9%84%d8%b1%d9%88%d8%a7%d8%a8%d8%b7-%d9%81%d9%8a-css-5/ | 106 |
| 9 | تنسيق النصوص هو جزء هام من تصميم صفحات الويب، ويمكن تحقيقه باستخدام CSS (Cascading Style Sheets). يسمح CSS بتحديد العديد من خصائص النصوص مثل الخطوط والألوان وحجم الخط والتباعد والترتيب والتحكم في الهوامش والتنسيقات الأخرى.
كما أنّ css تدعم مجموعة من الخصائص لتنسيق النصوص وهي:
📌text-indent.
📌text-align.
📌text-decoration.
📌letter-spacing.
📌text-transform.
https://programmer-tech.com/%d8%aa%d9%86%d8%b3%d9%8a%d9%82-%d8%a7%d9%84%d9%86%d8%b5%d9%88%d8%b5-%d9%81%d9%8a-css-4/ | 101 |
| 10 | تنسيق الخطوط بإستخدام CSS, سوف نقوم بمعالجة مشكلة كيفية عرض بعض الخطوط التي لن تظهر بشكل صحيح ما لم تكن مثبتة على الحاسوب. إن إختيار الخط الصحيح في موقعك له تأثير كبير جداً على كيفية تجربة القراء لموقع الويب, و يمكن للخط الصحيح المنسق من إنشاء هوية قوية لعلامتك التجارية, و من المهم إستخدام خط يَسَهل قراءته, و يجب الأخذ بعين الإعتبار أن الخط يضيف قيمة إلى النص الخاص بك و من المهم أيضاً إختيار اللون الصحيح للخط و حجم النص للخط.
https://programmer-tech.com/%d8%a7%d9%84%d8%ae%d8%b7%d9%88%d8%b7-%d9%81%d9%8a-%d9%84%d8%ba%d8%a9-css-3/ | 96 |
| 11 | الخلفيات و الألوان ( background and color ) سوف نتعلم كيفية إدارج الألوان و الخلفيات عن طريق CSS, توجد هناك بعض الخصائص التي تستخدم لإدارج الألوان و الخلفيات وهي:
📌color.
📌background-color.
📌background-image.
📌background-repeat.
📌background-attachment.
📌background-position.
📌background.
https://programmer-tech.com/%d8%a7%d9%84%d8%ae%d9%84%d9%81%d9%8a%d8%a7%d8%aa-%d9%88%d8%a7%d9%84%d8%a3%d9%84%d9%88%d8%a7%d9%86-%d9%84%d8%ba%d8%a9-css-2/ | 99 |
| 12 | إن CSS هي لغة توصيفية تقوم بمنح مواقع الويب شكل جميل الذي سوف يميزهُ عن غيره من المواقع, و هي تُعد صديقة للغة HTML فهم دائماً مترفقات في تصميم و إنشاء صفحات الويب, و تشكّل كل من اللغتان هم الأساس لكل موقع ويب فإن لغة HTML هي أساس كل عناصر صفحة الويب و CSS هي أساس تصميم و شكل الموقع فبدون CSS سوف تبقي مواقع الويب كأنها نصاً عادياً على خلفيات بيضاء.
https://programmer-tech.com/%d9%85%d9%82%d8%af%d9%85%d8%a9-%d8%aa%d8%b9%d8%b1%d9%8a%d9%81%d9%8a%d8%a9-%d9%81%d9%8a-%d9%84%d8%ba%d8%a9-css-1 | 94 |
