שלום לכולם !
היום אני אלמד בקצרה CSS, עקב בקשה של אחד הגולשים .
אבל לפני זה, הודעה קטנה :
1.בקרוב יעלה הפורום שלי! שם תוכלו לדבר , ולשאול אותי שאלות! :)
2. אני מתחיל לחלק אחסונים חינם ! מי שרוצה שישאיר פרטים במיל : volcan.php@gmail.com .
בכדי לממן את האחסונים אני דורש מכל מתאחסן להציב מודעות זעומות של ADSENS באתר, ועקב זאת - אין להפר זכויות יוצרים באתר, או להעלות תוכן פורנוגרפי! אחסון שיפר את הכללים הללו יושעה עד להסדר :)
אוקיי אז נתחיל עם ה CSS -
CSS הן בעצם ראשי תיבות של : Cascading Style Sheets , מי שלא מכיר , CSS היא בעצם גליון סגנון, בעזרת השפה(שמתחברת עם XHTML ) אפשר לשנות צבעי גופן, למקם טבלאות, לעשות כל דבר מבחינת עיצוב HTML בעצם.
במדריך הזה אני אלמד על השליטה בטקסט בעזרת CSS , אם אתם רוצים עוד מדריכים על CSS, אתם מוזמנים להגיב/לשלוח לי מיל ואני אעשה :)
ישנן 2 דרכים להשתמש ב CSS , CSS פנימי ו CSS חיצוני.
CSS פנימי היא בעצם הדרך הפחות מומלצת לשימוש, CSS פנימי נכתב בתוך ה HEAD של הקובץ, בצורה הזו :
<html>
<head>
<style>
/* פה יופיע CSS */
</style>
</head>
<body>
</body>
</html>
לעומת זאת, CSS חיצוני נכתב בתוך קובץ אחר לגמרי ! הקישור שלו לדף HTML נעשה בצורה הזו :
<html>
<head>
<link href="link.css" rel="stylesheet" type="text/css" /> </head>
<body>
</body>
</html>
יתרונות בשימוש בCSS פנימי נגד CSS חיצוני :
- נגישות : ה CSS הפנימי הוא נגיש יותר, אין צורך לעבור בין קובץ לקובץ.
יתרונות בשימוש בCSS חיצוני נגד CSS פנימי :
- יעילות : הCSS החיצוני נמצא בקובץ סגנון אחד - מה שאומר שגם אם יש לכם אתר עם 10 קבצי HTML, ואתם רוצים להחליף צבע לכתב, לא תצטרכו לשנות בכל הקבצים - דיי לשנות בקובץ הCSS החיצוני!
- משקל : הCSS החיצוני הוא קובץ אחד, ובמערכת ממש גדולה של אתרים, לא תבזבזו תעבורה /משקל גדול ביחד ל CS פנימי!
- מקצועיות : כל המקודדים המקצועיים, רובם לפחות עובדים עם CSS חיצוני - למעט אתרים קטנים או שינויים שיכולים להיכנס בCSS פנימי. (לא מומלץ).
תעשו את השיקול שלכם, באיזו שיטה אתם מעדיפים להשתמש, אני אישית ממליץ על CSS חיצוני.
*במדריך זה אשתמש ב CSS פנימי מטעמי נוחות עורך הטקסט שלי. אבל CSS חיצוני נכתב בדיוק אותו הדבר, פשוט בקובץ אחר.
לדוגמה קובץ style.css יכתב כך :
.style{
color:#ffffff;
font-size:12px;
}
בדיוק כמו CSS פנימי! בלי שום קידומת.
ניקח לדוגמה את הDIV הבא :
<html>
<head>
</head>
<body>
<div class="text">
Hello World With Css
</div>
</body>
</html>
ונוסיף לו בעזרת CSS את הנתונים הבאים :
גודל טקסט 15px , צבע אדום,פונט אריאל, HOVER : צבע ירוק .
<html>
<head>
<style> .text{ /* המחלקה שאחראית על שינוי צבע וגודל הDIV. */
font-size:15px;
color:red;
font-family: "Arial";
}
.text:hover { /* המחלקה שאחראית על שינוי צבע וגודל הDIV כאשר העכבר עובר עליו. */
color:green;
}
