CSS ב-HTML חשוב על מנת שנוכל לעצב אלמנטים שונים, לכל אלמנט יש תכונות מסוימות שמגדירות את המראה שלו ולכל תכונה יש סט של ערכים שאותם היא מצפה לקבל.
בפרק הראשון של המדריך, כאשר עברנו על התחביר הבסיסי של CSS, למדנו מה הם תכונות.
בואו נתבונן שוב בטבלה שביארה את הנושא:
כמובן שב-CSS יש תכונות נוספות שניתן להשתמש בהם.
ריווח חיצוני ופנימי לאלמנטים
אם היינו רוצים למשל להגדיר ריווח חיצוני ופנימי לאלמנטים, יכולנו להשתמש בתכונות הבאות:
- padding – רווח סביב התוכן, עובי רווח זה כלול בגודל האובייקט
- margin – רווח סביב גבולות האלמנט
- border – גבול מסביב לאובייקט, עובי הגבול כלול בגודל האובייקט
*בתור ערך תכונות אלו מקבלות px או אחוזים.
תכונות לעיצוב עובי הגבול (border)
ב-CSS קיים מגוון של תכונות שנועדו לעיצוב עובי הגבול (border):
- dotted – גבול מנוקד
- dashed – גבול מקווקו
- solid – גבול קווי רציף
- double – גבול כפול
- groove – גבול הנראה כמסילה שקועה
- ridge – גבול בולט
- inset – גבול בולט כלפי פנימה
- outset – גבול בולט כלפי חוץ
- outset – ללא גבול
ניתן לקבוע את צבע הגבול על ידי שימוש ב-border–color.
ניתן גם לעצב כל צד של הגבול בנפרד:
- 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
הוספת צל לאלמנטים
ניתן להוסיף צל לטקסט על ידי שימוש בתכונה text–shadow.
שימו לב לדוגמא הבאה:
<!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 example of our basic HTML Document with links</h1>
</head>
<body>
<p>this is an example 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;
}
נוכל לקבל את דף האינטרנט שאנחנו עובדים עליו עם תצוגה דומה:
אפקט טשטוש (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;
}
באותה הצורה ניתן להוסיף צל לאלמנטים שונים, רק ששם התכונה הוא-box–shadow.
ניתן גם להוסיף מידת שקיפות בתוך הגדרת הצבע.
דריסת פקודות ב-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 example of our basic HTML Document with links</h1>
</head>
<body>
<p>this is an example 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.
לקריאה מורחבת על CSS באתר הייעודי של W3C יש ללחוץ כאן
