intro to CSS

1. Eng. Anas Alpure
‫السابع‬ ‫الدرس‬
(7)
‫بخير‬ ‫وانتم‬ ‫عام‬ ‫كل‬

3. Tree

5. Specificity

6. https://codepen.io/anas-alpure/pen/QWyPzqM
https://codepen.io/anas-alpure/pen/YzwMVpV

7. Comments
‫التعليقات‬
/* This is a comment */
•
‫ال‬
comment
‫؟‬
‫المتصفح‬ ‫ضمن‬ ‫يظهر‬ ‫وال‬ ‫لشرحه‬ ‫للكود‬ ‫نضيفه‬ ‫توضيحي‬ ‫نص‬ ‫عن‬ ‫عبارة‬ ‫هو‬
.

8. ‫مثل‬ ‫الخواص‬ ‫من‬ ‫مجموعة‬ ‫هناك‬
Color
‫االبن‬ ‫الى‬ ‫االب‬ ‫العنصر‬ ‫من‬ ‫تنتقل‬ ‫انها‬ ‫نالحظ‬
‫وراثة‬ ‫يدعى‬ ‫هذا‬ ‫تلقائي‬ ‫بشكل‬
‫الخلفية‬ ‫لون‬ ‫مثل‬ ‫موروثة‬ ‫غير‬ ‫خواص‬ ‫هناك‬
Inheritance
‫الوراثة‬

9. Font Properties
html, body, h1, h2, h3, h4, h5, h6 {
font-family: "Comic Sans MS", cursive, sans-serif;
}
•
‫ال‬ ‫ضمن‬ ‫الخط‬ ‫تنسيقات‬
css
:
1
-
font-size
:
‫إما‬ ‫قيمها‬ ‫تأخذ‬ ‫ان‬ ‫ويمكن‬ ‫الخط‬ ‫حجم‬ ‫بتغيير‬ ‫خاصة‬ ‫وهي‬
‫بالبسكل‬
‫بواحدة‬ ‫أو‬
em
.
2
-
font-weight
:
‫رقمية‬ ‫قيما‬ ‫وتأخذ‬ ‫الخط‬ ‫وزن‬ ‫ب‬ ‫خاصة‬ ‫وهي‬
(
100
-
900
)
‫اسمية‬ ‫أو‬
‫مثال‬
:
100=llighter,200=light,300=thin,400=normal,700=bold
3
-
font-style
:
‫لها‬ ‫االفتراضية‬ ‫والقيمة‬ ‫الخط‬ ‫بشكل‬ ‫خاصة‬ ‫وهي‬
normal
‫باإلضافة‬ ‫عادي‬ ‫الخط‬ ‫شكل‬ ‫أي‬
‫منها‬ ‫القيم‬ ‫من‬ ‫العديد‬ ‫إلى‬
italic
:
‫مائل‬
.
4
-
font-family
:
‫الخط‬ ‫بنوع‬ ‫خاصة‬ ‫وهي‬
.

10. font-weight
font-weight: 100;
font-weight: 900;
font-weight: normal;
font-weight: bold;

11. font-style: normal;
font-style: italic;
font-style

12. Text Properties

13. 1
-
Text-Align
:
‫النص‬ ‫محاذاة‬
(
‫ص‬ّ‫ن‬‫ال‬ ‫جاه‬ّ‫ت‬‫ا‬
)
‫منها‬ ‫قيم‬ ‫ّة‬‫د‬‫ع‬ ‫ولها‬
:
‫اليسار‬ ‫إلى‬ ‫النص‬ ‫محاذاة‬
left:
‫اليمين‬ ‫إلى‬ ‫ص‬ّ‫ن‬‫ال‬ ‫محاذاة‬
Right:
‫الوسط‬ ‫إلى‬ ‫ص‬ّ‫ن‬‫ال‬ ‫محاذاة‬
center:
‫األسطر‬ ‫نهايات‬ ‫توحيد‬ ‫أو‬ ‫ضبط‬
justify:
2
-
text-decoration
:
‫منها‬ ‫قيم‬ ‫ّة‬‫د‬‫ع‬ ‫ولها‬ ‫للنص‬ ‫ديكور‬ ‫وضع‬ ‫أو‬ ‫النص‬ ‫بتزيين‬ ‫خاصة‬ ‫وهي‬
:
‫النص‬ ‫تحت‬ ً‫ا‬ّ‫خط‬ ‫تضع‬
Under-Line:
‫ص‬ّ‫ن‬‫ال‬ ‫فوق‬ ‫ا‬ّ‫خط‬ ‫تضع‬
Over-Line:
‫النص‬ ‫ضمن‬ ً‫ا‬ّ‫خط‬ ‫تضع‬
Line-Through:
3
-
Letter-Spacing
:
‫قيمها‬ ‫وتأخذ‬ ‫األحرف‬ ‫بين‬ ‫باعد‬ّ‫ت‬‫بال‬ ‫خاصة‬ ‫وهي‬
‫بالبكسل‬
‫سالبة‬ ً‫ا‬‫قيم‬ ‫أو‬ ‫موجبة‬ ً‫ا‬‫قيم‬ ‫تأخذ‬ ‫ان‬ ‫الممكن‬ ‫ومن‬
.
4
-
Word-Spacing
:
‫قيمها‬ ‫وتأخذ‬ ‫الكلمات‬ ‫بين‬ ‫باعد‬ّ‫ت‬‫بال‬ ‫ة‬ّ‫ص‬‫خا‬ ‫وهي‬
‫بالبكسل‬
‫موجبة‬ ً‫ا‬‫قيم‬ ‫أو‬ ‫سالبة‬ ً‫ا‬‫قيم‬ ‫تأخذ‬ ‫أن‬ ‫الممكن‬ ‫ومن‬
.
5
-
Text-Transform
:
‫منها‬ ‫عديدة‬ ‫قيما‬ ‫وتأخذ‬ ‫الحروف‬ ‫بتنسيق‬ ‫خاصة‬ ‫وهي‬
:
‫الحالة‬ ‫وهي‬
‫اإلفتراضية‬
‫لدي‬ ‫مكتوبة‬ ‫هي‬ ‫كما‬ ‫النص‬ ‫حروف‬ ‫وتظهر‬
None:
‫كبيرة‬ ‫ص‬ّ‫ن‬‫ال‬ ‫حروف‬ ‫جميع‬ ‫تجعل‬
UpperCase:
‫صغيرة‬ ‫النص‬ ‫حروف‬ ‫جميع‬ ‫تجعل‬
LowerCase:
ً‫ا‬‫كبير‬ ‫كلمة‬ ‫كل‬ ‫من‬ ‫األول‬ ‫الحرف‬ ‫تجعل‬
Capitalize:
6
-
Text-indent
:
‫ا‬ّ‫م‬‫إ‬ ‫قيمها‬ ‫وتأخذ‬ ‫ة‬ّ‫ف‬‫الحا‬ ‫عن‬ ‫ص‬ّ‫ن‬‫ال‬ ‫بتباعد‬ ‫ة‬ّ‫ص‬‫خا‬ ‫وهي‬
‫بالبكسل‬
‫أوب‬
em

14. text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align

15. text-transform: none;
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
text-transform

16. text-decoration: none;
text-decoration: overline;
text-decoration: underline;
text-decoration: line-through;
text-decoration

17. word-spacing: 10px;
letter-spacing: -3px;
text-indent: 50px;

18. https://codepen.io/anas-alpure/pen/vYLwZYd

19. Eng. Anas Alpure
‫السابع‬ ‫الدرس‬
(7)
‫بخير‬ ‫وانتم‬ ‫عام‬ ‫كل‬
‫المدرب‬
:
‫البيور‬ ‫أنس‬