Ați scris ceva HTML și acum trebuie să-l coafați cu CSS. O modalitate este de a folosi stiluri în linie, despre care este vorba în acest articol.

<p style="color: red; font-size: 20px;">This is my first paragraph.</p>

Înainte de a ne arunca în nuanțele stilurilor în linie – când, de ce și cum să le folosim – este important să fiți conștienți de celelalte moduri de a vă stiliza codul HTML. În acest fel, alegeți cea mai bună opțiune pentru codul dvs.

Iată un rezumat al opțiunilor dvs.

Foaie de stil externă

Dezvoltatorii își păstrează de obicei toate CSS-urile într-o foaie de stil externă. În fișierul dvs. HTML, utilizați fișierul <link> element pentru a vă conecta la foaia de stil externă, care conține CSS.

<head>
    <link rel="stylesheet" href="./index.css">
</head>

În interiorul fișierului, index.css, avem regulile noastre CSS.

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

Foaie de stil internă

O altă opțiune pentru stilizarea CSS este utilizarea unei foi de stil interne. Aceasta înseamnă definirea regulilor dvs. CSS în cadrul <style> element din fișierul dvs. HTML.

<head>  
   <style>
       p {
           color: red;
           font-size: 20px;
       }
   </style>
 </head>

Stiluri în linie

Mai rar, veți găsi căutarea stilurilor în linie. Dar sunt încă importante de știut, deoarece există anumite ocazii când le sunt utile.

Cu stilurile în linie, veți adăuga stilul atribuie unei etichete HTML urmată de CSS pentru a stiliza un element.

<p style="color: red; font-size: 20px;">This is my first paragraph.</p>
<p>This is my second paragraph.</p>

Deci, în cazul nostru, textul primului paragraf este roșu, cu o dimensiune a fontului de 20 px. Al doilea, însă, rămâne neschimbat.

Să aruncăm o privire mai atentă asupra modului și momentului de utilizare a stilurilor în linie. De asemenea, vom descoperi de ce este stilat doar unul dintre paragrafele noastre.

Ce este o etichetă HTML?

Cu stilurile în linie, aplicați CSS pentru style atribut în eticheta HTML de deschidere.

Exemple de etichete HTML includ:

Deschiderea și închiderea etichetelor fac adesea parte din HTML element, care poate conține text, date, o imagine sau nimic.

Aici avem un element de text.

<p>This is my first paragraph.</p>

Putem folosi stiluri inline pentru a stiliza acest element adăugând atributul style la eticheta de deschidere, urmat de perechi proprietate-valoare CSS.

<body>
   <p style="color: red; font-size: 20px;">This is my first paragraph.</p>
   <p>This is my second paragraph.</p>
</body>

Să parcurgem modul în care am folosit stilurile inline.

Cum se utilizează stilurile în linie

Adaugă atribut stil etichetei pe care doriți să o stilizați, urmată de un semn egal. Porniți și terminați CSS cu ghilimele duble.

<p style="....">

Adăugați perechi proprietate-valoare atributului de stil. Adăugați un punct și virgulă după fiecare pereche proprietate-valoare.

color: red; font-size: 20px;

Deci, atunci când punem totul împreună, arată astfel:

<p style="color: red; font-size: 20px;">This is my first paragraph.</p>

Puncte cheie de știut

Spre deosebire de foile de stil interne și externe, stilurile în linie nu conțin acolade sau linii. Adică, scrieți CSS toate pe aceeași linie atunci când utilizați stiluri inline.

De asemenea, rețineți că stilurile în linie numai afectează elementul specific la care adăugați atributul de stil cu perechi proprietate-valoare CSS.

De exemplu, în codul de mai jos numai primul paragraf are un stil roșu cu o dimensiune a fontului de 20 px.

<body>
   <p style="color: red; font-size: 20px;">This is my first paragraph.</p>
   <p>This is my second paragraph.</p>
</body>

Dacă vrem să stilizăm textul ambii paragrafe cu stiluri inline, apoi trebuie să adăugăm CSS la atributul de stil al doilea <p> de asemenea.

<body>
  <p style="color: red; font-size: 20px;">This is my first paragraph.</p>
  <p style="color: red; font-size: 20px;">This is my second paragraph.</p>
</body>

Cu toate acestea, dacă am folosi o foaie de stil externă, de exemplu, am putea stiliza cu ușurință ambii paragrafele fără a dubla codul nostru folosind un singur selector CSS.

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

Acest lucru ne aduce la un subiect important: când să folosim și când să nu folosim stiluri inline.

Când se folosește (și când NU se folosește) Stiluri în linie

Spuneți că aveți un fișier HTML cu zece sau mai multe etichete de paragraf. Vă puteți imagina stilarea fiecăruia individual cu stiluri în linie?

Dacă faceți acest lucru, vă veți aglomera rapid codul, ceea ce va face dificilă citirea și întreținerea.

În plus, stilurile în linie pot introduce probleme de specificitate dacă utilizați și foi de stil interne sau externe.

Asta pentru că stilurile în linie au un specificitate mare. Aceasta înseamnă că vor înlocui majoritatea celorlalte reguli din foile de stil interne și externe, cu excepția !important declaraţie.

De exemplu, am adăugat stiluri inline la două elemente de paragraf. Am adăugat, de asemenea, o foaie de stil internă.

<html>
  <head>
      <title>My New Webpage</title>
      <style>
       p {
           color: pink;
       }
   </style>
  </head>
 
<body>
   <p style="color: blue;">A blue paragraph.</p>
   <p style="color: blue;">Another blue paragraph.</p>
</body>
</html>

CSS-ul din stilurile noastre inline suprascrie CSS în foaia de stil internă. Așa că ajungem cu două paragrafe albastre.

Foile de stil externe sunt, de asemenea, mult mai ușor de întreținut atunci când dvs. sau altcineva trebuie să faceți o modificare. Acest lucru se datorează faptului că un stil dintr-o foaie de stil externă sau internă se poate aplica mai multor elemente, în timp ce unul în linie trebuie aplicat fiecărui element în mod individual.

De exemplu, să presupunem că trebuie să actualizați un stil la zece elemente. Este mai ușor să faceți modificarea o dată într-o foaie de stil externă, în loc de zece ori diferite în fișierul HTML.

În general, este adesea cea mai bună practică să vă introduceți CSS într-un fișier separat. În acest fel, fișierul dvs. HTML conține structura și conținutul site-ului dvs. web, iar fișierul dvs. CSS conține stilurile dvs. Dacă faceți acest lucru, codul dvs. este mai ușor de citit și de gestionat.

Cu toate acestea, există momente în care poate avea sens să folosești stiluri în linie:

  • Adăugați un stil și vedeți modificarea rapid, pentru care poate fi util testarea.
  • Utilizați atributul de stil în JavaScript pentru a aplica stilul.

De cele mai multe ori veți dori să utilizați foi de stil externe. Dar, uneori, vă veți găsi folosind stiluri în linie, cel mai frecvent în situațiile de mai sus.

Scriu despre învățarea programării și despre cele mai bune modalități de a face acest lucru pe blogul meu de la amymhaddad.com.