Infrastructura IT pentru întreprinderea dvs.
Astăzi vom cunoaște conceptele de bază și câteva exemple de utilizare practică a tabelelor de stil CSS. Să luăm în considerare tehnicile de bază necesare pentru începutul web master. Pentru a studia pentru o lecție toate posibilitățile oferite de foile de stil și toate problemele legate de ele nu par a fi corespunzătoare și nu este sarcina acestei lecții. Referințele la acele resurse de pe Internet, în care sunt specificate specificațiile tabelelor de stil și toate proprietățile lor sunt explicate cu exemple concrete de utilizare, veți găsi în bara laterală "Link-uri utile" la sfârșitul articolului.
Ce sunt foile de stil și de ce sunt necesare?
Deci, stilul este o regulă care determină apariția unui element într-un document.
Avantajele tabelelor de stil:
- Fișele de stil vă permit să separați structura logică a paginilor de reprezentarea vizuală (design). La urma urmei, limba HTML a fost creată inițial pentru a marca structura documentului.
- Foaia de stil creată poate fi aplicată tuturor paginilor site-ului, datorită cărora se observă unitatea designului său.
- Dacă site-ul este decorat utilizând o singură foaie de stil, atunci în cazul modificării designului etichetelor într-un singur loc (în tabelul de stil), aceste modificări vor avea efect asupra tuturor paginilor site-ului. Nu trebuie să deschideți și să editați toate paginile unde apar aceste etichete. Astfel, CSS vă permite să controlați flexibil prezentarea externă a paginilor de pe ecran.
- Fișele de stil oferă webmasterilor oportunități ample pentru aspectul paginii. După cum știți, mijloacele limbii HTML în acest sens sunt destul de limitate. Dar fii atent. Nu toate proprietățile descrise în specificațiile tabelelor de stil sunt suportate corect de browsere. Prin urmare, ca și în cazul etichetelor HTML, le testați în diferite browsere.
Să luăm în considerare un exemplu concret.
În Fig. 1 sunt prezentate:
- Cod HTML pentru aboutcss.HTML;
- stil design tabel site.css;
- Afișați pagina în Internet Explorer.
Designul acestei pagini este destul de schematic:
Rețineți că în partea stângă în foaia de stil și în linia de cod HTML sunt afișate numerele. Deoarece listele sunt destul de mari, este mai convenabil să se facă referire la o anumită linie.
Scurtă descriere a imaginii:
Vă sugerez să repetați această pagină și mai întâi să încercați să o faceți singură și dacă ceva nu funcționează, uitați-vă la codul său HTML. În următoarea, a șasea și ultima lecție, vom reveni la acest exemplu.
Sintaxa foilor de stil
Regula se compune din două părți:
- selectorul (H1) definește o etichetă în documentul HTML (titlu, paragraf etc.);
- Definiția (culoare: roșu) stabilește stilul aplicat acestui selector (etichetă).
Definiția, la rândul său, este formată din două părți: proprietatea (culoarea) și valoarea (roșu). Ele sunt scrise în bretele și separate unul de altul printr-un colon. Proprietățile și unele valori sunt definite în specificația foii de stil. Selectorii sunt grupați prin virgulă (,), definiții - printr-un punct și virgulă (;).
În acest exemplu, același design pentru titlurile din primul și al doilea nivel. Vor fi roșii și font Arial.
De ce gruparea? Răspunsul este simplu - pentru a reduce dimensiunea mesei.
moștenire
Aceasta este capacitatea unei etichete de a moșteni proprietățile altui tag.
În exemplele anterioare, am definit pentru etichetă
culoarea roșie. Să spunem pe pagina dvs. web din interior
selecția italică are loc:
Un exemplu de moștenire a proprietăților elementului părinte
Întrebare: ce culoare va fi cuvântul "moștenire"?
Răspunsul este roșu (și Arial).
Explicație: deoarece nu am definit o culoare pentru etichetă, ea va moșteni proprietatea din eticheta părinte, în acest caz de la
Fig. 2. Sintaxa CSS
Ce proprietate minunată! Mulțumită lui, nu este nevoie să definiți stiluri pentru toate etichetele pe care le utilizați atunci când creați pagini HTML - imaginați-vă cum ar fi inconfortabil și lung! Este suficient să definiți stilul implicit pentru întregul document. Și numai atunci, după cum este necesar, adăugați stiluri pentru etichete diferite.
Cum definiți acest stil implicit? Pentru ce etichetă?
- toate celelalte etichete moștenesc de la ea.
În Fig. 3 schematic ca "arbore" este prezentată o pagină HTML.
Pagina este o structură ierarhică. La cel mai înalt nivel este eticheta
în următorul. și așa mai departe.
Este important să ne amintim că, în practică, moștenirea nu este întotdeauna susținută corect de browsere.
Notați linii 7-10 în lista foii de stil (Figura 1). Ele duplică stilul dat în
Acest lucru este făcut pentru a face pagina să pară la fel în diferite browsere.
Selectori de context
Acest design de stil pentru selector (tag), care este situat în interiorul unui alt selector (etichetă). În exemplu:
Un exemplu de moștenire a proprietăților elementului părinte
Puteți defini stilul de design atunci când este în interior
După cum puteți vedea din exemplu, selectorul de context este scris folosind un spațiu.
În acest exemplu, toate etichetele între
va fi verde.
Puteți grupa mai mulți selectori de context:
Unele dintre caracteristicile foilor de stil au fost deja luate în considerare. Și probabil ați pus o întrebare: și cum să aplicați aceste stiluri unei pagini HTML?
Includerea foilor de stil într-un document HTML
Există trei moduri de a adăuga CSS la un document HTML (Figura 4):
- Conectarea unei foi de stil externe (
- Folosind o foaie de stil internă valabilă numai în acest document (
- Specificarea unui stil direct în etichetă
Este evident că folosirea unei foi de stil externe este cea mai preferată opțiune. La urma urmei, puteți conecta acest tabel la toate documentele site-ului și, astfel, puteți obține un mecanism destul de flexibil pentru gestionarea aspectului acestuia. Când faceți modificări sau adăugiri la un fișier (site.css, a se vedea Figura 4), acestea vor intra imediat în vigoare pe toate paginile.
Tabelul de stil din (al doilea rând) este valabil numai într-un singur document.
Cea de-a treia cale pierde toate avantajele foilor de stil, deoarece este scrisă în interiorul etichetei și, prin urmare, se aplică numai la ea. Imaginați-vă că trebuie să schimbați acest stil pe două sute de pagini.
De ce sunt tabelele cascadate?
Așa cum se poate vedea din fig. 4. Mai multe foi de stil pot fi aplicate simultan în document. Ce se întâmplă dacă setările de stiluri se suprapun reciproc, ca în antetul primului nivel
Ce culoare va fi inscripția "Tabele de stil" atunci când utilizatorul o vede în browser: roșu (
În exemplul nostru din Fig. 4 inscripția "Tabele de stil" va fi albastră.
Link-uri utile
- Suport pentru browser. Iată tabelele care susțin specificațiile CSS1 și CSS2, ambele versiuni vechi ale browserelor și cele noi (IE 4-6, Netscape 4-7, Opera 3.5-7 sub Windows și controlul Macintosh). Următoarele simboluri sunt utilizate în aceste tabele: Y - da, da, selectorul sau proprietatea este suportată, P - parțială, parțial sprijinită, adică este posibil ca unele tipuri de valori să nu fie acceptate, B - suport implementat cu erori, N - nu, nu sunt acceptate
- Pe același site veți găsi un manual pe CSS (în limba engleză)
- Pe site-ul web al Concortiumului World Wide Web veți găsi:
Validator CSS pentru verificarea foii de stil pe care ați creat-o online (specificați URI-ul foii de stil, inserați conținutul în câmpul de formular și specificați calea spre tabela de stil de pe computer). Puteți descărca gratuit acest program pe computer
- O pagină cu exemple de aplicare a foilor de stil diferite pe o pagină HTML (în stânga, selectați un stil, pagina în care se aplică se aplică spre dreapta). În plus, puteți vedea conținutul fiecărei foi de stil
Articole similare