Írtál egy HTML-t, és most CSS-sel kell megformáznod. Az egyik módszer a belső stílusok használata, amelyről ez a cikk szól.

This is my first paragraph.

Mielőtt áttekintenénk az inline stílusok árnyalatait - mikor, miért és hogyan kell használni őket -, fontos tisztában lenni a HTML stílusának más módjaival. Így kiválasztja a legjobb opciót a kódja számára.

Itt található a lehetőségek összefoglalása.

Külső stíluslap

A fejlesztők általában az összes CSS-jüket külső stíluslapban tárolják. A HTML-fájlban használja az elemet a külső stíluslapra történő hivatkozáshoz, amely tartalmazza a CSS-t.

Az index.css fájlban megvannak a CSS-szabályaink.

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

Belső stíluslap

A CSS stílusának másik lehetősége egy belső stíluslap használata. Ez azt jelenti, hogy meghatározzuk a CSS-szabályokat a HTML-fájl elemében.

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

Beillesztett stílusok

Ritkábban találhatja magát a belső stílusok után. De még mindig fontos tudni róluk, mert vannak olyan esetek, amikor jól jönnek.

Az inline stílusokkal hozzáadhatja a stílustattribútum egy HTML-címkéhez, amelyet a CSS követ, egy elem stílusának megtervezéséhez.

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

Tehát esetünkben az első bekezdés szövege piros, 20px betűmérettel. A második azonban változatlan marad.

Vizsgáljuk meg közelebbről, hogyan és mikor kell használni az inline stílusokat. Azt is feltárjuk, hogy miért csak az egyik bekezdésünk stílusú.

Mi a HTML címke?

Belső stílusok esetén CSS-t alkalmaz stylea nyitó HTML-címke attribútumára.

Példák a HTML-címkékre:

• ...

• ...

• ...

A nyitó és záró címkék gyakran a HTML elem részét képezik, amelyek tartalmazhatnak szöveget, adatokat, képet vagy egyáltalán semmit.

Itt van egy szövegelem.

This is my first paragraph.

Belső stílusokat használhatunk az elem stílusához úgy, hogy hozzáadjuk a style attribútumot a nyitó címkéhez, majd CSS tulajdonság-érték párokat követünk.

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

Nézzük végig, hogyan használtuk a belső stílusokat.

Az inline stílusok használata

Adja hozzá astyle attribútum a stilizálni kívánt címkéhez, amelyet egyenlőségjel követ. Indítsa el és fejezze be a CSS-t dupla idézőjelekkel.

Adjon hozzá tulajdonság-érték párokat a stílus attribútumhoz. Adjon hozzá pontosvesszőt minden tulajdonság-érték pár után.

color: red; font-size: 20px; 

Tehát amikor mindent összerakunk, így néz ki:

This is my first paragraph.

Kulcsfontosságú tudnivalók

A belső és külső stíluslapokkal ellentétben az inline stílusok nem tartalmaznak göndör zárójeleket vagy sortöréseket. Vagyis írja be CSS-jét ugyanarra a sorra, amikor inline stílusokat használ.

Ne feledje továbbá, hogy a beillesztett stílusok csak azt az elemet érintik, amelyhez a stílusattribútumot CSS tulajdonság-érték párokkal egészíti ki.

Például az alábbi kódban csak az első bekezdés vörös színű, 20 képpontos betűmérettel.

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

Ha mindkét bekezdés szövegét beágyazott stílusokkal szeretnénk stilizálni, akkor hozzá kell adnunk a CSS-t a második

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.