| -------- Page 1 (Lecture #12-01.jpg) --------- | |
| Faculty of Information Technology – Tripoli University | |
| مقدمة في برمجة الإنترنت | |
| Introduction to Internet Programming | |
| [ ITGS226 ] | |
| المحاضرة الثانية عشر | |
| أستاذة المادة | |
| أ. وفاء حسين المصباحي | |
| HTML5 | |
| CSS3 | |
| XML | |
| JS | |
| Cloud | |
| flat | |
| header | |
| .com | |
| PHP | |
| footer | |
| .net | |
| 2025 ربيع | |
| -------- Page 2 (Lecture #12-02.jpg) --------- | |
| الموضيع التي سيتم دراستها في مقرر : مقدمة في برمجة الإنترنت | |
| Introduction to Internet Programming | |
| المحاضرة الحادية عشر | |
| CSS - Cascading Style Sheets | |
| 1 CSS FONTS | |
| CSS LINKS | |
| CSS LISTS | |
| CSS TABLES | |
| DISPLAY PROPERTY | |
| -------- Page 3 (Lecture #12-03.jpg) --------- | |
| VISIBILITY PROPERTY | |
| BOX MODEL | |
| MARGINS | |
| PADDING | |
| -------- Page 4 (Lecture #12-04.jpg) --------- | |
| CSS - Cascading Style Sheets | |
| CSS FONTS | |
| In CSS there are five generic font families: | |
| • Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance; such as (Times New Roman) and (Georgia). | |
| • Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look; such as (Arial) and (Verdana). | |
| • Monospace fonts - here all the letters have the same fixed width. They create a mechanical look; such as (Courier New) and (Lucida Console). | |
| • Cursive fonts imitate human handwriting; such as (Lucida Handwriting). | |
| • Fantasy fonts are decorative/playful fonts; such as (Papyrus) | |
| -------- Page 5 (Lecture #12-05.jpg) --------- | |
| CSS - Cascading Style Sheets | |
| CSS FONTS | |
| • CSS font-family --- font-family | |
| • CSS Font Style --- font-style | |
| • CSS Font Weight --- font-weight | |
| • CSS Font Size --- font-size | |
| .p1 { | |
| font-family: "Times New Roman", Times, serif; | |
| font-style: normal | italic; | |
| font-weight: normal | bold; | |
| font-size: 40px; | |
| } | |
| • The default size for normal text, like paragraphs, is 16px . | |
| -------- Page 6 (Lecture #12-06.jpg) --------- | |
| Example : INTERNAL STYLE SHEETS - CSS FONTS | |
| <html lang=“ar”> | |
| <head> | |
| <title> صفحة اختبار لخصائص الخطوط </title> | |
| <meta charset=‘utf-8’> | |
| <style type=“text/css”> | |
| p { | |
| font-family:"Tahoma","Simplified Arabic",sans-serif; | |
| font-size:1.5em; | |
| font-style:italic; | |
| direction:rtl; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p> | |
| إن هذه الصفحة اختبار لخصائص الخطوط في أوراق الأنماط الإنسية. | |
| </p> | |
| </body> | |
| </html> | |
| 3 | |
| -------- Page 7 (Lecture #12-07.jpg) --------- | |
| ( program#55.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 | |
| program#55.html | |
| style.css | |
| program#54.html x | |
| program#55.html x | |
| program#55.html > html > head > style | |
| 1 <html lang="ar"> | |
| 2 <head> | |
| 3 <title> صفحة اختبار خصائص الخطوط </title> | |
| 4 <meta charset="utf-8"> | |
| 5 <style type="text/css"> | |
| 6 p { | |
| 7 font-family: "Tahoma","Simplified Arabic",sans-seri | |
| 8 font-size:1.5em; | |
| 9 font-style:italic; | |
| 10 direction:rtl; | |
| 11 } | |
| 12 </style> | |
| 13 </head> | |
| 14 <body> | |
| 15 <p> | |
| 16 هذه الصفحة إختبار لخصائص الخطوط في أوراق الأنماط الانسيابية | |
| 17 </p> | |
| 18 </body> | |
| 19 </html> | |
| Ln 12, Col 17 Spaces: 4 UTF-8 CRLF HTML | |
| -------- Page 8 (Lecture #12-08.jpg) --------- | |
| عملي ( program#55.html ) | |
| إن هذه الصفحة اختبار لخصائص الخطوط في أوراق الأنماط الإنسيايبة. | |
| 5 | |
| -------- Page 9 (Lecture #12-09.jpg) --------- | |
| CSS - Cascading Style Sheets | |
| CSS LINKS | |
| - A link has four different states — link, visited, active and hover. These four states of a link can be styled differently through using the following anchor pseudo-class selectors. | |
| • a:link — define styles for normal or unvisited links. | |
| • a:visited — define styles for links that the user has already visited. | |
| • a:hover — define styles for a link when the user place the mouse pointer over it. | |
| • a:active — define styles for links when they are being clicked. | |
| - Note: a:hover MUST come after a:link and a:visited, and a:active MUST come after a:hover | |
| - All links in HTML are underlined by default. Sometimes you see that links are styled with no underline. The text-decoration: none; is used to remove the underline from links. | |
| a:link { | |
| text-decoration: none; | |
| } | |
| -------- Page 10 (Lecture #12-10.jpg) --------- | |
| CSS - Cascading Style Sheets | |
| CSS LINKS | |
| • By default, text links will appear as follow in most of the browsers: | |
| • An unvisited link as underlined blue text. | |
| • A visited link as underlined purple text. | |
| • An active link as underlined red text. | |
| 7 | |
| -------- Page 11 (Lecture #12-11.jpg) --------- | |
| Example : INTERNAL STYLE SHEETS - CSS LINKS | |
| <html lang="ar"> | |
| <head> | |
| <title> صفحة اختبار لمظهر الروابط </title> | |
| <meta charset="utf-8"> | |
| <style type="text/css"> | |
| a:link{text-decoration:none;color:blue;} | |
| a:visited{color:green;} | |
| a:hover{text-decoration:underline;} | |
| a:active{font-size:120%;} | |
| </style> | |
| </head> | |
| <body> | |
| <a href="#">normal link</a> <br/> | |
| <a href="www.google.com">visited link</a> <br/> | |
| <a href="#">hover link</a> <br/> | |
| <a href="#">normal link 2</a> <br/> | |
| </body> | |
| </html> | |
| 8 | |
| -------- Page 12 (Lecture #12-12.jpg) --------- | |
| CSS - Cascading Style Sheets | |
| CSS LISTS | |
| • There are three different types of list in HTML: | |
| • Unordered lists — A list of items, where every list items are marked with bullets. | |
| • Ordered lists — A list of items, where each list items are marked with numbers. | |
| • Definition list — A list of items, with a description of each item. | |
| • By default: | |
| • Items in an ordered list are numbered with Arabic numerals (1, 2, 3, 5, and so on). | |
| • Items in an unordered list are marked with round bullets (•). | |
| • But, you can change this default list marker type to any other type such as roman numerals, Latin letters, circle, square, and so on using the list-style-type property. | |
| list-style-type: disc | circle | square | |
| | decimal | lower-latin | lower-roman | upper-latin | |
| | upper-roman | none; | |
| 9 | |
| -------- Page 13 (Lecture #12-13.jpg) --------- | |
| Example : INTERNAL STYLE SHEETS - CSS LISTS | |
| <html lang=“ar”> | |
| <head> | |
| <title> صفحة اختبار لخصائص مظهر القوائم </title> | |
| <meta charset=‘utf-8’> | |
| <style type=“text/css”> | |
| ul {list-style-type:square;} | |
| ol {list-style-image:url('dot.gif');} | |
| </style> | |
| </head> | |
| <body> | |
| <ul> | |
| <li>item 1</li> | |
| <li>item 2</li> | |
| <li>item 3</li> | |
| </ul> | |
| <ol> | |
| <li>item 1</li> | |
| <li>item 2</li> | |
| <li>item 3</li> | |
| </ol> | |
| </body> | |
| </html> | |
| 10 | |
| -------- Page 14 (Lecture #12-14.jpg) --------- | |
| CSS - Cascading Style Sheets | |
| CSS TABLES | |
| • The CSS border property is the best way to define the borders for the tables. | |
| • By default, browser draws a border around the table, as well as around all the cells, with some space in-between, which results in double border. To get rid of this double border problem you can simply collapse the adjoining table cell borders and create clean single line borders. | |
| • There are two distinct models for setting borders on table cells in CSS: separate and collapse. | |
| • You can set the border model for an HTML table by using the CSS border-collapse property. | |
| • By default, the browser creates the table cells just large enough to contain the data in the cells. | |
| • To add more space between the table cell contents and the cell borders, you can simply use the CSS padding property. | |
| 11 | |
| -------- Page 15 (Lecture #12-15.jpg) --------- | |
| CSS - Cascading Style Sheets | |
| TABLES PROPERTIES | |
| • border: Sets all the border properties in one declaration | |
| • border-collapse : Specifies whether or not table borders should be collapsed | |
| table, th, td { | |
| border: 1px solid; | |
| } | |
| • Notice that the table in the examples above have double borders. This is because both the table and the <th> and <td> elements have separate borders. To remove double borders, take a look at the example below. | |
| table, td, th { | |
| border: 1px solid; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| } | |
| 12 | |
| -------- Page 16 (Lecture #12-16.jpg) --------- | |
| CSS - Cascading Style Sheets | |
| DISPLAY PROPERTY | |
| • The display property specifies if/how an element is displayed. | |
| • Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline. | |
| • Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with display: block; is not allowed to have other block elements inside it. | |
| p.ex1{ | |
| Display: inline | block | none; | |
| } | |
| -------- Page 17 (Lecture #12-17.jpg) --------- | |
| CSS - Cascading Style Sheets | |
| VISIBILITY PROPERTY | |
| - The visibility property specifies whether or not an element is visible. | |
| - Tip: Hidden elements take up space on the page. Use the display property to both hide and remove an element from the document layout! | |
| p.ex1 { | |
| visibility: visible | hidden; | |
| } | |
| 14 | |
| -------- Page 18 (Lecture #12-18.jpg) --------- | |
| CSS - Cascading Style Sheets | |
| BOX MODEL | |
| - The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. | |
| Margin | |
| Border | |
| Padding | |
| Content | |
| 15 | |
| -------- Page 19 (Lecture #12-19.jpg) --------- | |
| CSS - Cascading Style Sheets | |
| BOX MODEL | |
| • Where: | |
| • Content - The content of the box, where text and images appear | |
| • Padding - Clears an area around the content. | |
| • Border - A border that goes around the padding and content | |
| • Margin - Clears an area outside the border. | |
| • The margin and the padding are transparent. | |
| • When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must do the following: | |
| • Total element width = width + left padding + right padding + left border + right border + left margin + right margin | |
| • Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin | |
| 16 | |
| -------- Page 20 (Lecture #12-20.jpg) --------- | |
| CSS - Cascading Style Sheets | |
| MARGINS | |
| - Margins are used to create space around elements, outside of any defined borders. | |
| - margin properties can have the following values: auto or specify it in px or % that specifies a margin of the width of the containing element. | |
| - The auto value center the element within its container. The element will then take up the specified width, and the remaining space will be split equally to margins. | |
| p { | |
| margin: 25px 50px 75px 100px; | |
| } | |
| Where top margin is 25px, right margin is 50px, bottom margin is 75px and left margin is 100px. | |
| 17 | |
| -------- Page 21 (Lecture #12-21.jpg) --------- | |
| CSS - Cascading Style Sheets | |
| PADDING | |
| • Padding is used to create space around an element's content, inside of any defined borders. | |
| • Padding properties can have the following values: specify it in px or % that specifies a padding of the width of the containing element. | |
| • The CSS width property specifies the width of the element's content area. So, if an element has a specified width, the padding added to that element will be added to the total width of the element. This is often an undesirable result. | |
| div { | |
| padding: 25px 50px 75px 100px; | |
| } | |
| Where top padding is 25px, right padding is 50px, bottom padding is 75px and left padding is 100px | |
| 18 | |
| -------- Page 22 (Lecture #12-22.jpg) --------- | |
| Thank you | |