Meniul
AcasăJocuri

Modalități de a conecta marcajul CSS la HTML. Ce este CSS, conectarea unui fișier CSS

Conectarea CSS apare în mai multe moduri, care sunt utilizate în funcție de situație. Acum ne vom uita la aceste metode mai detaliat. Vor fi destul de multe informații, așa că nici nu încercați să le memorați, dar asigurați-vă că încercați să vă dați seama ce este.

Da, și încă un punct despre care a fost deja atins în lecția anterioară, dar îl voi repeta din nou. Adesea, mulți începători se tem de expresia „Foaie de stil în cascadă” sau pur și simplu „fișe de stil”, așa că atunci când întâlnesc astfel de expresii în text, subconștient li se pare că nu înțeleg ceea ce se spune. Deci, de fapt, nu există tabele în forma cu care sunteți obișnuit - nu. Și aceste cuvinte descriu un singur lucru - tot ce se referă la CSS, adică diverse reguli, proprietăți, valori CSS și așa mai departe. În general, tot ceea ce vom studia în acest manual. Apropo, aceasta poate include și pur și simplu cuvintele „CSS” și „stiluri”.

Stiluri încorporate

Conectarea stilurilor încorporate (inline) implică aplicarea atributului de stil unei anumite etichete de pe pagină. În acest caz, valoarea atributului este una sau mai multe (separate prin punct și virgulă) cu valorile corespunzătoare. De regulă, această metodă este utilizată în cazurile în care este necesară modificarea caracteristicilor unui anumit element pe o anumită pagină.

Sintaxă generală

<тег style="свойство:значение; свойство:значение; ...">...

Un exemplu de conectare a stilurilor inline la CSS

Conectarea stilurilor încorporate

Paragraful 1

paragraful 2

Rezultat în browser

Paragraful 1

paragraful 2

Stiluri interne

Stilurile interne sunt indicate în antetul documentului și sunt conectate folosind eticheta. În acest caz, CSS-ul nu mai afectează un element, ci toate elementele specificate în stilurile care sunt prezente pe această pagină. De obicei, această metodă este utilizată atunci când este necesar să se schimbe stilurile mai multor elemente identice într-o pagină HTML.

Un exemplu de conectare a stilurilor interne la CSS

Conectarea stilurilor încorporate

Paragraful 1

paragraful 2

Rezultat în browser

Paragraful 1

paragraful 2

Stiluri externe

Stilurile externe sunt incluse într-un fișier separat folosind fișierul . În acest caz, toate stilurile sunt localizate într-un fișier text obișnuit cu extensia .css și afectează elementele tuturor paginilor la care este conectat acest fișier. De obicei, crearea stilurilor de site începe cu această metodă, deoarece numai cu ajutorul ei se simt toate avantajele CSS, deoarece prin modificarea datelor într-un singur fișier puteți controla afișarea unui număr mare de pagini deodată. Și deja în proces de lucru pe site, sunt adăugate stiluri interne sau încorporate, dacă este necesar.

Atunci când folosesc stiluri externe, autorii acționează în moduri complet diferite. Unele stochează toate stilurile de site într-un singur fișier, altele - în mai multe. De exemplu, un fișier conține stiluri pentru întregul site și este prezent pe toate paginile, altul este conectat suplimentar doar la anumite secțiuni, un al treilea - la anumite subsecțiuni etc. Ceea ce faci depinde de tine să decizi.

Exemplu de conectare a stilurilor externe la CSS

Conectarea stilurilor externe

Paragraful 1

paragraful 2

Conținutul fișierului style.css

Corp ( fundal: #ccccff; /* culoarea fundalului paginii */ ) p ( culoare: roșu; /* culoarea textului paragrafului */ familia de fonturi: Helvetica, sans-serif; /* font paragraf */ dimensiunea fontului: 150 % ; /* dimensiunea fontului */ text-align: center /* textul centrat */ border: 5px green double */ )

Rezultat în browser

Paragraful 1

paragraful 2

După cum puteți vedea, totul este foarte simplu. În general, după numele aproape tuturor proprietăților CSS puteți înțelege deja ce modificări fac, desigur, dacă știți măcar puțin engleză.

În majoritatea exemplelor în acest sens Tutorial CSS Voi folosi stiluri interioare, deoarece sunt cele mai vizuale pentru demonstrație. Pentru studii suplimentare, este mai bine să creați imediat un fișier cu stiluri externe și să vă obișnuiți să le utilizați. De exemplu, creați un subfolder style , creați un fișier style.css în el și conectați-l la pagina dvs. HTML.

Inclusiv CSS prin regula @import

O altă modalitate de a conecta stiluri situate în fișiere separate este să folosești regula . Această regulă este folosită pentru a combina mai multe foi de stil într-una singură, ceea ce uneori este destul de convenabil. Conexiunea are loc în foi de stil externe sau interne pentru aceasta, după numele regulii, se scrie construcția url(), unde adresa fișierului CSS este indicată între ghilimele (" "). Sau url() nu este scris deloc, dar imediat apar ghilimele și adresa fișierului. Sintaxa generală este următoarea.

Într-o foaie de stil externă

@import url ("adresa fisierului"); @import „adresa fișierului”; ...

În interior

Să ne uităm la utilizarea acestei reguli în foile de stil externe, pentru aceasta vă voi da două exemple pentru comparație.

Exemplul 1: conexiune normală a stilurilor externe

Stiluri externe

Conținutul paginii.

Exemplul 2: conectarea stilurilor externe împreună cu regula CSS @import

Stiluri externe cu @import

Conținutul paginii.

Conținutul fișierului style1.css

@import url("style/style2.css"); @import url("style/style3.css"); Mai jos aici, în plus, pot exista stiluri obișnuite cu proprietăți, valori etc.

A conduce funcționat corect, trebuie specificat chiar la începutul foii de stil. Singura excepție este regula de aici , care este întotdeauna pe primul loc, deși în practică este folosit extrem de rar.

Nu vă recomand să utilizați imediat toată această varietate de metode CSS - concentrați-vă pe foile de stil externe obișnuite, deoarece aceasta este opțiunea principală. Dacă vrei, poți, desigur, să experimentezi, dar nimic mai mult. În general, puteți decide oricând cum să conectați CSS, principalul lucru ar fi ce să vă conectați. :)

Stiluri personalizate

Multe browsere au capacitatea de a include un fișier cu CSS de către utilizatorii înșiși, astfel încât aceștia să poată schimba aspectul site-urilor pe care le vizualizează, așa cum spun ei, „pentru a se potrivi”. De exemplu, modificați dimensiunea fontului și fontul, culoarea textului și fundalul unor elemente etc. Desigur, în acest caz, stilurile sunt create chiar de utilizator. De exemplu, în Internet Explorer puteți activa stiluri personalizate accesând: Instrumente → Opțiuni Internet → General → Aspect.

Orice document HTML, indiferent câte elemente conține, va fi în esență „mort” fără utilizarea stilurilor. Stiluri sau mai bine foi de stil în cascadă(Foi de stil în cascadă) sau pur și simplu CSS determina prezentarea documentului, aspectul acestuia. Să aruncăm o privire rapidă asupra utilizării stilurilor în contextul HTML5.

Un stil în CSS este o regulă care spune browserului web cum să formateze un element. Formatarea poate include setarea culorii de fundal a elementului, setarea culorii și tipului fontului și așa mai departe.

O definiție de stil constă din două părți: un selector, care indică un element și un bloc de declarare a stilului, un set de comenzi care stabilesc reguli de formatare. De exemplu:

Div(culoare de fundal: roșu; lățime: 100 px; înălțime: 60 px; )

În acest caz, selectorul este div. Acest selector specifică faptul că acest stil va fi aplicat tuturor elementelor div.

După selector, există un bloc de declarare a stilului în acolade. Între acoladele de deschidere și de închidere sunt definite comenzi care indică modul de formatare a elementului.

Fiecare comandă constă dintr-o proprietate și o valoare. Deci, în următoarea expresie:

Culoare de fundal: roșu;

background-color reprezintă proprietatea, iar roșu reprezintă valoarea. Proprietatea definește un stil specific. Există multe proprietăți CSS. De exemplu, background-color specifică culoarea de fundal. După două puncte vine valoarea acestei proprietăți. De exemplu, comanda de mai sus setează proprietatea culoarea de fundal la roșu. Cu alte cuvinte, culoarea de fundal a elementului este setată la „roșu”, adică roșu.

După fiecare comandă există un punct și virgulă, care separă această comandă de altele.

Seturile de astfel de stiluri sunt adesea numite foi de stil sau CSS(Foi de stil în cascadă sau foi de stil în cascadă). Există diferite moduri de a defini stilurile.

atribut de stil

Prima modalitate este de a încorpora stilurile direct în element folosind atributul style:

Stiluri

Stiluri

Există două elemente definite aici - antet h2și blocați div. Titlul are o culoare de text albastră definită folosind proprietatea de culoare. La bloc div sunt definite proprietățile lățimii ( lăţime), înălțime ( înălţime), precum și culoarea de fundal ( culoare de fundal).

A doua modalitate este de a folosi elementul de stil din documentul html. Acest element îi spune browserului că datele din interior sunt cod css și nu html:

Stiluri</title&g <style> h2{ color:blue; } div{ width: 100px; height: 100px; background-color: red; } </style> </head> <body> <h2>Stiluri</h2> <div></div> </body> </html> </p><p>Rezultatul în acest caz va fi absolut același ca în cazul precedent.</p> <p>Adesea element <b>stil</b> definit în interiorul elementului <b>cap</b>, cu toate acestea, poate fi folosit și în alte părți ale documentului HTML. Element <b>stil</b> 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.</p> <p>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.</p> <p>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:</p><p>H2(culoare:albastru; ) div( lățime: 100px; înălțime: 100px; culoare de fundal: roșu; )</p><p>Acestea sunt aceleași stiluri care au fost în interiorul elementului de stil. Și, de asemenea, modificați codul paginii html:</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Stiluri

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) definite, 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

În acest capitol vom vorbi despre cum să implementăm CSS într-un document HTML, adică să legăm descrierea stilului unui element direct la elementul în sine, o etichetă HTML.

Această sarcină poate fi îndeplinită în trei moduri:

  • Scrieți o descriere a stilului direct în elementul în sine. Această metodă este bună numai dacă există un singur astfel de element în documentul HTML care necesită o descriere separată a stilului.
  • Scrieți o descriere de stil pentru toate elementele identice ale documentului HTML. Această metodă este justificată dacă stilul paginii este fundamental diferit de designul general al site-ului (un grup de pagini interconectate).
  • Extrageți descrierea stilului elementelor HTML într-un fișier CSS separat. Acest lucru vă va permite să gestionați designul întregului site, fiecare pagină a site-ului în care este indicată o referință la un fișier CSS. Această metodă este cea mai eficientă utilizare a unei foi de stil în cascadă.

Să aruncăm o privire mai atentă la fiecare opțiune și, în același timp, să ne familiarizăm cu regulile sintaxei de scriere CSS.

Atributul stilului.

Aproape fiecare etichetă HTML are un atribut stil, ceea ce indică faptul că acestei etichete i se aplică o anumită descriere a stilului.

Este scris astfel:

stil="">

Tot ce va fi scris între ghilimele de atribut stilși va fi o descriere de stil pentru acest element, în acest caz elementul

Ei bine, de exemplu:

style="color: #ff0000; font-size:12px"> acesta este un paragraf cu un stil personal

În acest caz, am precizat că acest paragraf ar trebui să fie afișat cu roșu și să aibă dimensiunea fontului de 12 pixeli. În capitolele următoare voi vorbi în detaliu despre ce este scris între ghilimele, dar acum vorbim despre cum să aplicăm CSS oricărei etichete HTML.

Folosind același principiu, puteți specifica un stil individual pentru aproape fiecare element HTML.




atribut de stil

style="background-color: #c5ffa0">

style="color: #0000ff; font-size:18px"> Totul despre elefanți



Cumpără un elefant


style="color: #ff0000; font-size:14px">


style="color: #0000ff; font-size:16px"> Închiriază un elefant


style="color: #ff0000; font-size:14px">




Dar încă o dată, această metodă de introducere a CSS este bună doar dacă trebuie să setați un anumit stil pentru un număr mic de elemente HTML.

Etichetă (a nu se confunda cu atributul cu acelasi nume) in care sunt descrise elementele de care avem nevoie.

Aruncă o privire la exemplu, vor fi comentarii mai jos.




Etichetă de stil



Totul despre elefanți


Pe acest site veți găsi orice informații despre elefanți.


Cumpără un elefant


Cu noi puteți achiziționa cei mai buni elefanți la prețuri competitive!!


Închiriază un elefant


Doar aici puteți închiria orice elefanți!!




După cum se poate vedea din exemplu, am obținut exact același rezultat ca în primul caz, doar că acum nu atribuim un stil fiecărui element individual, ci l-am plasat în „capul” documentului, indicând astfel că toate titlurile

,

- paragrafele vor fi albastre

- roșu. Imaginează-ți cât de ușoară ar fi munca noastră dacă ar exista o sută de astfel de paragrafe și aproximativ cincisprezece titluri pe o pagină, iar documentul în sine ar cântări mai puțin prin „eliminarea” tuturor descrierilor de stil repetate pentru fiecare element individual.

Acum comentariile promise:

Etichetă există o declarație directă a stilurilor anumitor elemente HTML conform următoarei sintaxe:

Dacă într-un bloc de declarație de stil sunt specificate mai multe proprietăți ale unui element, acestea sunt separate prin punct și virgulă.

CSS într-un fișier extern separat.

Cât timp durează până la scurt, ajungem la principalul, în opinia mea, avantajul CSS, și anume capacitatea de a pune toate informațiile legate de designul site-ului într-un fișier extern separat.

Deci, deschideți notepad (sau alt editor) și scrieți următorul text în el:

Corp (culoare de fundal: #c5ffa0)
a (culoare:#000060; greutatea fontului: bold;)
a:hover (culoare:#ff0000; font-weight: bold; text-decoration:none)
h1 (culoare: #0000ff; dimensiunea fontului: 18px)
h2 (culoare: #ff00ff; dimensiunea fontului: 16px)
p (culoare: #600000; dimensiunea fontului: 14px)

Voi încerca să explic în detaliu ce am scris despre acest lucru ciudat în capitolele următoare ale acestui manual.

Toate! Fișierul de descriere a stilului a fost creat! Acum nu mai rămâne decât puțin, și anume să forțăm paginile necesare ale site-ului nostru să extragă informații din acest fișier.

Acest lucru se face folosind eticheta (conexiune). Etichetă multifuncțional și servește la „legarea” unui document HTML cu fișiere externe suplimentare care asigură funcționarea sa corectă. Etichetă este un fel de link, destinat doar nu utilizatorilor, ci programelor browser (browsere). Deoarece transportă exclusiv informații de serviciu; se află în capul documentului HTML între etichete și nu este afișat pe ecran de browsere.

Etichetă are atribute:

href- Calea către fișier.
rel- Definește relația dintre documentul curent și fișierul la care se face referire.
  • pictogramă de comandă rapidă - Specifică faptul că fișierul inclus este un .
  • foaia de stil- Specifică faptul că fișierul inclus conține o foaie de stil.
  • application/rss+xml - Un fișier în format XML pentru a descrie fluxul de știri.
tip- tipul de date MIME al fișierului atașat.

Deoarece includem o foaie de stil în cascadă ca fișier extern, linkul nostru de serviciu ia următoarea formă:

Repet, pentru a risipi cu siguranță eventualele neînțelegeri. Atribut rel atribuie o valoare foaia de stil Deoarece conectăm o foaie de stil în cascadă ca fișier extern, indicăm calea către fișierul CSS (în acest exemplu fișierul se numește stilul meu.cssși se află lângă documentul HTML în care este scris acest link) indicăm, de asemenea, că acest fișier este text și conține o descriere a stilului tip="text/css"

Acum inserăm această linie în anteturile paginii site-ului nostru și ne bucurăm de rezultat.

fișierul mystyle.css
corp (culoare de fundal: #c5ffa0)
a (culoare:#000060; greutatea fontului: bold;)
a:hover (culoare:#ff0000; font-weight: bold; text-decoration:none)
h1 (culoare: #0000ff; dimensiunea fontului: 18px)
h2 (culoare: #ff00ff; dimensiunea fontului: 16px)
p (culoare: #600000; dimensiunea fontului: 14px)
Fișierul index.html



foaie de stil în cascadă



Meniul:


Totul despre elefanți.
Cumpără un elefant.
Închiriază un elefant.

Totul despre elefanți


Pe acest site veți găsi orice informații despre elefanți.




Fișierul elefant.html



foaie de stil în cascadă



Meniul:


Totul despre elefanți.
Cumpără un elefant.
Închiriază un elefant.

Cumpără un elefant


Cu noi puteți achiziționa cei mai buni elefanți la prețuri competitive!!




Fișierul elefant1.html



foaie de stil în cascadă



Meniul:


Totul despre elefanți.
Cumpără un elefant.
Închiriază un elefant.

Închiriază un elefant


Doar aici puteți închiria orice elefanți!!




În exemplul de mai sus, „site despre elefanți”, există în prezent trei pagini, fiecare dintre acestea fiind asociată cu un singur fișier CSS extern - mystyle.css. Astfel, l-am „descărcat” în mod semnificativ și am făcut ca designul întregului site să fie „compatibil cu dispozitivele mobile”. Imaginează-ți câți kilobytes am câștiga dacă acest site ar avea o sută de pagini cu drepturi depline!? Și, de asemenea, cât timp am economisi dacă ar fi nevoie să schimbăm ceva în designul său!?

În acest capitol, am analizat trei moduri de a încorpora CSS într-un document HTML. Care este mai bine de folosit?

  • Utilizați atributul stil pentru orice element, dacă acest element cu un stil diferit de alte elemente este singurul de pe întregul site.
  • Utilizați eticheta . Trebuie să adăugați o foaie de stil la fiecare pagină web. Dacă site-ul are un număr mare de pagini care necesită același design, atunci adăugarea și editarea stilurilor devine o muncă ingrată - procesul va dura foarte mult timp. Prin urmare, foile de stil interne sunt considerate incomode.

    Foile de stil externe sunt mult mai frecvente. Trebuie doar să conectați tabelul la toate paginile web necesare folosind eticheta cu atributul rel (definește relația dintre pagină și fișierul inclus) și valoarea foii de stil, ceea ce înseamnă că fișierul inclus conține o foaie de stil. Atributul href este calea (URL) către fișierul dvs. .css:

    Editând un singur fișier, puteți schimba simultan stilul întregului site, indiferent de câte pagini există. Acest lucru este foarte convenabil, mai ales pentru resurse mari.

    Lecție: crearea unei foi de stil

    Deoarece foile de stil externe sunt cele mai convenabile și utilizate pe scară largă în dezvoltarea designului, vom învăța cum să le creăm. Puteți descărca arhiva cu fișierele pentru această lecție de pe această pagină.

    În folder veți găsi un document HTML cu un exemplu de pagină simplă și o imagine (pentru a fi folosită în tutorial). Deschideți documentul HTML în browser. Veți vedea că pagina arată complet normal. Pentru a-i oferi un aspect mai atractiv, haideți să-l stilăm.

    Deocamdată, nu trebuie să aprofundați prea mult în ceea ce înseamnă orice bucată de cod. Acum trebuie să înțelegeți principiul de funcționare. Să începem.

    Conectarea CSS la HTML

    Pentru a începe, deschideți orice editor de text de pe computer (notepad-ul va funcționa) și creați un fișier gol numit style , salvându-l cu extensia .css (ar trebui să ajungeți cu un fișier style.css). Salvați fișierul în folderul în care se află documentul HTML descărcat.

    Deschideți documentul HTML într-un editor de text, precum și într-un browser (pentru a vedea cu ușurință modificările în aspectul paginii). Adăugați între etichete următorul cod:

    Rezumați pe scurt ceea ce tocmai ați făcut. Lipind acest cod într-un document HTML,:

    • a furnizat un link către un font numit Roboto Condensed, care va fi preluat de pe serverul Google (vă vom spune mai multe despre fonturile Google mai târziu);
    • a conectat foaia de stil externă style.css (gol deocamdată).

    Stilul de scriere CSS

    Salvați modificările aduse documentului HTML și accesați fișierul .css gol pe care l-ați creat. Să adăugăm ceva stil paginii:

    Html ( padding-top: 5px; background-image: url(background.jpg); )

    Salvați modificările. Felicitări, ați scris prima regulă - se referă la etichetă . Prima proprietate - padding-top - va adăuga o umplutură superioară de 5 pixeli între fereastra browserului și conținutul paginii web. Cu a doua proprietate, background-image , ați inclus o imagine pentru fundalul întregii pagini, specificând calea către fișierul grafic (situat în același folder cu documentul HTML).

    Actualizează pagina web deschisă în browser. Dacă totul este făcut corect, veți vedea că pe pagină a apărut un fundal, iar spațiul dintre partea de sus a ferestrei și text a crescut ușor.

    Corp ( lățime: 75%; umplutură: 40px; marjă: 15px automat; culoarea fundalului: #EBEBEB; raza chenarului: 30px; )

    Salvați modificările la fișier. Acum tu:

    • setați zona pentru conținutul etichetei , care este egal cu 75% din lățimea ferestrei browserului;
    • a furnizat o marjă de 40 de pixeli din toate părțile zonei de conținut;
    • a poziționat zona în centrul paginii și a făcut, de asemenea, o indentație în partea de sus și de jos de 15 pixeli;
    • setați culoarea de fundal #EBEBEB pentru zona de conținut;
    • a rotunjit colțurile zonei dreptunghiulare, specificând o rază de rotunjire de 30 de pixeli.

    Actualizați din nou documentul HTML. În același timp, asigurați-vă că memoria cache este dezactivată sau reîncărcați pagina cu toate fișierele asociate actualizate, folosind o combinație specială de taste (de exemplu, pentru Chrome aceasta este Ctrl+F5).

    Veți vedea că în centrul paginii a fost adăugată o zonă dreptunghiulară cu colțuri rotunjite. Acesta este rezultatul acțiunilor dvs. în fișierul CSS. De asemenea, puteți încerca să micșorați fereastra browserului și să admirați modul în care lățimea zonei dreptunghiulare se adaptează la dimensiunea acesteia. Acest lucru se datorează faptului că lățimea este specificată ca procent.

    Schimbarea fontului folosind CSS

    Este timpul să ne decoram textul. Adăugați acest cod în foaia de stil și salvați modificările:

    H1 (culoare: #E87E04; dimensiunea fontului: 2em; margin-left: 20px; font-family: „Roboto Condensed”, sans-serif; ) h2 (culoare: #E87E04; dimensiunea fontului: 1.7em; margin-left : 20px; familie de fonturi: „Roboto Condensed”, sans-serif; ", sans-serif; )

    După ce ați scris acest lucru, ați setat culorile fontului pentru etichetele h1 , h2 , p, ați indicat dimensiunile acestora, ați adăugat o marjă de la marginea din stânga de 20 de pixeli și, în plus, pentru

    Am indentat partea de sus cu 20 de pixeli și am stabilit înălțimea liniilor (spațierea dintre linii a textului) la 50% mai mare decât cea standard. În plus, ați conectat fontul Roboto Condensed la toate cele trei etichete (de aceea a trebuit să furnizați un link către el în fișierul HTML de la început).

    Reîmprospătați pagina în browser și admirați rezultatul. În acest tutorial vom încerca încă un lucru. Adăugați acest cod la CSS:

    Accentuare (greutatea fontului: bold; )

    Salvați și reîmprospătați pagina în browser. Veți vedea că în ultimul paragraf fontul a devenit aldine în unele părți ale textului. Pentru a înțelege ce s-a întâmplat, accesați fereastra editorului de text unde ați deschis fișierul HTML de la început. Uită-te la ultimul paragraf: o parte a propoziției este învelită într-o etichetă cu clasa de accentuare. În acest fel ați scris un stil pentru o singură linie de text dintr-un paragraf. Vom vorbi mai multe despre cursuri în capitolul următor.

    Ar trebui să ajungi cu o pagină ca aceasta:



    Ca practică, încercați să schimbați dimensiunea textului pentru

    (să spunem 1.1em) și, de asemenea, crește spațiul dintre

    Și marginea din stânga a zonei de conținut cu încă 10 pixeli.

    concluzii

    Acest capitol a analizat sintaxa CSS și cum să creați o foaie de stil de bază. Ați învățat cum să încorporați CSS într-o pagină HTML și cum să creați stiluri simple. Să evidențiem principalele lucruri pe care trebuie să le amintiți din acest capitol:

    Orice stil CSS constă din mai multe elemente: un selector, o proprietate de stil și valoarea acestei proprietăți.

    Toate proprietățile și valorile lor sunt scrise într-un bloc de declarație între două acolade () după specificarea selectorului.

    Trebuie să urmați cu atenție semnele: două bretele (se deschid la începutul blocului de anunțuri și se închid la sfârșit). Fără aceste paranteze, CSS nu va funcționa corect.

    Este necesar să plasați două puncte după proprietate și un punct și virgulă după valoare.

    Pentru comoditate și o mai bună lizibilitate a codului dvs. CSS, scrieți fiecare proprietate pe o linie nouă și nu vă zgâriți cu spații și file.

    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 modalitățile î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 pentru dezvoltator î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.