CSS ל-HTML היא הרבה יותר מסתם שפה לגיליונות עיצוב. לדוגמא ב-CSS יש לנו פונקציות (גם מתמטיות) שנוכל לתת כערכים למאפיינים.
בשפת CSS קיימות פונקציות שנוכל לתת כערכים למאפיינים מסוימים.
אלו הם לא פונקציות משתמש, אלא פונקציות אשר מובנות בשפה.
שימו לב לטבלה הבאה שמסבירה כל פונקציה:
CSS Functions
כפי שנראה, המבחר לא ענק, אך פונקציות הן כלי שיכול מאוד להקל עלינו.
שימוש בפונקציות CSS
כעת נדגים כיצד חלק מהפונקציות שברשימה לעיל פועלות,
וכיצד הן יכולות להקל עלינו.
הפונקציה ()atrr
פונקציה אשר מחזירה את ערך ה-Attribute של האלמנט הנבחר.
צרו את מסמך ה-HTML הבא:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="my_style.css">
<meta charset="utf-8" />
<title>Hello, World!</title>
<h1 style="text-shadow:0 0 5px #0000FF;">this is an example of our basic HTML Document with Functions</h1>
</head>
<body>
<body>
<h1>לתוך סוגריים אחרי הכיתוב a מכניסה את הערך של - attr() הפונקציה</h1>
<h3><a href="https://www.g4a.co.il">אתר המדריכים הישראלי</a></h3>
<h3><a href="https://www.technow.co.il">עכשיו בטכנולוגיה - חדשות טכנולוגיה, אינטרנט, אבטחת מידע וסייבר, <br/>
אפליקציות ותוכנות, גיימינג, סטרימינג, קונסולות וגאדג'טים - כל מה שמעניין.</a></h3> <br/>
</body>
</body>
</html>
ואת ה-style כתבו כך:
a:after {
content: " (" attr(href) ")";
}
כפי שניתן להבחין, הפונקציה ()attr מכניסה את הערך של המאפיין a href לסוגריים אחרי כיתוב הקישור:
הפונקציה ()clac
פונקציה זו מאפשרת לנו לבצע חישובים על מנת לקבוע ערך למאפיין.
נניח והיינו רוצים לתת ערך שהוא 50px פחות מה-100% של הרוחב של אלמנט מסוים:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="my_style.css">
<meta charset="utf-8" />
<title>Hello, World!</title>
<h1 style="text-shadow:0 0 5px #0000FF;">this is an example of our basic HTML Document with Functions</h1>
</head>
<body>
<h1>לתוך סוגריים אחרי הכיתוב a מכניסה את הערך של - attr() הפונקציה</h1>
<h3><a href="https://www.g4a.co.il">אתר המדריכים הישראלי</a></h3>
<h3><a href="https://www.technow.co.il">עכשיו בטכנולוגיה - חדשות טכנולוגיה, אינטרנט, אבטחת מידע וסייבר, <br/>
אפליקציות ותוכנות, גיימינג, סטרימינג, קונסולות וגאדג'טים - כל מה שמעניין.</a>
</h3><br/><br/>
<h1>מאפשרת לנו לבצע חישובים על מנת לקבוע ערך למאפיין calc() הפונקציה</h1>
<div id="div1">הרוחב של הבאנר הזה הוא 200 פיקסלים פחות מה-100% המקוריים</div>
</body>
</html>
a:after {
content: " (" attr(href) ")";
}
#div1 {
position: absolute;
width: calc(100% - 200px);
border: 1px solid black;
background-color: yellow;
text-align: center;
font-family:"Helvetica";
font-size:larger;
font-weight:bold;
}
כעת הבאנר שיופיע יהיה קטן ב-200px פחות מה-100% המקוריים שלו:
הפונקציות ()min ו-()max
פונקציות אלו משתמשות בערך הגדול או הקטן ביותר בהתאמה,
מתוך שורת ערכים אשר מופרדים בפסיק בתור הערך למאפיין:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="my_style.css">
<meta charset="utf-8" />
<title>Hello, World!</title>
<h1 style="text-shadow:0 0 5px #0000FF;">this is an example of our basic HTML Document with Functions</h1>
</head>
<body>
<h1>לתוך סוגריים אחרי הכיתוב a מכניסה את הערך של - attr() הפונקציה</h1>
<h3><a href="https://www.g4a.co.il">אתר המדריכים הישראלי</a></h3>
<h3><a href="https://www.technow.co.il">עכשיו בטכנולוגיה - חדשות טכנולוגיה, אינטרנט, אבטחת מידע וסייבר, <br/>
אפליקציות ותוכנות, גיימינג, סטרימינג, קונסולות וגאדג'טים - כל מה שמעניין.</a>
</h3><br/><br/>
<h1>מאפשרת לנו לבצע חישובים על מנת לקבוע ערך למאפיין calc() הפונקציה</h1>
<div id="div1">הרוחב של הבאנר הזה הוא 200 פיקסלים פחות מה-100% המקוריים</div><br/><br/>
<h1>מחזירה את הערך הגדול ביותר מתוך שורת ערכים אשר מופרדים בפסיק - בתור הערך למאפיין max()הפונקציה </h1>
<div id="div2">הגדל והקטן את החלון על מנת לראות את השינויים</div>
</body>
</html>
a:after {
content: " (" attr(href) ")";
}
#div1 {
position: absolute;
width: calc(100% - 200px);
border: 1px solid black;
background-color: yellow;
text-align: center;
font-family:"Helvetica";
font-size:larger;
font-weight:bold;
}
#div2 {
background-color: rgb(255, 199, 211);
height: 100px;
width: max(50%, 400px);
}
בדוגמא זו השתמשנו בפונקציה ()max על מנת לקבל את הערך הגדול היותר מתוך הרשימה – (50%, 400px).
הערך שיתקבל יהיה הרוחב של תיבה זו.
כלומר שאם נגדיל ונקטין את החלון הרוחב יהיה באותו יחס לגודל החלון עד אשר 50% יהיו יותר גדולים מ-400px:
הפונקציה ()linear-gradient
פונקציה נוספת שכדאי להכיר היא ()linear-gradient.
זוהי פונקציה שיוצרת לנו צבע בשיפוע לינארי:
על מנת להשתמש בפונקציה זו על מנת לצבוע בשיטת שיפוע לינארי את הרקע, נשתמש ב-style הבא:
#grad1 {
height: 200px;
background-image: linear-gradient(red, yellow, blue);
}
הפונקציה ()var
פונקציה זו מחזירה את הערך של המשתנה המיוחד var.
שימו לב לקטע הקוד הבא שבו נשתמש במשתנה var על מנת לתת צבע אחיד למשל:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="my_style.css">
<meta charset="utf-8" />
<title>Hello, World!</title>
<h1 style="text-shadow:0 0 5px #0000FF;">this is an example of our basic HTML Document with Var Function</h1>
</head>
<body>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</div>
<br>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</div>
<br>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</div>
</body>
</html>
:root {
--color: rgb(231, 94, 94);
}
div {
color: var(--color);
padding: 5px;
}
בשורה 2 של קובץ ה-CSS הגדרנו משתנה בשם color– אשר מחזיק צבע rgb בתור ערך.
לאחר מכן בשורה 6 דאגנו שכל אלמנט div יהיה בעל תכונת צבע זו – ;color: var(–color).
כך שלמעשה ב-var נוכל להשתמש על מנת להתייחס למשתנה שהגדרנו מראש.
בפרק הבא של המדריך נלמד על טרנזיסציות ואפקטי תנועה נוספים.
לקריאה נוספת על CSS יש ללחוץ כאן
