באמצעות CSS ב-HTML נוכל גם לעצב טבלאות וטפסים על מנת לתת להם מראה מודרני וייחודי.
עיצוב טבלאות
אם נחזור לרגע לפרק ז' של המדריך הבסיסי ל-HTML אשר נמצא ב-G4A,
נוכל לראות כי בסוף המאמר יצרנו טבלה מעוצבת.
כעת נעבור על דוגמא זו ונסביר אותה לפרטים.
צרו מסמך 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 Table</h1>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>1</td>
<td>Alfredo</td>
<td>Mustakis</td>
</tr>
<tr>
<td>2</td>
<td>Mariuma</td>
<td>Salvador</td>
</tr>
<tr>
<td>3</td>
<td>Roland</td>
<td>Magen</td>
</tr>
<tr>
<td>4</td>
<td>Hilary</td>
<td>Washington</td>
</tr>
</table>
</body>
</html>
מיד תוכלו להבחין כי באופן דיפולטיבי, תצוגת הטבלה מיושנת ולא נוחה לשימוש:
צרו קובץ את קובץ ה-CSS (אשר קישרנו בשורה 4 של קוד ה-HTML) :
table {
font-family: arial, sans-serif;
border-collapse: collapse;
border: 4px solid;
border-color: cadetblue;
border-style: inset;
width: 50%;
background-color:aliceblue;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(1) {
background-color: rgb(70, 60, 82);
color: skyblue;
}
tr:nth-child(even) {
background-color: white;
}
בדוגמא זו תוכלו לראות כיצד באמצעות תכונות שונות של מאפייני הטבלה נתנו לה מראה שונה לחלוטין.
על מנת שכל שורה תופיע בצבע אחר השתמשנו בסלקטור המיוחד nth לאלמנט tr.
סלקטור זה עובד שניתן להזין לו בין הסוגריים את מספר הדילוגים.
הוא מצפה לקבל ערכים כמו – even,odd, 1,2,3,4.
- השתמשנו ב-1 על מנת לתת סגנון שונה לשורת כותרות העמודות של הטבלה (שורה 15).
- השתמשנו ב-even אשר בוחר כל רשומה שמסומלת על ידי מספר זוגי על מנת שתיצבע שצבע שונה(שורה 19).
כעת נוכל להבחין שהטבלה שלנו קיבלה מראה שונה לחלוטין:
קצת על קיבוץ (grouping) – כאשר אנו מעוניינים להחיל את אותו הסגנון העיצובי על שני אלמנטים שונים,
אין צורך לכתוב את אותו הסגנון פעמיים, נוכל לכתוב סגנון אחד לשני האלמנטים, התחביר עובד כך שהם מופרדים בפסיקים:
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
בדוגמא זו ניתן לראות כי הגדרנו סגנון עיצובי אחד לשני אלמנטים שונים- td,th.
עיצוב טפסים באמצעות HTML ו-CSS
כשם שעיצבנו טבלה, כך נוכל לעצב כל אלמנט אחר.
ניקח לדוגמא טופס שלו מאפיינים רבים שניתן "לשחק איתם".
צרו את מסמך ה-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 Form</h1>
</head>
<body>
<div class="container">
<form action="">
<label for="fname">First Name</label></form><br/>
<input type="text" id="fname" name="firstname" placeholder="Please enter your first name"><br/>
<label for="lname">Last Name</label><br/>
<input type="text" id="lname" name="lastname" placeholder="Please enter your last name.."><br/>
<label for="country">Country</label><br/>
<select id="country" name="country"><br/>
<option value="australia">Israel</option>
<option value="canada">Thailand</option>
<option value="usa">India</option>
</select>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
לפניכם טופס לא מעוצב. כשם שטבלה נראית אנמית באופן דיפולטיבי – כך גם לגבי טפסים.
את קובץ ה-CSS שלנו ניצור כך:
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 4px inset #ccc;
border-radius: 4px;
border-color: beige;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical
}
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
width: 50%;
border: 4px inset;
border-radius: 4px;
border-color: rgb(117, 82, 160);
background-color: #b2c5c9;
padding: 20px;
}
כעת נוכל לראות שהטופס מעוצב, ברור ונוח לשימוש על ידי המשתמש.
שימו לב לשורה 22 – כך מגדירים שינוי צבע בעת אירוע – במקרה הזה אירוע שהעכבר מרחף מעל כפתור ה-submit .
בקובץ HTML נתנו לכל אזור הטופס בתגית div בורר class בשם container.
ואז בקובץ ה-CSS הגדרנו סגנון לאזור זה (שורה 26).
ובכך למעשנו יצרנו מעין "קופסא" מעוצבת שתוחמת את אזור הטופס:
בפרק הבא נלמד איך לארגן את דף האינטרנט שלנו על ידי שימוש ב-Grid.
לקריאה נוספת על CSS יש ללחוץ כאן
