Tehnologii WEBCursul 6
Tag-urile DIV i SPANDIV 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: ... ...
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: Acest div
este tratat similar cu un paragraf,daracest span nu este tratat ca
un paragraf.
Tag-ul DIVTag-ul ... 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 "
", fiecare DIV cu proria culoare de fundal, dimensiuni stabilite
si margini diferite.
Nume:
E-mail:
Alt 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 tag-ului ... 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:
Titlu - ExempluTitlu - ExempluTitlu - Exemplu
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 "margin-top" 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 SPANCu tag-ul .. puteti adauga stiluri grafice unei
anumite portiuni dintr-un context. Pentru aceasta trebuie folosit
impreuna cu proprietati CSS care pot fi adaugate printr-un atribut
"style" in interiorul etichetei "" (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 Cursul HTML 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 font-weight:bold;), in pagina web
va fi afisat textul in felul urmator:Aceasta este o lectie
dinCursul HTMLde 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 " ... ".Iata un exemplu:
Titlul span { border:2px solid red; padding:1px; color:#1111fe;
}
Exemplu de text cu eticheta SPAN in interiorul frazei.
- Linia 1
- Linie 2, in span
- Linia 3
- Linie 4, in span
- Linia 5
- observati cum a fost adaugat elementul "span" in tag-ul " ...
" din sectiunea HEAD a codului HTML. Acest element face referire la
toate tag-urile "..." din document si le transmite aceleasi
proprietati.- acest cod va afisa intr-o pagina web urmatorul
rezultat:
Diferenta dintre DIV si SPANDiferenta 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.
Fraza pe mai multe linii,
continua cu linia a doua,
se termina cu linia a treia.
- Acum cu SPAN:
Fraza pe mai multe linii,
continua cu linia a doua,
se termina cu linia a treia.
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 "" pentru continut din
interiorul unei linii.Cand aveti mai multe elemente si 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 "" si "" cate un atribut "style".
CSS3 - Cascading Style Sheets
IntroducereCSS 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 CSS3CSS3 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 CSS3In 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-radiusbox-shadowborder-image
Colturi rotunjite in CSS3Spre 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 CSS3In 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 CSS3Cu 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 CSS3CSS3 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 CSS3Propietatea 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 CSS3Propietatea
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
boxborder-box - imaginea de fundal este pozitionata in
border-boxcontent-box - imaginea de fundal este pozitionata in
content-box
Imagini multiple in backgroundCSS3 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 backgroundbackground-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
boxborder-box - imaginea de backgroundd este decupata din
border-boxcontent-box - imaginea de backgroundd este decupata din
content-box
Efecte de text in CSS3CSS3 include caracteristici noi pentru
text. In continuare vom studia urmatoarele caracterisitici:
text-shadow word-wrapInternet 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 CSS3PropietateDescriereCSS
hanging-punctuationSpecifica daca un caracter de punctuatie va
fi plasat in afara casetei de line.3
punctuation-trimSpecifica daca un caracter de punctuatie va fi
taiat.3
text-align-lastDescrie modul in care ultima line a unui bloc sau
linia dinaintea liniei de pauza fortate este aliniata atunci cand
text-align este "justify".3
text-emphasisSe aplica accent si culoare pe textul
elementelor.3
text-justifySpecifica metoda de justificare ce va fi folosita
cand text-align este "justify".3
text-outlineSpecifica o schita de text.3
text-overflowSpecifica ce se va intampla cand textul depaseste
suprafata elementului.3
text-shadowAdauga umbra la text.3
text-wrapSpecifica regulile pentru liniile de pauza la
text.3
word-breakSpecifica regulile pentru liniile de pauza la
scripturile non-CJK.3
word-wrapPermite ruperea cuvintelor lungi (ce nu pot fi
despartite).3
Fonturile in CSS3Inainte 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: @font-face{font-family: PrimulMeuFont;src:
url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+
*/}div{font-family:PrimulMeuFont;}
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 CSS3In tabelul urmator
sunt listati toti descriptorii de fonturi ce pot fi definiti intr-o
regula @font-face.DescriptorValoareDescriere
font-familynameObligatoriu - defineste un nume pentru font.
srcURLObligatoriu - defineste URL-ul catre font.
font-stretchnormalcondensedultra-condensedextra-condensedsemi-condensedexpandedsemi-expandedextra-expandedultra-expandedOptional
- defineste cum va fi afisat (intins) fontul. Implicit este
"normal".
font-stylenormalitalicobliqueOptional - defineste stilul
fontului. Implicit este "normal".
font-weightnormalbold100200300400500600700800900Optional -
defineste cum va fi ingrosat fontul. Implicit este "normal".
unicode-rangeunicode-rangeOptional - defineste gama de caractere
UNICODE pe care fontul o suporta. Implicit este "U+0-10FFFF".