המדריך הבסיסי ל-CSS ב-HTML – פרק ח' – פונקציות

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 exemple 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 לסוגריים אחרי כיתוב הקישור:

CSS in HTML - Functions
CSS in HTML – Functions
הפונקציה ()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 exemple 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% המקוריים שלו:

CSS in HTML - Functions
CSS in HTML – Functions
הפונקציות ()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 exemple 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.
זוהי פונקציה שיוצרת לנו צבע בשיפוע לינארי:

CSS in HTML - Gardient
CSS in HTML – Gardient

על מנת להשתמש בפונקציה זו על מנת לצבוע בשיטת שיפוע לינארי את הרקע, נשתמש ב-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 exemple 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;  
}

 

CSS in HTML - Var Function
CSS in HTML – Var Function

בשורה 2 של קובץ ה-CSS הגדרנו משתנה בשם color– אשר מחזיק צבע rgb בתור ערך.
לאחר מכן בשורה 6 דאגנו שכל אלמנט div יהיה בעל תכונת צבע זו – ;color: var(–color).
כך שלמעשה ב-var נוכל להשתמש על מנת להתייחס למשתנה שהגדרנו מראש.

בפרק הבא של המדריך נלמד על טרנזיסציות ואפקטי תנועה נוספים.
לקריאה נוספת על CSS יש ללחוץ כאן

רוצים לשתף את המדריך?

אהבתכם את המדריך? פתר לכם תקלה?

גולשים יקרים, רוב התכנים המוצגים באתר נכתבים בהתנדבות מלאה מתוך כוונה להנגיש מידע עבורכם. אם נתקלתם במדריך חינמי שפתר לכם תקלה או לימד אתכם משהו חדש שלא ידעתם, וברצונכם לתגמל את כותב המדריך או סתם להזמין אותו לכוס קפה, הינכם יותר ממוזמנים לתרום.

כתיבת תגובה

הזמינו אותי לכוס קפה
buy me coffee

אהבתכם את המדריך? פתר לכם תקלה? הזמינו את כותב המדריך לכוס קפה

גולשים יקרים, רוב התכנים המוצגים באתר נכתבים בהתנדבות מלאה מתוך כוונה להנגיש מידע עבורכם. אם נתקלתם במדריך חינמי שפתר לכם תקלה או לימד אתכם משהו חדש שלא ידעתם, וברצונכם לתגמל את כותב המדריך או סתם להזמין אותו לכוס קפה, הינכם יותר ממוזמנים לתרום.