Bazele css

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ă de la un altul. 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 operează un mod diferit, mai convenabil și economic. Pentru a atribui un element de anumite caracteristici ar trebui descrise odată ce acest element și definesc ca pe o descriere a stilului, și în viitor, pur și simplu indică faptul că elementul pe care doriți să emită corespunzătoare, ar trebui să ia proprietățile de stil pe care le-ați descris. Convenabil, nu-i așa?
Mai mult decât atât, puteți salva o descriere a stilului nu este în textul paginii, și într-un fișier separat - se va utiliza descrierea stilului pe orice număr de pagini web. Uimitor convenabil. Și un alt lucru legat de acest avantaj - capacitatea de a schimba aspectul de orice număr de pagini, corectând o descriere a stilului într-un singur fișier (separat).
În plus, CSS vă permite să lucrați cu pagini de tipografie la un nivel mult mai ridicat decât standardul HTML, evitând grafice inutile pagina agravarea.
Să ne uităm la modul în care putem aduce astfel de oportunități minunate în viață.

stăpânirea practică CSS

După cum știți deja, informațiile de stil pot fi localizate fie într-un fișier separat, sau direct în codul de pagini web. Locul de amplasare descriere stiluri într-un fișier separat are sens dacă intenționați să utilizați aceste stiluri în mai multe, numărul de pagini. Pentru a face acest lucru, creați un fișier text simplu, descris folosind stiluri de limbaj de tip CSS, plasați fișierul de pe web-server și pagini web din cod, care va folosi stilurile acestui fișier, va trebui să facă o trimitere la acesta. Acest lucru se face cu ajutorul tag-ul , dispus în interiorul tag paginile:

În cazul în care NAZVANIE_ELEMENTA - HTML nume-tag-ul (H1, P, TD, A, etc ...), și parametrii din acolade - lista proprietățile elementelor și valorile lor atribuite. Pentru mai multe detalii despre comenzi limbaj CSS ne vom uita mai târziu.
exemplu:

În acest exemplu, toate rubricile de pe pagina, tag-ul H1 decorat este atribuit o dimensiune de font de 30 de puncte, iar culoarea albastră.
De asemenea, elementele de pagină utilizând CSS, utilizați mecanismul de moștenire: .. Asta este, dacă aveți o etichetă imagine în interior

.

Toate elementele unei clase b-c sunt prezentate în (sau celulă de tabel) bold-aliniat, centrat.

În această descriere, am atribuit (Cu toate acestea, ar putea fi aproape orice altă etichetă) dimensiunea, font și stil - acest stil va afișa toate elementele din pagină. Acest lucru a fost făcut doar de dragul de dorința de a reduce dimensiunea fișierului paginii, în schimb ați putea descrie acești parametri de două ori pentru fiecare clasă z. În continuare vom descrie două stiluri care diferă în culoarea și dimensiunea de indentare în jurul lor: stratul inferior este descris stilul z1, si de sus - z2. Folosind valori negative indentare și selectând valoarea dorită, noi căutăm să se asigure că stratul superior așa cum se mișcă pe cea anterioară.

P font-family: Times New Roman, serif;
culoare: # 000000;
margine-stânga: 15%;
marja de-dreapta: 15%;
margin-top: 1pt;
margin-bottom: 1pt;
text-liniuță: 1cm;
text-align: justifica;
>

H2 font-family: Verdana, Arial Cyr, Arial;
font-weight: bold;
font-size: 14pt;
Culoare: negru;
margine-stânga: 20%;
margin-top: 1cm;
text-align: left;
>

EXEMPLU crea o foaie de stil extern

Creați link-uri către diferite foi de stil pentru Netscape Navigator si Microsoft Explorer, folosind Java Script

Script Java Script in sine arata ca acest lucru:

Mai întâi, vezi un dialog standard, care apare atunci când creați un nou stil.
Puteți alege una dintre cele trei opțiuni - a crea un nou stil, pentru a realoca proprietățile standard HTML-tag-ul și de a folosi extensiile CSS personalizate.

După specificarea numelui stilului dvs. (sau selectați un stil de standard pentru remaparea) vă aflați în „Setări“ stil. Aici este destul de simplu, modificările pe care le puteți viziona în modul în timp real (deși cu unele rezerve).
Prima filă, vom defini modul în care va arăta ca o singură literă de textul nostru:
1. Se specifică fontul, care este scris textul. Rețineți că puteți specifica fie un anumit font, deși FreeSet, dar nu există nici o șansă ca acesta este un utilizator pe mașină (și nu este timpul - pagina afișată nu este cazul). Așa că am recomanda să folosească modelele oferite de DreamWeaver - de exemplu, Verdana, Arial, Helvetica, sans-serif. În acest caz, se va uita în primul rând pentru fontul Verdana - nu este găsit, atunci Arial, nu există nici un astfel? Apoi Helvetica, ei bine, în cazul în care nu este - atunci orice sans serif font - grotesc.
2. Specificați dimensiunea fontului - în comparație cu posibilitățile de HTML totul este doar o mare. Dimensiunea poate fi specificată în aproape orice, variind de la% și se termină pixeli și puncte.
3. Aceasta stabilește gradul de „greutatea“ a scrisorii, sau, cu alte cuvinte, grosimea ei. Opțiuni după cum puteți vedea prea mult.
4. Stilul de scriere - oblică (itallik), standard (normal)
5. Variante de scriere - de exemplu, tot textul tastat numai litere mici sau majuscule.
6. Înălțimea punctelor de referință de fonturi PostScript puncte sau orice alte valori
7. Care sunt scrisorile pe care le folosim - mari, mici sau standard și cele care și altele.
8. Diverse decor - subliniind, intermitent, și așa mai departe.
9. Culoarea textului.
Să acorde o atenție la elementele marcate cu *. Pe aceasta și pe alte tipuri de panouri din această stea indică faptul că această opțiune nu este afișată vizual în DreamWeaver (de exemplu, browser-ul trebuie să fie verificată)

Pe această filă vom face setările de fundal. Context întreaga pagină sau doar un anumit paragraf de text - care este modul în care v-ați decis să creeze un stil.
Culoarea de fundal (alegeți opțiunea din standard de 256 de culori sau de a crea culoarea)
cu fișierul de imagine de fundal
Setarea unei repetiție (reproducerea) a imaginii de fundal pe o pagină, de exemplu, poate fi setat pentru a copia numai imaginea de pe axa X
Aici specificați comportamentul imaginii de fundal în timp ce defilare - derulați cu ea sau de a sta în continuare
Observați orizontală poziția de start Context
Rețineți poziția de pornire verticală a fundalului
Imediat, observăm că punctele 3 și 4 trebuie utilizat „cu prudență“ - adică, verificați în toate browserele de compatibilitate necesare - în caz contrar, este posibil să aveți o discrepanță în cartografiere.

Bloc Point este utilizat pentru setarea parametrilor unui bloc de text (de exemplu, aici vorbim nu despre scrisorile individuale la punctul de tip).
Setare Distanța între cuvintele
Setarea distanței de urmărire sau de letterspacing
Alinierea verticală a șirului de text
Alinierea orizontală a textului
Indenta prima linie de text
Configurarea dispunerea sistemului de spații suplimentare între cuvinte și fraze (mai multe versiuni)
Aici totul este destul de simplu, eu folosesc de obicei doar și Alinierea textului Indentați Text. Elementele rămase numai în cazul în care necesitatea unui element de design se bazează pe stiluri (atunci când creați un text versiune numai).

Acest articol controlează limitele acestui fragment de text pe pagina (limitele localizarea în dreptunghiul specificat)
Lățimea dreptunghiului
Înălțimea dreptunghiului
Reglarea la stânga sau la dreapta justificare
Stabilirea comportamentului textului utilizând elementul din stânga sau la dreapta justificat (ca text fluxuri obiect similar)
Setarea cu plecare de la marginile dreptunghiului adiacent celorlalte elemente
Set liniuță de la marginile dreptunghiului textului.

Hai pe o varietate de setări decorative. De exemplu, va permite să creați un chenar în jurul elementului dvs., cu toate setările necesare.
Specifică lățimea bordurii pe stânga, dreapta, sus și jos
La fel, dar pentru o culoare de frontieră
Stilul de frontieră - diverse opțiuni pentru combinația puncte și linii :)

Listele Setări (numerotate și lista cu marcatori)
tip decorare glonț (multiple)
Utilizați ca un glonț imagini
poziționare glonț

Poziționarea - ceva important și interesant. Ajută la „pus“ obiectivul nostru oriunde în pagină. Deci:
Tipul de poziționare (relativă, absolută, etc.)
Amplasarea Z-coordonate - în care stratul este de a fi obiectul nostru.
Vizibile sau invizibile, obiectul nostru (poate fi folosit pentru a crea câmpuri goale în document)
Ce facem cu preaplinul (de exemplu, în cazul în care întregul nu este luat textul)
Localizarea obiectului - vertexul coordonatele pentru a specifica lățimea și înălțimea +
Padding pe toate părțile în pixeli sau o altă unitate.

Ei bine, ultima.
Notă Paginile de rupere (în principal pentru imprimare)
Efectul vizual - atunci când treceți peste un obiect se poate schimba forma sau obiect este declanșată atunci când descărcarea de unul dintre filtru standard (acesta din urmă este valabil numai pentru Internet Explorer).
Ei bine, acum aveți cunoștințe de bază de câmp CSS. Exemplele vor fi nu, dar teorie seacă și plictisitoare. În etapa următoare, vom aplica cunoștințele dobândite.

articole similare

• Bază pentru make-up, bază ce mai bine, tipuri și cum de a alege

• Elementele de bază de marketing - Motivație

• fotografii bromelide de plante, specii de bază de îngrijire