14.1 Introducere
- utilizarea extensiilor HTML adecvate;
- conversia textului în imagine;
- utilizați imagini pentru a gestiona spațiile;
- Utilizați tabele pentru a formata textul;
- scrierea de programe în loc de a utiliza HTML.
Aceste metode au crescut în mod clar complexitatea paginilor Web, au limitat libertatea de acțiune, au creat probleme de compatibilitate și, de asemenea, au îngreunat utilizatorii cu probleme fizice.
Fișele de stil rezolvă aceste probleme, depășind limitele înguste ale motoarelor de prezentare din HTML. Foile de stil facilitează setarea spațiilor liniare, liniuțe, texte și culori de fundal, dimensiunea și stilul fontului și alte detalii.
De exemplu, acest mic CSS (stylesheet), situat în fișierul „special.css“ setează culoarea textului de paragraf în verde și înconjurat de granița solid roșu:
HTML 4 acceptă următoarele caracteristici ale foilor de stil:
Formularele de stil, invers, se aplică anumitor medii sau grupuri de materiale specifice. Un tabel destinat utilizării cu un ecran poate funcționa la imprimarea pe o imprimantă, dar nu este potrivit pentru browserele de vorbire.
Această specificație vă permite să definiți dispozitive dintr-un set larg în care poate fi aplicată această foaie de stil. Acest lucru permite agenților utilizator (PA) să excludă utilizarea foilor de stil nepotrivite. Limbile pentru foile de stil pot include abilitatea de a descrie tipul de suport din același tabel.
În prezent, se propune rezolvarea acestei probleme prin includerea instrucțiunilor corespunzătoare în fiecare element HTML. Informațiile despre vizualizare în acest caz sunt întotdeauna disponibile pentru agentul utilizator atunci când elementul respectiv este afișat.
14.2 Adăugarea unui stil la HTML
Documentele HTML pot conține reguli de foi de stil direct în ele sau foi de stil de import.
Orice limbă de foi de stil poate fi utilizată în HTML. O limbă simplă poate satisface nevoile celor mai mulți utilizatori, iar alte limbi sunt mai potrivite pentru rezolvarea unor sarcini foarte specializate. Această specificație folosește limba stilistică "Cascading Style Sheets" ([CSS1]), abreviată - CSS.
Sintaxa datelor de stil depinde de limba foii de stil.
Agenții utilizator trebuie să specifice limba implicită pentru foile de stil pentru documente în această ordine (prioritate în ordine descrescătoare):
style = style [CN] Acest atribut specifică informații despre stil pentru acest element.
Acest exemplu CSS stabilește culoarea și fontul textului paragrafului:
14.2.3 Informații despre stil în titluri. Element STYLE
Atribute definite în altă parte
Elementul STYLE vă permite să plasați informații de stil în "antetul" al documentului. HTML permite orice număr de elemente STYLE în secțiunea HEAD a documentului.
PA care nu acceptă foile de stil sau nu acceptă un anumit limbaj al foilor de stil utilizate de elementul STYLE. ar trebui să ascundă conținutul elementului STYLE. Va fi eronat să afișați acest conținut ca parte a textului documentului. Unele limbi de foi de stil acceptă sintaxa de ascundere a conținutului de la agenții utilizatorilor care nu sunt conformi.
Unele implementări ale foilor de stil pot permite un set mai mare de reguli în elementul STYLE. mai degrabă decât în atributul de stil. De exemplu, cu CSS, regulile pot fi declarate în elementul STYLE pentru:
- toate obiectele unui anumit element HTML (de ex. toate elementele lui P. toate elementele lui H1 etc.);
- toate obiectele din elementul HTML care aparțin unei anumite clase (adică acelea ale căror atribut de clasă este setat la o anumită valoare);
- obiecte unice ale elementelor HTML (adică cele ale căror atribut id este setat la o anumită valoare).
Regulile pentru ierarhie și moștenirea stilului depind de limba foilor de stil.
Pentru ca această informație de stil să afecteze numai elementele H1 ale unei anumite clase, o schimbăm astfel:
În cele din urmă, pentru a limita domeniul de aplicare a informațiilor de stil la un obiect H1. setați atributul id:
Deși informațiile despre stil pot fi setate pentru aproape orice element HTML, două dintre ele, DIV și SPAN. Ele sunt de obicei folosite astfel încât să nu aibă semantică de prezentare (cu excepția nivelului de bloc și a inlinei). În combinație cu foile de stil, aceste elemente permit utilizatorului să extindă codul HTML, în special atunci când utilizează atributele de clasă și id.
În acest exemplu, folosim elementul SPAN pentru a seta stilul de fonturi al mai multor cuvinte de la începutul paragrafului la capacele mici.
În acest exemplu, folosim DIV și atributul de clasă pentru alinierea textului mai multor paragrafe care formează o secțiune imaginară a unui articol științific. Aceste informații de stil pot fi reutilizate pentru o altă secțiune, prin setarea atributului de clasă la orice locație dorită din document.
Aici sunt adăugate efecte sonore la ancora pentru a fi utilizate în ieșirea vocală:
Un element media are un interes deosebit atunci când este aplicat într-o foaie de stil, deoarece un agent de utilizator poate economisi timp interogând doar tabelele care sunt aplicate direct pe dispozitivul curent prin rețea. De exemplu, browserele de vorbire pot exclude încărcarea foilor de stil create pentru prezentarea vizuală. Consultați, de asemenea, cascadele dependente de mass-media.
14.3 Foi de stil externe
14.3.1 Foi de stil de bază și de stil alternativ
HTML vă permite să asociați un număr de foi de stil externe cu un document. Limba foilor de stil stabilește câte foi de stil extern interacționează cu documentul (de exemplu, regulile "cascadă" CSS).
PA trebuie să țină seama de descriptorii media atunci când folosesc orice foaie de stil.
- href indică locația fișierului foaie de stil. Valoarea lui href este un URI;
- valoarea atributului de tip indică limba resursei asociate (foaia de stil). Acest lucru permite agentului utilizator să evite descărcarea foilor de stil pentru o limbă neacceptată a foilor de stil;
- determina dacă foaia de stil este permanentă, de bază sau alternativă:
- Pentru a face tabela permanentă, setați atributul rel în "style sheet" și nu setați atributul title;
- Pentru a face tabelul de bază, setați atributul rel în "style sheet" și denumiți tabelul folosind atributul title;
- Pentru a face alternativa tabelului, setați atributul rel la "foaie de stil alternativă" și denumiți tabelul folosind atributul titlu.
Agentul utilizator ar trebui să permită utilizatorului să vadă o listă de stiluri alternative și să aleagă din ele. Valoarea atributului titlu este recomandată ca nume pentru fiecare element de selecție.
În acest exemplu, definim mai întâi o foaie de stil permanentă, localizată în fișierul mystyle.css:
Adăugarea cuvântului cheie "alternativă" la atributul rel îl face o foaie de stil alternativă:
Pentru mai multe informații despre foile de stil, consultați hiperlegăturile și foile de stil externe.
Dacă două sau mai multe elemente LINK definesc o foaie de stil de bază, primul tabel are avantajul.
Foaia principală de stil, definită în META sau în antetul HTTP, are prioritate față de tabelele definite în elementul LINK.
14.4 Foi de stil cascadă
În următorul exemplu, definim două foi de stil alternative numite "compacte". Dacă utilizatorul selectează stilul "compact", agentul utilizator trebuie să aplice atât foile de stil externe, cât și foaia de stil constantă "common.css". Dacă utilizatorul selectează stilul "big print", va fi aplicată numai tabela alternativă "bigprint.css" și "common.css" constantă.
Un exemplu de cascadă care utilizează elemente LINK și STYLE.
O cascadă poate include foi de stil utilizate pentru diferite tipuri de materiale media. Și LINK. și STYLE pot fi utilizate cu atributul media. Agentul utilizator în acest caz este responsabil pentru filtrarea acelor tabele care nu sunt aplicate pe suportul curent.
În exemplul următor, vom defini o cascadă în cazul în care tabelul „corporate“ este dat în mai multe versiuni: una pentru imprimare și unul pentru afișare și una pentru browserele vocale (utilizate, cum se spune, atunci când citesc e-mail în mașină). Tabelul "techreport" se aplică tuturor mass-media. Regula de culoare definită de elementul STYLE. Este utilizat pentru imprimare și ecran, dar nu pentru prezentarea vorbirii.
14.4.2 Moștenire și cascadă
Dacă agentul de utilizator dorește să afișeze documentul, trebuie să găsească valori pentru proprietățile stilului, de exemplu, familia fontului, stilul fontului, mărimea, înălțimea liniei, culoarea textului și așa mai departe. Mecanismul exact depinde de limba foilor de stil, dar următoarea descriere este în general aplicabilă:
Se utilizează un mecanism de cascadă dacă se aplică mai multe reguli de stil direct elementului. Acest mecanism permite agentului utilizator să sorteze regulile după specificitate pentru a determina ce regulă să se aplice. Dacă nu se găsesc reguli, următorul pas depinde de faptul dacă această proprietate de stil poate fi moștenită sau nu. Nu toate proprietățile pot fi moștenite. Pentru aceste proprietăți, limbajul foilor de stil oferă valori implicite pentru a le folosi în absența unor reguli explicite pentru un anumit element.
14.5 Ascunderea datelor despre stil de la agenții utilizatorilor (PA)
Această secțiune se aplică numai acelor UE care corespund versiunilor HTTP care definesc câmpul Antet legătură. Rețineți că HTTP 1.1, așa cum este definit în [RFC2616], nu conține câmpul Antet legătură (vezi secțiunea 19.6.3).
Managerii de site web pot găsi convenabil să configureze serverul astfel încât foaia de stil să fie aplicată grupului de pagini. Antetul HTTP Link are același efect ca elementul LINK cu aceleași atribute și valori. Anteturile de legături multiple corespund mai multor elemente LINK. care apar în aceeași ordine. De exemplu:
Puteți defini mai multe stiluri alternative utilizând mai multe antete de legătură. apoi utilizați atributul rel pentru a defini stilul implicit.
În acest exemplu, "implicit" este utilizat în mod implicit, deoarece cuvântul cheie "alternate" pentru atributul rel este omis.
Elementele LINK și META. așteptate de anteturile HTTP, sunt definite ca aparând în mod explicit înaintea unui element LINK sau META într-un document HEAD.
Articole similare
Trimiteți-le prietenilor: