Știm deja că, pentru ca site-ul web să arate frumos și elegant, trebuie să lucrăm cu fișierul CSS. Și pentru ca stilurile noastre să fie aplicate, trebuie să combinăm fișierul HTML și fișierul CSS.

Există mai multe opțiuni pentru efectuarea acestei operații: utilizarea foilor de stil imbricate, foilor de stil externe și stilul inline.

Astăzi vom vorbi despre această din urmă metodă.

Injectarea stilului într-o etichetă HTML

Esența acestei metode este că implementăm designul necesar în interiorul etichetei. Un separat atribut – stil. Acest atribut poate fi aplicat la orice etichetă, dar numai în corpul site-ului, adică în interiorul corpului. Valoarea acestui atribut este reprezentată de operatorii acelor stiluri care trebuie aplicate unui element dat.

De exemplu, să setăm marimi diferite font pentru două paragrafe diferite de text:

< p style= "font-size:25px;" >Setați această bucată de text la o înălțime a literei de 25 de pixeli. < p style= "dimensiune font:15px; culoare:#2400ff;"> Și acest text va avea litere, înalte de 15 pixeli, și îl vom nuanța și în albastru pentru a demonstra utilizarea mai multor stiluri în același timp.

Defecte

Exemplul demonstrează perfect modul în care un astfel de stil blochează codul paginii.

De asemenea, puteți observa câteva dezavantaje ale utilizării acestei tehnici de stilizare. Prima dintre ele este răspândirea stilului în întregul document, care în viitorul editării va complica semnificativ procesul.

De asemenea, va fi dificil să formatați cantități mari de text. Cred că nimeni nu este mulțumit de perspectiva de a specifica o dimensiune a fontului pentru fiecare paragraf, mai ales dacă există 40 de astfel de paragrafe.

Chiar și atunci când utilizați stiluri încorporate, devine imposibil să folosiți pseudo-clase, ceea ce leagă în mare măsură mâinile designerului web.

De asemenea, merită remarcată confuzia care va apărea cu siguranță în utilizarea atributului stil. Această confuzie va apărea din cauza utilizării citate diferite atunci când adăugați stiluri.

Pentru claritate, să ne uităm la exemplul de mai jos:

< div style= „familie de fonturi: „Roboto Condensed”, sans-serif”> Intrarea este corectă. < div style= „familie de fonturi: „Roboto Condensed”, sans-serif”> Si asta e corect. < div style= "font-family: " Roboto Condensed ", sans-serif" >Aceasta nu este o intrare corectă. < div style= "font-family: " Roboto Condensed ", sans-serif" >Și nici asta nu este adevărat

Privind calculele furnizate mai sus, concluzia logică sugerează că utilizarea stilurilor încorporate este asociată cu o serie de complicații și inconveniente semnificative.

Când să utilizați stilul inline

În ciuda tuturor deficiențelor, stilul încorporat nu a fost inventat în zadar. Webmasterii apelează adesea la ei în cazul atribuirii stilului programatic. De exemplu, să ne uităm la acest cod

< div id= "productRate" > < div style= "width: 40%" >

Înregistrarea lățimii necesare pentru acest bloc va fi o operațiune simplă.

O situație similară poate apărea dacă este necesară înlocuirea imaginii de fundal (de exemplu) a unui utilizator cu rolul de administrator. În acest caz, eticheta img poate să nu fie potrivită. Prin urmare, merită să ne referim la atributul stil:

< div style= "background:url(fon.jpg)" >

De asemenea, programatorii apelează adesea la stiluri încorporate atunci când creează ferestre pop-up. Adesea, acest proces decurge astfel: blocului asupra căruia se lucrează design îi este atribuit display:block, iar ferestrele rămase sunt ascunse folosind display:none, astfel încât să nu interfereze vizual cu munca programatorului. Iată un exemplu:

< div class = "element" style= "display:block" >O fereastră pop-up care este concepută ca acest moment

Concluzie

Utilizarea stilurilor încorporate este asociată cu o serie de dificultăți și inconveniente, cu toate acestea, în procesul de proiectare a anumitor elemente, webmasterii apelează adesea la această metodă pentru a-și optimiza munca.

Î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 document HTML e 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 ceea ce va fi scris între ghilimele de atribut stilși va fi o descriere de stil pentru a acestui 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.

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 la un număr mic 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.

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ă stilurile anumitor elemente HTML sunt declarate direct 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; greutate font: 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ă vă spun î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; este situat î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 - Fișier în format XML pentru a descrie fluxul de știri.

tip- tipul de date MIME al fișierului atașat.

Din moment ce ne conectăm ca fișier extern foaie de stil în cascadă, atunci 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) mai indicăm că acest fișier text și conține o descriere a stilului tip="text/css"

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

fișierul mystyle.css
corp (culoare de fundal: #c5ffa0)
a (culoare:#000060; greutate font: 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șier index.html

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

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

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 . În practică arată astfel:

  Iată un exemplu: afișarea stilurilor CSS într-un document HTML

  
  
  

  Vă rugăm să rețineți că în interiorul etichetei scriem și codul conform Reguli CSS folosind bretele. În articolele următoare voi vorbi mai detaliat despre regulile de sintaxă în CSS.
  

  Conectarea mai multor fișiere CSS la un document HTML.

  Regulile HTML permit ca mai multe fișiere CSS să fie incluse simultan. Mulți webmasteri folosesc acest lucru: creează fișiere CSS separate pentru text și imagini. Sau fișiere separate pentru antet, subsol și corpul principal al paginii. Să ne dăm seama cum să implementăm acest lucru.

  Creăm mai multe fișiere în stil CSS. Numele lor să fie style-1.css și style-2.css. O plasăm, ca în metoda numărul unu, în același folder cu fișierul HTML.

  Iată un exemplu: afișarea stilurilor CSS într-un document HTML

  
  
  

  Totul este similar cu prima metodă, doar că în acest caz indicăm link-uri către două fișiere deodată.

  Link la fișierul CSS din interior la un fișier de același tip.

  Cu excepția tuturor celor de mai sus metodele enumerate, există o modalitate care vă permite să vă conectați la multe altele într-un singur fișier CSS!

  Aceasta este implementată după cum urmează:
  În primul rând, trebuie să conectăm cel puțin un fișier CSS la codul tău în același mod.

  În al doilea rând, introduceți următorul cod în fișierul deja conectat:

  @import url("style-2.css");

  Această linie se conectează la fișierul nostru fișier suplimentar CSS. Dacă întâmpinați dificultăți în conectarea CSS-ului, îi puteți întreba în comentarii.
  După cum am învățat din cele două lecții anterioare, tehnologia CSS este cel mai puternic instrument, pe care orice webmaster ar trebui să-l stăpânească! Pentru a îmbunătăți asimilarea materialului, am decis să adaug un videoclip de instruire + test pentru a consolida informațiile primite la finalul fiecărei lecții.

  Test de fixare a materialului:
  

  Trebuie să includem fișierul CSS prin plasarea unui link către acesta în fișierul HTML. Care dintre următoarele metode este corectă?

  Opțiunea 1:

  Opțiunea 2:
  

  Opțiunea 3:

  Opțiune 4:

  
  Putem plasa cascade CSS direct în fișierul HTML?

  Foile de stil pot fi adăugate la o pagină web în trei moduri: căi diferite, care diferă prin capacitățile lor.

  Foi de stil aferente

  Cel mai puternic și convenabil mod de a defini stiluri și reguli pentru un site. Stilurile sunt stocate într-un fișier separat care poate fi folosit pentru orice pagină web. Pentru a conecta un tabel de stiluri înrudite, utilizați eticheta în titlul paginii (exemplul 1).

  Exemplul 1: Conectarea unei foi de stil legate

  Salut Lume!

  
  
  

  Calea către fișierul foaia de stil poate fi relativă sau absolută, așa cum se arată în în acest exemplu.

  Avantajele acestei metode

  1. Un fișier de stil este utilizat pentru orice număr de pagini web; este posibil să îl utilizați și pe alte site-uri.
  2. Puteți schimba foaia de stil fără a modifica paginile web.
  3. Când schimbați stilul într-un singur fișier, stilul este aplicat automat tuturor paginilor unde există un link către acesta. Fără îndoială convenabil. Specificăm dimensiunea fontului într-un singur loc și se schimbă pe toate sutele sau mai multe pagini web ale site-ului nostru.
  4. Când fișierul de stil este încărcat pentru prima dată, acesta este stocat în cache pe computerul dvs. local, separat de paginile web, astfel încât site-ul se încarcă mai repede.

  Foi de stil globale

  Stilul este definit în documentul în sine și este de obicei situat în capul paginii web. În ceea ce privește flexibilitatea și capacitățile, această metodă de utilizare a unui stil este inferioară celei anterioare, dar vă permite și să plasați toate stilurile într-un singur loc. În acest caz, chiar în corpul documentului. Definiția stilului este specificată de etichetă

  Salut Lume!

  
  
  

  Acest exemplu arată schimbarea stilului antetului

  . Pe o pagină web, acum trebuie doar să specificați această etichetă, iar stilurile îi vor fi adăugate automat.

  Stiluri interne

  Stilurile inline sunt în esență o extensie a unei singure etichete utilizate pe o pagină web. Atributul de stil este folosit pentru a defini un stil, iar valorile acestuia sunt specificate folosind un limbaj de foaie de stil (exemplul 3).

  Exemplul 3: Utilizarea stilurilor interne

  Salut Lume!

  
  
  

  Se recomanda folosirea stilului interior pt etichete unice sau refuzați să îl folosiți cu totul, deoarece schimbarea unui număr de elemente devine problematică. Stilurile interne nu corespund ideologiei unui document structural atunci când conținutul și designul acestuia sunt separate.

  Toate metodele descrise folosind CSS pot fi utilizate fie independent, fie în combinație între ele. În acest caz, este necesar să ne amintim ierarhia lor. Stilul intern este întotdeauna aplicat mai întâi, apoi foaia de stil globală și în ultimul rând foaia de stil asociată. Exemplul 4 folosește două metode pentru adăugarea foilor de stil la un document.

  Exemplul 4. Combinație metode diferite stiluri de legătură

  Salut Lume!

  Salut Lume!

  
  
  

  În exemplul de mai sus, primul titlu este setat la 36px roșu, iar următorul este setat la verde și un font diferit.

  CSS înseamnă „Cascading Style Sheets”, ceea ce înseamnă „Cascading Style Sheets”. Folosit pentru a proiecta pagini web. Dacă codul HTML conține conținutul (ce va afișa browserul), atunci CSS-ul determină designul acestuia (cum îl va afișa browserul). Frumusețea CSS este că, cu ajutorul unui singur stil, puteți proiecta toate aceleași tipuri de elemente ale unei pagini sau ale unui întreg site (toate link-urile, paragrafele, listele deodată). Cu un stil CSS, definiți o dată cum ar trebui să arate un anumit element, de exemplu, imaginile, și își schimbă designul în toate documentele simultan. Pentru a modifica formatarea textului pe site-ul dvs., trebuie să schimbați codul CSS o singură dată.

  Elemente CSS de bază

  Așa cum HTML este format din etichete, atribute și valori, CSS este alcătuit din propriile sale elemente. Esența constructelor CSS poate fi explicată după cum urmează: „Specificați ce element de pagină să stilați și specificați cum să îl stilați.” Iată care sunt elementele de bază ale CSS.

  • Selector. Un identificator care spune browserului la ce element de pagină să aplice designul. Datorită acesteia, browserul „înțelege” că stilul este destinat, de exemplu, să proiecteze liste sau tabele.
  • Bloc de declarații de stil. Este scris după selector și este cuprins între acolade. Specifică stilul elementului (designul acestuia). Blocul de declarații de stil este format din două părți.
  • Proprietate. Un analog al unui atribut în HTML. Determină ce proprietate de aspect va fi modificată.
  • Sens. Specificat unei proprietăți prin două puncte și determină exact cum va fi modificată proprietatea.

  Pot exista mai multe proprietăți și valori într-un bloc de declarații de stil, caz în care acestea sunt enumerate separate prin punct și virgulă.

  Tipuri de selectoare

  În funcție de proprietățile elementelor de pagină pe care le definesc, selectoarele vin în diferite tipuri.

  • universal. Setează reguli pentru toate elementele de pagină care nu au alte reguli setate.
    Cod * (dimensiunea fontului: 14px;) setează dimensiunea fontului la 14 pixeli pentru toate elementele documentului pentru care alte reguli nu sunt specificate folosind alți selectori.
  • Tega. Acest tip de selector specifică regulile de formatare pentru conținutul unei anumite etichete HTML. Numele selectorului este același cu numele descriptorului, scris doar fără paranteze unghiulare: p, h1, ul.
    De exemplu, cod h2 (culoarea rosie;) setează culoarea textului la verde pentru toate titlurile de al doilea nivel, adică pentru conținutul etichetelor
    .
  • Atribut. Folosind acest grup de selectoare, puteți determina stilul conținutului tuturor etichetelor care au un anumit atribut specificat. Selectoarele pot fi specificate mai precis prin specificarea nu numai a numelui atributului, ci și a valorii atribuite acestuia, precum și a numelui etichetei care îl conține. Acest lucru poate fi folosit pentru a face designul mai individual.
  • clasă. Un tip de selectoare pentru atunci când trebuie să formatați diferit conținutul etichetelor de același tip. De exemplu, doriți să faceți roșu linkurile din partea de jos a site-ului, în timp ce toate celelalte ar trebui să rămână albastre, așa cum au fost. Pentru a aplica regulile de clasă unui element de site, trebuie să specificați numele clasei în atribut clasă eticheta corespunzătoare.

  Să spunem că folosim clasa Etapa elemente individuale trebuie să setați marginea din stânga la 15 pixeli.

  Codul CSS va fi astfel:

  Pas (marja-stânga: 15px;)

  Codul HTML care va lega elementul la regulă va fi:

  Text indentat

  • ID. Folosit împreună cu atributul id Etichetă HTML și este utilizată atunci când proprietățile trebuie setate pentru un singur element. Spre deosebire de un selector de clasă, al cărui nume este precedat de un punct, acesta este scris folosind un hash:

  #exclusiv (culoare:portocaliu;)

  • Contextual. În HTML, anumite etichete se găsesc adesea în interiorul altor etichete, iar selectorii contextuali ajută la definirea regulilor doar pentru astfel de cazuri. De exemplu, le puteți folosi pentru a formata elemente din liste numerotate sau text italic din paragrafe:

  P i (familie fint: Century;)

  Restul grupurilor de selectoare se bazează pe o combinație a tipurilor enumerate, precum și pe principiul moștenirii, atunci când element copil preia proprietățile părintelui.

  Combinarea și gruparea selectoarelor este convenabilă în multe situații. De exemplu, pentru a stabili reguli de clasă Etapa numai pentru link-uri, trebuie să specificați ambii selectori separați printr-un punct (mai întâi eticheta, apoi clasa):

  A.pas (marja-stânga: 15px;)

  Cum să includeți CSS într-o pagină HTML?

  Există mai multe moduri de a face ca instrumentele de creare a site-urilor web să interacționeze între ele. Pe baza metodei de adăugare, stilurile sunt împărțite în următoarele categorii.

  Stiluri încorporate

  Setați în document direct în interiorul etichetei HTML folosind atributul stil. Au cea mai mare prioritate. Aceasta înseamnă că dacă este dat același element design diferit, atunci se va acorda preferință regulii care este scrisă în interiorul etichetei. Selectorul pentru stilul încorporat nu este necesar, deoarece legătura dintre stil și etichetă este evidentă - designul etichetei este specificat în acesta.

  Următorul cod stabilește dimensiunea și culoarea fontului pentru textul din interiorul etichetei

  Text formatat folosind un stil intern.

  Stiluri globale

  Setați prin etichetă …

  Stiluri înrudite

  Cel mai convenabil, pentru că cu ajutorul lor poți proiecta cu ușurință un întreg site web în același stil. Un stil legat înseamnă că toate stilurile CSS sunt într-un fișier separat cu extensia .css.

  Această abordare este, de asemenea, convenabilă deoarece separă regulile de proiectare a paginii de conținutul lor, codul CSS poate fi schimbat cu ușurință fără a interfera cu fișierele HTML, iar principiul separării codului este foarte important, mai ales în proiectele mari.

  Pentru a lega regulile dintr-un fișier CSS la o pagină HTML, utilizați eticheta adăugat la recipient , și atributele sale.

  Iată linia care leagă regulile din fișier stilul meu.css cu pagina HTML:

  rel="foaia de stil" specifică faptul că eticheta se referă la un fișier de foaie de stil, href="mysyle.css"își stabilește adresa. Regulile de adresare sunt aceleași ca pentru legăturile obișnuite - calea poate fi absolută, relativă etc.

  Stiluri importate

  Folosind comanda @import puteți adăuga stiluri dintr-un fișier CSS la tabelul curent. Acest lucru poate fi necesar, de exemplu, dacă doriți să completați designul individual al documentului specificat folosind stiluri globale, reguli universale dintr-un dosar separat. Metoda nu poate fi utilizată cu stiluri inline.

  Codul de mai jos importă un tabel de fișiere în document orice.css, care se află în folderul cu documentul HTML editat:

  @import url(any.css);

  Comanda este scrisă în linia de sub eticheta de deschidere