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

Linie 1

Linie 2

Linie 3

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".