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

This is my first paragraph.

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

הנה סיכום האפשרויות שלך.

גיליון סגנונות חיצוני

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

בתוך הקובץ, index.css, יש לנו את כללי ה- CSS שלנו.

p { color: red; font-size: 20px; } 

גיליון סגנונות פנימי

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

  p { color: red; font-size: 20px; }   

סגנונות מוטבעים

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

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

This is my first paragraph.
This is my second paragraph.

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

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

מהו תג HTML?

בעזרת סגנונות מוטבעים, אתה מחיל CSS על styleהמאפיין בתג HTML הפותח.

דוגמאות לתגי HTML כוללות:

• ...

• ...

• ...

תגי פתיחה וסגירה הם לעתים קרובות חלק מאלמנט ה- HTML, שיכול להכיל טקסט, נתונים, תמונה או כלום.

הנה, יש לנו אלמנט של טקסט.

This is my first paragraph.

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

This is my first paragraph.
This is my second paragraph.

בואו נעבור כיצד השתמשנו בסגנונות מוטבעים.

כיצד להשתמש בסגנונות מוטבעים

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

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

color: red; font-size: 20px; 

אז כשאנחנו מרכיבים הכל, זה נראה כך:

This is my first paragraph.

נקודות מפתח שצריך לדעת

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

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

לדוגמה, בקוד שלמטה רק הפסקה הראשונה מעוצבת באדום עם גודל גופן של 20 פיקסלים.

This is my first paragraph.
This is my second paragraph.

אם אנו רוצים לעצב את הטקסט של שתי הפסקאות בסגנונות מוטבעים, עלינו להוסיף CSS למאפיין הסגנון לשני

This is my first paragraph.
This is my second paragraph.

However, if we used an external stylesheet, for example, we could easily style both paragraphs without duplicating our code by using a single CSS selector.

p { color: red; font-size: 20px; } 

This brings us to an important topic: when to use and when not to use inline styles.

When to Use (and when NOT to use) Inline Styles

Say you have an HTML file with ten or more paragraph tags. Can you imagine styling each one individually with inline styles?

Doing so will quickly clutter your code, making it hard to read and maintain.

Besides, inline styles can introduce specificity issues if you’re also using internal or external stylesheets.

That’s because inline styles have a high specificity. This means they'll override most other rules in internal and external stylesheets, except for the !important declaration.

For example, we added inline styles to two paragraph elements. We’ve also added an internal stylesheet.

 My New Webpage p { color: pink; } 
A blue paragraph.
Another blue paragraph.

The CSS from our inline styles override the CSS in the internal stylesheet. So we end up with two blue paragraphs.

External stylesheets are also much easier to maintain when you or someone else needs to make a change. This is because a style from an external or internal stylesheet can apply to multiple elements, while an inline one must be applied to each element individually.

For example, say you need to update a style to ten elements. It’s easier to make the change once in an external stylesheet, instead of ten different times in your HTML file.

In general, it’s often best practice to put your CSS into a separate file. That way, your HTML file contains the structure and content of your website, and your CSS file contains your styles. Doing so makes your code easier to read and manage.

However, there are times when it may make sense to use inline styles:

• Add a style and see the change quickly, which can be useful for testing.
• Use the style attribute in JavaScript to apply styling.

Most of the time you’ll want to use external stylesheets. But you’ll occasionally find yourself using inline styles, most commonly in the above situations.

I write about learning to program, and the best ways to go about it on my blog at amymhaddad.com.