המדריך הבסיסי ל-CSS ב-HTML – פרק ג' – תכונות וערכים

CSS ב-HTML חשוב על מנת שנוכל לעצב אלמנטים שונים, לכל אלמנט יש תכונות מסוימות שמגדירות את המראה שלו ולכל תכונה יש סט של ערכים שאותם היא מצפה לקבל.

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

כמובן שב-CSS יש תכונות נוספות שניתן להשתמש בהם.

ריווח חיצוני ופנימי לאלמנטים

אם היינו רוצים למשל להגדיר ריווח חיצוני ופנימי לאלמנטים, יכולנו להשתמש בתכונות הבאות:

padding – רווח סביב התוכן, עובי רווח זה כלול בגודל האובייקט
margin – רווח סביב גבולות האלמנט
border – גבול מסביב לאובייקט, עובי הגבול כלול בגודל האובייקט


*בתור ערך תכונות אלו מקבלות px או אחוזים.

תכונות לעיצוב עובי הגבול (border)

ב-CSS קיים מגוון של תכונות שנועדו לעיצוב עובי הגבול (border):

dotted – גבול מנוקד
dashed – גבול מקווקו
solid – גבול קווי רציף
double – גבול כפול
groove – גבול הנראה כמסילה שקועה
ridge – גבול בולט
inset – גבול בולט כלפי פנימה
outset – גבול בולט כלפי חוץ
outset – ללא גבול

 

ניתן לקבוע את צבע הגבול על ידי שימוש ב-bordercolor.
ניתן גם לעצב כל צד של הגבול בנפרד:

  • border-top-color
  • border-right-color
  • border-left-color
  • border-bottom-color

 

ניתן לרכך\לעגל פינות של אלמנטים באמצעות התכונה border-radius.
תכונה זו מצפה לקבל את הערך ב-px או אחוזים.
כמו כן, ניתן לעגל פינות שונות של האלמנט בנפרד:

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-left-radius
  • border-bottom-right-radius

הוספת צל לאלמנטים

ניתן להוסיף צל לטקסט על ידי שימוש בתכונה textshadow.
שימו לב לדוגמא הבאה:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="my_style.css">
    <meta charset="utf-8" />
    <title>Hello, World!</title>
    <h1 class="h_class">this is an exemple of our basic HTML Document with links</h1>
</head>
<body>
    <p>this is an exemple of link, click <a href="https://www.technow.co.il">here</a>
        <br/>
        <br/>
        this is my image:
        <br/>
        <br/>
        <a href="https://www.g4a.co.il/">
            <img src="logo.png" alt="text" style="height: 100px; width: 100px;">
        </a>
    </p>
</body>
</html>

ואז את קובץ ה-CSS שלנו נכתוב כך:

.h_class { 
    text-shadow:2px 2px #FF0000;
  }

נוכל לקבל את דף האינטרנט שאנחנו עובדים עליו עם תצוגה דומה:

CSS in HTML - text shadow
CSS in HTML – text shadow

אפקט טשטוש (blur):

.h_class { 
    text-shadow:2px 2px 8px #FF0000;
  }

אפקט צל על טקסט לבן:

.h1_class { 
    color: white;
    text-shadow:2px 2px 4px #000000;
  }

אפקט ניאון אדום על טקסט:

.h1_class { 
    text-shadow:2px 2px 4px #000000;
  }

אפקט ניאון כחול-אדום על טקסט:

.h1_class { 
    text-shadow:0 0 3px #FF0000, 0 0 5px #0000FF;
  }

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

דריסת פקודות ב-CSS

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

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="my_style.css">
    <meta charset="utf-8" />
    <title>Hello, World!</title>
    <h1 class="h1_class" style="text-shadow:0 0 5px #0000FF;">this is an exemple of our basic HTML Document with links</h1>
</head>
<body>
    <p>this is an exemple of link, click <a href="https://www.technow.co.il">here</a>
        <br/>
        <br/>
        this is my image:
        <br/>
        <br/>
        <a href="https://www.g4a.co.il/">
            <img src="logo.png" alt="text" style="height: 100px; width: 100px;">
        </a>
    </p>
</body>
</html>

אז הדפדפן היה מתעלם מהפקודה בקובץ ה-CSS והדף היה נראה כך:

CSS in HTML - text shadow
CSS in HTML – text shadow

בפרק הבא של המדריך נלמד כיצד ליצור אנימציות ב-CSS.
לקריאה מורחבת על CSS באתר הייעודי של W3C יש ללחוץ כאן

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

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

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

כתיבת תגובה

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

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

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