Sisäinen CSS-opas - Kuinka muotoilla HTML-tagi suoraan

Olet kirjoittanut HTML-koodia ja sinun on nyt muotoiltava se CSS: llä. Yksi tapa on käyttää sisäisiä tyylejä, mistä tässä artikkelissa on kyse.

This is my first paragraph.

Ennen kuin siirrymme upotettujen tyylien vivahteisiin - milloin, miksi ja miten niitä käytetään - on tärkeää olla tietoinen muista tavoista HTML-tyylisi muotoiluun. Näin valitset koodillesi parhaan vaihtoehdon.

Tässä on yhteenveto vaihtoehdoistasi.

Ulkoinen tyylitaulukko

Kehittäjät pitävät yleensä kaikki CSS: nsä ulkoisessa tyylitaulukossa. Linkitä HTML-tiedostossa elementillä ulkoiseen tyylitaulukkoon, joka sisältää CSS: n.

Tiedoston index.css sisällä on CSS-säännöt.

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

Sisäinen tyylitaulukko

Toinen CSS-muotoiluvaihtoehto on sisäisen tyylitaulukon käyttäminen. Tämä tarkoittaa CSS-sääntöjen määrittelemistä HTML-tiedostosi elementin sisällä .

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

Upotetut tyylit

Harvemmin löydät itsesi tavoittelemaan sisäisiä tyylejä. Mutta heistä on silti tärkeää tietää, koska joissakin tilanteissa ne ovat käteviä.

Upotettujen tyylien avulla voit lisätä tyylinattribuutti HTML-tagille, jota seuraa CSS: si tyylin muodostamiseksi.

This is my first paragraph.

This is my second paragraph.

Joten meidän tapauksessamme ensimmäisen kappaleen teksti on punainen ja kirjasinkoko on 20 kuvapistettä. Toinen pysyy kuitenkin muuttumattomana.

Katsotaanpa tarkemmin, miten ja milloin inline-tyylejä käytetään. Paljastamme myös, miksi vain yksi kappaleistamme on tyyliltään.

Mikä on HTML-tagi?

Sisäisillä tyylillä CSS stylelisätään avaavan HTML-tagin määritteeseen.

Esimerkkejä HTML-tunnisteista ovat:

  • ...
  • ...

  • ...

Tunnisteiden avaaminen ja sulkeminen ovat usein osa HTML-elementtiä, joka voi sisältää tekstiä, tietoja, kuvaa tai ei mitään.

Tässä meillä on osa tekstiä.

This is my first paragraph.

Voimme käyttää sisäisiä tyylejä tämän elementin muotoiluun lisäämällä tyylimääritteen avaavaan tagiin ja sen jälkeen CSS-ominaisuus-arvo-parit.

This is my first paragraph.

This is my second paragraph.

Käydään läpi miten käytimme upotettuja tyylejä.

Kuinka käyttää sisäisiä tyylejä

Lisäätyyli-attribuutti tyylille, jonka haluat tyylittää, ja sen jälkeen yhtäläisyysmerkki. Aloita ja lopeta CSS lainausmerkeillä.

Lisää ominaisuus-arvo-parit tyylimääritteeseen. Lisää puolipiste jokaisen ominaisuus-arvo-parin jälkeen.

color: red; font-size: 20px; 

Joten kun koomme kaiken yhteen, se näyttää tältä:

This is my first paragraph.

Avainkohdat

Toisin kuin sisäiset ja ulkoiset tyylitaulukot, upotetut tyylit eivät sisällä kiharaisia ​​aaltosulkeita tai rivinvaihtoja. Eli kirjoita CSS kaikki samalla rivillä, kun käytät sisäisiä tyylejä.

Pidä myös mielessä, että rivinsisäistyylejä ainoastaan vaikuttaa toimenpiteen elementti että lisäät tyyliattribuutin CSS omaisuus-arvon paria.

Esimerkiksi alla olevassa koodissa vain ensimmäinen kappale on tyyliltään punainen ja kirjasinkoko on 20 kuvapistettä.

This is my first paragraph.

This is my second paragraph.

Jos haluamme muotoilla molempien kappaleiden tekstin upotetuilla tyyleillä, meidän on lisättävä CSS tyylin attribuuttiin toiseen

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.