Când browserul citește foaia de stil, formatează documentul în funcție de aceasta.
Trei moduri de a insera CSS
Există trei moduri de a insera o foaie de stil:
- Foaie de stil externă
- Foaie de stil internă
- Stil încorporat
Foaie de stil externă
O foaie de stil externă este ideală atunci când stilurile trebuie aplicate pe mai multe pagini. Cu o foaie de stil externă, puteți schimba aspectul unui întreg site Web prin editarea unui singur fișier. Fiecare pagină trebuie să facă legătura cu foaia de stil folosind eticheta . Etichetă situat în secțiunea cap:
Nu lăsați spații între valoarea proprietății și unitățile acesteia! „margin-left:20 px” (în loc de „margin-left:20px”) va funcționa în IE (browser Internet Explorer), dar nu în browserele Firefox sau Opera.
Foaie de stil internă
O foaie de stil internă este utilizată atunci când un document individual are un stil unic. Definiți stiluri interne în secțiunea de cap a unei pagini HTML folosind eticheta
Aici se va întâmpla următoarele: pentru toate elementele din interiorul etichetei
se va face următoarele: culoarea lor va fi roșie și marginea de sus va fi de 100 de pixeli.
A treia metodă de atribuire Stilul CSS- Acest stiluri importate. Sunt la fel ca implementate sunt specificate în capul documentului, dar din dosar. Iată un exemplu:
Aici stilurile din fișierul " vor fi aplicate întregii pagini my.css".
Și ultima vedere Stiluri CSS- acestea sunt stilurile din fișier. Această metodă este cea mai comună și implică conectarea fișierului de stil prin etichetă în fruntea documentului. De exemplu, astfel:
Această metodă este foarte asemănătoare cu metoda anterioară, dar eticheta nu este folosită aici (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 - Un fișier în format XML pentru a descrie fluxul de știri.
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 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
Exemplu: foaie de stil internă
- Incearca-l tu insuti "
Titlu
Mai întâi trimiteți mesajul
Text doi
Textul trei
Foaie de stil internă Titlu
Mai întâi trimiteți mesajul
Text doi
Textul trei
În acest exemplu, setăm culoarea de fundal pentru element folosind CSS
: culoare de fundal: verde pal, culoare și tip de font pentru titluri: Culoarea albastra; font-family:verdana, precum și dimensiunea fontului, culoarea și alinierea textului la centru pentru paragrafe
: dimensiunea fontului: 20px; culoarea rosie; text-align:center.
Stil încorporat
Când trebuie să formatați un singur element al unei pagini HTML, descrierea stilului poate fi plasată direct în interiorul etichetei de deschidere folosind atributul de stil deja specializat. De exemplu:
Paragraf
Astfel de stiluri sunt numite încorporate (inline) sau încorporate. Regulile definite direct în cadrul etichetei de deschidere a unui element înlocuiesc regulile definite în fișierul CSS extern, precum și regulile definite în cadrul elementului
Titlu
Mai întâi trimiteți mesajul
Text doi
Textul trei