עיצוב אתר ע"י קידוד css בראש הדף

שלב ביניים, בין הגדרת סגנונות בתוך תגים לבין שימוש בגליון סגנונות אחד לעיצוב האתר כולו, הוא הגדרת הסגנונות בראש הדף, בתג של ה-head. אם נגדיר למשל, שכל הכותרות h1 שלנו יהיו ורודות, אז כולן יהיו ורודות. נכתוב זאת כך:

<head>
<style>
<!--
h1 { color: pink; }
-->
</style>
</head>

ואז, נכתוב את הכותרות כרגיל, וכולן יהיו ורודות:

<h1> כותרת ורודה? </h1>

כותרת ורודה?

אפשר להגדיר כך את כל התגים אחד אחרי השני. בין שני תגי style בראש הדף, אחד פותח ואחד סוגר, נכתוב את כל ההגדרות כמו בתוך הערה, כדי להסתיר את הקוד מדפדפנים ישנים שאינם תומכים ב-css. בתוך ההערה, כל סוג תג (שאינו רשום כמו תג, אלא רק שמו מופיע) יקבל סוגריים מסולסלים { }, שביניהם יופיעו הגדרות הסגנון שלו, בזו אחר זו, עם נקודה פסיק ביניהן.

ואם לא רוצים שכל הכותרות יהיו ורודות?

גם לזה יש פתרון: מגדירים classes, שהן קבוצות של סגנונות, שניתן ליישם על תג רק כשרוצים. אפשר להגדיר class לתג מסוים, או class כללי שניתן להחיל על כל תג. את ה-class נציין ע"י נקודה לפני שם ה-class, ואחרי שם התג הרלוונטי (אם יש).בדוגמה הבאה, תראו קודם class של כותרות, ואח"כ class כללי:

<head>
<style>
<!--
h1.girls { color: pink; }
.boys {color: blue; }
-->
</style>
</head>

כל פעם שנרצה כותרת שמתאימה לבנות, נכתוב:

<h1 class="girls"> כותרת ורודה! </h1>

וכשנרצה כותרת כחולה נכתוב:

<h1 class="boys"> כותרת כחולה! </h1>

וכשלא נרצה כותרת ורודה, נכתוב סתם:

<h1> כותרת לא ורודה! </h1>

אם נרצה כותרת או טקסט כחול מכל סוג שהוא, נוכל להשתמש ב-class של boys. אבל אם נרצה להשתמש ב-class של girls, נוכל לעשות זאת רק בכותרות, כי זה מוגדר רק לכותרות.

עד כה ראינו שני סוגים של הגדרת סגנון: הגדרה לכל התגים, והגדרה לפי class. ישנו עוד סוג שהוא לפי id, כלומר מתייחס רק לחלק אחד בדף, לפי השם.

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

<html>
<head>
<style>
<!--
#moto {
color: purple;
font-size: large;
background-color: yellow;
}
-->
</style>
</head>
<body>
טקסט רגיל...<br>
<div id="moto">
רק אתרים יפים ונוחים!
</div>
טקסט רגיל...<br>
</body>
</html>

ונקבל:

טקסט רגיל...

רק אתרים יפים ונוחים!
טקסט רגיל...

ה"תרגיל" שעשינו עכשיו לא היה הרבה יותר יעיל מסתם לכתוב style="...", אבל בשיעור הבא כבר תבינו מה החשיבות של id.

למעבר לנושא הבא - שימוש בגליון סגנונות (style sheet) חיצוני - לחצו כאן.

חזרה לדף css הראשי...