[מדריך] קישור חיצוני ל-CSS

[Smoxer314]

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

מהו CSS?

קודם כל CSS היא שפת עיצוב (משתלבת בתוך קוד ה-HTML)
אפשר לעשות איתה כל מיני דברים:

• עיצוב טקסט (ברמה גבוהה)
• לשים טקסט על תמונה
• לחסוך את כל תגיות הפונט המטופשות (FONT)
• לקשר מסקריפט חיצוני...
• ועוד...

בואו נתחיל

קודם כל נשים את הקוד בתגית style
ככה:

<style type="text/css"><!--codecodecode--> </style>

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

<style type="text/css"><!--	font-size: 34pt; 
	color: red; 
	text-align: center; 
	font-family: Ariel;
--></style>

הסבר:
קודם כל פתחנו את התגית סטייל (style) והגדרנו אותה ל-CSS אח"כ כתבנו:

font-size: 34pt;

כלומר עשינו את הגודל ל-34 נקודות (*שים לב בתגית פונט אפשר רק עד 7 נקודות ופחות*)
אח"כ כתבנו:

color: red;

כלומר קבענו את צבע הטקסט לאדום (או כל צבע אחר שתבחר)
ואז כתבנו:

text-align: center;

כלומר מירכזנו את הטקסט (במקום התגית <center> כל העיניין של CSS נועד בשביל לחסוך טקסט)
ואז:

font-family: Ariel;

כלומר קבענו את הגופן לגופן אריאל

עכשיו לשים טקסט על תמונה:

אם שמתם לב (ואם לא..)
הרבה אתרים משתמשים בלשים תמונות על תמונות. אבל איך הם עושים את זה?
בעזרת התגית DIV ובתגית IMG ככה:

<img src="your_picture" style="z-index: 0; position: absolute"><div style="z-index: 1; position: absolute; display:inline">your_text</div>

לא להיבהל עכשיו מגיע הסבר:
שכתבנו את התגית IMG אמרנו לדפדפן לשים את התמונה במקום "קבוע" ושכתבנו position: absolute אמרנו לתמונה שהיא לא זזה ממקומה.
בתגית DIV שכתבנו display:inline אמרנו לטקסט להישאר שורה מכיוון שאחת התכונות של התגית DIV היא לרדת שורה (כך גם לתגית center ולעוד הרבה תגים...)
איפה שכתוב your_text משנים לאיזשהוא טקסט שברצונך לשים (או תמונה) וכשכתבנו your_picture נשים את התמונה שנרצה לשים מאחורה. אם עד עכשיו יצא בסדר הבא נתקדם לחלק הבא

קישור חיצוני ל-CSS

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

<link rel="stylesheet" type="text/css" href="bla.css">

כלומר:
הקטע: rel="stylesheet" אומר לנו מה זה (וכך גם לדפדפן)
הקטע: type="text/css" אומר באיזה שפה הקטע הנ"ל
והקטע: href="bla.css" אומר מאיפה לקחת את הקישורים *הקובץ החיצוני חייב להיגמר בסיומת CSS!*

זהו מקווה שנהניתם ולמדתם משהו חדש
לעוד מדריכים:
[JavaScript] יצירת דף עם סיסמה
http://www.iatraf.co.il/showthread.php?t=813516

[HTML] יצירת טופס
http://www.iatraf.co.il/showthread.php?t=811853

כל הזכויות שמורות אך ורק לי ובלעדי לאטרף!
לעזרה פנו אלי בפרטי או סתם דברו איתי

[JsT]

כל הכבוד על ההשקעה, מאוד נחמד.

[Smoxer314]

כל הכבוד על ההשקעה, מאוד נחמד.

תודה רבה