Ce este fișierele HTML?
Foaia de stil în cascadă HTML este o foaie cu un set de reguli și proprietăți care indică browserului modul de redare HTML folosind toate stilurile specificate.
CSS este modul în care stilăm orice pagină web. CSS are toate proprietățile, cum ar fi fundal, culori, fonturi, spațiere, borduri, etc. pe care le putem defini pentru fiecare element din pagini.
Foile de stil HTML sunt de asemenea utilizate pentru a seta aspectul paginii, precum locul în care trebuie să fie amplasate antetul, subsolurile sau orice alte elemente pe pagină. CSS se vorbește întotdeauna împreună cu HTML, deoarece paginile fără niciun stil sunt foarte palide, fără a evidenția niciun titlu etc. și aceeași dimensiune a fontului pe toată pagina, ceea ce nu oferă un aspect bun tuturor utilizatorilor.
Cum să folosești fișiere de stil HTML?
În trecut, stiluri, scripturi, HTML totul era scris peste tot pe aceeași pagină. Acest lucru a făcut ca paginile să fie extrem de lungi și extrem de dificil de citit și de editat. Apoi a venit modalitatea de a separa HTML, stiluri și Javascript.
Moduri de a include fișiere de stil HTML pe o pagină Web:
Există 3 moduri în care putem include stilurile:
-
Styling în linie
Acesta este un mod de a scrie stiluri pentru fiecare element din HTML în sine în interiorul unui atribut numit stil.
Acest mod de stilizare nu este deloc recomandat, deoarece HTML pare înghesuit și nu putem urmări abordarea „Scrieți o dată, folosiți în multe locuri”
Eg: Hello World!
-
Styling intern
Aceasta include stiluri incluse într-o etichetă de stil și plasarea acesteia într-o pagină web deasupra HTMLului. Acest mod de styling este încă mai bun decât stilul inline, întrucât putem avea stiluri comune asamblate împreună în cazul în care trebuie să fie utilizat pentru mai multe elemente simultan.
În faza de dezvoltare, este mai ușor să editați fișierul HTML și nu trebuie să deschidem de fiecare dată fișierul CSS corespunzător și să îl edităm de fiecare dată.
Eg:
container-block(
font-size: 10px;
margin-top: 10px;
)
Hello World!
-
Styling extern
Acesta este cel mai comun și cel mai bun mod de a avea stiluri pentru o pagină web. Acest lucru este similar cu stilul intern, dar diferența este că stilurile sunt scrise într-un fișier separat cu extensia .css, iar referința la acesta este plasată în eticheta principală a paginii web.
Sintaxa pentru conectarea fișierului CSS pe pagina web este:
Stilurile ar trebui să fie incluse în eticheta de cap care este deasupra etichetei corpului (adică conținut real) de HTML
Care este prioritatea dintre linia interioară, cea internă, cea exterioară?
Stilurile în linie au mai multă prioritate decât cele interne, iar ultima prioritate vine pentru stilul extern.
Inline> Intern> Extern
Cele mai bune practici în timp ce utilizați CSS:
- CSS poate fi separat într-un număr de fișiere în loc de unul singur.
- Fișierele CSS separate pot fi incluse una câte una într-o etichetă cap folosind etichete de legătură.
- Sau un fișier CSS poate avea mai multe declarații de import pentru a importa restul fișierelor CSS. Acest lucru va separa logic CSS, dar în final, toate stilurile sunt redate din același fișier.
Utilizare: @import './process.css';
- Stilurile pot fi definite pentru orice elemente ale paginii web cu selectori ca etichetă HTML în sine, nume de clasă, ID-uri, orice nume de atribut.
- Există câteva pseudo selectoare disponibile precum:
- inainte de
- după
- nth-copil
- primul copil
- ultimul copil
- planare
- vizitat
Acestea sunt practic stările elementelor selectate și nu chiar elementele exacte.
- Când fișierele CSS înmulțite sunt incluse în pagină, ultimul are cea mai mare prioritate și înlocuiește stilurile existente de fișiere anterioare având același selector.
- Fișele de stil ar trebui utilizate înainte de HTML în sine, astfel încât stilurile să fie aplicate în timp ce pagina se încarcă. Dacă este inclus la final, HTML se va încărca mai întâi și apoi se aplică încet stilurile, ceea ce oferă o experiență foarte proastă utilizatorului.
Funcții diverse ale foilor de stil în cascadă HTML:
- CSS oferă animații : anterior, javascript a fost folosit doar pentru animații. Însă cel mai recent CSS, adică CSS3 oferă animații folosind proprietățile în sine.
- Prefixuri furnizor: Înainte ca browserele să elibereze numele standard de versiune / proprietate pentru orice caracteristici noi, browserele ne furnizează unele prefixuri ale furnizorului pentru o perioadă de timp pentru o anumită perioadă de timp, ca experiment. Dezvoltatorii trebuie să aștepte până când browserul lansează versiunile sale standard, iar între timp, funcțiile experimentale pot fi utilizate cu prefixurile furnizorului.
- Transformări CSS: tranziția este folosită pentru a trece progresiv la o valoare de la o altă proprietate într-o anumită durată.
Eg: -webkit-transition: width 2s, height 4s;
- Transformări CSS: Transformările în CSS vă permit să traduceți, să rotiți, să scalați și să înclinați elemente.
Interogări media:
Mobile, desktopuri, iPad-uri se comportă diferit, cu toate acestea, nu putem stilul paginilor în același mod. Standardele web anterioare au conceput astfel încât am avut CSS diferite pentru fiecare tip de dispozitiv.
Odată cu progresul standardelor web și modul în care este construit web, browserele sunt dezvoltate pentru a avea un singur CSS care poate fi utilizat pentru orice tip de dispozitiv. Pentru a schimba stilurile pentru dispozitive bazate pe lățime și înălțime, se folosesc interogări media cu care, putem specifica lățimea mină sau maximă a dispozitivului și stiluri de scriere în cadrul acestuia.
Eg: @media screen and (max-width: 767px)(
container(
width: 60%;
padding: 20px;
)
)
Stilurile sunt cu siguranță o binefacere pentru web. Și cum dezvoltarea web a crescut exponențial în ultimele timpuri, CSS3 a câștigat cu siguranță multă cerere pentru a face paginile extrem de interactive și intuitive.
Articole recomandate
Acesta a fost un ghid pentru foile de stil HTML. Aici vom discuta despre cum să folosești foi de stil HTML, diverse funcții și modalități de a include CSS pe o pagină web. De asemenea, puteți consulta următoarele articole pentru a afla mai multe -
- Introducere în CSS
- Avantajele CSS în Web Design
- Ce este CSS? | Cum se folosește?
- Este cazul CSS sensibil?
- Diverse stiluri de listă HTML