منطقة إعلانية

يُمكننا وضع إعلانك هنا🧡ويُمكنك التواصل معنا عن طريق صفحةالفيس بوك

شرح 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;

وبالتالي هذه الاكواد هي القيم الابتدائية  (initialvalues ) للعنصر<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 وتعني عملية حسابية


Do not waste your time and start with us, now 😍