| -------- Page 1 (Lecture #11-01.jpg) --------- | |
| Faculty of Information Technology – Tripoli University | |
| مقدمة في برمجة الإنترنت | |
| Introduction to Internet Programming | |
| [ ITGS226 ] | |
| المحاضرة الحادية عشر | |
| أ. وفاء حسين المصباحي | |
| أستاذة المادة | |
| HTML5 | |
| JS | |
| Cloud | |
| CSS3 | |
| XML | |
| flat | |
| PHP | |
| header | |
| .com | |
| footer | |
| .net | |
| 2025 ربيع | |
| -------- Page 2 (Lecture #11-02.jpg) --------- | |
| المواضيع التي سيتم دراستها في مقرر : مقدمة في برمجة الإنترنت | |
| Introduction to Internet Programming | |
| المحاضرة الحادية عشر | |
| CSS - Cascading Style Sheets | |
| CSS TEXT | |
| Example | |
| -------- Page 3 (Lecture #11-03.jpg) --------- | |
| CSS - Cascading Style Sheets | |
| CSS TEXT | |
| - The Color property is defined by the CSS color property. | |
| body {color: #434343;} | |
| - The Text Alignment property is used to set the horizontal alignment of the text. Text can be aligned in four ways: left, right, center or justify (straight left and right margins). | |
| h1 { text-align: center; } | |
| p { text-align: justify; } | |
| - The Text Direction property is used to change the text direction of an element. | |
| p { direction: rtl; } /* rtl or ltr */ | |
| 1 | |
| -------- Page 4 (Lecture #11-04.jpg) --------- | |
| CSS - Cascading Style Sheets | |
| CSS TEXT | |
| - The Text Vertical Alignment property sets the vertical alignment of an element. It has the values: baseline, length, sub, super, top, text-top, middle, bottom or text-bottom | |
| <p> | |
| top: <img style="vertical-align: top" src="star.png" alt="star"/> | |
| middle: <img style="vertical-align: middle" src="star.png" alt="star"/> | |
| bottom: <img style="vertical-align: bottom" src="star.png" alt="star"/> | |
| super: <img style="vertical-align: super" src="star.png" alt="star"/> | |
| sub: <img style="vertical-align: sub" src="star.png" alt="star"/> | |
| </p> | |
| <p> | |
| text-top: <img style="vertical-align: text-top" src="star.png" alt="star"/> | |
| text-bottom: <img style="vertical-align: text-bottom" src="star.png" alt="star"/> | |
| 0.2em: <img style="vertical-align: 0.2em" src="star.png" alt="star"/> | |
| -1em: <img style="vertical-align: -1em" src="star.png" alt="star"/> | |
| 20%: <img style="vertical-align: 20%" src="star.png" alt="star"/> | |
| -100%: <img style="vertical-align: -100%" src="star.png" alt="star"/> | |
| </p> | |
| top: middle: bottom: super: sub: | |
| text-top: text-bottom: 0.2em: -1em: 20%: -100%: | |
| 2 | |
| -------- Page 5 (Lecture #11-05.jpg) --------- | |
| CSS - Cascading Style Sheets | |
| CSS TEXT | |
| • Text decoration: the text-decoration property is used to set or remove decorations from text. | |
| • The text-decoration-line property This used to add a decoration line to text. It typically accepts the values: underline, overline, line-through or none. | |
| • The text-decoration-color property is used to set the color of the decoration line. | |
| • The text-decoration-style property is used to set the style of the decoration line with the values: solid, double, dotted, dashed or wavy. | |
| • The text-decoration-thickness is used to set the thickness of the decoration line with length or % or auto. | |
| • The text-decoration shorthand property with the previous order above. | |
| 3 | |
| -------- Page 6 (Lecture #11-06.jpg) --------- | |
| CSS - Cascading Style Sheets | |
| Basic example | |
| HTML | |
| <p class="wavy">Here’s some text with wavy red underline!</p> | |
| <p class="both">This text has lines both above and below it.</p> | |
| CSS | |
| .wavy { | |
| text-decoration-line: underline; | |
| text-decoration-style: wavy; | |
| text-decoration-color: red; | |
| } | |
| .both { | |
| text-decoration-line: underline overline; | |
| } | |
| Here’s some text with wavy red underline! | |
| This text has lines both above and below it. | |
| -------- Page 7 (Lecture #11-07.jpg) --------- | |
| CSS - Cascading Style Sheets | |
| HTML | |
| <p>This text contains a <span class="spelling">speling</span> mistake.</p> | |
| <p class="grammar">This text contain grammatical errors.</p> | |
| CSS | |
| .spelling { | |
| text-decoration-line: spelling-error; | |
| } | |
| .grammar { | |
| text-decoration-line: grammar-error; | |
| } | |
| This text contains a speling mistake. | |
| This text contain grammatical errors. | |
| -------- Page 8 (Lecture #11-08.jpg) --------- | |
| CSS - Cascading Style Sheets | |
| CSS TEXT | |
| - The Text Transform property is used to set the cases for a text. Using this property you can change an element's text content into uppercase or lowercase letters, or capitalize the first letter of each word without modifying the original text. Its values are: none, capitalize, uppercase or lowercase. | |
| <p> | |
| text-transform: capitalize | |
| <strong> | |
| ><span | |
| >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span | |
| > | |
| </strong> | |
| </p> | |
| CSS | |
| span { | |
| text-transform: capitalize; | |
| } | |
| text-transform: capitalize Lorem Ipsum Dolor Sit Amet, Consectetur Adipisicing Elit… | |
| 6 | |
| -------- Page 9 (Lecture #11-09.jpg) --------- | |
| CSS - Cascading Style Sheets | |
| </p> | |
| <p> | |
| text-transform: uppercase | |
| <strong> | |
| <span> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span> | |
| </strong> | |
| </p> | |
| CSS | |
| span { | |
| text-transform: uppercase; | |
| } | |
| text-transform: uppercase | |
| LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISICING ELIT… | |
| 7 | |
| -------- Page 10 (Lecture #11-10.jpg) --------- | |
| CSS - Cascading Style Sheets | |
| CSS TEXT | |
| • The text-indent property is used to specify the indentation of the first line of a text. | |
| div { text-indent: 130px } /* You can use negative value */ | |
| Lorem ipsum dolor sit. | |
| • The letter-spacing property is used to specify the space between the characters in a text. Its values are normal or length. | |
| div { letter-spacing: 5px } /* You can use negative value EX: '-2px' */ | |
| L o r e m i p s u m d o l o r s i t . | |
| 8 | |
| -------- Page 11 (Lecture #11-11.jpg) --------- | |
| CSS - Cascading Style Sheets | |
| CSS TEXT | |
| - The line-height property is used to specify the space between lines. | |
| div { line-height: 1.6 } /* Default: normal , px , em , % , num EX: 1.5 */ | |
| - The word-spacing property is used to specify the space between the words in a text. | |
| div { word-spacing: 10px } /* Default: normal , px , rem , % , ch */ | |
| 9 | |
| -------- Page 12 (Lecture #11-12.jpg) --------- | |
| Example 1 : INTERNAL STYLE SHEETS - CSS TEXT | |
| <html lang="ar"> | |
| <head> | |
| <title> صفحة اختبار لخصائص النص </title> | |
| <meta charset='utf-8'> | |
| <style type="text/css"> | |
| p { | |
| text-align:justify; | |
| color:#ff0000; | |
| text-decoration:underline; | |
| direction:rtl; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p> | |
| إن هذه الصفحة إختبار لخصائص مظهر النص في أوراق الأنماط الإنسيابية وقد تعمدنا إطالة | |
| النص الموجود بين وسمي بداية ونهاية هذه الفقرة ليظهر عمل خاصية المحاذاة جهتي , | |
| في لقطة الشاشة التي سوف نعرضها لهذه الصفحة. | |
| </p> | |
| </body> | |
| </html> | |
| 10 | |
| -------- Page 13 (Lecture #11-13.jpg) --------- | |
| ( program#54.html ) عملي | |
| EXPLORER | |
| HTML LANGUAGE | |
| program#41.html | |
| program#42.html | |
| program#43.html | |
| program#44.html | |
| program#45.html | |
| program#46.html | |
| program#47.html | |
| program#48.html | |
| program#49.html | |
| program#50.html | |
| program#51.html | |
| program#52.html | |
| program#53.html | |
| program#54.html | |
| # style.css | |
| OUTLINE | |
| TIMELINE | |
| program#54.html html head style p | |
| program#54.html | |
| <html lang="ar"> | |
| <head> | |
| <title> صفحة اختبار لخصائص النص </title> | |
| <meta charset="utf-8"> | |
| <style type="text/css"> | |
| p { | |
| text-align:justify; | |
| color:#ff0000; | |
| text-decoration:underline; | |
| direction:rtl; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p> | |
| ظهر النص في أوراق الأنماط الانسيابية, وقد تعمدنا إطالة | |
| حدود بين وسمي بداية ونهاية هذه الفقرة, ويظهر عمل خاصية المحاذاة | |
| في لقطه الشاشة التي سوف نعرضها لهذه الصفحة | |
| </p> | |
| </body> | |
| </html> | |
| HTML language | |
| Ln 11, Col 17 Spaces: 4 UTF-8 CRLF HTML | |
| 11 | |
| -------- Page 14 (Lecture #11-14.jpg) --------- | |
| عملي ( program#54.html ) | |
| صفحة إختبار لخصائص النص | |
| إن هذه الصفحة إختبار لخصائص النص في أوراق الأنماط الإنسيابية،قد تعمدنا لجلب هذا النص الموجود بين وسمي بداية ونهاية هذه الفقرةلإظهار عمل خاصية المحاذاة في أنماط التنسيقات التي سنفرضاها لهذه الصفحة. | |
| -------- Page 15 (Lecture #11-15.jpg) --------- | |
| Thank you | |