Download presentation
Presentation is loading. Please wait.
1
Web DevelopmEnt שפת CSS
קרן כליף
2
תוכן עניינים עיצוב טבלאות היכרות עם CSS הצגה והסתרת אלמנטים
Selector'ים מיקום אלמנטים: position, overlapping, overflow, floating צבעים: color, backgroundcolor גבולות border Combinators מרווחים: margin, padding Pseudo Class גובה ורוחב: height, width Pseudo Elements עיצוב טקסט עיצוב תפריטים עיצוב אייקונים מספור אוטומטי (counters) עיצוב קישורים רספונסיביות עיצוב רשימות
3
שפת CSS שפת CSS מגדירה כיצד יראו דפי HTML CSS - Cascading Style Sheets
4
עיצוב דפי HTML באמצעות CSS
<!DOCTYPE html> <html> <head> <title>Style Example</title> </head> <body style="background-color:yellow;"> <h1 style="color: red";>Some Title</h1> <p style="color: white; background-color:blue; font-family:Arial;">White on Blue Arial text</p> </body> </html> <!DOCTYPE html> <html> <head> <title>Style Example</title> </head> <body style="background-color:yellow;"> <h1 style="color: red";>Some Title</h1> <p style="color: white; background-color:blue; font-family:Arial;">White on Blue Arial text</p> </body> </html>
5
עיצוב באמצעות css ישנן 3 דרכים להטמעת עיצוב css בדף HTML:
Inline – כפי שראינו בדוגמה הקודמת, עבור כל אלמנט הגדרנו את העיצוב הספציפי עבורו - הגדרות העיצוב מפוזרות בכל הדף ומשולבות ביחד עם התוכן Internal – נרכז את כל הגדרות העיצוב תחת האלמנט head – הפרדה בין התוכן להגדרות העיצוב, אך עדיין באותו הקובץ External – נרכז את הגדרות העיצוב בקובץ נפרד ונקשר אליו
6
סגנון internal: הגדרות העיצוב מרוכזות ב- head
<!DOCTYPE html> <html> <head> <title>Style Example</title> <style> body {background-color: yellow;} h1 {color: red;} p {color: white; background-color:blue; font-family:Arial;} </style> </head> <body> <h1>Some Title</h1> <p>White on Blue Arial text</p> </body> </html> סגנון internal: הגדרות העיצוב מרוכזות ב- head <!DOCTYPE html> <html> <head> <title>Style Example</title> </head> <body style="background-color:yellow;"> <h1 style="color: red";>Some Title</h1> <p style="color: white; background-color:blue; font-family:Arial;">White on Blue Arial text</p> </body> </html> סגנון inline: הגדרות העיצוב שלובות בתוכן
7
שימוש ב- css באמצעות גישת external
styles.css body { background-color: yellow; } h1 { color: red; p { color: white; background-color:blue; font-family:Arial; <!DOCTYPE html> <html> <head> <title>Style Example</title> <link rel="stylesheet" href="09_styles.css"> </head> <body> <h1>Some Title</h1> <p>White on Blue Arial text</p> </body> </html>
8
CSS - מושגים selector – תפקידו לזהות אלמנטים מסויימים ב- HTML, במקרה זה את האלמנטים <p> p { color:white; background-color:blue; font-family:Arial; } property property property value value value מפריד בין תכונת עיצוב אחת לשנייה, תמיד יהיה קיים גם בסוף
9
סוגי selector'ים שונים ניתן להגדיר עיצוב נפרד לכל רכיב בדף לפי הקריטריונים הבאים: סוג האלמנט (p, h1, table וכו') ה- id של האובייקט (תזכורת: ה- id יחודי לכל פקד) ה- class המוגדר בתכונות הפקד. כל הפקדים עם class זה יקבלו הגדרות עיצוב זהות האלמנט של האובייקט בשילוב למשל עם class מסויים (למשל כל האלמנטים p שמוגדר שה- class שלהם הוא למשל dark) ניתן להגדיר הגדרות למספר אלמנטים ביחד (grouping selector)
10
דוגמה <!DOCTYPE html> <html> <head>
<title>Selectors Example</title> <style> p {color: blue;} h1, h2 { color: red;} .underline {text-decoration: underline;} #italicFont {font-style: italic} p.bla {background-color: lightblue} </style> </head> <body> <h1 class="underline">This is the title</h1> <p>In this document we...</p> <p class="bla">bla bla bla</p> <h2 class="bla">This is a BLA-BLA sub-title</h2> <p id="italicFont">This text is italic</p> <p class="underline">bbb...</p> </body> </html> דוגמה
11
התנגשויות בהגדרות CSS (1)
יכולות לקרות כאשר יש selector'ים שונים סותרים לאותו תוכן במקרה זה ל- selector המוגדר אחרון ישנה עדיפות <!DOCTYPE html> <html> <head> <title>Selectors Example</title> <style> p {color: blue;} </style> </head> <body> <p>kuku kuku kuku</p> <p style="color: orange;">bla bla bla</p> </body> </html>
12
התנגשויות בהגדרות CSS (2)
התנגשויות קורות כאשר בכמה חוקי עיצוב שונים מגדירים הגדרות סותרות כלל אצבע: ההגדרה הספציפית יותר קובעת <!DOCTYPE html> <html> <head> <title>Selectors Example</title> <style> p.kuku {color: brown;} p {color: blue;} .kuku {color: green;} </style> </head> <body> <h1 class="kuku">Some Title</h1> <p class="kuku">kuku kuku kuku</p> <p>bla bla bla</p> </body> </html>
13
צבעים: שימוש בשם, RGB או הקסה
<!DOCTYPE html> <html> <head> <style> h {color: rgb(200, 100, 10)} p {color: blue;} p.hexa {color: #FF0803} </style> </head> <body> <h1>Some Title</h1> <p>kuku kuku kuku</p> <p class="hexa">bla bla</p> </body> </html>
14
צבע רקע – background-color
<html> <head> <style> body {background-color: aquamarine;} p {background-color: blanchedalmond;} div {background-image: url("../../../pictures/me_ jpg")} </style> </head> <body> <h1>Some Title</h1> <p>kuku kuku kuku</p> <p>bla bla</p> <div> <p>line 1</p> <p>line 2</p> <p>line 3</p> <p>line 4</p> <p>line 5</p> <p>line 6</p> </div> </body> </html>
15
הצגת גבולות - border <!DOCTYPE html> <html> <head>
<style> p.solid {border-style: solid; border-width: 10px;} p.double {border-style: double; border-width: medium;} p.rounded {border-style: solid; border-radius: 5px;} div {border-style: solid dashed dotted hidden; border-color: orange;} </style> </head> <body> <div> <p class="solid">line 1</p> <p class="double">line 2</p> <p class="rounded">line 3</p> </div> </body> </html> הצגת גבולות - border
16
Outline – קו מסביב ל- border
<!DOCTYPE html> <html> <head> <style> p { width: 200px; border-style: solid; outline-color: red; outline-style: dashed } </style> </head> <body> <p>some text</p> </body> </html> ה- outline אינו נכלל בגודל ה- border
17
יצירת מרווחים מסביב לאלמנט - margin
<!DOCTYPE html> <html> <head> <style> p {border-style: solid;} p.margin10 {margin: 10px 10px 10px 10px;} p.margin_auto {width: 40%; margin: auto;} </style> </head> <body> <p>line 1</p> <p class="margin10">line 2</p> <p class="margin_auto">line 3</p> </body> </html>
18
יצירת מרווחים בתוך האלמנט - padding
<!DOCTYPE html> <html> <head> <style> p {border-style: solid;} p.padding10 {padding: 10px;} p.padding_multi {padding: 10px 20px 50px 100px;} </style> </head> <body> <p>line 1</p> <p class="padding10">line 2</p> <p class="padding_multi">line 3</p> </body> </html>
19
WIDTh ו- HEIGHT של אלמנט
<!DOCTYPE html> <html> <head> <style> div {border-style: solid; width:30%; height: 250px; } p { border-style: solid; padding: 20px; margin: 100px; width:50%; height: 50px; } </style> </head> <body> <div> <p>line 1</p> <p>line 2</p> </div> </body> </html> WIDTh ו- HEIGHT של אלמנט Box Model – המונח הכולל את ה- margin, padding, border, content
20
p {width: 30%;} .rightAlign {text-align: right;} .justifyAlign {text-align: justify;} .overline {text-decoration: overline;} .lineThrought {text-decoration: line-through;} .underLine {text-decoration: underline;} .toUppercase {text-transform: uppercase;} .toCapitalize {text-transform: capitalize;} .indent {text-indent: 50px;} .largeLettersSpace {letter-spacing: 3px;} .largeWordsSpace {word-spacing: 15px;} .tallLine {line-height: 2;} .shaddowText {text-shadow: 3px 2px gray;} עיצוב טקסט <body> <p class="rightAlign underLine toUppercase"> line 1 line 1 line 1 line 1 line 1 line 1 line 1 line 1 line 1 line 1</p> <p class="justifyAlign lineThrought"> line 2 line 2 line 2 line 2 line 2 line 2 line 2 line 2 line 2 line 2</p> <p class="overline"> line 3 line 3 line 3 line 3 line 3 line 3 line 3 line 3 line 3 line 3</p> <p class="indent toCapitalize largeLettersSpace"> line 4 line 4 line 4 line 4 line 4 line 4 line 4 line 4 line 4 line 4</p> <p class="tallLine largeWordsSpace"> line 5 line 5 line 5 line 5 line 5 line 5 line 5 line 5 line 5 line 5</p> <p class="shaddowText largeLettersSpace"> line6 line6 line6</p> </body>
21
http://kerenkalif. com/ProgrammingLectures/WebDevelopment/CSS/11_fonts
<!DOCTYPE html> <html> <head> <style> p {width: 30%;} .fontArial {font-family: "Arial", sans-serif;} .fontItalic {font-style: italic;} .fontBold {font-weight: bold;} .fontSmallCaps {font-variant: small-caps;} </style> </head> <body> <p class="fontArial"> line 1 line 1 line 1 line 1 line 1 line 1 line 1 line 1 line 1 line 1 </p> <p class="fontItalic"> line 2 line 2 line 2 line 2 line 2 line 2 line 2 line 2 line 2 line 2 <p class="fontSmallCaps fontBold"> This is an example text </body> </html> פונטים
22
פונטים – הגדרת גודל עם px לעומת em
פונטים – הגדרת גודל עם px לעומת em הגדרת גודל הפונט עם פיקסלים הינה קבועה והיינו רוצים הגדרה המתחשבת בגודל המסך ההמלצה של w3c היא להשתמש ביחידות em ההגדרה של גודל em הינה גודל ברירת המחדל של הדפדפן, שהוא 16px, וכל גודל em יהיה ביחס אליו <html> <body> <p style="font-size: 16px">font size is 16px</p> <p style="font-size: 1em">font size is 1em</p> <p style="font-size: 32px">font size is 32px</p> <p style="font-size: 2em">font size is 2em</p> <p style="font-size: 12px">font size is 12px</p> <p style="font-size: 0.75em">font size is 0.75em</p> </body> </html>
23
הוספת אייקונים ישנן ספריות מוכנות עם אייקונים שניתן להוסיף בחינם לדפים שלנו להלן קישורים לספריות שאותם יש לשים בחלק ה- head בדף: Font Awsome <link rel="stylesheet" href=" Bootstrap <link rel="stylesheet" href=" Google <link rel="stylesheet" href="
24
http://kerenkalif. com/ProgrammingLectures/WebDevelopment/CSS/12_icons
<html> <head> <link rel="stylesheet" href=" <link rel="stylesheet" href=" <link rel="stylesheet" href=" <style> i {font-size:3em;} </style> </head> <body> <h3>Font Awsome</h3> Shower  <i class="fa fa-shower"></i><br/> Moon  <i class="fa fa-moon-o" style="color:yellow;"></i><br/> <h3>Bootstrap</h3> Heart  <i class="glyphicon glyphicon-heart" style="color:red;"></i><br/> Food  <i class="glyphicon glyphicon-cutlery"></i><br/> <h3>Google</h3> Pets  <i class="material-icons" style="color:brown;">pets</i><br/> $$$  <i class="material-icons" style="color:green;">attach_money</i><br/> </body> </html> אייקונים - דוגמה
25
הצגת קישורים לקישור יש 4 מצבים: ניתן לעצב כל מצב בנפרד
a:link – קישור שטרם לחצנו עליו a:visited – קישור שכבר היינו בו a:hover– קישור שעוברים עליו עם העכבר a:active – קישור שבדיוק נכנסים אליו ניתן לעצב כל מצב בנפרד
26
קישורים - דוגמה <html>
<head> <style> a:link, a:visited { background-color: magenta; color: white; padding: 20px 40px; text-align: center; text-decoration: none; border: solid; border-color: black; border-radius: 0.5em; border-width: 0.1em; } a:hover, a:active { background-color: blueviolet; font-family: Arial, Helvetica, sans-serif; </style> </head> <body> <a href=" target="_blank"> </body> </html> קישורים - דוגמה
27
http://kerenkalif. com/ProgrammingLectures/WebDevelopment/CSS/14_lists
עיצוב רשימות <head> <style> ul.bulletCircle { background: green; padding: 20px; list-style-type: circle; } ul li { background: greenyellow; margin: 5px; margin-left: 40px; ol.bulletLetters { list-style-type: lower-alpha; </style> </head> <body> <h3>Desserts</h3> <ul class="bulletCircle"> <li>Cake</li> <li>Cookies</li> <li>Ice Cream</li> </ul> <h3>Food</h3> <ol class="bulletLetters"> <li>Pizza</li> <li>Hamburger</li> <li>Shnitzel</li> </ol> </body>
28
עיצוב טבלאות <div style="overflow-x:auto;">
<table style="width:50%;"> <caption>My Contacts</caption> <tr> <th>Name</th> <th>Mail 1</th> <th>Mail 2</th> <th>Phone</th> </tr> <td>Gogo</td> <td> </td> <tr> <td>Momo</td> <td <td> </td> </tr> <td>Yoyo</td> <td> </td> </table> </div>
29
עיצוב טבלאות <style> table, th, td { border-collapse: collapse; border-bottom: 1px solid grey; text-align: left; padding: 0.4em; font-family: Arial; } th { background-color: blueviolet; color: white; font-weight: bold; tr:nth-child(even) { background-color: lightgray; tr:hover { background-color: lightpink; </style>
30
אופן הצגת האלמנטים - display
אופן הצגת האלמנטים - display Block Elements: פקדים שכברירת מחדל מוצגים על כל רוחב הדף: h, p, div, form Inline Elements: פקדים שכברירת מחדל מוצגים על חלק מרוחב הדף: span, img, a ניתן לגרום לפקדים שהם Block להיות מוצגים אחד ליד השני בשורה <body> <ul> <li>Cake |</li> <li>Cookies |</li> <li>Ice Cream</li> </ul> <p>line 1</p> <p>line 2</p> <p>line 3</p> <p class="inline">line 4</p> <p class="inline">line 5</p> <p class="inline">line 6</p> </body> <style> .inline { display: inline; } ul li { </style>
31
אופן הצגת האלמנטים - display
אופן הצגת האלמנטים - display ניתן לגרום לפקדים שהם inline להיות מוצגים כ- block <body> <img src=" style="width: 10em;"> </body> <style> img { display: block; } </style>
32
Width לעומת max-width כאשר יש block-element הוא תופס את כל רוחב במסך, אלא אם מציינים עבורו את האלמנט width במקרה זה, במידה ורוחב המסך קטן מה- width שצוין יתווסף באופן אוטומטי פס-גלילה על-מנת להתאים את הרוחב לכל גודל מכשיר (רספונסיביות), נשתמש בתכונה max- width
33
Width לעומת max-width - דוגמה
<html> <head> <style> p { border: solid 0.2em black; } .usingWidth{ width: 600px; .usingMaxWidth { max-width: 600px; </style> </head> <body> <p class="usingWidth">This is a long line that should be longer than 600px therefore should see a scroller</p> <p class="usingMaxWidth">This is a long line that should be longer than 600px therefore text is divided to few lines</p> </body> </html>
34
הסתרת אלמנט <!DOCTYPE html> <html> <head> <style> .displayNone{ display: none; } .hidden { visibility: hidden; </style> </head> <body> <h1>This title is displayed - 1</h1> <h1 class="displayNone">This title is not displayed and doesn't take space</h1> <h1>This title is displayed - 2</h1> <h1 class="hidden">This title is not displayed and DOES take space</h1> <h1>This title is displayed - 3</h1> </body> </html>
35
מיקום אלמנטים: Position
כברירת מחדל ערך ה- position של האלמנטים הוא static ניתן להגדיר את אופן המיקום (relative, absolute, fixed) ואז להגדיר מיקום ל- top, left, right ו- bottom של האלמנט: position: relative – מיקום הפקד ביחד למיקומו המקורי position:fixed – האלמנט נשאר קבוע במקומו ביחד לגודל המסך (viewport) position:absolute – האלמנט ממוקם באופן יחסי לאלמנט שמכיל אותו, ואם אין, אז ביחס ל- body
36
POSITION - דוגמה <style>
border: solid 0.2em pink; width: 200px; } .relative{ position: relative; top: 300px; border-color: royalblue; .fixed { position: fixed; left: 20%; top: 50%; border-color: cadetblue; .absolute { position: absolute; left: 50px; top: 50px; border-color: lightblue; </style> POSITION - דוגמה <body> <p>This is some paragraph</p> <p class="relative"> This is a relative paragraph </p> <p class="fixed">This is a fixed paragraph</p> <div> <p class="absolute">This is an absolute paragraph within a 'div'</p> </div> </body>
37
אלמנטים אחד על השני - overlapping
<style> img { width: 10em; display: block; } .halfColor { opacity: 0.5; .overFirstPic { position: absolute; top: 10px; left: 10px; .absolutePic { top: 50px; left: 50px; z-index: -1; </style> אלמנטים אחד על השני - overlapping <body> <div> <img class="halfColor" src=" <img class="absolutePic" src=" <p class="overFirstPic">This is me</p> </div> </body>
38
כיצד להציג טקסט מעבר לגבולות האלמנט - OVERFLOW
<body> <div class="scrollers"> bla bla bla bla bla bla bla bla bla </div> <div> </body> <style> div { background-color: lightgoldenrodyellow; width: 200px; height: 100px; border: 1px solid gray; margin: 10px; } .scrollers { overflow: auto; </style>
39
טקסט ותמונה ליד - floating
<head> <style> div { width: 300px; border: 3px solid gray; } img { width: 8em; float: right; padding: 5px; </style> </head> <body> <div> <img src=" <p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p> </div> </body> טקסט ותמונה ליד - floating
40
ניתוק קישור מה- floating לאלמנט העוקב
<head> <style> div { width: 300px; border: 3px solid gray; } img { width: 8em; float: right; padding: 5px; </style> </head> <body> <div> <img src=" <p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p> </div> </body> p { clear: right; }
41
לחילופין.. <head> <style> div { width: 300px;
border: 3px solid gray; } img { width: 8em; float: right; padding: 5px; </style> </head> <body> <div> <img src=" <p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p> </div> </body> display: inline-block; p { clear: right; }
42
Combinators <style> p { color: red; } /* Descendant */ div p {
color: blue; /* child Selector */ div > p { color: green; /* Adjacent Sibling Selector */ div + p { color: palevioletred; /* General Sibling Selector */ p ~ h2 { color: crimson; </style> <body> <h2>some title in h2</h2> <p>just p</p> <div> <p>p immediate child of a div</p> </div> <b> <p>p descendant of a div</p> </b> <p>p right after div</p> <h3>some title in h3</h3> </body>
43
Pseudo-class – עיצוב בהתאם למצב
<head> <style> div { width: 150px; background-color: magenta; color: white; font-weight: bold; padding: 20px 40px; text-align: center; border: solid 0.1em black; border-radius: 0.5em; } .hidden { visibility: hidden; color: red; div:hover + p { visibility: visible; </style> </head> <body> <div>Hover me</div> <p class="hidden">You hovered the button</p> <p>bla bla bla bla</p> </body>
44
Pseudo-class – עיצוב קישור
Pseudo-class – עיצוב קישור <head> <style> a:link { text-decoration: none; color: blue; } a:visited { color:purple; a:hover { text-decoration: underline; a:active { color:red; </style> </head> <body> <a href=" target="_blank">To my site</a> </body>
45
<!DOCTYPE html> <html> <head> <style> input:focus { background-color: yellow; } </style> </head> <body> <form method="get" action=""> <fieldset> <legend>Enter your details:</legend> First Name: <input type="text" name="firstName" /><br/> Last Name: <input type="text" name="lastName" /><br/> Gender: <input type="radio" name="gender" value="male"> Male   <input type="radio" name="gender" value="female"> Female<br/> <input type="submit" value="Send"> </fieldset> </form> </body> </html> Pseudo-class focus לרשימה המלאה של pseudo-class:
46
עיצוב חלקי של אלמנט – Pseudo-element
עיצוב חלקי של אלמנט – Pseudo-element <style> h2::before { content: "*** "; color: red; } h2::after { ::selection { color: brown; background-color: antiquewhite ; p::first-letter { font-weight: bold; font-size: 120%; text-transform: capitalize; </style> <body> <h2>This is a title</h2> <p>bla bla bla bla bla bla bla bla bla</p> <h2>This is another title</h2> </body>
47
Navigation bar ורטיקלי
<style> ul { list-style-type: none; margin: 0; padding: 0; width: 180px; background-color: lightpink; height: 100%; position: fixed; font-family: Arial, Helvetica, sans-serif; border: 1px solid gray; } li a { text-decoration: none; display: block; color: white; font-weight: bold; padding: 15px 15px; li a:hover { background-color:hotpink; </style> Navigation bar ורטיקלי <body> <ul> <li><a href="#me">About Me</a></li> <li><a href="#courses">Courses</a></li> <li><a href="#lessons">Private Lessons</a></li> <li><a href="#contact">Contact</a></li> </ul> </body>
48
Navigation bar הוריזונטלי
Navigation bar הוריזונטלי ul { list-style-type: none; margin: 0; padding: 0; width: 100%; height: 50px; background-color: lightpink; position: fixed; top: 10px; font-family: Arial, Helvetica, sans-serif; border: 1px solid gray; } li { float: left; border-right: 1px solid gray; li a:hover { background-color:hotpink; li a { text-decoration: none; display: block; color: white; font-weight: bold; text-align: center; padding: 15px 15px; }
49
<body> <ul> <li><a href="#me">About Me</a></li> <li class="hasSubItems"><a>Courses</a> <div class="myCoursesList"> <a href="#">Intro to CS using C/JAVA</a> <a href="#">OOP using C++/JAVA</a> <a href="#">Advanced C</a> </div> </li> <li><a href="#lessons">Private Lessons</a></li> <li><a href="#contact">Contact</a></li> </ul> <p>bla bla bla bla bla bla bla bla bla</p> </body> תתי-תפריטים - תוכן
50
ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: lightpink; top: 0px; } li { float: left; border: 2px solid gray; li a { display: inline-block; color: white; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-align: center; padding: 15px 15px; text-decoration: none; li a:hover { background-color: hotpink; תתי-תפריטים - עיצוב li a:active { background-color: palevioletred; }
51
תתי-תפריטים - עיצוב .myCoursesList {
display: none; position: absolute; background-color: cornsilk; min-width: 160px; } .myCoursesList a { color: black; padding: 15px 15px; text-decoration: none; display: block; text-align: left; border: 2px solid gray; .myCoursesList a:hover { background-color: burlywood; .hasSubItems:hover .myCoursesList { תתי-תפריטים - עיצוב <ul> <li><a href="#me">About Me</a></li> <li class="hasSubItems"><a>Courses</a> <div class="myCoursesList"> ... </div> </li> </ul>
52
מספור אוטומטי - counters
מספור אוטומטי - counters body { counter-reset: seasonSection; } h2 { counter-reset: episodeSection; h2::before { counter-increment: seasonSection; content: counter(seasonSection) ". "; h3::before { counter-increment: episodeSection; content: counter(seasonSection) "." counter(episodeSection) " "; <h1>Game of Thrones</h1> <h2>Season 1</h2> <h3>Winter is Coming</h3> <p>In this episode...</p> <h3>The Kingsroad</h3> <h2>Season 2</h2> <h3>The North Remembers</h3> <h3>The Night Lands</h3> <h2>Season 3</h2> <h3>Valar Dohaeris</h3> <h3>Dark Wings, Dark Words</h3> יאותחל כאשר נכנסים ל- body, כלומר פעם אחת בלבד יאותחל כאשר נכנסים ל- h2
53
התאמת התצוגה לגודל המסך
ב- CCS3 ישנן הגדרות חדשות לתמיכה ברספונסיביות הדבר נעשה באמצעות אלמנט חדש ששואל מהו גודל המסך ומאפשר עיצוב מותנה כמו-כן, ניתן להמציא שמות לתכונות ולהשתמש בהן בעת הצגת המידע
54
<body> <h3>My Favorites Cakes</h3> <ul> <li><a data-numOfSuperLikes="5">Apple Pie</a></li> <li><a data-numOfSuperLikes="4">Cheese Cake</a></li> <li><a data-numOfSuperLikes="5">Cheese-Chocolate Brownie</a></li> </ul> </body> דוגמה ul { list-style-type: none; } ul li { text-decoration: none; padding: 3px; ul li a::after { font-size: 12px; font-style: italic; color:blue; @media screen and (min-width: 700px) { ul li a::after { content: " (" attr(data-numOfSuperLikes) ")"; } @media screen and (max-width: 699px) { display: block; content: attr(data-numOfSuperLikes) ;
55
ביחידה זו למדנו: עיצוב טבלאות היכרות עם CSS הצגה והסתרת אלמנטים
Selector'ים מיקום אלמנטים: position, overlapping, overflow, floating צבעים: color, backgroundcolor גבולות border Combinators מרווחים: margin, padding Pseudo Class גובה ורוחב: height, width Pseudo Elements עיצוב טקסט עיצוב תפריטים עיצוב אייקונים מספור אוטומטי (counters) עיצוב קישורים רספונסיביות עיצוב רשימות
Similar presentations
