Conceptul de bază al CSS este un stil - .. Adică, un set de reguli de proiectare și de formatare, care pot fi aplicate la diferite elemente de pagină. Codul HTML standard pentru a atribui orice proprietăți specifice element (cum ar fi culoarea, dimensiunea, poziția pe pagină, și așa mai departe. P.) De fiecare dată când descriu aceste proprietăți, chiar dacă o pagină ar trebui să fie situat la 10 sau 110 de astfel de elemente, care nu sunt deloc care diferă unul de celălalt. Tu trebuie să fi fost de zece sau de o sută de zece ori pentru a insera aceeași bucată de HTML-cod într-o pagină, crescând dimensiunea fișierului și timpul de descărcare pentru utilizatorul calculatorului acesta este văzut.
CSS funcționează într-un mod diferit, mai convenabil și mai economic. Pentru a atribui anumite caracteristici unui element, trebuie să descrieți acest element o dată și să-l definiți ca un stil, iar în viitor pur și simplu să indicați că elementul pe care doriți să-l decorați în mod corespunzător trebuie să accepte proprietățile stilului pe care îl descrieți. Convenabil, nu-i așa?
Mai mult, puteți salva descrierea stilului nu în textul paginii, ci într-un fișier separat - aceasta vă va permite să utilizați descrierea stilului pe orice număr de pagini Web. Foarte confortabil! Și încă unul, în legătură cu acest lucru, avantajul - abilitatea de a schimba designul oricărui număr de pagini, corectând doar descrierea stilului într-un fișier (separat).
În plus, CSS vă permite să lucrați cu designul de fonturi al paginilor la un nivel mult mai ridicat decât standardul HTML, evitând ponderarea inutilă a paginilor cu grafică.
Să ne uităm la modul în care putem realiza astfel de oportunități minunate în viață.
Practic mastering CSS
După cum știți deja, informațiile despre stiluri pot fi plasate fie într-un fișier separat, fie direct în codul unei pagini Web. Localizarea descrierii stilurilor într-un fișier separat are sens dacă intenționați să aplicați aceste stiluri la mai mult de unul, numărul de pagini. Pentru a face acest lucru, trebuie să creați un fișier text simplu, să descrieți stilurile necesare utilizând limba CSS, să plasați fișierul pe un server Web și în codul pentru paginile Web care vor folosi stilurile din acest fișier, va trebui să îl referiți. Aceasta se face folosind eticheta , situat în interiorul etichetei
paginile dvs.:Primii doi parametri ai acestei etichete sunt numele rezervate necesare pentru a informa browserul că această pagină va utiliza CSS. Al treilea parametru - HREF = - indică un fișier care conține descrieri de stil. Acest parametru trebuie să conțină fie o cale relativă la fișier - dacă este pe același server ca și documentul din care este accesat - sau adresa URL completă () dacă foaia de stil este pe un alt server.
A doua opțiune, în care descrierea stilurilor este localizată în codul paginii Web, în interiorul etichetei
, în etichetă . În acest caz, puteți utiliza aceste stiluri pentru elemente din pagină. Tipul parametrului = "text / css" este obligatoriu și servește instrucțiunilor browserului să utilizeze CSS.Și a treia opțiune, când descrierea stilului este localizată direct în interiorul etichetei elementului pe care îl descrieți. Acest lucru se face folosind parametrul STYLE utilizat atunci când se aplică CSS cu cele mai multe etichete HTML standard. Această metodă este nedorită și este de înțeles de ce: duce la pierderea unuia dintre principalele avantaje ale CSS - abilitatea de a separa informațiile de descrierea tipului de informații. Cu toate acestea, dacă este necesar să se descrie un singur element, această variantă a locației descrierii stilurilor este, de asemenea, destul de aplicabilă.
Să ne uităm la mecanismul prin care stilurile sunt atribuite elementelor de pe paginile Web. Cel mai simplu caz de atribuire a unui anumit stil unui element arată astfel:
În cazul în care NAME_ELEMENT este numele etichetei HTML (H1, P, TD, A etc.), iar parametrii din parantezele curbate sunt lista de proprietăți ale elementelor și valorile atribuite acestora. Mai multe detalii despre limbajul CSS sunt discutate mai târziu.
În acest exemplu, la toate rubricile de pe pagina formatată cu eticheta H1 li se atribuie o dimensiune a fontului de 30 de puncte și o culoare albastră.
De asemenea, elementele de pagină create folosind CSS utilizează mecanismul de moștenire: adică dacă aveți o imagine în interiorul etichetei
.
, cu indentarea, astfel încât paragraful ocupă doar o anumită parte a lățimii paginii, imaginea mostenind de asemenea valorile indentate specificate pentru acest paragraf.CSS implementează capacitatea de a atribui stiluri nu tuturor acelorași elemente ale paginii, ci selectiv - utilizează parametrul CLASS = "nume de clasă" sau ID =<имя элемента>, alocat oricărui element al paginii. Să luăm în considerare aceste posibilități în detaliu.
Parametrul CLASS este utilizat dacă doriți să creați același stil pentru mai multe, dar nu toate elementele de pagină (aceleași sau diferite).
Toate elementele clasei b-c vor fi afișate cu caractere aldine cu o aliniere centrată (sau celula de tabelă).
Textul paragrafului
- paragrafului i se atribuie stilul clasei b-c.Textul conținut în celulă va fi afișat în funcție de descrierea clasei.
Astfel, puteți atribui stilul descris oricăror elemente de pagină text. Rețineți că atunci când scrieți numele clasei, trebuie să urmați cazul caracterelor, în funcție de modul în care ați numit clasa în descrierea stilului!
Styling cu ID-uri este folosit atunci când numai un element de pe pagină corespunde acestui identificator. Dacă există mai multe elemente care trebuie să fie atribuite acestui stil, atunci acesta este deja o clasă.
Proprietățile elementelor gestionate de CSS
Deci, hai să trecem la studierea elementelor CSS sigure. Descrierea proprietăților elementelor din CSS constă în denumirea proprietății și atribuirea ulterioară unei anumite valori. Numele proprietății și valoarea acesteia sunt separate printr-un colon.
Specificând dimensiunile absolut și nu relative ale fontului, îi privați pe cei care văd paginile dvs., capacitatea de a mări sau micșora dimensiunea fontului utilizând un buton special în browser în funcție de rezoluția și viziunea acestora. Fonturile vor fi afișate numai la dimensiunea specificată la scrierea paginii.
Prin urmare, dacă utilizarea dimensiunilor absolute a fontului nu se datorează intenției artistice sau intenției insidioase, vă recomandăm să utilizați procentele în acest scop. În acest caz, dimensiunea fontului va fi mai mică (mai mare) cu procentajul specificat de dvs. decât cu eticheta HTML standard.
O altă opțiune interesantă pentru utilizarea CSS este ascunsă în spatele unei caracteristici aparent simple: puteți specifica valorile indentului în jurul obiectelor ca valori negative! Acest lucru vă permite să suprapuneți un strat de text pe altul și să obțineți rezultate foarte interesante și atractive.
Pentru a obține un astfel de efect nu este foarte dificil, să încercăm să creăm o pagină cu un titlu care să arate tridimensional, dar nu va folosi grafica.
Creați un nou fișier html și compuneți o descriere a stilurilor pentru cele trei obiecte:
În această descriere, am atribuit
(cu toate acestea, ar putea fi aproape orice altă etichetă) dimensiune, font și stil - în acest stil vor fi afișate toate elementele paginii. Acest lucru sa făcut numai în scopul reducerii dimensiunii fișierului de pagină, în schimb, ați putea descrie acești parametri de două ori: pentru fiecare dintre clasele z. Apoi descriem două stiluri care diferă în funcție de culoare și mărimea indenturilor din jurul lor: stratul inferior este descris de stilul z1, iar stratul superior este descris de z2. Folosind valorile negative ale indenturilor și selectând valoarea dorită, ajungem la stratul superior, pe măsură ce se răstoarnă pe cel precedent.P font-familie: Times New Roman, serif;
culoare: # 000000;
marginea stângă: 15%;
margin-dreapta: 15%;
margin-top: 1pt;
marginea inferioară: 1pt;
text-indent: 1 cm;
text-align: justify;
>
În interiorul descrierii stilului pentru comoditatea formatării, aveți posibilitatea să utilizați orice număr de spații și linii de rupere - atunci când citiți stilul, browserul va arunca pur și simplu spațiile suplimentare.
În acest stil, am solicitat paragrafele
pe toate paginile care utilizează această descriere, acestea vor fi afișate în Times New Roman font sau în cazul în care acest font pe mașină nu este instalat, într-un alt font, dar din această familie (serif). Am setat culoarea fontului pe negru, alinierea este completă (pe ambele părți).
Să creați, de asemenea, un stil pentru titlurile articolelor:
Font H2: Familia Verdana, Arial Cyr, Arial;
font-weight: bold;
font-size: 14pt;
culoare: negru;
margin-stânga: 20%;
marginea superioară: 1 cm;
text-aliniere: stânga;
>
Toate rubricile paginilor noastre, decorate cu o etichetă
, vor fi afișate cu verde tip Verdana sau, dacă acest font nu este instalat, în fontul Arial. Am setat dimensiunea antetului la 14, culoarea este negru, marginea din stânga este de 20% din lățimea paginii, iar marginea superioară este de 1 cm. Titlul va fi aliniat cu marginea din stânga a paginii.
Pentru a <привязать> Stilurile create de noi la paginile noastre, la toate fișierele html din secțiune
ar trebui să plasăm o linie cu un link către foaia de stil și indicând cum să folosim CSS:Deoarece foaia de stil va fi în același director de server ca restul paginilor, parametrul HREF = "URL" în cazul nostru va fi pur și simplu numele fișierului nostru de stiluri (styles.css).
Articole similare
Trimiteți-le prietenilor: