CSS

? CSS ‫זה‬ ‫מה‬
Cascade Style Sheets ‫של‬ ‫תיבות‬ ‫ראשי‬ ‫היא‬ CSS
HTML ‫ה‬ ‫דף‬ ‫של‬ ‫העיצוב‬ ‫את‬ ‫שמתארת‬ ‫שפה‬ ‫היא‬ CSS
<head>‫לדוגמא‬ .HTML ‫ה‬ ‫אלמנטי‬ ‫את‬ ‫להצג‬ ‫איך‬ ‫מתארת‬ CSS
‫בקלות‬ HTML ‫דפי‬ ‫מספר‬ ‫של‬ ‫עיצוב‬ ‫להגדיר‬ ‫מאפשר‬ CSS
‫בקבצים‬ ‫מוגדרים‬ ‫חיצונים‬ CSS
natankrasney@gmail.com
2

CSS syntax : ‫תחביר‬
(html ‫ב‬ style ‫מאפיין‬ ‫כמו‬ ‫בדיוק‬ ‫זה‬ selector ‫)מלבד‬ ‫הבאה‬ ‫בצורה‬ ‫נכתב‬ CSS ‫חוק‬
h1
{
color: white;
text-align: center;
}
3
‫האלמנט‬ ‫אל‬ ‫מצביע/מתייחס‬ : Selector
‫לעצב‬ ‫רוצים‬ ‫אותו‬
CSS
property -
‫מאפיין‬
CSS value - ‫ערך‬

selector - ‫לאלמנט‬ ‫מצביע‬ ‫של‬ ‫שונים‬ ‫סוגים‬
4
‫סוג‬ ‫סימון‬ ‫הסבר‬ CSS ‫ב‬ ‫דוגמה‬ HTML ‫דוגמא‬
element
selector
‫האלמנט‬ ‫תג‬ ‫האלמנטים‬ ‫לכל‬ ‫מתייחס‬
‫גם‬ ‫אפשר‬ .‫הזה‬ ‫התג‬ ‫בעלי‬
‫אלמנטים‬ ‫לכמה‬ ‫ליחס‬
‫בפסיק‬ ‫מופרדים‬
p
{text-align:right;
color: blue;}
<p>hello html</p>
id
selector
#someId ‫עם‬ ‫יחיד‬ ‫לאלמנט‬ ‫מתייחס‬
‫הוא‬ id) ‫הזה‬ id ‫מאפיין‬
(‫לאלמנט‬ ‫ערכי‬ ‫חד‬ ‫מאפיין‬
#idFooter {
font-style:
italic;
}
<h2 id = idFooter> this is
heading</h2>
class
selector
.someClas
s
‫עם‬ ‫האלמנטים‬ ‫לכל‬ ‫מתייחס‬
‫כזה‬ class ‫מאפיין‬
.s1 {
background:
aqua;
}
<h1 class="s1">Big
Heading</h1>
<p class="s1">some
paragraph</p>

CSS ‫ב‬ ‫הערה‬
‫הבאה‬ ‫בצורה‬ ‫נרשמת‬ CSS‫ב‬ ‫ב‬ ‫הערה‬
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
‫שורות‬ ‫מספר‬ ‫גם‬ ‫להמשך‬ ‫יכולה‬ ‫הערה‬
5

‫דרכים‬ ‫במספר‬ CSS‫ב‬ ‫שימוש‬
html‫ה‬ ‫לדף‬ ‫עיצוב‬ ‫להכניס‬ ‫דרכים‬ ‫שלוש‬ ‫ישנן‬
6
‫סוג‬ ‫הסבר‬ ‫דוגמה‬
Inline style ‫מאפיין‬ ‫דרך‬ ‫מהאלמנט‬ ‫חלק‬ ‫הוא‬ ‫העיצוב‬ <h1 style="color:green;margin-left:20px;">this
is THE heading</h1>
Internal ‫מוגדר‬ .HTML‫ה‬ ‫מדף‬ ‫חלק‬ ‫הוא‬ ‫העיצוב‬
head ‫אלמנט‬ ‫בתוך‬ ‫נמצא‬ ‫אשר‬ style ‫באלמנט‬
<head>
<style>
p {font-style: italic;}
</style>
</head>
External link ‫אלמנט‬ ‫באמצעות‬ ‫נעשית‬ ‫לעיצוב‬ ‫ההפניה‬
‫נמצא‬ ‫העיצוב‬ .head ‫אלמנט‬ ‫בתוך‬ ‫שנמצא‬
CSS ‫בקובץ‬
<head>
<link rel="stylesheet" type="text/css"
href="gen_style.css">
</head>
‫לדוגמא‬ ‫עצמו‬ ‫העיצוב‬ ‫אלא‬ style ‫תגית‬ ‫אין‬ ‫עצמו‬ ‫בקובץ‬
p {
border-style:dashed;
}

‫צבעים‬
: ‫בצבעים‬ ‫להשתמש‬ ‫דרכים‬ ‫שלוש‬ ‫ישנן‬
●blue ‫הוא‬ ‫כחול‬ ‫עבור‬ ‫לדוגמא‬ ‫הצבע‬ ‫שם‬
●‫הוא‬ ‫כחול‬ ‫עבור‬ ‫לדוגמא‬ ‫הצבע‬ ‫של‬ RGB ‫ערך‬
rgb(0,0,255)
●‫הוא‬ ‫כחול‬ ‫עבור‬ ‫לדוגמא‬ (16 ‫)בסיס‬ HEX ‫בעזרת‬ RGB ‫הצגת‬
#0000ff
‫ב‬ ‫מופיע‬ HTML ‫ב‬ ‫הדרכים‬ ‫בשלוש‬ ‫והצגתם‬ ‫צבעים‬ ‫כל‬ ‫פירוט‬
https://www.w3schools.com/colors/colors_names.asp
7
Green BlueRed

‫רקע‬ ‫צבע‬
background-color ‫בשם‬ css ‫מאפיין‬ ‫בעזרת‬ ‫האלמנט‬ ‫של‬ ‫הרקע‬ ‫צבע‬ ‫את‬ ‫לקבוע‬ ‫ניתן‬
background-image ‫בעזרת‬ ‫תמונה‬ ‫קובץ‬ ‫כשל‬ ‫יהיה‬ ‫אלמנט‬ ‫של‬ ‫שרקע‬ ‫לקבוע‬ ‫ניתן‬
‫לדוגמא‬
p {background-color: red;}
span { background-color: lightblue;}
body{background-image: url("airplane.png");}
8
‫בצבע‬ ‫רקע‬ ‫יהיה‬ p ‫אלמנטי‬ ‫לכל‬
‫כל‬ ‫את‬ ‫יתפוס‬ ‫הצבע‬ .‫אדום‬
block ‫אלמנט‬ - ‫השורה‬
‫בצבע‬ ‫רקע‬ ‫יהיה‬ span ‫אלמנטי‬ ‫לכל‬
‫הגודל‬ ‫את‬ ‫יתפוס‬ ‫הצבע‬ .light blue
inline ‫אלמנט‬ - ‫בלבד‬
‫לתמונה‬ ‫כמו‬ ‫רקע‬ ‫יהיה‬ body ‫לאלמנט‬
‫זו‬ ‫כי‬ ‫עצמה‬ ‫על‬ ‫תחזור‬ ‫התמונה‬ .airplane.png‫ב‬
‫המאפיין‬ .background-image ‫של‬ ‫המחדל‬ ‫ברירת‬
HTML ‫על‬ ‫במצגת‬ ‫שהוגדר‬ ‫כפי‬ URL ‫מקבל‬ url

CSS box model - ‫אלמנט‬ ‫של‬ ‫הקופסא‬ ‫מודל‬
: ‫הבאה‬ ‫בצורה‬ ‫קופסה‬ ‫כאל‬ HTML ‫ב‬ ‫אלמנט‬ ‫לכל‬ ‫להתייחס‬ ‫אפשר‬ , ‫מאוד‬ ‫חשוב‬
.‫בהמשך‬ ‫נראה‬ ‫אותם‬ ‫חשובים‬ ‫מאפינים‬ ‫להגדיר‬ CSS ‫ב‬ ‫לנו‬ ‫עוזר‬ ‫הזה‬ ‫המודל‬
‫,תמונה‬ ‫טקסט‬ ‫לדוגמא‬ ‫ומכיל‬ ‫האלמנט‬ ‫תוכן‬ ‫הוא‬ Content
9

border - ‫גבול‬
‫לדוגמא‬ .‫צבע‬ , ‫סוג‬ , ‫עובי‬ : ‫שכולל‬ ‫גבול‬ ‫להגדיר‬ ‫מאפשר‬ CSS ‫ב‬ border ‫מאפיין‬
p {
border: 5px solid red;
}
p {
border-width: 5px;border-style: solid;border-color: red;}
10
border-width border-style border-color
‫מפורשת‬ ‫בצורה‬ ‫אפשר‬
‫גם‬ intellisense ‫עם‬
‫הבאה‬ ‫בצורה‬

margin - ‫אלמנטים‬ ‫בין‬ ‫רווח‬
‫אלמנטים‬ ‫בין‬ ‫רווח‬ ‫להגדיר‬ ‫מאפשר‬ CSS ‫ב‬ margin ‫מאפיין‬
‫מפורשת‬ ‫בצורה‬ ‫אפשר‬
p {
margin-top: 150px;
margin-bottom: 170px;
margin-right: 200px;
margin-left: 100px;}
‫בקיצור‬ ‫או‬
p {
margin: 150px 200px 170px 100px;}
11
top right bottom left

margin - ‫דוגמא‬
12
margin-top
margin-left margin-right
margin-bottom

margin - ‫נוספת‬ ‫דוגמא‬
<!DOCTYPE html>
<html>
<head>
<style>
p {border-width: 1px;border-style: solid;border-color: red;margin: 50px;}
</style>
</head>
<body>
<p>some text1</p><p>some text2</p>
</body>
</html>
13
(1margin ‫ניתן‬ p ‫לאלמנט‬
‫צדדיו‬ ‫בכל‬ 50px ‫של‬
(2‫שהמרחק‬ ‫רואים‬ ‫בדפדפן‬
p ‫אלמנטי‬ ‫שני‬ ‫בין‬ ‫האנכי‬
‫לזה‬ ‫האם‬ 50px ‫הוא‬
? ‫ציפינו‬

padding - ‫האלמנט‬ ‫בתוך‬ ‫רווח‬
‫האלמנט‬ ‫של‬ ‫טקסט/תמונה‬ - content ‫סביב‬ ‫רווח‬ ‫ליצור‬ ‫מאפשר‬ padding
<head><style>
p {border-width: 1px;border-style: solid;border-color: red;padding: 50px;}
</style></head>
<body>
<p>some text1</p>
</body>
14
‫לגבול‬ ‫הטקסט‬ ‫בין‬ ‫המרחק‬
‫עבור‬ 50px ‫הוא‬ ‫האלמנט‬
right ‫עבור‬ .top,left,bottom
‫בלי‬ ‫זאת‬ ‫לקיים‬ ‫ניתן‬ ‫לא‬
left‫ב‬ ‫לפגוע‬

padding - ‫האלמנט‬ ‫בתוך‬ ‫מפורשת‬ ‫בצורה‬ ‫רווח‬
‫הבאה‬ ‫השקולה‬ ‫המפורשת‬ ‫בצורה‬ ‫הקודם‬ ‫השקף‬ ‫של‬ padding‫ה‬ ‫את‬ ‫לרשום‬ ‫ניתן‬
p {
border-width: 1px;border-style: solid;border-color: red;
padding-left : 50px;
padding-top: 50px;
padding-bottom: 50px;
}
15

width,height - ‫אלמנט‬ ‫של‬ ‫ורוחב‬ ‫אורך‬ ‫קביעת‬
.‫האלמנט‬ ‫ורוחב‬ ‫אורך‬ ‫את‬ ‫לקבוע‬ ‫ניתן‬ ‫בעזרתם‬ CSS ‫מאפיני‬ ‫הם‬ width , height
.‫בעצמו‬ ‫אותם‬ ‫להסיק‬ ‫מנסה‬ ‫והדפדפן‬ auto ‫הם‬ ‫האלה‬ ‫המאפינים‬ ‫של‬ ‫המחדל‬ ‫ברירת‬
‫לדוגמא‬ .‫אלמנט‬ ‫את‬ ‫שמכיל‬ ‫מהבלוק‬ ‫ואחוזים‬ … , ‫ס"מ‬ , ‫פיקסל‬ ‫הן‬ ‫רוחב‬ / ‫האורך‬ ‫יחידות‬
<head><style>
div {height: 200px;width: 300px;background-color: aqua;}
</style>
</head>
<body>
<p>This div has width of 300px and height of 100 px:</p>
<div></div>
</body>
16
‫מתייחסים‬ width , height : ‫חשוב‬
‫כולל‬ ‫לא‬ ‫ז"א‬ ‫האלמנט‬ ‫של‬ content‫ל‬
‫שלו‬ margin,border,margin
‫הקופסה‬ ‫מודל‬ " ‫של‬ ‫בשקף‬ ‫)מוגדר‬
.("‫אלמנט‬ ‫של‬
‫הוסיפו‬ CSS3‫ב‬ : ‫חשוב‬
box-sizing: border-box
‫ו‬ border ‫את‬ ‫לכלול‬ ‫שמאפשר‬
width/height ‫בתוך‬ padding

‫טקסט‬
: ‫טקסט‬ ‫לעצב‬ ‫בעזרתם‬ ‫שניתן‬ ‫מאפיינים‬ ‫מספר‬ ‫להלן‬
17
‫מאפיין‬ ‫שם‬ ‫הסבר‬ ‫דוגמה‬
color ‫הטקסט‬ ‫צבע‬ ‫קביעת‬ color : blue;
text-align ‫הטקסט‬ ‫יישור‬ text-align: right;
text-decoration ‫טקסט‬ ‫קישוט‬ text-decoration: underline;
text-transform ‫לדוגמא‬ : ‫טקסט‬ ‫המרת‬
uppercase
text-transform: uppercase;
direction ‫הטקסט‬ ‫כיוון‬ direction: rtl;

font - ‫גופן‬
:‫גופן‬ ‫לעצב‬ ‫בעזרתם‬ ‫שניתן‬ ‫מאפיינים‬ ‫מספר‬ ‫להלן‬
18
‫מאפיין‬ ‫שם‬ ‫הסבר‬ ‫דוגמה‬
font-family ‫הגופן‬ ‫משפחת‬ font-family: Times New Roman;
‫הזו‬ ‫מהרשימה‬ ‫לבחור‬ ‫מומלץ‬
https://websitesetup.org/web-safe-font
/s-html-css
font-style ‫הגופן‬ ‫עיצוב‬ font-style: italic;
font-size ‫הגופן‬ ‫גודל‬ font-size: 30px;
‫או‬
font-size: 200%;
font-weight ‫גופן‬ ‫עיצוב‬ font-weight: bold;

icons
‫קטנה‬ ‫תמונה‬ ‫באמצעות‬ ‫מסר‬ ‫להביע‬ ‫לנו‬ ‫מאפשר‬ ‫אייקון‬
<span> ‫או‬ <i> ‫לדוגמא‬ inline ‫אלמנט‬ ‫באמצעות‬ ‫ממשים‬ ‫אייקון‬
<head> ‫<בתוך‬link> ‫אלמנט‬ ‫בעזרת‬ icons ‫של‬ ‫בספריה‬ ‫להשתמש‬ ‫היא‬ ‫ביותר‬ ‫הפשוטה‬ ‫הדרך‬
19
‫חופשית‬ ‫אייקונים‬ ‫ספרית‬ url
Font Awesome "https://cdnjs.cloudflare.com/ajax/libs/font-awes
ome/4.7.0/css/font-awesome.min.css"
Bootstrap "https://maxcdn.bootstrapcdn.com/bootstrap/3.
3.7/css/bootstrap.min.css"
Google "https://fonts.googleapis.com/icon?family=Mate
rial+Icons"

icons - ‫דוגמאות‬
<!DOCTYPE html><html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<i class="glyphicon glyphicon-play"></i>
<i class="glyphicon glyphicon-pause"></i>
<i class="glyphicon glyphicon-stop"></i>
</body>
</html>
20

CSS Layout - display Property
‫הדף‬ ‫של‬ layout - ‫בסידור‬ ‫ביותר‬ ‫החשוב‬ ‫המאפיין‬ ‫הוא‬ display ‫המאפיין‬
.HTML ‫ה‬ ‫בדף‬ ‫מוצג‬ ‫האלמנט‬ ‫איך‬ ‫מתאר‬ ‫אלמנט‬ ‫של‬ display ‫מאפיין‬
( HTML ‫במצגת‬ ‫)הוזכר‬ inline ‫או‬ block ‫זה‬ ‫לרוב‬ display‫ל‬ ‫מחדל‬ ‫ברירת‬ ‫ערך‬ ‫יש‬ ‫אלמנט‬ ‫לכל‬
21
default display is block default display is inline Inline - block
div , h1-h6,p, form span ,a,img
●‫מאפשר‬
‫לכל‬ paddingmargin
‫הצדדים‬
●widthheight ‫מאפשר‬
●‫אלמנטים‬ ‫מאפשר‬ ‫לא‬
‫ב‬ ‫תלות‬ ‫)ללא‬ ‫ושמאל‬ ‫מימין‬
(float
●‫מבחינת‬ leftright ‫מקיים‬
‫אבל‬ paddingmargin
topbottom ‫לא‬
●widthheight ‫מאפשר‬ ‫לא‬
●‫מימין‬ ‫אלמנטים‬ ‫מאפשר‬
‫ושמאל‬
●‫כמו‬ paddingmargin
block
●block ‫כמו‬ widthheight
●‫מימין‬ ‫אלמנטים‬ ‫מאפשר‬
inline ‫כמו‬ ‫ושמאל‬

CSS Layout - position Property
.‫אלמנטים‬ ‫למקם‬ ‫מאפשר‬ position ‫מאפיין‬
: ‫הם‬ ‫האפשריים‬ ‫הערכים‬
: ‫הערות‬
●‫וזאת‬ ‫יותר‬ ‫גדול‬ z-index ‫מאפיין‬ ‫בעזרת‬ ‫מי‬ ‫מעל‬ ‫מי‬ ‫חופפים‬ ‫אלמנטים‬ 2 ‫עבור‬ ‫לקבוע‬ ‫ניתן‬
static ‫לא‬ ‫הוא‬ ‫שלו‬ position‫ש‬ ‫בתנאי‬
●‫למשתמש‬ ‫גלוי‬ ‫אשר‬ HTML ‫בדף‬ ‫האזור‬ ‫הוא‬ viewport
22
‫אפשרי‬ ‫ערך‬ ‫הסבר‬
static ‫האלמנטים‬ ‫כל‬ ‫של‬ ‫מחדל‬ ‫ברירת‬ ‫הערך‬ ‫זה‬
relative ‫המחדל‬ ‫ברירת‬ ‫למיקום‬ ‫ביחס‬ ‫הוא‬ ‫המיקום‬
fixed ‫אופקי‬ ‫או‬ ‫אנכי‬ ‫סרגל‬ ‫נפעיל‬ ‫אם‬ ‫גם‬ ‫יזוז‬ ‫ולא‬ viewport‫ב‬ ‫קבוע‬ ‫במקום‬ ‫נמצא‬
absolute ‫אשר‬ ‫קדמון‬ ‫אב‬ ‫לאלמנט‬ ‫ביחס‬ ‫הוא‬ ‫המיקום‬

position property relativeabsolute - ‫דוגמא‬
<body>
<div id="idOuter">
<div id="idInner">
</div>
</div>
</body>
23
<style>
#idOuter {background-color: lightblue;height:
100px;
position: relative;top: 100px;}
#idInner {background-color: yellow;
height: 50px;width: 50px;
position: absolute;top: 25px;
}
</style>
‫ממוקם‬ idOuter
‫למקום‬ ‫מתחת‬ 100px
‫ואילו‬ ‫שלו‬ ‫מחדל‬ ‫ברירת‬
‫ביחס‬ ‫ממוקם‬ idInner
idOuter‫ל‬

CSS Layout : overflow - ‫טקסט‬ ‫חריגת‬ ‫מאפיין‬
‫לו‬ ‫שמוקצב‬ ‫מהמקום‬ ‫חורג‬ ‫כשטקסט‬ ‫לעשות‬ ‫מה‬ ‫שמגדיר‬ ‫מאפיין‬ ‫הוא‬ overflow
‫אפשריים‬ ‫ערכים‬ ‫ארבעה‬ ‫מקבל‬ overflow
‫בהתאמה‬ overflow-x / overflow-y ‫בעזרת‬ ‫אפקית‬ / ‫אנכית‬ ‫חריגה‬ ‫על‬ ‫לשלוט‬ ‫ניתן‬ : ‫הערה‬
24
overflow ‫ערכי‬ ‫הסבר‬
visible ‫שם‬ ‫ויראה‬ ‫מוקצב‬ ‫למקום‬ ‫מחוץ‬ ‫יחרוג‬ ‫הטקסט‬ .‫המחדל‬ ‫ברירת‬
hidden ‫יראה‬ ‫לא‬ ‫מוקצב‬ ‫למקום‬ ‫מחוץ‬ ‫שיחרוג‬ ‫הטקסט‬
scroll ‫לראות‬ ‫שיאפשר‬ ‫סרגל‬ ‫יתווסף‬ ‫אבל‬ ‫יראה‬ ‫לא‬ ‫מוקצב‬ ‫למקום‬ ‫מחוץ‬ ‫שיחרוג‬ ‫הטקסט‬
‫אותו‬ ‫צריך‬ ‫לא‬ ‫אם‬ ‫גם‬ ‫יתווסף‬ ‫הסרגל‬ .‫אותו‬
auto ‫לראות‬ ‫שיאפשר‬ ‫סרגל‬ ‫יתווסף‬ ‫אבל‬ ‫יראה‬ ‫לא‬ ‫מוקצב‬ ‫למקום‬ ‫מחוץ‬ ‫שיחרוג‬ ‫הטקסט‬
‫אותו‬ ‫צריך‬ ‫אם‬ ‫רק‬ ‫יתווסף‬ ‫הסרגל‬ .‫אותו‬

CSS Layout : float clear
.‫מהשנים‬ ‫אחד‬ ‫אף‬ ‫או‬ ‫שמאל‬ , ‫לימין‬ ‫יוצמד‬ ‫אלמנט‬ ‫אם‬ ‫קובע‬ float ‫מאפיין‬
position ‫מאפיין‬ ‫בעזרת‬ ‫אבסולוטית‬ ‫ממוקם‬ ‫האלמנט‬ ‫אם‬ float ‫ממאפין‬ ‫מתעלמים‬
clear ‫במאפיין‬ ‫להשתמש‬ ‫יש‬ ‫זאת‬ ‫למנוע‬ ‫מנת‬ ‫על‬ , float ‫מאפיין‬ ‫עם‬ ‫אלמנט‬ ‫אחרי‬ ‫יצופו‬ ‫אלמנטים‬
25
float : left; float : righ;

CSS Align : ‫ואנכי‬ ‫אופקי‬ ‫יישור‬
: ‫דוגמאות‬
●https://github.com/NathanKr/VS2015GitRep/blob/master/Telrad/Web/HTML_a
‫למעלה‬ ‫לטבלה‬ ‫מתיחס‬ lign.html
●‫לישור‬ ‫נוספות‬ ‫דוגמאות‬ ‫מכיל‬ https://www.w3schools.com/css/css_align.asp
26
‫פעולה‬ ‫הסבר‬ ‫דוגמה‬
‫מסוג‬ ‫אלמנט‬ ‫של‬ ‫אופקי‬ ‫מרכוז‬
block
‫מימין‬ ‫אחיד‬ margin‫ב‬ ‫שימוש‬
‫קובעים‬ ‫לא‬ ‫אם‬ ‫עובד‬ ‫לא‬ .‫ושמאל‬
width ‫של‬ ‫הערך‬ ‫את‬
margin auto;
‫טקסט‬ ‫של‬ ‫אופקי‬ ‫מרכוז‬ text-align ‫ב‬ ‫שימוש‬ text-align: center;
‫טקסט‬ ‫של‬ ‫אנכי‬ ‫מרכוז‬ padding ‫ב‬ ‫שימוש‬ padding : 50px;

Pseudo class
‫כאשר‬ ‫אלמנט‬ ‫עיצוב‬ : ‫לדוגמא‬ ‫אלמנט‬ ‫של‬ ‫מצב‬ ‫עבור‬ ‫עיצוב‬ ‫להגדיר‬ ‫מאפשר‬ pseudo class
‫מעליו‬ ‫עכבר‬ ‫עם‬ ‫עוברים‬
‫הוא‬ ‫כזה‬ ‫במקרה‬ ‫התחביר‬
selector:pseudo-class {
property:value;
}
‫העכבר‬ ‫עם‬ ‫מעליו‬ ‫עוברים‬ ‫כאשר‬ ‫לכתום‬ ‫הלינק‬ ‫צבע‬ ‫שינוי‬ : ‫לדוגמא‬
27
style body
a:hover {
color: orange;
}
<a href="https://google.com">go to
google</a>

Navigation Bars - ‫תפריט‬ ‫לעיצוב‬ ‫דוגמא‬
: ‫שלבים‬ ‫פי‬ ‫על‬ ‫אנכי‬ ‫לתפריט‬ ‫דוגמה‬
●ul , li ,a ‫בעזרת‬ ‫לינקים‬ ‫עם‬ ‫רשימה‬ ‫צור‬
●width ‫בעזרת‬ ‫רוחב‬ ‫לרשימה‬ ‫הגדר‬
●list-style-type:none ‫בעזרת‬ bullets‫ה‬ ‫את‬ ‫בטל‬
●text-decoration:none ‫בעזרת‬ ‫לינק‬ ‫עיטור‬ ‫בטל‬
●inline-block ‫כ‬ ‫או‬ block ‫כ‬ ‫והגדר‬ padding ,background-color ‫בעזרת‬ a ‫עצב‬
●a‫ל‬ hover ‫הוסף‬
https://github.com/NathanKr/VS2015GitRep/blob/master/Telrad/Web/vertical_navi
gation_bar.html
li ‫אלמנט‬ ‫על‬ float : left ‫עושים‬ ‫פשוט‬ : ‫בשמאל‬ ‫אנכי‬ ‫תפריט‬
28

‫בסיסיים‬ ‫אלמנטים‬ ‫לעיצוב‬ ‫חשובות‬ ‫דוגמאות‬
29
‫לינק‬ ‫לעיצוב‬ ‫חשובים‬ ‫מרכיבים‬ ‫אלמנט‬
https://github.com/NathanKr/VS2015GitRep/blo
b/master/Telrad/Web/HTML_css_links.html
pseudo class , padding , margin , border ,
background-color , color , text-decoration ,
float
‫קישור‬
b/master/Telrad/Web/html_css_table.html
border-collapse ,
tr:nth-child(even),border,width,padding,tex
t
‫טבלה‬
https://github.com/NathanKr/VS2015GitRep/tre
e/master/Telrad/Web/ImageGallery
float,border,margin,padding,text-align ‫תמונות‬ ‫גלריית‬
b/master/Telrad/Web/html_css_forms.html
width:100%,attribute selector,padding ,
margin, background-color,box-sizing,
cursor: pointer,pseudo class,border-radius
‫טופס‬

CSS combinators
‫שיש‬ ‫כמה‬ ‫לשלב‬ ‫אפשר‬ ‫איך‬ ‫נראה‬ ‫עכשיו‬ h1 ‫לדוגמא‬ ‫בודד‬ selector‫ב‬ ‫השתמשנו‬ ‫עכשיו‬ ‫עד‬
‫יחס‬ ‫ביניהם‬
30
selector ‫סוג‬ ‫סימון‬ style ‫דוגמה‬
‫הרמות‬ ‫בכל‬ ‫)אלמנטים‬ descendant - ‫צאצא‬
(‫מתחת‬
‫רווח‬ div p {color: aqua;}
div ‫בתוך‬ p ‫כל‬ ‫בוחר‬
(‫מתחת‬ ‫אחת‬ ‫רמה‬ ‫רק‬ ‫)אלמנטים‬ child - ‫בן‬ > p > span {text-decoration: underline;}
p ‫של‬ ‫בן‬ ‫שהוא‬ span ‫רק‬ ‫בוחר‬
‫)אלמנט‬ adjacent sibling - ‫אחרי‬ ‫צמוד‬ ‫אח‬
(‫רמה‬ ‫באותה‬ ‫אחרי‬ ‫מידית‬ ‫בודד‬
+ span + p {text-decoration: underline;}
‫רמה‬ ‫באותה‬ span ‫אחרי‬ ‫שהוא‬ p ‫רק‬ ‫בוחר‬
‫,לא‬ ‫אחרי‬ ‫)אלמנטים‬ general sibling - ‫אח‬
(‫רמה‬ ‫באותה‬ ‫אבל‬ ‫מידית‬ ‫בהכרח‬
~ span ~ p {background-color: aqua;}
‫רמה‬ ‫באותה‬ span ‫אחרי‬ ‫שהוא‬ p ‫כל‬ ‫בוחר‬

Attribute selectors
‫מאפיין‬ ‫של‬ ‫ערך‬ ‫או‬ ‫מאפיין‬ ‫פי‬ ‫על‬ ‫אלמנטים‬ ‫של‬ ‫בחירה‬ ‫לבצע‬ ‫מאפשר‬
31
selector ‫סוג‬ ‫סימון‬ style ‫דוגמה‬
‫מאפיין‬ [attribute] img[alt] {border: 5px solid red;}
alt ‫מאפיין‬ ‫עבורו‬ ‫שהוגדר‬ img ‫לאלמנט‬ ‫רק‬ ‫מתיחס‬ selector
‫זהה‬ ‫מאפיין‬ ‫ערך‬ [attribute=value] img[alt="ariplane2"] {border: 5px solid red;}
‫שערכו‬ alt ‫מאפיין‬ ‫עבורו‬ ‫שהוגדר‬ img ‫לאלמנט‬ ‫רק‬ ‫מתיחס‬ selector
"ariplane2"
‫מכיל‬ ‫מאפיין‬ ‫ערך‬ [attribute*=value] img[alt*="ariplane"] {border: 5px solid red;}
"ariplane" ‫כולל‬
‫מתחיל‬ ‫מאפיין‬ ‫ערך‬ [attribute^=value] img[alt^="ariplane"] {border: 5px solid red;}
"ariplane" ‫ב‬ ‫מתחיל‬

‫כלים‬
●‫אנטרנט‬ ‫בדף‬ ‫צבע‬ ‫לזיהוי‬ chrome ‫ל‬ ‫תוסף‬ - Eye Dropper
●/https://pixabay.com ‫מאוד‬ ‫טובה‬ ‫באיכות‬ ‫לתמונות‬ ‫בחינם‬ ‫אתר‬
●‫שלו‬ ‫לתמונות‬ ‫ישירות‬ URL ‫שמאפשר‬ ‫אתר‬
/https://homepages.cae.wisc.edu/~ece533/images
32

CSS

More Related Content

Similar to CSS (20)

More from Nathan Krasney (14)

CSS