CSS Box: improvizacija i učinak

Cascading Style Sheets (CSS) za sve svoje logičke jednostavnosti omogućuju ne samo stvoriti spektakularan dizajn rješenje, ali i pružiti elemente pravu akciju, oponašati učinkovitost stvarnog koda.

Svaki vizualni oznaka HTML-obilježavanje - pravokutna površina određenoj strukturi i sadržaju. Element sadrži podatak o koordinatama, veličina, padding, boja, font, stil fonta, itd. Okvir CSS-element određuje im zauzetog prostora, koji se nalazi s unutrašnje strane njezinih granica na koji su ovdje širine.

opis sintaksa

Polje Element plasman navedeno koordinate u odnosu na gornjem lijevom kutu stranice (lijevo, vrh), veličine u horizontalnih i vertikalnih pravaca (širina, visina). Svi dizajn i animacija elementi izrađeni su u parovima „imovine: vrijednost”.

Opis vrši direktno u kodu stranice za umetanje stil ili u zasebnoj datoteci, pokazujući na njega LINK referenca. sintaksa:

#name {objekt: vrijednosti; Objekt: vrijednosti; Objekt: vrijednosti; ...}

ili

.name {objekt: vrijednosti; Objekt: vrijednosti; Objekt: vrijednosti; ...}

Ime također može biti p, tijelo, html, stol, td ... da je ime HTML markup oznakom. Može biti izravno povezan s opisom elementa stilu.

Prije nego što napraviti moj vlastiti stil pisanja, nije na odmet vidjeti kako se to radi na popularne web stranice, imajući kod stranice, ili pritiskom na Ctrl-U da bi je vidjeli izravno u pregledniku.

Glavni parametri

Zapravo CSS okvir je element predstavljao stil (granica stilu), boja (border-color), širina (border-width). To sve se može sažeti u jednom entitetu - granice. Možete opisati svaki frame granicu samostalno (granica-top, border-bottom, granica-lijevo, granica-desno).

CSS okvir opisuje općim pravilima CSS:

granica: 3px;
border-color: red;
border-style: dvostruka isprekidane čvrste točkasta.

Ovaj opis postavlja širinu granice od 3 piksela, boja - crvena, stil strana: gornju stranu dvostruke, u pravu - isprekidane, čvrste dno, lijevo - točke.

border-width: 1 piksela 2 piksela 4 px 8 piksela;
border-color: plavo;
border-style: tufne.

Evo, dimenzije svake strane su redom od vrha, od kazaljke na satu, boja - plava, i stil - spot.

border-color: plava crvena zelena crna;

u ovom opisu, pojedinačno navedeno boje na svakoj strani. Granica svojstvo može sadržavati više parametara, a kutovi okvira može biti okrugla:

granica: 1 piksela zelene krute tvari;
granična radijus: 0px 4 px 8 piksela 12 piksela;
-moz granica-radijus: 0px 4 px 8 piksela 12 piksela;
-webkit granica-radijus: 0px 4 px 8 piksela 12 piksela;

O tome kako napraviti okvir u CSS, to ovisi o iskoristivosti posjetitelja, jer obično stilski efekt se koristi za tehničke svrhe, kada je važno pokazati točnu lokaciju i veličinu područja na stranicu.

Debljina okvira i njegova svrha

Odabirom debljinu okvira, možete koristiti px, pt, em ..., ali treba imati na umu da je uvijek u elementu polja. Teško je pretpostaviti da je okvir ima CSS dizajn svrhe, ali tehnički je vrlo korisno istaknuti elemente stranice.

Ako je glavni okvir klasa zaključana, da je odsutan, tako da ga navodeći u pseudo-klase: hover, može se pokazati da je posjetitelj elementa stranice, kada je pokazivač miša, kao što su isticanje stavke izbornika. Ponekad je potrebno odabrati nešto klikom na sliku ili povući nešto negdje. To je vrlo povoljno za korištenje točkica okvir, a ne za promjenu elementa pozadinu ili njen sadržaj.

Neke aplikacije zahtijevaju dodjelu područja stranice ili odaberite stavke za daljnju obradu. U tom slučaju, u trenutku klikom stvoriti div sa granice i dokle god posjetitelj ne otpustite tipku miša, promijeniti veličinu, pokazujući vizualno rezultat izbora.

izvan pod

CSS tutoriali su vrlo zanimljiva, jer je važnost istraživačkih kodova stranicama popularne web stranice. Međutim, vlastita sredstva moraju biti jedinstveni, mora imati svoj lice.

Pod uvjetom da je sintaksa CSS okvir ne daje takvu raznolikost, kao vlastitu inicijativu. Improvizacija - veliki start, a ništa ne sprečava programer za izgradnju vlastite okvir. Pogotovo sa svim dostignućima Internet tehnologija i sposobnosti postojećih standarda imaju mnogo obećavajuće ideje temelje na stvarnim nedostacima postojećeg sintakse, koji je (po definiciji) je uvijek bio strogo formalni.

Konkretno, ako te utvrditi opseg pojedinih elemenata, čini prikladno za to sveobuhvatno. Isticanje pojedinih oznake sa strane i kutova regije, možete dobiti nevjerojatne efekte. A dodjeljivanje odgovarajućih vodiča, može stvoriti dinamičke elemente stranice, mijenja položaj, oblik i sadržaj.