Tutorial Bigbos: Tutorial HTML pe intelesul tuturor,tutoriale html, coduri html, culori html, tabele, liste html, formulare, coduri muzica, coduri video, tutorial xhtml, tutorial css,Tutoriale de initiere in HTML si coduri HTML explicate

CSS - incadrarea continutului.

Folosind CSS putem incadra contiunutul, putem stabilii distanta intre continut si border intre border si marginea paginii. Vom folosi urmatoarele atribute:

- margin - distanta intre border si marginea paginii
- border - marginea si cutia care incadreaza continutul
- padding - distanta intr border si continut
- content - continutul propriu-zis (text, imagini, etc)

Vom aplica atributele de mai sus sub forma:



Observatie:
Vom considera exemplul de mai sus un element. Trebuie mentionat ca acest element are o latime totala de 270px (200+15x2+5x2+15x2=270px).

Concluzie:
latimea continutului + left padding + right padding + left border + right border + left margin + right margin = Latimea totala
si
inaltimea continutului + left padding + right padding + left border + right border + left margin + right margin = Inaltimea totala

Aceste doua formule trebuiesc luate in considerare atunci cand stabilim inaltimea si latimea continutului.

Nota:
Trebuie mentionat aici ca Internet Explorer, include padding-ul si border-ul in latime (width) in cazul in care acesta este specificat. Aceasta eroare se corecteaza introducand un DOCTYPE la inceputul documentului.

CSS - Border Style

Css border nu este altceva decat o bordura de jur-imprejurul continutului. Bordurile realizate cu ajutorul CSS vor fi puse in scena cu ajutiorul atributului border-style cu urmatoarele valori:

- none
- solid
- dotted
- dashed
- double
- groove
- ridge
- inset
- outset

Valorile precum groove, ridge, inset si outset pot genera borduri CSS 3D daca sunt alese culorile corecte.

CSS - Border Width

Lungimea bordurii in CSS este determinata de atributul border-width. Acest atribut nu va functiona in cazul in care nu este specificat in prealabil atributul border-style. Vom folosi ca unitati de masura pixelii sau putem pune valorile thin, medium sau thick. Iata si un exemplu:

CSS Border Color

Culoarea borduri va fi specificata de catre atributul border-color in sistemul hexazecimar, RGB, sau pur si simplu numind culorile. De retinut ca se poate stabili ca bordura sa fie transparenta in cazul in care este nevoie.
Pentru a putea stabilii culoarea bordurii in CSS trebuie mai intai sa stabilim stilul acesteia dupa cu urmeaza.



Observatie:
Se pot deasemenea stabilii proprietati individuale pentru fiecare dintre laturile chenarului obtinut.



Forma scurta de a scrie toate aceste valori intr-o singura expresie este



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:


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

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)

CSS - Padding

Padding se refera la regiunea dintre continut si bordura (border). Vom stabili aceasta regiune in acelasi fel ca si la atributul margin, folosind:

- padding-top:10px;
- padding-bottom:10px;
- padding-right:20px;
- padding-left:20px;

Expresia CSS sub forma scurta se formeaza ca si la margin: