Practic CSS masterizare.
Care este css puteți citi aici.
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:Primii doi parametri ai etichetei sunt nume rezervate sunt necesare pentru a spune browser-ului că această pagină va fi utilizată de către CSS. A treia opțiune - href = - indică fișierul care conține descrierea de stiluri. Această opțiune ar trebui să conțină o cale relativă la dosar - în cazul în care este pe același server ca și documentul din care se adresează - sau un URL complet () în cazul în care foaia de stil este situat pe un alt server.
Un al doilea exemplu de realizare, în care descrierea este în Webstranichki codul de stil în tag-ul
, etichetă . În acest caz, puteți utiliza aceste stiluri pentru elemente, care sunt situate în interiorul paginii. Parametrul type = „text / css“ este obligatorie și este folosit pentru a specifica browser-ul pentru a utiliza CSS.Și al treilea exemplu de realizare, atunci când descrierea stilului situat direct în interiorul tag-ul elementului pe care îl descrie. Acest lucru se face utilizând parametrul STIL utilizat în aplicarea CSS cu cele mai multe tag-uri HTML standard. Această metodă nu este de dorit, și este clar de ce: aceasta duce la pierderea unuia dintre principalele avantaje ale CSS - posibilitățile departamentului de informații al descrierii de prelucrare a informațiilor. Cu toate acestea, dacă doriți să descrie doar un singur element, această opțiune este locația descrierii de stiluri este, de asemenea, destul de aplicabil.
Să considerăm mecanismul prin care stilurile sunt atribuite elementelor paginilor Web. Cel mai simplu caz atribuirea unor elemente ale definiției de stil este după cum urmează:
În cazul în care NAZVANIE_ELEMENTA - numele HTMLtega (H1, P, TD, A, etc ...), și parametrii din acolade - lista proprietăților membre și valorile lor atribuite. Pentru mai multe detalii despre comenzi limbaj CSS ne vom uita mai târziu.
Î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
.
, elaborat cu ajutorul CSS, crestată, astfel că secțiunea este ocupată numai o anumită parte din lățimea paginii, de asemenea, imaginea va moșteni valoarea amprentei menționate în această secțiune.CSS pune în aplicare capacitatea de a atribui stiluri nu sunt toate aceleași elemente ale paginii, și selectiv - se utilizează parametrul class = „nume de clasă“ sau codul de identificare =. atribuie orice element de pagină. Luați în considerare aceste caracteristici mai detaliat.
Parametrul CLASA este utilizat în cazul în care aveți nevoie pentru a crea acelasi stil pentru mai multe, dar nu toate elementele paginii (identice sau diferite).
Toate elementele unei clase b-c sunt prezentate în (sau celulă de tabel) bold-aliniat, centrat.
Continuta in textul celulei va fi afișată în conformitate cu descrierea clasei.
Astfel, aveți posibilitatea să atribuiți un stil descris de orice element de pagină de text. Rețineți că, atunci când scrieți numele de clasă sunt caractere de caz, în funcție de modul în care numele unei clase pentru a descrie stilul!
Atribuirea de stiluri folosind identificatori folosite în cazul în care acest identificator corespunde unui singur element de pe pagină. Dacă elementul pe care doriți să atribuiți un stil, câteva - este clasa.
Proprietățile elementelor,
controlate cu ajutorul CSS
Deci, ne întoarcem la studiul elementelor de siguranță ale CSS. Descrierea proprietăților elementelor în CSS include numele proprietății, urmat de atribuindu-o anumită valoare. Numele proprietății și valoarea separate prin două puncte.
Referindu-se la dimensiunile relative de font absolut, mai degrabă decât, vă priva oamenii vizionează paginile dvs., posibilitatea de a mări sau micșora dimensiunea fontului cu ajutorul butoanelor speciale în browser-ul, în conformitate cu rezoluția ecranului și viziune. Fonturile va afișa doar o dimensiune pe care ați specificat atunci când scrii o pagină.
Prin urmare, dacă utilizați o dimensiune de font absolută nu se datorează concepției artistice sau intenție insidios, vă recomandăm să utilizați în acest scop, pentru a specifica dimensiunea ca procent. În acest caz, dimensiunea fontului este mai mică (mai mare), cantitatea specificată pe care procentul decât atunci când plasându-l folosind standardul HTML-tag.
Un alt una dintre cele mai interesante opțiuni folosind CSS ascuns în spatele posibilitatea aparent simplu: puteți specifica valori pentru umplutură în jurul obiectelor ca valori negative! Acesta vă permite să impună un singur strat de text la altul și de a obține un rezultat foarte interesante și atractive.
Pentru a realiza un astfel de efect nu este foarte dificil, să încercăm să creeze o pagină cu titlul, care va apărea în trei dimensiuni, dar nu se va folosi programul.
Crearea unui nou fisier HTML si scrie o descriere de stiluri pentru trei obiecte:
Î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ă.In interiorul descriere stil pentru formatare ușoară, puteți utiliza orice număr de spații și pauze de linie - browser-stil de lectură arunca pur și simplu toate spațiile suplimentare.
În acest stil, am cerut ca punctele
pe toate paginile care utilizează această descriere va fi afișat în Times New Roman, sau dacă fontul nu este instalat pe mașină, un font diferit, dar din această familie (Serif). font color am instalat negru, alinierea - complet (pe ambele părți).
Să creeze, de asemenea, un stil pentru titluri de articole:
Toate titlurile paginilor noastre, tag-ul decorate
, vor fi afișate cu caractere aldine Verdana sau dacă fontul nu este instalat, fontul Arial. Dimensiunea Header am stabilit egal cu 14 puncte, negru, marginea din stânga este de 20% din lățimea paginii și marginea superioară -. 1 cm subiect vor fi aliniate în raport cu marginea din stânga a paginii.
Pentru a crea stilurile noastre în paginile noastre, toate fișierele din secțiunea html
avem nevoie pentru a pune o linie cu referire la foaia de stil și o indicație a utilizării CSS:Deoarece fișierul de stiluri va fi amplasat în același director de server ca și restul paginii, parametrul href = „URL-ul“, în acest caz, este doar numele fișierului nostru CSS (styles.css).