Tehnologii WEB

Cursul 6
Tag-urile DIV i SPAN
DIV si SPAN sunt elemente HTML utlizate exclusiv pentru a pastra informatia
CSS. In timp ce DIV asigura o linie noua inainte si dupa continut(similar cu paragraf), SPAN
nu asigura acest rezultat.
Sintax:
<div> ...</div>
<span> ... </span>
Tag-ul DIV creaza sectiuni de blocuri in pagina, a caror forma si grafica de continut
pot fi manipulate pentru fiecare separat. Are doar un singur atribut HTML - align (pt. aliniere
pe orizontala) care poate avea urmatoarele valori: left (stanga), right (dreapta), center (centru),
justify (distanta textului fata de margini egala).
Tag-ul SPAN creaza posibilitatea modificarii separate a unei portiunii dintr-un
context, putand fi folosit si ca o "clasa" cu CSS. Singur nu are nici un efect vizual propriu si
nu foloseste nici un atribut HTML special.
Chiar daca folosite singure, DIV si SPAN nu au nici un efect major, in combinatie
cu CSS pot crea aspecte grafice importante. Pentru aceasta, ambele pot folosi atributul style
(cu proprietati CSS) ori atributele id sau class ca identificator pentru stiluri CSS.
Exemplu:
CSS:
div {background-color: #66FFFF}
span.color {color: red}
HTML:
<div>Acest div este tratat similar cu un paragraf,dar
<span class="color">acest span</span> nu este tratat ca un paragraf.</div>
Tag-ul DIV
Tag-ul <div> ... </div> este unul din cele mai folosite elemente HTML, aceasta
deoarece in combinatie cu proprietati CSS poate crea efecte grafice deosebite, iar in interiorul
lui pot fi incluse oricare elemente HTML: tabele, formulare, marcatori, linii sau alte DIV-uri.
Cadrul in care acestea sunt adaugate poate avea propriul fundal (background), lungime,
inaltime si margini cu diferite linii.
Iata un exemplu in care avem 2 div-uri, unul contine un formular iar celalalt o lista
"<ul> ... </ul>", fiecare DIV cu proria culoare de fundal, dimensiuni stabilite si margini
diferite.
<div style="width:250px; background:#aaee88; border:1px solid blue;">
<form action="" method="post">
Nume: <input type="text"></input><br>
E-mail:<input type="text"></input><br>
<input type="submit" value="Trimite"></input>
</form>
</div>
Alt DIV
<div style="width:180px; background:#88aafe; border:5px outset #888888;">
<ul>

<li>Linie 1</li>
<li>Linie 2</li>
<li>Linie 3</li>
</ul>
</div>
In atributul "style" sunt specificate proprietatile CSS care stabilesc aspectul grafic al
fiecarui DIV (lungime in pixeli, fundal si bordura).
Acest cod va afisa intr-o pagina web urmatorul rezultat:

Un alt aspect important este si faptul ca putem pozitiona continutul din interiorul tagului <div> ... </div> oriunde in pagina, folosind proprietati CSS precum:
position - care poate lua valorile: static, relative, fixed sau absolute.
margin - care stabileste distanta dintre marginea cadrului sectiunii (blocul) DIV si
elementele din jurul lui.
Iata un exemplu in care, prin folosirea mai multor DIV-uri pozitionate suprapus, putem
afisa in pagina un titlu cu aspect grafic deosebit. Codul este urmatorul:
<div style="position:relative; font-size:21px;">
<div style="position:absolute; margin-top:-1; margin-left:-2; color:white;">Titlu Exemplu</div>
<div style="position:absolute; margin-top:1; margin-left:2; color:black;">Titlu Exemplu</div>
<div style="position:absolute; margin-top:0; margin-left:0; color:silver;">Titlu Exemplu</div>
</div>
In acest exemplu avem un prim DIV cu atributul "style" in care avem o proprietate de
pozitionare relativa (pt. a pozitiona toate celelalte elemente pe care el le incadreaza dupa
contextul scris anterior) si o alta proprietate pentru marimea textului. In interiorul acestui DIV
avem alte 3 div-uri, pozitionate absolut si care incadreaza fiecare cate un text identic. Prin
pozitionarea absoluta div-urile se suprapun, la o distanta stabilita de proprietatile "margintop" si "margin-left", iar prin culoare diferita (cu proprietatea "color") data textului din fiecare
"div" va apare in pagina web urmatorul rezultat:
Pentru a folosi tag-urile DIV eficient si cu rezultate deosebite este necesar sa
cunoasteti proprietatile CSS de baza (pentru fonturi, pozitionare, margini, borduri,
background).
Tag-ul SPAN
Cu tag-ul <span> .. </span> puteti adauga stiluri grafice unei anumite portiuni dintrun context. Pentru aceasta trebuie folosit impreuna cu proprietati CSS care pot fi adaugate
printr-un atribut "style" in interiorul etichetei "<span>" (sau in foi de stil).

Pentru a intelege mai bine, iata un exemplu in care se scoate in evidenta anumite
cuvinte dintr-un text. Pentru aceasta incadram cuvintele respective intr-un tag SPAN caruia ii
adaugam proprietatile dorite, ca in exemplul urmator:
Aceasta este o lectie din <span style="background:#88fe88; fontweight:bold;">Cursul HTML</span> de pe MarPlo.net.
- am adaugat portiunea din context intr-un tag SPAN pentru a-i putea aplica
proprietatile grafice dorite si care nu afecteaza restul continutului.
- astfel, prin proprietatile adaugate in "style" (background:#88fe88; si fontweight:bold;), in pagina web va fi afisat textul in felul urmator:
Aceasta este o lectie din Cursul HTML de pe MarPlo.net.
Tag-ul SPAN poate fi folosit si ca o clasa pentru CSS. Astfel, proprietatile adaugate
elementului "span" intr-o foaie de stil vor fi transferate tuturor elementelor din pagina care
sunt incadrate in tag-uri "<span> ... </span>".
Iata un exemplu:
<html>
<head>
<title>Titlul</title>
<style type="text/css">
span {
border:2px solid red;
padding:1px;
color:#1111fe;
}
</style>
</head>
<body>
<h4>Exemplu de <span>text cu eticheta SPAN</span> in interiorul
frazei.</h4>
<ul>
<li>Linia 1</li>
<li><span> Linie 2, in span </span></li>
<li>Linia 3</li>
<li><span> Linie 4, in span </span></li>
<li>Linia 5</li>
</ul>
</body>
</html>
- observati cum a fost adaugat elementul "span" in tag-ul "<style> ... </style>" din
sectiunea HEAD a codului HTML. Acest element face referire la toate tag-urile
"<span>...</span>" din document si le transmite aceleasi proprietati.
- acest cod va afisa intr-o pagina web urmatorul rezultat:

Diferenta dintre DIV si SPAN

Diferenta dintre DIV si SPAN este faptul ca DIV incadreaza o sectiune din document
sub forma unui bloc, iar SPAN incadreaza o portiune din context sub forma de linii.
Iata un exemplu din care se poate intelege mai bine: atribuim aceeasi proprietate
grafica (bordura rosie) unui tag DIV si unui tag SPAN.
<div style="border:1px solid #fe1111;">
Fraza pe mai multe linii, <br>
continua cu linia a doua, <br>
se termina cu linia a treia.
</div>
<br>
- Acum cu SPAN:<br><br>
<span style="border:1px solid #fe1111;">
Fraza pe mai multe linii, <br>
continua cu linia a doua, <br>
se termina cu linia a treia.
</span>
In pagina web va apare:

Observati diferenta prin modul in care este afisata bordura. Pentru DIV aceasta
incadreaza exteriorul sectiunii (blocul) div-ului, iar pentru SPAN bordura este afisata pe
fiecare linie. De aceea este indicata folosirea tag-ului "<span></span>" pentru continut din
interiorul unei linii.
Cand aveti mai multe elemente <div></div> si <span></span> in pagina, este
indicat folosirea atributului "id" sau "class". Acestora le acordati proprietati CSS o singura
data in sectiunea HEAD sau intr-un fisier CSS extern. Este mai eficient decat sa scrieti in
fiecare "<div>" si "<span>" cate un atribut "style".

CSS3 - Cascading Style Sheets

Introducere
CSS este prescurtarea de la Cascading Style Sheets si este utilizat pentru controulul
stilului si aspectului unei pagini web.
CSS3 este noul standard pt. CSS.
Exemplu:
div
{
transform:rotate(30deg);
}
Modulele CSS3
CSS3 a fost impartit in "module". Specificatiile vechi au fost separate in parti mai
mici iar noile specificatii au fost de asemenea adaugate.
Cele mai importante module CSS3 sunt:
Selectoarele (Selectors)
Model caseta (Box Model)
Fundaluri si Borduri (Backgrounds and Borders)
Efecte Text (Text Effects)
Transformari 2D/3D (2D/3D Transformations)
Animatii (Animations)
Aspect Multi-Colaoana (Multiple Column Layout)
Interfata Utilizator (User Interface)
Specificatiile CSS3 sunt inca in dezvoltare la W3C. Totusi, ultimele versiuni ale
browserelor includ propietatile CSS3.
Bordurile in CSS3
In CSS3 se pot crea borduri cu colturi rotunjite, se pot adauga umbre la casete sau se
pot utiliza imagini ca si borduri fara a mai fi nevoie de Photoshop.
border-radius
box-shadow
border-image
Colturi rotunjite in CSS3
Spre deosebire de CSS2 in care trebuia sa utilizam mai multe imagini pentru a avea
colturi rotunjite la casete, in CSS3 putem face acest lucru foarte usor si fara sa mai fie nevoie
de imagini.
Propietatea CSS3 care ne ajuta in acest caz este border-radius.
div
{border:2px solid;
-moz-border-radius:25px; /* Firefox */
border-radius:25px;}

Umbra la casete in CSS3

In CSS3 propietatea box-shadow ne permite sa adaugam umbra la o caseta.
div
{-moz-box-shadow: 10px 10px 5px #888888; /* Firefox */
-webkit-box-shadow: 10px 10px 5px #888888; /* Safari and Chrome */
box-shadow: 10px 10px 5px #888888;}

Borduri cu imagini in CSS3

Cu ajutorul propietatii border-image puteti folosi imagini pentru a crea borduri la
casete.
div
{-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
border-image:url(border.png) 30 30 round;}

Fundalul in CSS3
CSS3 contine propietati noi pentru fundal (background) ce permit un control mai bun
al fundalului in CSS.
In continuare se vor prezenta propietatile background-size si background-origin si
vom invata cum putem utiliza mai multe imagini pentru background.
Firefox 3.6 si versiunile anterioare nu suporta propietatea background-origin si este necesara utilizarea
prefixului -moz- pentru propietatea background-size.
Safari 4 necesita prefixul -webkit- pentru a suporta noile propietati de background.
Internet Explorer 9, Firefox 4, Chrome, Safari 5 si Opera suporta noile propietati de background.

Propietatea background-size in CSS3

Propietatea background-size specifica dimensiunile pentru imaginea de background.
In CSS2 dimensiunile imaginii de background erau date de dimensiunile imaginii
utilizate. In CSS3 putem specifica dimensiunile imaginii de background astfel incat, prin
redimensionare, putem utiliza o singura imagine in mai multe locuri.
Dimensiunile pot fi specificate in pixeli sau procente (dimensiunile sunt relative la
dimensiunile elementului parinte).
Exemplu:
div
{background:url(img_flwr.gif);
-moz-background-size:80px 60px; /* Firefox */
background-size:80px 60px;
background-repeat:no-repeat;}

Propietatea background-size specifica dimensiunile pentru imaginea de background.

(valoare standard este auto.)
Sintaxa:
background-size: length|percentage|cover|contain;
length - stabileste latimea (width, prima valoare specficata) si inaltimea (height, a
doua valoare specficata) imaginii de background. Daca este specficiata o singura valoare cea
de a doua va fi "auto".
percentage - stabileste latimea si inaltimea imaginii de background ca procent din
suprafata elementului parinte.
cover - reduce dimensiunile imaginii de background astfel incat aceasta sa incapa in
interiorul suprafetei cu continut.
contain - mareste dimensiunile imaginii de background astfel incat aceasta sa incapa
in interiorul suprafetei cu continut.
Propietatea background-origin in CSS3
Propietatea background-origin specifica zona de pozitionare a imaginii de fundal.
Imaginea de background poate fi asezata in zona: content-box, padding-box sau
border-box.

Exemplu:
div
{background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
background-origin:content-box;}
Propietatea background-origin specifica zona de pozitionare a imaginii de fundal.
Nota! Daca propietatea background-attachment pentru imaginea de background are
valoarea "fixed", aceasta propietate nu are niciun efect.
Sintaxa:
background-origin: padding-box|border-box|content-box;
padding-box - imaginea de fundal este pozitionata in padding box
border-box - imaginea de fundal este pozitionata in border-box
content-box - imaginea de fundal este pozitionata in content-box

Imagini multiple in background

CSS3 ne permite sa utilizam mai multe imagini pentru background-ul unui element.
Nota: Internet Explorer nu suporta mai multe imagini pentru background.
Exemplu:
body
{
background-image:url(img_flwr.gif),url(img_tree.gif);
}
Propietati noi pentru background
background-clip - specifica zona de colorare a imagini de background.
Exemplu:
div
{background:url(/images/w3css.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
background-clip: content-box;
-webkit-background-clip: content-box; /* Safari and Chrome */}
Sintaxa:
background-clip: padding-box|border-box|content-box;
padding-box - imaginea de backgroundd este decupata din padding box
border-box - imaginea de backgroundd este decupata din border-box
content-box - imaginea de backgroundd este decupata din content-box
Efecte de text in CSS3
CSS3 include caracteristici noi pentru text. In continuare vom studia urmatoarele
caracterisitici:
text-shadow
word-wrap
Internet Explorer nu suporta inca propietatea text-shadow.
Firefox, Chrome, Safari si Opera suporta propietatea text-shadow.
Majoritatea browserelor suporta propietatea word-wrap.

CSS Text cu Umbra (Text Shadow)

In CSS3, propietatea text-shadow aplica o umbra pe text.
Putem specifica umbra pe orizontala, umbra pe verticala, distanta pentru blur si
culoarea umbrei.
Exemplu:
h1
{text-shadow: 5px 5px 5px #FF0000;}

Incadrarea cuvintelor in CSS3 (Word Wrapping)

Daca avem un cuvant prea lung acesta iese din suprafata in care este scris.
Cu ajutorul propietatii word-wrap putem forta textul sa se incadreze in suprafata
respectiva (indiferent unde se afla acest cuvant intr-o fraza).
Exemplu:
p {word-wrap:break-word;}
Propietati noi pentru text in CSS3
Propietate

Descriere

CSS

hangingpunctuation

Specifica daca un caracter de punctuatie va fi plasat in afara casetei de line.

punctuation-trim

Specifica daca un caracter de punctuatie va fi taiat.

text-align-last

Descrie modul in care ultima line a unui bloc sau linia dinaintea liniei de pauza fortate este aliniata
atunci cand text-align este "justify".

text-emphasis

Se aplica accent si culoare pe textul elementelor.

text-justify

Specifica metoda de justificare ce va fi folosita cand text-align este "justify"

text-outline

Specifica o schita de text.

text-overflow

Specifica ce se va intampla cand textul depaseste suprafata elementului.

text-shadow

Adauga umbra la text.

text-wrap

Specifica regulile pentru liniile de pauza la text.

word-break

Specifica regulile pentru liniile de pauza la scripturile non-CJK.

word-wrap

Permite ruperea cuvintelor lungi (ce nu pot fi despartite).

Fonturile in CSS3

Inainte de aparitia CSS3, designerii web trebuiau sa foloseasca fonturi care erau deja
instalate pe calculatorul utilizatorului. Cu CSS3, designerii web pot sa foloseasca ce font
doresc.
Daca doriti sa folositi un font nu trebuie decat sa il incarcati pe serverul web si acesta
va fi descarcat automat utilizatorului cand va fi nevoie de el. Fonturile "proprii" sunt definite
in CSS3 cu ajutorul regulii @font-face.
In regula @font-face trebuie sa definiti mai intai un nume pentru font (spre exemplu
PrimulMeuFont) si apoi sa specificati calea catre fisierul fontului.
Pentru a utiliza fontul pentru un element HTML trebuie sa faceti referire la numele
acestuia (PrimulMeuFont) cu ajutorul propietatii font-family.
Exemplu:
<style type="text/css">
@font-face
{font-family: PrimulMeuFont;
src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */}
div
{font-family:PrimulMeuFont;}
</style>

Pentru a folosi text ingrosat trebuie sa adaugati o alta regula @font-face care sa contina
descrierea pentru textul ingrosat.
Exemplu:
@font-face
{font-family: PrimulMeuFont;
src: url('Sansation_Bold.ttf'),
url('Sansation_Bold.eot'); /* IE9+ */
font-weight:bold;}
"Sansation_Bold.ttf" este un fisier separat pentru font care contine caracterele
ingrosate (bold) pentru fontul Sensation. Browserele vor folosi aceasta versiune a fontului
cand parti din textul cu font-family "PrimulMeuFont" trebuie redate ca bold. In acest fel puteti
avea numeroase reguli @font-face pentru acelasi font.
Descriptorii (Descriptors) de fonturi in CSS3
In tabelul urmator sunt listati toti descriptorii de fonturi ce pot fi definiti intr-o regula
@font-face.
Descriptor

Valoare

Descriere

font-family

name

Obligatoriu - defineste un nume pentru

font.

src

URL

Obligatoriu - defineste URL-ul catre font.

font-stretch

normalcondensedultra-condensedextra-condensedsemicondensedexpandedsemi-expandedextra-expandedultra-expanded

Optional - defineste cum va fi afisat

(intins) fontul. Implicit este "normal".

font-style

normalitalicoblique

Optional - defineste stilul fontului.

Implicit este "normal".

font-weight

normalbold100200300400500600700800900

Optional - defineste cum va fi ingrosat

fontul. Implicit este "normal".

unicoderange

unicode-range

Optional - defineste gama de caractere

UNICODE pe care fontul o suporta.
Implicit este "U+0-10FFFF".