Web Design Web Design | Page 15

SCIENCE SERIES 15

Folosind forma scurta de a scrie CSS putem stabill aceste valori mult mai simplu economisind timp. Iata cateva exemple care sper sa va lamureasca in privinta contruirii acestora:

- div { border-style:dotted solid double dashed; }

Bordura de sus este "dotted", cea din stanga "solid", cea din dreapta "double" iar cea de jos este "dashed".

- div { border-style:dotted solid double; }

Bordura de sus este punctata, cea din dreapta si din stanga sunt solide iar bordura de jos este dubla.

-div { border-style:dotted solid; }

Bordurile de sus si de jos sunt punctate iar cele din dreapta si din stanga sunt solide.

- div { border-style:dotted; }

Te las sa ghicesti.

Desi deasupra am luat un exemplu de baza folosind border-style, aceleasi reguli se aplica la toate celelalte atribute mentionate in acest tutorial CSS.

Observatie:

O alta metoda de a coda in CSS toate proprietatile bordurii intr-o singura expresie este:

border: 4px dotted #EFEFEF;

De mentionat ca ordinea va fi mereu aceasta.

CSS - Outline

Atributul outline a aparut odata cu introducerea CSS2 si are urmatorile proprietati:

- outline

- outline-color

- outline-style

- outline-width

Outline deseneaza un chenar de jur imprejurul continutului

Nota:

Vezi tabelul de referinte pentru valori disponibile atributului outline.

CSS - Margin

Atributul margin stabileste "dupa cum zice si numele" o distanta in afara bordurii stabilite anterior. Marginea definita nu va avea nici o culoare, cu alte cuvinte va fi transparenta.

Pentru a defini aceasta margine vom stabili valoarea fiecarei margini in parte cea de sus (margin-top)marginea din dreapta si din stanga ( margin-right si respectiv margin-left), si cea de jos (margin-bottom). Retine aceasta ordine intrucat iti va fi utila atunci cand stabilesti margin-ul folosind expresia scurta:

margin: 30px 20px 30px 50px; (sus, dreapta, stanga, jos)

margin: 30px 20px 50px; (sus, dreapta si stanga, jos)

margin: 30px 20px (sus si jos, dreapta si stanga)

margin: 30px (sus jos dreapta si stanga - cu alte cuvinte o spatiere de 30 de pixeli de jur imprejurul bordurii)