Când browserul citește foaia de stil, formatează documentul în consecință.

Trei moduri de a insera CSS

Există trei moduri de a insera o foaie de stil:

• Foaie de stil externă
• Foaie de stil internă
• Stilul inline

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ă fie conectată la 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: 20px” (în loc de „margin-left: 20px”) va funcționa în IE (browser Internet Explorer), dar nu în Browsere 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 stilurile interioare în secțiunea cap Pagini HTML folosind eticheta (a nu se confunda cu atributul cu acelasi nume) in care are loc descrierea elementelor 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

Aici poti preturi favorabile cumpără cei mai buni elefanți!!

Angajează un elefant

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

După cum puteți vedea din exemplu, am obținut exact același rezultat ca în primul caz, doar că acum nu prescriem un stil pentru fiecare element individual, ci îl punem în „capul” documentului, indicând astfel că toate titlurile

,

- va fi albastru și paragrafe

- roșu. Imaginați-vă cum ne-am ușura munca dacă ar exista o sută de astfel de paragrafe și cincisprezece titluri pe o pagină, iar documentul în sine a început să cântărească mai puțin datorită „eliminării” tuturor descrierilor de stil repetitive pentru fiecare element individual.

Acum comentariile promise:

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

Dacă în blocul de declarare a stilului sunt specificate mai multe proprietăți ale elementelor, atunci acestea sunt separate prin punct și virgulă.

CSS într-un fișier extern separat.

Cât timp este scurt, am ajuns la principalul, în opinia mea, avantajul CSS, și anume capacitatea de a transfera 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: trece cu mouse-ul (culoare: # ff0000; greutate font: bold; decor text: niciunul)
h1 (culoare: # 0000ff; dimensiunea fontului: 18px)
h2 (culoare: # ff00ff; dimensiunea fontului: 16px)
p (culoare: # 600000; dimensiunea fontului: 14px)

Ceea ce am scris atât de ciudat, voi încerca să vă spun în detaliu în capitolele următoare ale acestui tutorial.

Tot! Fișier de descriere stil creat! Acum a mai rămas doar puțin, și anume forțarea paginile necesare site-ului nostru pentru a extrage 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 pentru a asigura funcționarea corectă a acestuia. Etichetă este un fel de link, destinat doar nu utilizatorilor, ci programelor browser (browsere). pentru că poartă în sine exclusiv informatii 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 document curentși fișierul la care se face referire.

• pictogramă de comandă rapidă - Specifică ce este fișierul de includere.
• foaia de stil- Specifică faptul că fișierul inclus conține o foaie de stil.
• aplicație / rss + xml - Fișier în format XML pentru a descrie fluxul de știri.

tip- Tipul de date MIME al fișierului inclus.

Din moment ce ne conectăm ca fișier extern foaie de stil în cascadă, atunci linkul nostru de serviciu arată astfel:

Repet, pentru a risipi cu siguranță eventualele neînțelegeri. Atribut rel atribuie valoare foaia de stil deoarece includem foaia de stil în cascadă ca fișier extern, specifică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 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: trece cu mouse-ul (culoare: # ff0000; greutate font: bold; decor text: niciunul)
h1 (culoare: # 0000ff; dimensiunea fontului: 18px)
h2 (culoare: # ff00ff; dimensiunea fontului: 16px)
p (culoare: # 600000; dimensiunea fontului: 14px)
Fișierul 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 Elephant.html

Meniul:

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

---

Cumpără un elefant

Puteți cumpăra cei mai buni elefanți de la noi la prețuri competitive !!

Fișierul Elephant1.html

Meniul:

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

---

Angajează un elefant

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

În exemplul de mai sus, „situl elefantului”, pe acest moment, există trei pagini, fiecare fiind asociată cu o singură pagină css extern fișier - mystyle.css. Astfel, l-am „descărcat” semnificativ și am făcut ca designul întregului site să fie „mobil”. Imaginați-vă câți b kilobytes am câștigat dacă ar fi o sută de pagini cu drepturi depline pe acest site!? Și, de asemenea, cât timp ai 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.
• Folosește o etichetă …

  Stiluri înrudite

  Cel mai convenabil, pentru că cu ajutorul lor vă puteți aranja cu ușurință stil uniform tot site-ul. Stilul legat presupune că toate stilurile CSS sunt în dosar separat cu extensie .css.

  Această abordare este, de asemenea, convenabilă prin faptul că separă regulile de aspect al 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 asocia reguli dintr-un fișier CSS cu o pagină HTML, utilizați eticheta adăugat în 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 link-uri regulate- 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 aspectul individual al documentului, specificat folosind stiluri globale, cu reguli universale dintr-un fișier separat. Metoda nu poate fi utilizată cu stiluri inline.

  Codul de mai jos va importa tabelul de fișiere în document orice.css, care se află în folderul în care se editează documentul HTML:

  @import url (any.css);

  Comanda este scrisă pe linia de sub eticheta de deschidere

  Cascading Style Sheets (CSS), sau pur și simplu foi de stil, sunt folosite pentru a crea prezentarea paginilor Web. masa stiluri css conține un set de reguli (stiluri) care descriu designul paginii Web în sine și fragmentele sale individuale. Aceste reguli determină culoarea textului și alinierea paragrafului, indentările dintre acestea imagine graficăși textul care se înfășoară în jurul acestuia, prezența și parametrii chenarului în tabel, culoarea de fundal a paginii Web și multe altele.

  Fiecare stil CSS trebuie să fie legat de elementul corespunzător al paginii web (sau de pagina web în sine). După legare, descris de stilul selectat parametrii cssîncepe să se aplice la acest element... Legarea poate fi explicită,atunci când noi înșine indicăm ce stil css este legat de ce element al paginii Web, sau implicit, când stilul css este legat automat la toate elementele paginii Web create folosind o etichetă specifică.

  masa stiluri css poate fi stocat direct în codul HTML al unei pagini Web sau într-un fișier separat. Această din urmă abordare este mai în concordanță cu conceptul Web 2.0; după cum ne amintim din capitolul 1, necesită ca conținutul și prezentarea paginii Web să fie separate. În plus, individual stiluri css poate fi plasat direct în tag-ul HTML care creează elementul de pagină Web; această abordare este folosită destul de rar acum și, în principal, atunci când experimentăm stiluri.

  Foile de stil CSS sunt scrise într-un limbaj special numit -CSS. Standardul care descrie prima versiune a acestui limbaj (CSS 1) a apărut în 1996. Standardul CSS 2 este acum acceptat și practicat pe scară largă, iar dezvoltarea standardului CSS 3 este în curs de desfășurare, un subset limitat al căruia este deja acceptat de multe browsere web.

  Doar CSS 3 (mai precis, subsetul său susținut de programe moderne) vom studia.
  

  Crearea stilurilor CSS

  Format normal de definiție Stilul CSS ilustrează Lista 7.1.

  Iată regulile de bază pentru stilarea css.

  O definiție de stil CSS include un selector și o listă de atribute de stil cu valorile acestora.

  - Selector folosit pentru a lega un stil la un element al unei pagini Web la care ar trebui să-și extindă efectul. De fapt, selectorul identifică în mod unic stilul dat.

  După selector, despărțit de un spațiu, există o listă de atribute de stil CSS și valorile acestora, cuprinse între acolade.

  Un atribut de stil (a nu se confunda cu un atribut de etichetă!) Reprezintă unul dintre parametrii unui element de pagină Web: culoarea fontului, alinierea textului, valoarea indentării, grosimea chenarului etc. Valoarea atributului de stil este indicată după acesta, separate prin simbolul: (punctele). În unele cazuri, valoarea unui atribut de stil CSS este inclusă între ghilimele.

  Cupluri<атрибут стиля>:<значение>separate unul de altul printr-un simbol; (punct şi virgulă).

  Între ultima pereche<атрибут стиля>:<значение>și caracterul bretei de închidere; nu, sau unele browsere web pot să nu gestioneze corect definiția stilului.

  Definițiile diferitelor stiluri sunt separate prin spații sau linii noi.

  Spațiile și liniile noi nu trebuie să fie prezente în selectoare și nume de stil. Spațiile și rupturile de linie în altă parte în definiția stilului sunt ignorate de browserul web. Prin urmare, putem formata codul CSS pentru lizibilitate, așa cum am făcut cu codul HTML.

  Dar regulile sunt reguli și, cel mai important, practică. Să aruncăm o privire la un exemplu de mic stil:

  P (culoare: # 0000FF)

  Haideți să o desfacem bucată cu bucată.

  P este un selector. Reprezintă numele etichetei

  Culoarea este un atribut de stil. Setează culoarea textului.

  - # 0000FF este valoarea atributului stilului de culoare. Reprezintă codul de culoare albastrăînregistrat în format RGB... (Vom vorbi mai multe despre codul RGB și despre cum să-l definim în Capitolul 8.)

  Când browserul web citește stilul descris, îl va aplica automat la toate paragrafele paginii web (etichete

  ). Acesta este un exemplu tipic de legare stil implicit, de altfel.

  Stilul Css Am acoperit se numește stilul de înlocuire a etichetei. Selectorul de aici este numele etichetei HTML înlocuit de acest stil fără caractere< и >. Selector pot fi tastate atât cu majuscule cât și litere mici; autorul preferă majuscule.

  Să ne uităm la câteva dintre aceste stiluri.

  Iată stilul etichetei de înlocuire :

  EM (culoare: # 00FF00;
  greutate font: bold)

  Orice text plasat într-o etichetă , Browserul dvs. web se va afișa în verde aldine. Atributul stil font-weight specifică „îndrăzneala” fontului, iar valoarea lui aldine este aldine.

  Și acesta este stilul de înlocuire a etichetei :

  CORP (culoare de fundal: # 000000;
  culoare: #FFFFFF)

  Se setează pentru întreaga pagină Web culoare alba text (RGB #FFFFFF) și culoare de fundal negru (RGB # 000000). Atributul de stil de culoare de fundal, așa cum am înțeles deja, stabilește culoarea de fundal.

  Acum să ne uităm la un stil complet diferit:

  Text roșu (culoare: # FF0000)

  Setează culoarea textului la roșu (RGB # FF0000). Dar selectorul nu este în mod clar numele etichetei - eticheta HTML nu exista.

  Acesta este un alt fel Stilul CSS- clasa de stil. Poate fi atașat la orice etichetă. Numele clasei de stil este specificat aici ca un selector, care o identifică în mod unic. Numele clasei de stil trebuie să fie litere alfabet latin, cifre și cratime și trebuie să înceapă cu o literă. În definiția unei clase de stil, numele acesteia este în mod necesar precedat de un simbol punct - acesta este un semn că este clasa de stil care este definită.

  Clasa de stil necesită o legare explicită la etichetă. Acest lucru se face folosind atributul CLASS, care este acceptat de aproape toate etichetele. Numele clasei de stil necesare fără simbolul punct este specificat ca valoare a acestui atribut:

  Atenţie!

  Aici am legat clasa de stil redtext nou creată la Avertisment! Ca urmare, acest paragraf va fi scris cu roșu.

  

  În Listarea 7.2, am creat clasa de stil de atenție, care specifică stilul fontului roșu și italic. (Atributul font-style specifică greutatea fontului, iar valoarea lui italic face fontul italic.) Apoi l-am legat de etichetă ... Ca urmare, conținutul acestei etichete va fi introdus cu caractere aldine cursive și roșu; importanța deosebită și „îndrăzneala” asociată textului este stabilită de etichetă , iar cursivele și roșul sunt clasa de stil de atenție.

  Ca valoare a atributului CLASS, puteți specifica mai multe nume de clase de stil simultan, separându-le cu spații. În acest caz, efectul claselor de stil se adaugă. (Aflați mai multe despre acțiunea pe un element al unei pagini Web de mai multe stiluri diferite Vom vorbi mai târziu.)

  

  În exemplul din Listarea 7.3, am atașat etichetei două clase de stil simultan: atenție și bigtext. Ca urmare, conținutul acestei etichete va fi afișat cu font aldine, cursiv, roșu și dimensiune mare. (Atributul stil font-size specifică dimensiunea fontului, iar valoarea sa mare este marime mare, comparabilă cu dimensiunea fontului folosită pentru titlurile de primul nivel.)

  Un stil numit seamănă mult cu o clasă de stil. Selectorul acestui stil este, de asemenea, un nume care îl identifică în mod unic și, de asemenea, este legat în mod explicit de etichetă. Și atunci încep diferențele.

  În definiția unui stil numit, un caracter # („hash”) este plasat înaintea numelui său. Îi spune browserului web că are un stil numit în față.

  Legarea unui stil numit la o etichetă este implementată prin atributul ID, care este, de asemenea, acceptat de aproape toate etichetele. Numele stilului numit necesar, fără simbolul #, este specificat ca valoare pentru acest atribut.

  Valoarea atributului etichetei ID trebuie să fie unică într-o pagină Web. Cu alte cuvinte, o singură etichetă cu valoare dată ID-ul atributului. Prin urmare, stilurile numite sunt folosite atunci când un stil ar trebui să fie legat de un singur element al unei pagini Web.

  În exemplu

  #bigtext (dimensiunea fontului: mare)
  . . .
  

  Acesta este un text grozav.

  paragraful „Acesta este text mare” va fi cu litere mari.

  Toate stilurile pe care le-am analizat aveau un singur selector care a fost folosit pentru a lega. Cu toate acestea, CSS vă permite să creați stiluri cu selectori multipli - așa-numitele stiluri combinate. Aceste stiluri sunt folosite pentru a lega etichete care satisfac mai multe condiții simultan. De exemplu, putem specifica ca stilul combinat să fie legat de o etichetă imbricată într-o altă etichetă sau de o etichetă pentru care este specificată o anumită clasă de stil.

  Regulile stabilite de standardul CSS pentru scrierea selectoarelor de stil combinate.

  -Selectoare pot fi nume de etichete, nume de clase de stil și nume de stil denumit.

  Selectoarele sunt listate de la stânga la dreapta și indică nivelul de imbricare al etichetelor corespunzătoare, care crește pe măsură ce vă deplasați de la stânga la dreapta: etichetele specificate la dreapta trebuie să fie imbricate în etichetele care sunt la stânga.

  Dacă un nume de etichetă este combinat cu o clasă de stil sau un nume de stil numit, atunci pentru această etichetă trebuie specificat numele clasei de stil sau stilului numit.

  Selectoarele sunt separate prin spații.

  Stilul este legat de eticheta indicată de selectorul din dreapta.

  Reguli complicate, nu? .. Pentru a le înțelege, să luăm în considerare câteva exemple.

  Să începem cu cel mai simplu stil combinat:

  P EM (culoare: # 0000FF)

  Numele etichetelor utilizate ca selectoare

  ȘI .

  Mai întâi vine eticheta

  În spatele ei este o etichetă ... Deci eticheta trebuie să fie imbricate într-o etichetă

  Stilul va fi atașat etichetei .

  Acest text devine albastru.

  
  

  Și acesta nu va.

  
  

  Acest- de asemenea.

  Aici cuvintele „Acest text” vor fi tastate cu albastru.

  Iată un alt stil CSS combinat:

  P.mini (culoare: # FF0000;
  dimensiunea fontului: mai mic)

  Nume eticheta

  Combinat cu numele clasei de stil mini. Aceasta înseamnă că stilul CSS dat va fi aplicat oricărei etichete

  Pentru care este specificat numele clasei de stil mini. (Valoarea mai mică a atributului stil font-size specifică o dimensiune mai mică a fontului.)

  Text mic roșu.

  Și un ultim exemplu de stil CSS combinat:

  P.sel (culoare: # FF0000)

  Acest stil va fi aplicat etichetei în interiorul etichetei

  La care se leagă clasa de stil sel.

  Acest textul devine roșu.

  V acest exemplu cuvântul „Acest” va fi evidențiat cu roșu.

  Standardul CSS vă permite să definiți mai multe stiluri identice simultan, listând selectoarele lor separate prin virgule:

  H1, .redtext, P EM (culoare: # FF0000)

  Aici am creat trei stiluri identice simultan: stilul de înlocuire a etichetei

  , clasă de stil redtext și stil combinat P EM. Toate au stabilit culoarea fontului la roșu.

  Toate cele patru varietăți de stiluri CSS pe care le-am acoperit pot apărea numai în foile de stil. Dacă le specificați în codul HTML al unei pagini Web, este posibil să fie ignorate.

  Stilurile ultimei - a cincea - soiuri sunt indicate direct în codul HTML al paginii Web, în ​​eticheta corespunzătoare. Acestea sunt stiluri inline. Într-o familie de stiluri strâns unite, se deosebesc.

  Nu au selector, deoarece sunt plasate direct în eticheta necesară. Selectorul pur și simplu nu este necesar în acest caz.

  Nu există acolade în ele, deoarece nu este nevoie să separați lista de atribute de stil CSS de selectorul care nu există.

  Stilul CSS inline poate fi atașat doar unei etichete - cea în care se află.

  Definiția stilului CSS inline este specificată ca valoare a atributului STYLE eticheta dorită care este acceptat de aproape toate etichetele:

  Puțin
  - cursiv.

  Am menționat mai devreme că în unele cazuri valoarea atributului stilul css trebuie să fie cuprinse între ghilimele. Dar în definițiile de stil inline, apostrofele sunt folosite în loc de ghilimele.

  Stilurile css inline sunt rar folosite astăzi, deoarece încalcă conceptul Web 2.0 de separare a conținutului și prezentarea paginilor Web. Ele sunt utilizate în principal pentru a lega stiluri la un singur element al unei pagini Web (foarte rar) și atunci când se experimentează cu stiluri.

  În capitolul 14 ne vom uita la un alt tip de Stiluri CSS... Deocamdată, să terminăm cu ele și să începem să ne uităm la foile de stil.