Sisene CSS-i juhend - kuidas HTML-märgendit otseselt kujundada

Olete kirjutanud HTML-i ja peate selle nüüd CSS-iga kujundama. Üks võimalus on kasutada tekstisiseseid stiile, millest see artikkel räägib.

This is my first paragraph.

Enne kui asume sisseütlemisstiilide nüanssidesse - millal, miks ja kuidas neid kasutada -, on oluline olla teadlik muudest HTML-i kujundamise viisidest. Nii valite oma koodile parima võimaluse.

Siin on teie valikute kokkuvõte.

Väline stiilitabel

Arendajad hoiavad kogu oma CSS-i tavaliselt välises stiililehes. HTML-failis kasutage elementi oma välise stiililehe linkimiseks, mis sisaldab teie CSS-i.

Failis index.css on meil CSS-reeglid.

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

Sisemine stiilileht

Teine võimalus CSS-i kujundamiseks on sisemise stiililehe kasutamine. See tähendab oma CSS-reeglite määratlemist HTML-faili elemendi sees .

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

Sisenevad stiilid

Harvemini leiad end sirguvatest stiilidest. Kuid neist on siiski oluline teada, sest on teatud juhtudel, kui need on kasulikud.

Siseste stiilide abil lisate stiiliatribuut HTML-märgendile, millele järgneb CSS-i elemendi kujundamiseks.

This is my first paragraph.

This is my second paragraph.

Nii et meie puhul on esimese lõigu tekst punane ja fondi suurus on 20 pikslit. Teine jääb aga muutumatuks.

Vaatame lähemalt, kuidas ja millal kasutada siseseid stiile. Samuti selgitame välja, miks on ainult üks meie lõikudest kujundatud.

Mis on HTML-i silt?

Siseste stiilide korral rakendate CSS-i styleavatava HTML-märgendi atribuudile.

HTML-siltide näited on järgmised:

  • ...
  • ...

  • ...

Ava- ja sulgemissildid on sageli osa HTML-elemendist, mis võib sisaldada teksti, andmeid, pilti või üldse mitte midagi.

Siin on meil tekstielement.

This is my first paragraph.

Selle elemendi kujundamiseks saame kasutada siseseid stiile, lisades avamärgendile stiili atribuudi, millele järgnevad CSS-i omaduste-väärtuste paarid.

This is my first paragraph.

This is my second paragraph.

Vaatame läbi, kuidas me siseseid stiile kasutasime.

Kuidas kasutada siseseid stiile

Lisagestiili atribuut sildile, mida soovite stiilida, millele järgneb võrdusmärk. Alustage ja lõpetage CSS topelt jutumärkidega.

Lisage atribuudile stiil atribuudiväärtuste paarid. Lisage iga omaduse-väärtuse paari järele semikoolon.

color: red; font-size: 20px; 

Nii et kui me kõik kokku paneme, näeb see välja selline:

This is my first paragraph.

Peamised teadmised

Erinevalt sisemistest ja välistest stiililehtedest ei sisalda sisesuunalised stiilid lokkisulgusid ega joonejooni. See tähendab, et kirjutage oma CSS kõik samale reale, kui kasutate siseseid stiile.

Samuti pidage meeles, et tekstisisesed stiilid mõjutavad ainult konkreetset elementi, millele lisate CSS-i atribuudiväärtuste paaridega atribuudi.

Näiteks allpool olevas koodis on ainult esimene lõik kujundatud punaseks ja fondi suurus on 20 pikslit.

This is my first paragraph.

This is my second paragraph.

Kui me tahame mõlema lõigu teksti stiilis sisestada, siis peame lisama CSS teisele stiili atribuudile

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.