شرح CSS text

⚠ سيتم شرح جميع الأكواد بالتفصيل في الفيديو الخاص بهذا الدرس لأن الأكواد الخاصة بتنسيق الخط (text) تحتاج الي تطبيق اكثر من الشرح النظري 😊

1 color: ***;
وهنا تجد جميع القيم الخاصة بهذا الكود
2 text-align: ***;
وهنا تجد جميع القيم الخاصة بهذا الكود
3 text-decoration-line: ***;
وهنا تجد جميع القيم الخاصة بهذا الكود
4 text-decoration-color: *** ;
وهنا تجد جميع القيم الخاصة بهذا الكود
5 text-underline-offset: ***;
ويُستخدم هذا الكود للتحكم في المسافة بين ال text و الخط الخاص ب الـــ text-decoration-line
⚠ ولكن العديد من المتصفات لا تدعم هذا الكود وبالتالي يُفضل استخدام border-bottom: 2px solid red; بدلا من text-decoration-line: underline; حتى يُمكننا التحكم في بُعد الخط عن الــ text باستخدام خاصية ال padding-bottom
6 Text-transform: ***;
وهنا تجد جميع القيم الخاصة بهذا الكود
7 Text-indent: ***;
وهنا تجد جميع القيم الخاصة بهذا الكود
8 Text-shadow: ***;
وهنا تجد جميع القيم الخاصة بهذا الكود
9 Letter-spacing: ***;
وهنا تجد جميع القيم الخاصة بهذا الكود
10 Word-spacing: ***;
وهنا تجد جميع القيم الخاصة بهذا الكود
11 direction: ***;
وهنا تجد جميع القيم الخاصة بهذا الكود
12 Line-height: ***;
وهنا تجد جميع القيم الخاصة بهذا الكود

other css codes

⚠ سيتم شرح جميع الأكواد بالتفصيل في الفيديو الخاص بهذا لأن هذه الأكواد تحتاج الي تطبيق اكثر من الشرح النظري 😊

1 box-shadow: x y blur-radius color ;
X: المسافة الافقية
-y: المسافة الرأسية
-blur-radius: تدرج لون الظل
-color: مش محتاجة يعني 😂

هنا و هنا تجد مثال علي ذلك

يُمكن ان يكون ال shadow من الداخل وذلك عن طريق اضافة inset في بداية الكود وبالتالي يكون الكود كالتالي
box-shadow: inset x y blur-radius color;
وسيتم شرح هذا الجزء في الفيديو رقم 19 في الكورس في الدقيقة رقم 6

2 resize: ***;
وهنا تجد جميع القيم الخاصة بهذا الكود
3 overflow: ***;
وهنا تجد جميع القيم الخاصة بهذا الكود
تم شرح overflow-x:hidden; و overflow-y: auto; في هذا الدرس

initial VS inherit

هذه القيم تقريبا يُمكن اضافتها الي جميع أكواد ال CSS وبالتالي تُسمي CSS Global values

inherit

الشرح بال English 😊

inherit: Get the property from the parent element.

الشرح العربي:

inherit ترجمتها يرث او وراثة
والسؤال بقا .. يورث من مين؟
ج/ يورث من العنصر الاب
مثال علي ذلك:

 
<!DOCTYPE html>
<html>
 
  <head>
    <style>
      div {color: red;}
      h1 {color: inherit;}
    </style>
  </head>
 
  <body>
 
    <div>
      <h1>courses4arab</h1>
    </div>
 
  </body>
</html>

س/ ماذا سوف يكون لون النص داخل العنصر h1 ؟؟

ج/ بما ان لون النص داخل العنصر الأب (div) هو اللون الأحمر وبالتالي فإن العنصر h1 سوف يورث هذا اللون وبالتالي يصبح لونه أحمر

initial

الشرح بال English 😊

initial: The default value for the property (the browser default).


الشرح العربي:

Initial ترجمتها مبدئي او أولي او ابتدائي
ومعني ذلك ان العنصر يأخذ القيمة الافتراضية (default value)
وهنا تجد جميع القيم الافتراضية لجميع عناصر ال HTML


مثال علي ذلك:

 
<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <a href="https://courses4arab.com/">courses 4 Arab</a>
  </body>
</html>

فنلاحظ ان عنصر ال <a> دائما يكون باللون الأزرق كافتراضي وأيضا يحتوي على هذه الاكواد بشكل افتراضي:

cursor: pointer;
text-decoration: underline;

وبالتالي هذه الاكواد هي القيم الابتدائية   (initial values )  للعنصر <a>

شرح css units

سيتم شرح الصورة 👇 بالتفصيل في الفيديو الخاص بهذا الدرس لأن وحدات القياس css units تحتاج الي تطبيق اكثر من الشرح النظري 😊

CSS units
CSS units

شرح css units

px : pixels
pt : points
em : Relative to the font-size of the element

مثال علي ذلك:

 
<!DOCTYPE html>
<html>
  <head>
    <style>
        div {font-size: 20px}
        span {font-size: 2em}
    </style>
  
  </head>
  <body>
 
    <div>
      The font-size of this div is 20px
      <span>this span inside the div has
        a font-size of 2em, which is 2x20 = 40px
      </span>
    </div>
  
  </body>
</html>

وبالتالي حجم الخط بداخل الـــ span هو 40px

rem : Relative to font-size of the Root element

والــ Root element غالباً يكون عنصر الــ html

vw : Relative to the width of the viewport

Viewport هو عرض الشاشة (أي كان حجم الشاشة)

vh : Relative to the height of the viewport
% : Relative to the parent element

ويوجد أيضا الــ CSS calc( )
مثال علي ذلك:

div { width : calc(100% - 100px) }

ونستخدم خاصية الــــــــــــ calc للقيام بعملية حسابية مثل الجمع والطرح والضرب والقسمة

و Calc اختصار لـــــــــ calculation وتعني عملية حسابية

😡
انت مشغل الـ AdBlock !!

ياريت تقفله لوسمحت 😊 😊

تنبيه هام ✋

إذا كانت الإعلانات مزعجة بالنسبة لك، فيُمكنك التبرع ب50$ وسيتم إيقاف الإعلانات لمدة شهر لجميع زوار الموقع 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك