אפשרויות כתיבה | CSS

מוטי אורן

מדריך אפשרויות שונות לכתיבת CSS

--

במדריך הזה נעבור על האפשרויות לכתיבת CSS.

נ.ב. הבטחתי במדריך הקודם שהמדריך הבא יהיה על סלקטורים, אבל הנושא דלהלן מאוד חשוב כך שהחלטתי להקדים אותו (עוד על סלקטורים בעז"ה בקרוב).

ישנם שלושה אפשרויות כתיבה של CSS:

inline – כתיבה בתוך התגיות
internal – כתיבה בתוך תגית <style> (מומלץ לשים אותה בתוך תגית ה - <head>, למרות שלא חובה)
external – כתיבת ה – CSS בקובץ נפרד.

נתחיל מה – inline

inline-css נכתב בתור תכונה בתגית שאנחנו רוצים לעצב. שימו לב לדוגמה הבאה:

<p style="color: blue; background-color: white;">bla bla bla</p>

כאן אנחנו ניגשים לתגית p וכותבים בתוכה תכונה של style כמו בדוגמה. הערכים בתוך ה – style, מופרדים ב – ';' (נקודה פסיק).

internal-css

את internal-css אנו רושמים בתוך תגית <style> שנמצאת ב – head, כמו שהזכרנו למעלה (ובמדריך הקודם).

external-css

external-css נכתב בקובץ נפרד בעל הסיומת css., כמובן שצריך לייבא את הקובץ לדף ה – HTML ולשם כך נראה מספר אפשרויות.

אפשרות ראשונה:

נכתוב בתגית ה – head, תגית שנקראת <link>, כך:

<head>
    <link rel="stylesheet" href="file-name.css">
</head>

תכונת ה – rel אומרת שמדובר בגיליון מסוג 'style sheet' שזה אומר CSS. ותכונת ה – href קובעת את המקור ממנו נטען את הקובץ.

אפשרות שנייה:

נכתוב תגית style, ונכניס לתוכה את השורה הבאה:

<head>
    <style>
        @import url('source of the css file')
    </style>
</head>

כאשר במקום השורה שבתוך ה – URL, נכתוב את מקור הקובץ.

קדימות CSS

שימו לב שבכתיבת CSS ישנם כללי קדימות. נניח לדוגמה שכתבנו בקובץ ה – external עיצוב מסוים עבור תגית מסוימת, ואילו ב – internal עיצוב שונה שמתנגש עם העיצוב הקודם, בעבור אותה תגית ספציפית, מה יקרה אז?

בשביל זה יש לנו את כללי הקדימות של CSS. בקצרה, inline קודם להכול, internal קודם ל – external ואילו external לא קודם לשום דבר.