CSS sau foi de stil cascadă, sunt cele folosite în designul modern al site-ului pentru a aplica aspectul vizual unei pagini. În timp ce HTML creează structura paginii și Javascript se poate ocupa de comportamente, aspectul și simțul unui site web este domeniul CSS. Când vine vorba de aceste stiluri, ele sunt cele mai des aplicate folosind foi de stil externe, dar puteți aplica și stilurile CSS unui singur element specific, folosind ceea ce se numește "stiluri inline".
Stilurile inline sunt stiluri CSS care sunt aplicate direct în HTML-ul paginii. Există atât avantaje, cât și dezavantaje ale acestei abordări. În primul rând, să vedem exact cum sunt scrise aceste stiluri.
Cum să scrieți un stil inline
Pentru a crea un stil CSS inline, începeți să scrieți proprietatea stilului similar cu modul în care ați fi într-o foaie de stil, dar trebuie să fie o singură linie. Separați mai multe proprietăți cu un punct și virgulă, la fel ca într-o foaie de stil.
fundal: #ccc; Culoare: #fff; frontieră: solid negru 1px;
Plasați această linie de stiluri în interiorul atributului de stil al elementului pe care doriți să îl creați. De exemplu, dacă doriți să aplicați acest stil unui paragraf din codul HTML, acel element ar arăta astfel:
În acest exemplu, acest paragraf va apărea cu un fond gri deschis (ceea ce ar face #ccc), textul negru (din culoarea # 000) și un margine neagră solidă de 1 pixel în jurul tuturor celor patru laturi ale paragrafului .
Avantajele stilurilor inline
Datorită cascadei stilului cascadă, stilurile inline au cea mai mare prioritate sau specificitate într-un document. Aceasta înseamnă că vor fi aplicate indiferent ce altceva este dictat în foaia dvs. de stil externă (cu excepția fiecărui tip de stiluri care are o declarație importantă, dar aceasta nu este ceva ce ar trebui făcut în site-urile de producție dacă pot fi evitate).
Singurele stiluri care au o prioritate mai mare decât stilurile inline sunt stilurile utilizatorilor aplicate de cititorii înșiși. Dacă întâmpinați dificultăți în aplicarea modificărilor, puteți încerca să setați un stil inline pe element. Dacă stilurile încă nu se afișează utilizând un stil inline, știți că mai are loc și altceva.
Stilurile inline sunt ușor de adăugat și nu trebuie să vă faceți griji cu privire la scrierea selectorului CSS corespunzător deoarece adăugați stilurile direct la elementul pe care doriți să-l modificați (acel element înlocuiește în esență selectorul pe care l-ați scrie într-o foaie de stil externă ). Nu aveți nevoie să creați un document complet nou (ca în cazul foilor de stil externe) sau să editați un element nou în capul documentului dvs. (ca în cazul foilor de stil interne). Doar adăugați atributul de stil care este valabil pentru aproape fiecare element HTML. Acestea sunt toate motivele pentru care ați putea fi tentați să utilizați stiluri inline, dar trebuie să fiți conștienți de unele dezavantaje foarte importante pentru această abordare.
Dezavantaje ale stilurilor inline
Deoarece stilurile inline sunt cele mai specifice în cascadă, ele pot depăși lucrurile pe care nu le-ați propus. De asemenea, ei negau unul dintre cele mai puternice aspecte ale CSS - abilitatea de a modela multe și o mulțime de pagini web dintr-un fișier central CSS pentru a face modificările viitoare și schimbările de stil mult mai ușor de gestionat.
Dacă ar fi trebuit să utilizați numai stiluri inline, documentele dvs. ar deveni rapid umflate și foarte greu de întreținut. Acest lucru se datorează faptului că stilurile inline trebuie să fie aplicate fiecărui element pe care doriți să îl utilizați. Deci, dacă doriți ca toate paragrafele dvs. să aibă familia de fonturi "Arial", trebuie să adăugați un stil inline fiecărei
etichete din document. Acest lucru adaugă atât lucrările de întreținere pentru proiectant, cât și timpul de descărcare pentru cititor, deoarece ar trebui să modificați acest lucru în fiecare pagină a site-ului dvs. pentru a schimba acea familie de fonturi. În mod alternativ, dacă utilizați o foaie de stil separată, este posibil să o puteți schimba într-un singur loc și să primiți fiecare pagină acelei actualizări.
Adevărat, acesta este un pas înapoi în designul web - înapoi în zilele etichetei !
Un alt dezavantaj al stilurilor inline este faptul că este imposibil să se modeleze pseudo-elementele și clasele cu ele. De exemplu, cu foi de stil externe , puteți personaliza culoarea vizitată, hover, activă și link-ul unei etichete de ancorare, dar cu un stil inline, tot ce puteți face este legătura în sine, deoarece atributul de stil este atașat .
În cele din urmă, vă recomandăm să nu utilizați stiluri inline pentru paginile dvs. web, deoarece acestea cauzează probleme și fac paginile mult mai mult de întreținut. Singura dată în care le folosim este când vrem să verificăm rapid un stil în timpul dezvoltării. Odată ce am căutat corect pentru acel element, îl mutăm în foaia de stil externă.
Articol orginal de Jennifer Krynin. Editat de Jeremy Girard.