שיעור 12 (CSS)

זה לא יהיה גדול אם תוכל להעניק לדפים שלך את תבנית העיצוב לה הם ראויים?

בטח, אבל איך?

כדי להעניק לאתר האינטרנט שלך תבנית עיצוב עליך להשתמש בגיליונות עיצוב מדורגים (Cascading Style Sheets - CSS). בשיעור זה נעשה היכרות קצרה עם CSS. אבל מאוחר יותר אתה יכול ללמוד על CSS מהבסיס במדריך שלנו ל-CSS. לכן, אנא ראה בשיעור זה רק כמתאבן.

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

כפי שהוצג בשיעור 7, CSS ניתן להוספה עם המאפיין style. לדוגמה, אתה יכול לקבוע את סוג וגודל הגופן בפסקה:

דוגמה 1:

<% If Instr(LCase(Request.Servervariables("HTTP_USER_AGENT")),"msie 7") Then %> <p style="font-size:20px;">זה כתוב בגודל 20</p> <p style="font-family:courier;">Courier זה כתוב בגופן</p> <p style="font-size:20px; font-family:courier;">בגודל 20 Courier זה כתוב בגופן</p> <% Else %> 
	<p style="font-size:20px;">זה כתוב בגודל 20</p>
	<p style="font-family:courier;">Courier זה כתוב בגופן</p>
	<p style="font-size:20px; font-family:courier;">בגודל 20 Courier זה כתוב בגופן</p>
<% End If %>

בדפדפן זה יראה כך:

זה כתוב בגודל 20

Courier זה כתוב בגופן

בגודל 20 Courier זה כתוב בגופן

בדוגמה שלמעלה השתמשנו במאפיין style להגדרת סוג הגופן בשימוש (עם הפקודה font-family) ואת גודל הגופן (עם הפקודה font-size). שים לב כיצד בפסקה האחרונה קבענו את סוג הגופן וגודל הגופן עם המפריד נקודה-פסיק.

זה נראה כמו הרבה עבודה?

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

דוגמה 2:

	
	<html>
 
	  <head>
	  <title>My first CSS page</title>	
 
	  <style type="text/css">
		  h1 {font-size: 30px; font-family: arial;}
		  h2 {font-size: 15px; font-family: courier;}
		  p {font-size: 8px; font-family: "times new roman";}
	  </style>
 
	  </head>
 
	  <body>
	  <h1>My first CSS page</h1>
	  <h2>Welcome to my first CSS page</h2>
	  <p>Here you can see how CSS works </p>
	  </body>
 
	</html>

בדוגמה שלמעלה CSS הוכנס באיזור הכותרת ולכן מוחל לכל הדף. כדי לעשות זאת, השתמש בתג <style type="text/css"> שאומר לדפדפן שאתה כותב CSS.

בדוגמה כל הכותרות בדף יהיו בגופן Arial בגודל 30px. כל כותרות המשנה יהיו בגופן Courier בגודל 15px. וכל הטקסט בפסקאות רגילות יהיה בגופן Times New Roman בגודל 8px.

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

מה עוד אני יכול לעשות עם CSS?

CSS משמש להרבה מעבר להגדרת סוגי גופנים וגודלם. למשל, אתה יכול להוסיף צבעים ורקעים. הנה מספר דוגמאות להתנסות:

	
	<p style="color:green;">טקסט ירוק</p>
 
	<h1 style="background-color: blue;">כותרת עם רקע כחול</h1>
 
	<body style="background-image: url('http://www.html.net/logo.png');">

נסה להעתיק את הדוגמאות לכמה מהדפים שלך - שתיהן כפי שהן נראות למעלה וגם CSS שמוכנס לאיזור הכותרת.

האם CSS הוא לא יותר מאשר צבעים וסוגי גופנים?

פרט להוספת תבנית עיצוב דוגמת צבעים, סוגי גופן וכו', CSS יכול לשמש לשליטה בארגון הדף והתצוגה (שוליים, ציפה, יישור לצדדים, רוחב, גובה וכו'). על ידי כיוון האלמנטים השונים עם CSS אתה יכול לעצב את הדפים שלך באלגנטיות ודיוק.

דוגמה 3:

	
	<p style="padding:25px;border:1px solid red;">I love CSS</p>

בדפדפן זה יראה כך:

I love CSS

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

דוגמה 4:

	
	<img src="bill.jpg" alt="Bill Gates" style= "float:left;" />
 
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
		sed diam nonummy nibh euismod tincidunt ut laoreet dolore
		magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
		quis nostrud exerci tation ullamcorper suscipit 
		lobortis nisl ut aliquip ex ea commodo consequat...</p>

בדפדפן זה יראה כך (לכתוב אין משמעות בכלל):

Bill Gates

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...

בדוגמה, אלמנט אחד (התמונה) צף לשמאל והאלמנט האחר (הטקסט) ממלא את החלל.

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

דוגמה 5:

<% If Instr(LCase(Request.Servervariables("HTTP_USER_AGENT")),"msie 7") Then %> <img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" /> <% Else %> 
	<img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />
<% End If %>

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

מגניב, בטח. אבל קל?

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

בשלב זה התרכז ב-HTML ועבור לשיעור הבא בו תלמד כיצד להעלות את האתר שלך לרשת האינטרנט כך שכל העולם יוכל לראות אותו!

<< שיעור 11: עוד על טבלאות

שיעור 13: העלאת דפים >>