Web DevelopmEnt שפת CSS קרן כליף
תוכן עניינים עיצוב טבלאות היכרות עם CSS הצגה והסתרת אלמנטים Selector'ים מיקום אלמנטים: position, overlapping, overflow, floating צבעים: color, backgroundcolor גבולות border Combinators מרווחים: margin, padding Pseudo Class גובה ורוחב: height, width Pseudo Elements עיצוב טקסט עיצוב תפריטים עיצוב אייקונים מספור אוטומטי (counters) עיצוב קישורים רספונסיביות עיצוב רשימות
שפת CSS שפת CSS מגדירה כיצד יראו דפי HTML CSS - Cascading Style Sheets
עיצוב דפי 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> http://kerenkalif.com/ProgrammingLectures/WebDevelopment/HTML/07_cssInline.html
עיצוב באמצעות css ישנן 3 דרכים להטמעת עיצוב css בדף HTML: Inline – כפי שראינו בדוגמה הקודמת, עבור כל אלמנט הגדרנו את העיצוב הספציפי עבורו - הגדרות העיצוב מפוזרות בכל הדף ומשולבות ביחד עם התוכן Internal – נרכז את כל הגדרות העיצוב תחת האלמנט head – הפרדה בין התוכן להגדרות העיצוב, אך עדיין באותו הקובץ External – נרכז את הגדרות העיצוב בקובץ נפרד ונקשר אליו
סגנון 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> http://kerenkalif.com/ProgrammingLectures/WebDevelopment/HTML/08_cssInternal.html סגנון inline: הגדרות העיצוב שלובות בתוכן http://kerenkalif.com/ProgrammingLectures/WebDevelopment/HTML/07_cssInline.html
שימוש ב- 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> http://kerenkalif.com/ProgrammingLectures/WebDevelopment/HTML/09_cssExternal.html
CSS - מושגים selector – תפקידו לזהות אלמנטים מסויימים ב- HTML, במקרה זה את האלמנטים <p> p { color:white; background-color:blue; font-family:Arial; } property property property value value value מפריד בין תכונת עיצוב אחת לשנייה, תמיד יהיה קיים גם בסוף
סוגי selector'ים שונים ניתן להגדיר עיצוב נפרד לכל רכיב בדף לפי הקריטריונים הבאים: סוג האלמנט (p, h1, table וכו') ה- id של האובייקט (תזכורת: ה- id יחודי לכל פקד) ה- class המוגדר בתכונות הפקד. כל הפקדים עם class זה יקבלו הגדרות עיצוב זהות האלמנט של האובייקט בשילוב למשל עם class מסויים (למשל כל האלמנטים p שמוגדר שה- class שלהם הוא למשל dark) ניתן להגדיר הגדרות למספר אלמנטים ביחד (grouping selector)
דוגמה <!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> דוגמה http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/01_selectors.html
התנגשויות בהגדרות 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> http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/02_selectorsConflicts_1.html
התנגשויות בהגדרות 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> http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/02_selectorsConflicts_2.html
צבעים: שימוש בשם, RGB או הקסה <!DOCTYPE html> <html> <head> <style> h1 {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> http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/03_colors.html
צבע רקע – background-color <html> <head> <style> body {background-color: aquamarine;} p {background-color: blanchedalmond;} div {background-image: url("../../../pictures/me_2016-11.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> http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/04_backgroundColor.html
הצגת גבולות - 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 http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/05_border.html
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 http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/09_outline.html
יצירת מרווחים מסביב לאלמנט - 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> http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/06_margins.html
יצירת מרווחים בתוך האלמנט - 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> http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/07_padding.html
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 http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/08_widthAndHeight.html
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> http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/10_text.html
http://kerenkalif. com/ProgrammingLectures/WebDevelopment/CSS/11_fonts http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/11_fonts.html <!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> פונטים
פונטים – הגדרת גודל עם px לעומת em http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/11_fontSize.html פונטים – הגדרת גודל עם 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>
הוספת אייקונים ישנן ספריות מוכנות עם אייקונים שניתן להוסיף בחינם לדפים שלנו להלן קישורים לספריות שאותם יש לשים בחלק ה- head בדף: Font Awsome http://fontawesome.io/icons/ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> Bootstrap http://getbootstrap.com/components/ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> Google https://material.io/icons/ <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
http://kerenkalif. com/ProgrammingLectures/WebDevelopment/CSS/12_icons http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/12_icons.html <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <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> אייקונים - דוגמה
הצגת קישורים לקישור יש 4 מצבים: ניתן לעצב כל מצב בנפרד a:link – קישור שטרם לחצנו עליו a:visited – קישור שכבר היינו בו a:hover– קישור שעוברים עליו עם העכבר a:active – קישור שבדיוק נכנסים אליו ניתן לעצב כל מצב בנפרד
קישורים - דוגמה <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="http://www.kerenkalif.com" target="_blank">www.kerenkalif.com</a> </body> </html> http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/13_linkButton.html קישורים - דוגמה
http://kerenkalif. com/ProgrammingLectures/WebDevelopment/CSS/14_lists http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/14_lists.html עיצוב רשימות <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>
עיצוב טבלאות <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>gogo@gmail.com</td> <td>gogo@yahoo.com</td> <td>050-5556767</td> <tr> <td>Momo</td> <td colspan="2">momo@gmail.com</td> <td>050-8787878</td> </tr> <td>Yoyo</td> <td>yoyo@gmail.com</td> <td>yoyo@yahoo.com</td> <td>050-4545454</td> </table> </div> http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/15_tables.html
http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/15_tables.html עיצוב טבלאות <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>
אופן הצגת האלמנטים - display http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/16_displayInline.html אופן הצגת האלמנטים - 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>
אופן הצגת האלמנטים - display http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/16_displayBlock.html אופן הצגת האלמנטים - display ניתן לגרום לפקדים שהם inline להיות מוצגים כ- block <body> <img src="http://www.kerenkalif.com/pictures/me_2016-11.jpg" style="width: 10em;"> </body> <style> img { display: block; } </style>
Width לעומת max-width כאשר יש block-element הוא תופס את כל רוחב במסך, אלא אם מציינים עבורו את האלמנט width במקרה זה, במידה ורוחב המסך קטן מה- width שצוין יתווסף באופן אוטומטי פס-גלילה על-מנת להתאים את הרוחב לכל גודל מכשיר (רספונסיביות), נשתמש בתכונה max- width
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> http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/17_widthMaxWidth.html
http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/16_hiddenVsVisibility.html הסתרת אלמנט <!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>
מיקום אלמנטים: Position כברירת מחדל ערך ה- position של האלמנטים הוא static ניתן להגדיר את אופן המיקום (relative, absolute, fixed) ואז להגדיר מיקום ל- top, left, right ו- bottom של האלמנט: position: relative – מיקום הפקד ביחד למיקומו המקורי position:fixed – האלמנט נשאר קבוע במקומו ביחד לגודל המסך (viewport) position:absolute – האלמנט ממוקם באופן יחסי לאלמנט שמכיל אותו, ואם אין, אז ביחס ל- body
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> http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/18_position.html 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>
אלמנטים אחד על השני - 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="http://www.kerenkalif.com/pictures/me_2016-11.jpg"/> <img class="absolutePic" src="http://www.kerenkalif.com/pictures/me_2016-11.jpg"/> <p class="overFirstPic">This is me</p> </div> </body> http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/19_overlapping.html
כיצד להציג טקסט מעבר לגבולות האלמנט - 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> http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/20_overflow.html
טקסט ותמונה ליד - floating <head> <style> div { width: 300px; border: 3px solid gray; } img { width: 8em; float: right; padding: 5px; </style> </head> <body> <div> <img src="http://www.kerenkalif.com/pictures/me_2016-11.jpg"/> <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 http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/21_floatImage.html
ניתוק קישור מה- floating לאלמנט העוקב <head> <style> div { width: 300px; border: 3px solid gray; } img { width: 8em; float: right; padding: 5px; </style> </head> <body> <div> <img src="http://www.kerenkalif.com/pictures/me_2016-11.jpg"/> <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; } http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/21_floatImage.html
לחילופין.. <head> <style> div { width: 300px; border: 3px solid gray; } img { width: 8em; float: right; padding: 5px; </style> </head> <body> <div> <img src="http://www.kerenkalif.com/pictures/me_2016-11.jpg"/> <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; }
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> http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/22_combinators.html
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> http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/23_pseudoClass.html
Pseudo-class – עיצוב קישור http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/23_linkColors.html 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="http://www.kerenkalif.com" target="_blank">To my site</a> </body>
http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/23_focusPseudoClass.html <!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: https://www.w3schools.com/css/css_pseudo_classes.asp
עיצוב חלקי של אלמנט – Pseudo-element http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/24_pseudoElement.html עיצוב חלקי של אלמנט – 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>
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> http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/25_navigationBarVertical.html 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>
Navigation bar הוריזונטלי http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/25_navigationBarHorizontal.html 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; }
http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/25_navigationDropdown.html <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> תתי-תפריטים - תוכן
http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/25_navigationDropdown.html 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; }
תתי-תפריטים - עיצוב .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 { http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/25_navigationDropdown.html תתי-תפריטים - עיצוב <ul> <li><a href="#me">About Me</a></li> <li class="hasSubItems"><a>Courses</a> <div class="myCoursesList"> ... </div> </li> </ul>
מספור אוטומטי - counters http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/26_counters.html מספור אוטומטי - 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
התאמת התצוגה לגודל המסך ב- CCS3 ישנן הגדרות חדשות לתמיכה ברספונסיביות הדבר נעשה באמצעות אלמנט חדש ששואל מהו גודל המסך ומאפשר עיצוב מותנה כמו-כן, ניתן להמציא שמות לתכונות ולהשתמש בהן בעת הצגת המידע
<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> http://kerenkalif.com/ProgrammingLectures/WebDevelopment/CSS/27_screenSizeResponsive.html דוגמה 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) ;
ביחידה זו למדנו: עיצוב טבלאות היכרות עם CSS הצגה והסתרת אלמנטים Selector'ים מיקום אלמנטים: position, overlapping, overflow, floating צבעים: color, backgroundcolor גבולות border Combinators מרווחים: margin, padding Pseudo Class גובה ורוחב: height, width Pseudo Elements עיצוב טקסט עיצוב תפריטים עיצוב אייקונים מספור אוטומטי (counters) עיצוב קישורים רספונסיביות עיצוב רשימות