Acum este dificil să ne imaginăm schimbarea aspectului și formatării documentelor HTML fără a folosi foile de stil CSS, deoarece HTML a încetat de mult să mai fie un limbaj autonom pentru design și a început să-și îndeplinească funcțiile originale de structurare și marcare a documentelor web. În acest articol, vom detalia diferitele moduri în care puteți încorpora CSS într-un document HTML.

Pe scurt despre CSS și HTML

Anterior, paginile web erau concepute exclusiv folosind HTML. În zilele noastre această abordare nu este practicată, iar instrumentele CSS sunt folosite pentru styling, care au posibilități foarte largi de a crea design-uri uimitoare.

Pentru ca designul site-ului să fie afișat corect, trebuie să conectați CSS la documentul HTML, aceste instrumente funcționează inseparabil unul de celălalt - HTML creează structura, iar foile de stil sunt responsabile de aspect.

Există mai multe moduri de bază în care puteți personaliza afișarea stilurilor în codul HTML, fiecare cu propriile sale avantaje și dezavantaje.

Conectarea fișierului CSS

Aceasta este metoda principală considerată de dezvoltatori drept cea mai practică și convenabilă.

Folosind această metodă, puteți schimba rapid designul unei pagini web dacă există o anumită structură a documentului HTML - de exemplu, pentru același site puteți scrie mai multe opțiuni de design și le puteți conecta în funcție de nevoia corespunzătoare.

Pentru a include un fișier cu stiluri, trebuie mai întâi să configurați structura fișierului - acest lucru se face astfel încât să puteți scrie calea corectă către documentul dorit direct în cod.

Creați un director în care va fi localizat documentul HTML principal, în același folder creați un fișier numit stil într-un editor de text și salvați-l în rezoluție .css. Acesta va conține cod CSS cu toate regulile de stil pentru documente specificate.

Conexiunea CSS se face folosind o etichetă HTML cu atributul href. Arata cam asa:

Aici codul se află în ceea ce este considerat optim, dar nu obligatoriu. Poate fi localizat oriunde în document.

Această metodă este convenabilă deoarece toate modificările aduse foii de stil sunt făcute într-un fișier separat, ceea ce face codul mai ușor de înțeles și de citit și face documentul mai ordonat.

Dacă faceți modificări la style.css și deschideți index.html în browser, veți putea vedea toate modificările care au fost introduse.

În același mod, puteți seta nu numai calea către fișier în structura site-ului, ci și un link către pagina cu stilul aflat pe Internet. În acest caz, se încadrează și între ghilimele după atributul href.

Metoda includerii unei foi de stil dintr-un fișier separat optimizează performanța site-ului, deoarece permite browserului să încarce date din cache, ca urmare a căror pagini se încarcă mai repede.

Foi de stil în interiorul unui document HTML

Uneori, valoarea unui parametru de stil este setată direct în corpul documentului HTML folosind atributul style.

Sintaxă:

Textul din acest paragraf este roșu

Dezavantajul evident este lipsa de universalitate, va trebui să specificați o valoare pentru fiecare etichetă.

De asemenea, conectarea folosind foi de stil interne nu permite browserului să memoreze informații în cache, spre deosebire de metoda anterioară.

Stilul global

Dacă trebuie să stilați un anumit element într-un document HTML, utilizați eticheta

Stilul specificat va fi aplicat etichetei

, de îndată ce este înregistrat pe pagină.

Includerea CSS în acest fel va fi citită cu o prioritate mai mare de către browser decât foaia de stil externă.

Cum să adăugați un font pe un site web

Fontul este unul dintre principalele elemente de design ale oricărei pagini web. Impresia pe care o face un site web asupra unui utilizator depinde direct de fontul folosit. Din fericire, nu trebuie să vă limitați la căști standard, puteți conecta orice altele - vă vom spune cum se face acest lucru.

Folosind CSS, fonturile sunt conectate după cum urmează:

• Găsiți și descărcați un set cu cască potrivit.
• Deschideți fișierul CSS și scrieți următorul cod în el:

@font-face (familie de fonturi: "Open Sans"; src: url("../fonts/OpenSans.ttf") format ("truetype"); stil font: normal; greutate font: normal; )

Mai întâi, este specificat numele fontului, apoi calea către acesta și, în final, parametrii. Vă rugăm să rețineți că, în acest exemplu, fișierul cu fonturi se află în folderul fonturi, care, la rândul său, se află în directorul rădăcină. Pentru comoditate, este mai bine să creați foldere separate pentru diferite fișiere și elemente (imagini, scripturi, foi de stil etc.).

Deci, în folderul fonturi avem un fișier numit OpenSans.ttf, cu parametrii obișnuiți. Acum va fi afișat în browser.

Conectarea fontului prin Google Fonts

Una dintre cele mai comune moduri de a include fonturi în CSS și HTML este serviciul Fonturi Google.

Interfața este intuitivă - trebuie să găsiți un font potrivit după nume sau parametri specificați, faceți clic pe butonul Selectați acest font, iar serviciul generează instantaneu un cod care este inserat în câmpul de etichetă. Document HTML, precum și fișierul CSS corespunzător cu stiluri.

Cum ar trebui să arate în HTML:

Și în fișierul CSS cu stiluri:

Familia de fonturi: „Open Sans”, sans-serif;

Această metodă este convenabilă deoarece vă permite să găsiți rapid fontul dorit dintr-o bază de date foarte mare și economisește mult timp, precum și elimină problemele care apar din cauza afișării incorecte a fonturilor în unele browsere.

Să rezumam

Deci, ne-am uitat la principalele modalități de a conecta stilurile CSS la documentele HTML. Pe baza sarcinilor stabilite înaintea dezvoltatorului în fiecare caz specific, puteți alege opțiunea cu cea mai mare prioritate.

Proiectarea paginilor web este un proces creativ care necesită, totuși, o abordare atentă. Profită de posibilitatea de a comenta codul și nu uita de optimizarea site-ului.

Bună ziua, dragii mei cititori ai blogului. Articolul de astăzi va vorbi despre metode sau modalități de a include o foaie de stil CSS. Îți spun cum poți conectați CSS la site-ul html patru moduri. Aceste patru metode de conectare vă vor fi utile în viitor, deoarece există momente când trebuie să utilizați toate aceste metode de conectare pe un site. Pentru cei care nu știu ce sunt foile de stil CSS, .

Să începem...

Foi de stil aferente.

Metoda de conectare CSS - Nr. 1

Metoda nr. 1 este cea mai convenabilă modalitate de a defini stilurile pentru un site. Toate stilurile pentru site sunt stocate într-un singur fișier separat și sunt folosite pentru orice pagină web. Pentru a conecta sau lega un tabel CSS la o pagină html, utilizați eticheta LINK din titlul paginii.

Titlu

Avantajele acestei metode:

1. Folosiți un fișier de stil CSS pentru toate paginile web ale site-ului web;

2. Puteți schimba aspectul site-ului prin foaia de stil fără a edita pagini web;

3. Când schimbați stilul într-un fișier style.css, stilul este aplicat automat tuturor paginilor în care există o conexiune în fișierul CSS. Este foarte confortabil;

4. Atunci când un site web este încărcat prima dată, fișierul în stil CSS este stocat în cache pe computerul local al utilizatorului, separat de paginile web, din acest motiv site-ul se încarcă mult mai repede.

Foi de stil globale.

Metoda de conectare CSS - Nr. 2

Metoda nr. 2 nu este la fel de eficientă și convenabilă ca metoda nr. 1, dar există momente când această metodă de conectare a CSS este necesară.
Acest stil este conectat și scris în documentul în sine și este plasat în antetul paginii web între etichete . Conectați eticheta de stil

Titlu

În acest exemplu am arătat schimbarea stilului antetului

. Acum, pe această pagină web, trebuie doar să specificați eticheta

iar stilurile vor fi adăugate automat.

Stiluri interne.

Metoda de conectare CSS - nr. 3

Metoda nr. 3 este folosită în cazuri rare. Un stil inline este folosit pentru a schimba o singură etichetă pe o pagină web. Pentru a conecta un stil, utilizați parametrul stil.

Exemplu de conectare a unui tabel CSS:

Titlu

Metodă combinată de conectare a stilurilor.

Metoda de conectare CSS - nr. 4

Această metodă folosește mai multe stiluri simultan, pe care le-am folosit mai sus (metoda nr. 1 - nr. 3).

Exemplu de conectare a unui tabel CSS:

Titlu

Titlu

Drept urmare, urmând exemplul, vom obține primul titlu în roșu cu dimensiunea de 50 de pixeli, iar următorul în verde și cu dimensiunea de 90 pixeli.

Repet că toate metodele descrise de utilizare a CSS pot fi utilizate independent sau pot fi combinate între ele. Acest lucru poate fi văzut în metoda nr. 4.

Bună ziua! În acest articol, voi arăta diferite metode pentru includerea CSS în HTML. De asemenea, voi explica diferitele subtilități și nuanțe ale diferitelor moduri de a conecta stiluri.

Conexiune internă

O foaie de stil internă este un set de stiluri, o parte a codului unei pagini web care ar trebui să apară întotdeauna între etichetele de deschidere și de închidere Cod HTML în corpul unei etichete de pagină web. Exemplu:

Text galben cu font Verdana

, se aplică întregului conținut al documentului HTML. Pot exista oricâte dintre ele doriți, chiar și toate stilurile pentru întregul site. Dar acest lucru este puțin greșit. Voi vorbi despre asta puțin mai târziu când mă voi uita la foile de stil externe.

Uneori trebuie scrieți stiluri CSS în codul HTML.

De exemplu, când plasați un fel de banner publicitar pe site-ul dvs., introduceți codul acestui banner în codul paginii.

Pentru ca acest banner să fie afișat corect (pentru a nu depăși limitele alocate acestuia, poate că are nevoie de un cadru etc.), uneori trebuie să-i atașați mai multe instrucțiuni CSS.

Dar nu are rost să facem modificări la foaia de stil generală. Bannerul este un fenomen temporar. Azi una, mâine alta. Prin urmare, este mai ușor să scrieți stiluri pentru acesta direct în codul acestui banner.

Adică, trebuie să conectăm stilurile CSS doar la un anumit element de pagină. Acest lucru se face foarte simplu - folosind atributul style.

Stilurile scrise în acest fel afectează doar elementul în a cărui etichetă sunt plasate. În acest caz, numai pentru acest paragraf (tag

). Și nici alta!

2. Foi de stil externe.

Numele foi de stil CSS externe înseamnă că acestea sunt scrise nu în corpul documentului HTML, ci într-un fișier special separat. Aceste fișiere au extensia .css

Deci, așa cum am promis, vă voi spune de ce este mai bine să folosiți foi de stil externe.

Faptul este că acest lucru permite paginilor site-ului tău să se încarce puțin mai repede. Poate pentru o fracțiune de secundă, dar mai repede. Acest reduce sarcina pe site-ul dvsși mai convenabil pentru vizitatorii dvs. - aceștia trebuie să aștepte mai puțin ca paginile să se încarce.

De ce se întâmplă asta.

Dacă stilurile CSS pentru site-ul dvs. sunt într-un fișier separat, atunci browserul utilizatorului nu trebuie să încarce aceste stiluri de fiecare dată când este încărcată o pagină nouă. Le descarcă o dată, le plasează în cache (o zonă de memorie pe computerul vizitatorului), iar când se încarcă pagina următoare, preia stilurile de acolo.

Există două moduri de a atașa fișiere de foaie de stil CSS la o pagină web.

Prima metodă, cea mai comună, este folosirea etichetei cu atribute: rel = "stylesheet" type = "text/css" href = "style file.css" în interiorul codului antetului paginii (etichetă ).

De exemplu:

1 2 3 4

<cap> ..... <link rel = "stylesheet" type = "text/css" href = "style.css" > </cap>

Acest exemplu atașează paginii stiluri CSS scrise în fișierul style.css. Ele sunt valabile pe tot parcursul documentului.

Există o altă cale atașați foi de stil externe la HTML document. Aceasta folosește directiva @import. Vă permite să importați conținutul unui fișier CSS în foaia de stil curentă.

Îl puteți folosi atât pentru a adăuga unele foi de stil altora, cât și pentru a atașa un fișier de foaie de stil la un document HTML. Pentru a face acest lucru, trebuie să îl scrieți în interiorul etichetei

Stiluri

Rezultatul în acest caz va fi absolut același ca în cazul precedent.

Adesea element stil definit în interiorul elementului cap, cu toate acestea, poate fi folosit și în alte părți ale documentului HTML. Element stil conţine seturi de stiluri. Pentru fiecare stil, este indicat mai întâi un selector, după care aceleași definiții ale proprietăților css și valorile lor care au fost folosite în exemplul anterior apar între acolade.

A doua metodă face codul HTML mai curat prin plasarea stilurilor în elementul de stil. Dar există și o a treia modalitate, care este transferul stilurilor într-un fișier extern.

Să creăm un fișier text în același folder cu pagina html, pe care îl vom redenumi în styles.css și definim următorul conținut în el:

H2(culoare:albastru; ) div( lățime: 100px; înălțime: 100px; culoare de fundal: roșu; )

Acestea sunt aceleași stiluri care au fost în interiorul elementului de stil. Și, de asemenea, modificați codul paginii html:

Stiluri

Nu mai există un element aici stil, dar există un element legătură, care include fișierul creat mai sus styles.css:

Astfel, prin definirea stilurilor într-un fișier extern, facem codul html mai curat, separând structura paginii de stilul acesteia. Atunci când sunt definite în acest fel, stilurile sunt mult mai ușor de modificat decât dacă ar fi definite în cadrul elementelor sau într-un element stil, iar această metodă este preferată în HTML5.

Utilizarea stilurilor în fișiere externe vă permite să reduceți încărcarea pe serverul web folosind un mecanism de stocare în cache. Deoarece browserul web poate stoca în cache fișierul CSS și data viitoare când pagina web este accesată, poate prelua fișierul CSS dorit din cache.

De asemenea, este posibil ca toate aceste abordări să fie combinate, iar pentru un element unele proprietăți css sunt definite în interiorul elementului în sine, alte proprietăți css sunt definite în interiorul elementului de stil, iar altele sunt într-un fișier extern inclus. De exemplu:

Și în fișierul style.css este definit următorul stil:

Div( lățime: 50px; înălțime: 50px; culoarea fundal: roșu; )

În acest caz, elementul div are o proprietate width definită în trei locuri, cu valori diferite. Ce valoare i se va aplica elementului în final? Aici avem următorul sistem de priorități:

• Dacă un element are stiluri încorporate (stiluri inline), atunci acestea au cea mai mare prioritate, adică în exemplul de mai sus, lățimea finală va fi de 120 de pixeli
• Urmează, în ordinea priorității, stilurile care sunt definite în elementul de stil
• Stilurile cu cea mai mică prioritate sunt cele definite într-un fișier extern.

Atribute HTML și stiluri CSS

Multe elemente html vă permit să setați stiluri de afișare folosind atribute. De exemplu, pentru un număr de elemente, putem folosi atributele lățime și înălțime pentru a seta lățimea și, respectiv, înălțimea elementului. Cu toate acestea, această abordare ar trebui evitată și stilurile CSS ar trebui folosite în locul atributelor inline. Este important să înțelegeți clar că marcajul HTML ar trebui să ofere doar structura documentului HTML, iar întregul său aspect și stil ar trebui să fie determinate de stilurile CSS.

Validarea codului CSS

În procesul de scriere a stilurilor CSS, pot apărea întrebări dacă este corect să definiți stilurile în acest fel și dacă acestea sunt corecte. Și în acest caz putem folosi validatorul css, care este disponibil la http://jigsaw.w3.org/css-validator/.
Iată un tutorial video despre cum să conectați CSS la HTML