Tehnologii Web - CSS nivelurile 2 i 3

Suportul pentru CSS (nivelurile 2 i 3) oferit de navigatoarele Web de ultim generaie Facultatea de Informatica UniversitateaA.I.Cuza - Iasi, Romania

Data: 26-03-2009 Autor: Gili-tefnel Scarlat Anul V, IDD

Tehnologii Web - CSS nivelurile 2 i 3

1. Introducere
Inainte de citi acest material ar trebui sa aveti cunostinte de baza despre HTML / XHTML. CSS este acronimul pentru Cascading Style Sheets care inseamna foi de stil in cascada (cea mai apropiata traducere). CSS este un limbaj (style language) care defineste "layout-ul" pentru documentele HTML. CSS acopera culori, font-uri, margini (borders), linii, inaltime, latime, imagini de fundal, pozitii avansate si multe alte optiuni. HTML este de multe ori folosit necorespunzator pentru a crea layoutul site-urilor de internet. CSS ofera mai multe optiuni, este mai exact si sofisticat. In plus, este suportat de toate browserele actuale. Stiluri definesc modul de afiarea pentru elementele HTML In documentele W3C, CSS nu e definit ca un Nuu limbaj, ci ca un mecanism care permite formatarea documentului HTML. In perioada de inceput a web-ului, HTML era folosit numai pentru structura textului. Textul se putea marca cu taguri precum <hl> si <p> pentru a marca titlul sau un paragraf. Odata cu cresterea popularitatii web-ului designeri au inceput sa caute diferite posibilitati de a adauga layout documentelor online. Pentru a raspunde acestor cerinte, producatorii de browsere (in acea vreme Microsoft si Netscape) au inventat Nui taguri HTML precum <font> care difera fata de tagurile originale HTML prin faptul ca definesc layoutul si nu structura. Acest lucru a dus si la o situatie unde tagurile originale de structura ca <table> sa fie folosite necorespunzator pe pagini de layout (to layout pages). Multe taguri Nui de layout precum <blink> erau recuNuscute numai de unele browsere. O formula comuna ce aparea pe siteuri era "Aveti nevoie de browserul X pentru a vedea aceasta pagina". CSS a fost inventat pentru a remedia aceast situatie, furnizandu-le designerilor facilitati sofisticate pentru editarea layoutului, suportate de toate browserele. In acelasi timp, separarea site-urilor de prezentare pentru documente de continutul documentelor usureaza foarte mult intretinerea lor. Beneficiile concrete includ: - controlarea layoutului documentelor dintr-o singura pagina de stiluri, - control mai exact al layoutului, - aplicare de layouturi diferite pentru tipuri media diferite (ecran, printare, etc), - tehnici numeroase si sofisticate. - formatarea este introdusa intr-un singur loc pentru tot documentul - editarea rapida a etichetelor - datorita introducerii intr-un singur loc a etichetelor se obtine o micsorare a codului paginii, implicit incarcarea mai rapida a acesteia Sintaxa CSS este structurata pe trei nivele: - nivelul 1 fiind proprietatile etichetelor din documentul HTML, tip inline - nivelul 2 este informatia introdusa in blocul HEAD, tip embedded

- nivelul 3 este reprezentat de comenzile aflate in pagini separate, tip externe - nivelul 4 Browser implicit Cea mai mare importanta (suprascrie orice alt parametru) o are sintaxa de nivelul 1 iar cea mai mica importanta o are cea de nivelul 4.

Tehnologii Web - CSS nivelurile 2 i 3

O dat cu apariia sa, muli dezvoltatori web au considerat c CSS este un mod de formatare mult mai puternic i mai uor de utilizat, i au considerat c <FONT> este un tag nvechit. n 2006 (s-a facut Update), capabilitile CSSului au fost mbuntite considerabil n ceea ce privete design-ul layout-ului unei pagini web. Cu toate acestea, multe site-uri web nc utilizeaz CSS numai pentru formatarea textului, n timp ce, pentru layout folosesc tabele. Pentru c Internetul este ntr-o creterea rapid, datorit utilizarii tot mai frecvente a telefoanelor mobile i a PDAurilor, este necesar crearea unor pagini web accesibile utilizatorilor care folosesc o mare varietate de dispozitive. Un design web far tabele mbuntete considerabil accesibilitatea, n acest sens. Selectori :
Selector * > + [attr] Multiple classes :before :after :hover :active :first-child :focus Aplicabilitate tututor tagurilor tagurilor copii tagurilor alaturate tagurile cu un anumit atribut/anumita valoare a atributului un tag poate avea mai multe clase inainte sau dupa tag mouse este deasupra tagului, sau este activ (mousedown) * tagului care este primul copil campurilor din form cand primesc focusul IE8 Da Da Incomplet Da Da Da Incomplet Incomplet Da FF 3.0 Da Da Da Da Da Da Da Da Da Saf 3.1 Win Da Da Static Da Da Da Da Da Da Opera 9.62 Da Da Da Da Da Da Da Da Da

2. CSS 2

* IE 7/8 suporta :hover dar nu :active, pentru toate tagurile. Exemple * selector
* {font-style: italic;} * textul din tot documentul o sa fie italic.

> selector
body > p {font-style: italic;} Textul care este continut de tag-ul p este o sa fie italic daca p este copil al lui body.

+ selector

Tehnologii Web - CSS nivelurile 2 i 3

pre + p {font-style: italic;} pre + p inseamna fiecare element P care este precedat de elementul PRE o sa fie italic.

[attr] selector
1. 2. 3. 4. 5. p[class] {color: #6374AB} p[ppk] {letter-spacing: 0.3em;} p[align=right] {font-style: italic;} p[ppk=false] {font-weight: 600;} p[class~=test] {text-decoration: underline;}

1. Pentru fiecare tag p cu un atribut class indiferent de valoarea atributului. 2. Pentru fiecare tag p cu un atribut ppk indiferent de valoarea atributului. 3. Pentru fiecare tag p care are un atribut ALIGN cu valoarea "right". 4. Pentru fiecare tag p care are un atribut ppk="false". 5. Pentru fiecare tag p care are un atribut class, si una din valoari este "test".

Multiple classes
p.italic {font-style: italic;} p.underline {text-decoration: underline;} p.large {font-size: 150%;} p.small {font-size: 90%;} p.underline.small {font-variant: small-caps;} Pt orice p care are un atribut class=underline si unul class=small".

:before and :after

p.test:before { padding-right: 5px; content: url(../pix/logo_ppk.gif); } p.test:after { font-style: italic; content: " and some text after."; }

Tehnologii Web - CSS nivelurile 2 i 3

:hover and :active
p:hover {font-style: italic;} p:active {text-decoration: underline;} a:hover {text-decoration: overline;} a:active {font-weight: 600;} Formatarile se aplica cand mouse este deasupra tagurilor sau se apasa click stanga pe ele.

:first-child and :last-child

div#test p:first-child {text-decoration: underline;} div#test p:last-child {font-style: italic;} Pentru tagul div cu atributul id="test" primul paragraf ar trebui sa fie underlined; ultimul bold.

:focus
input:focus { width: 5em; background-color: #6374AB; } Modifica latimea si culoarea background-ului pentru campurile input cand devin active.

Declaratii:
content counters cursor display List styles min/max-width/height outline overflow position Table columns Table declarations Aplicabilitate pentru :before/:after puteti defini cate contoare doriti, sa le incrementati sau resestati puteti schimba stilul cursorului pentru toate tagurile* modul de afisare a elementelor HTML ** pentru definirea stilurilor listelor si pozitia acestora (inside/outside) Setarea latimii sau inaltime minime.maxime ale elementelor HTML este asemanator cu border Continutul nu incape in elementul HTML Poti sa declari pozitia elementului HTML *** Tabele se pot impartii si in coloane Formatare pentru tabele IE8 Da Da Da Da Da Da Da Da Buggy Da Da FF 3.0 Da Da Da Da Da Da Da Da Da Incomplet Da Saf 3.1 Win Incomplet Da Da Da Da Da Da Da Da Incomplet Da Opera 9.62 Incomplet Da Da Da Da Da Da Da Da Incomplet Da

Tehnologii Web - CSS nivelurile 2 i 3

white-space Tratarea whitespace-urilor de elementul HTML **** Da Incomplet Da Da

* pare o functionalitate grozava dar atentie pentru ca poate deruta utilizatori ** Depinde de valoarea atributului block, inline, none, inline-block, and list-item. *** IE8 ascunde elementul cand este setat absolute or fixed **** Whitespace-uri: spatiu, tab, linie noua, enter :before/:after and content
p.test:before { padding-right: 5px; content: url(../pix/logo_ppk.gif); } p.test:after { font-style: italic; content: " and some text after."; } A fost explicat mai sus.

Combining values
p.multi:before { content: "Test paragraph " counter(test) " " url(/pix/logo_ppk.gif) " with a class of " attr(class); } Ne permite sa combinam mai multe valori.

Counters
h3:before { content: counter(section) ": "; } h4:before { content: counter(section) "." counter(subsection) ": "; } Acum <h3> si <h4> sunt numerotate. pre:before {

Tehnologii Web - CSS nivelurile 2 i 3

content: "(ex " counter(example,lower-greek) ")"; } Default se folosesc numere; dar se pot folosit si alte valori (aceleasi cu listele numerotate. pre { counter-increment: example; } Incrementare conturilui. pre { counter-increment: example 3; } Acum de examplu contorul este incrementat cu 3 pentru fiecare <pre> intalnit. h4 { counter-increment: subsection; }

Resetarea contorului
h3 { counter-reset: subsection 4; } Resetarea conturului la alta valoare decat 0 (4 in cazul de fata).

Cursor styles
element { cursor: hand; } Cursul va deveni manuta pentru element.

display
Defineste felul in care este afisat un element HTML.

Tehnologii Web - CSS nivelurile 2 i 3

Modurile de afisare sunt: inline | block | list-item | run-in | compact | marker | table | inline-table |table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | tablecaption | Nune | inherit
P EM LI IMG { { { { display: display: display: display: block } inline } list-item } Nune } /* Don't display images */

Observatie:

run-in compact

nu este suportat de FF3 si doar partial suportat de Safari; - nu functioneaza corect pe nici un browser;

List styles ul { list-style-type: disc }

Valori posibile : Nune, disc , circle , square , decimal , decimal-leading-zero , lower-roman , upper-roman , lower-alpha , upper-alpha , lower-greek , lower-latin , upper-latin , hebrew , armenian , georgian , cjk-ideographic , hiragana , katakana , hiragana-iroha , katakana-iroha.

min and max

.test { max-width: 50px; } Seteaza minimul/maximul latimii/inaltimii unui element.

Outline
p.test { outline: 3px solid #6374AB; border: 1px solid #000000; width: 20em; } Outline este asemanator cu border, dar se este posibil pentru tot conturul elementului.

Overflow
p { overflow: scroll }

Tehnologii Web - CSS nivelurile 2 i 3

Valori posibile: visible Default. Continutul hidden The content is clipped, but the browser does Nut display a scroll-bar to see the rest of the content scroll The content is clipped, but the browser displays a scroll-bar to see the rest of the content auto If the content is clipped, the browser should display a scroll-bar to see the rest of the content

position
h1{ position:absolute; left:100px; top:150px; } Valori posibile: static Default. An element with position: static always has the position the Nurmal flow of the page gives it relative relative moves an element relative to its Nurmal position, so "left:20" adds 20 pixels to the element's LEFT position absolute absolute is positioned at the specified coordinates relative to its containing block. fixed fixed is positioned at the specified coordinates relative to the browser window.

Table columns
<table> <col /> <col span="2" /> <tr> <td>First TD of first TR</td> <td>Second TD of first TR</td> <td>Third TD of first TR</td> <td>Fourth TD of first TR</td> </tr> <tr> <td>First TD of second TR</td> <td>Second TD of second TR</td> <td>Third TD of second TR</td> <td>Fourth TD of second TR</td> </tr> </table>

Tehnologii Web - CSS nivelurile 2 i 3

Acum putem folosi si in coloane un tabel. Primul tag <col /> creaza o coloana cu toate primele celule de pe fiecare rand. Al doilea <col span=2> creaza o coloana care contine celulele de pe pozitia a doua si a treia. Celulele de pe randul 4 nu fac parte din nici o coloana. Din pacate este colooanele sunt destul de dificel de folosit, deoarece folosindu-le tabelul este impartit in doua feluri: pe randuri si coloane. Regula generala este ca stilul pentru randuri are prioritate mai mare decat cel pentru coloane.

Table declarations
Atribute: empty-cells show: afiseaza celulele fara continu (chenar). Este optiunea default. hide: ascunde celulele fara continut. border-collapse separate: chenare separate. Este optiunea default. collapse: uneste chenarele celulelor alaturate. border-spacing border-spacing este corespondentul cellspacing in CSS. Are nevoie de unitate de masura. table-layout auto: tabelul este afisat Nurmal. Este optiunea default. fixed: tabelul respecta latimnea, chiar daca in mod Nurmal nu ar face asta. caption-side top. Este optiunea default. bottom. Este o alta varianta oficiala. left. Extensie Mozilla. right. Extensie Mozilla.

white-space
Nuwrap previne toate liniile Nui din text cu exceptia <br/> sau <wbr />. pre toate liniile, taburile sau alte formatari sunt afisate asa cum au fost introduse in text; pre-wrap se comporta ca si pre doar ca sunt introduse linii Nui cand latimea elementului care il contine este depasita; pre-line - igNura taburile si spatiile multiple din text, dar intrerupe randul de text daca depaseste latimea elementului care il contine.

10

Tehnologii Web - CSS nivelurile 2 i 3 3. CSS 3

CSS3 este viitorul in tehNulogii WEB. Va schimba radical modul de creeare a paginilor WEB. Va schimba unele lucruri pe care le puteai realiza numai in JavaScript (ca Zebra Tables). Ne va oferi mult mai multe posibilitati de a dezvolta si creea paginii WEB. Acest standard este inca in lucru in diferite faze de finalizare pentru fiecare modul. Selectori
Selector ~ [attr] :first-line and :first-letter :Nut :root :target :enabled, :disabled and :checked :empty :last-child :only-child :nth-child() and :nth-of-type() ::selection Media queries Aplicabilitate tagurilor de pe acelasi nivel dar nu invecinate tagurile cu un anumit atribut/anumita valoare a atributului pt prima linie sau prima litera a unui tag * negatiei selectorului tagului radacina sau celui care il contine tagul este un target pentru un hash (page.html#testHash) pentru campurile din formulare in starea respectiva taguri fara continut ultimului copil al tagului copilului tagului care nu mai are frati selecteaza tagurile dupa o formula ** culoare textului selectat ne permite sa specificam cand anumite stiluri sa aiba efect IE8 Da Da Da NU NU NU NU NU NU NU NU NU NU FF 3.0 Da Da Da Da Da Da Da Da Da Da Da Da Da Saf 3.1 Win Da Da Incomplet Da Da Da Da Da Da Da buggy Da Da Opera 9.62 Da Da Incomplet Da Da Incomplet Da Da Da Da Static Da Da

~
pre ~ p {color: red;} Fiecare P care este precedat de PRE ar trebui sa devina rosu, cu conditia sa nu urmeze imediat dupa PRE.

[attr]
p[testAttr^=foo] {font-style: italic;} p[testAttr$=foo] {font-weight: bold;} p[testAttr*=foo] {text-decoration: underline;} p[testAttr^=foo]: orice tag al carui atribtur testAttr are o valoare care incepe cu "foo".

11

Tehnologii Web - CSS nivelurile 2 i 3

p[testAttr$=foo]: orice tag al carui atribtur testAttr are o valoare care se termina cu "foo". p[testAttr*=foo]: orice tag al carui atribtur testAttr are o valoare care contine "foo".

:Nut
p#test *:Nut(em) {text-decoration: underline;} p#test *: selecteaza toate tagurile care au id=test, :Nut(em) - dar nu sunt EM.

:root
:root { background-color: #6374AB; padding: 50px; }

:root selecteaza radacina tuturor blocurilor din pagina. In HTML aceasta este <html>. :target
p:target {font-style: italic;} tagul este un target pentru un hash (page.html#testHash)

:enabled, :disabled and :checked

:enabled { border: 2px solid #6374AB; } :disabled { border: 2px solid #00cc00; } :checked { display: inline-block; width: 4em; } Pentru campurile din formulare care sunt active, inactive sau checked.

12

Tehnologii Web - CSS nivelurile 2 i 3

:empty div:empty { background-color: #000000; color: #ffffff; } Pentru elementele fara continut.

:last-child
div#test p:first-child {text-decoration: underline;} div#test p:last-child {font-style: italic;} Pentru tagul div cu atributul id="test" primul paragraf ar trebui sa fie underlined; ultimul bold.

:only-child
li:only-child {font-style: italic} Se aplica tagurile <ul> care au un singur item <li>.

:nth-child() and :nth-of-type()

ol > :nth-child(3n+1) { color: red; } ol li:nth-of-type(5n+2) { color: blue; } :nth-child(3n+1) se aplica pentru primul element, al 4-lea, al 7-lea etc.. :nth-of-type() functioneaza la fel doar ca se aplica pentru <li> (in the example).

::selection
::-moz-selection{ background:#cc0000; color:#fff; } ::selection {

13

Tehnologii Web - CSS nivelurile 2 i 3

background:#cc0000; color:#fff; } code::-moz-selection { background: #333333; } code::selection { background: #333333; } Pentru definirea culorii textului selectat. Mozilla are nevoie de selectorul ::-moz-selection, dar pentru Safari merge mai simplu. Selectorul poate accepta doar color si background.

Media queries
@media screen and (min-width: 800px) { p#test { background-color: #6374AB; color: #ffffff; padding: 5px; } p#test code { background-color: transparent; } } @media all and (max-width: 400px) { p#test { background-color: #cc0000; color: #ffffff; } } @media screen and (device-aspect-ratio: 16/10) { p#test { border: 5px solid #00cc00; }

14

Tehnologii Web - CSS nivelurile 2 i 3

} De exemplu, poti define un stil care sa aibe effect cand rezolutia este mai mare de 800px. Valori care pot fi utile sunt min-width, max-width, min-height, max-height, device-aspect-ratio, si multe altele.

Declaratii:
background-attachment multiple background images box-sizing columns content opacity resize text-overflow text-shadow Aplicabilitate are nevoie de 3 valori dar toate browserele suporta doar doua mai multe imagini de background pentru un element putem stabili comportamentul browserului in calculul latimii imparte un element in coloane permite sa schimbi continutul unui element HTML seteaza transparenta unui element permite sa redimensionzi un elemente HTML afiseara "" cand textul nu incape in elementul HTML creeaza o umbra textului IE8 Incomplet Nu Da Nu Nu Da Nu Da Nu FF 3.0 Incomplet Nu -moz-mozNu Da Nu Nu Nu Saf 3.1 Win Incomplet Da -webkit-webkitIncomplet Da Incomplet Da Da Opera 9.62 Incomplet Nu Da Nu Da Da Nu Da Da

background-attachment
Daca o imagine este specificata, aceasta proprietate specifica daca este fixat sau are scroll. background-attachment: scroll background-attachment: fixed background-attachment: local

multiple background images

div.test { background-image: url(../pix/logo_quirksmode.gif), url(../pix/logo_quirksmode_inverted.gif); background-repeat: repeat-y; background-position: top left, top right; width: 385px; height: 100px; border: 1px solid #000000; } Valorile sunt separate de virgule; background-repeat are doar o valoare, care este folosita pentru ambele imagini.

15

Tehnologii Web - CSS nivelurile 2 i 3

box-sizing In modelul W3C, latimea unui element este data de continutul lui si nu se iau in calculul padding si border. Nici un browser nu suporta box-sizing in combinatie cu min- sau max- width sau height.
Sintaxa oficiala este: box-sizing: border-box box-sizing: content-box Prima declaratie latimea se calculeaza din margine in margine (modelul traditional), a doua se calculeaza numai latimea continutului (modelul W3C ) Mozilla are o varianta propie a acestei declaratii: -moz-box-sizing: border-box; -moz-box-sizing: content-box; -moz-box-sizing: padding-box; Primele doua sunt identice cu variant oficiala. A treia este o extensie Mozilla si se aplica pentru padding si tot ce este continut de acesta. IE8 foloseste o variatie asemanatoare: -ms-box-sizing: border-box -ms-box-sizing: content-box;

Exemplu
div.test { width: 300px; padding: 10px; border: 5px solid #000000; margin-left: 10%; margin-bottom: 10px; margin-top: 10px; }

16

Tehnologii Web - CSS nivelurile 2 i 3

columns
div#multicolumn1 { -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px; column-count: 3; column-gap: 20px; } Mozzila foloseste prefixul moz- iar Safari foloseste webkit- (in exemple sunt folosite ambele).

content
p#test { content: "Your browser supports content"; } p#test2 { content: url(../pix/logo_quirksmode.gif); } Ne permite sa schimbam continul unui element. Este suportat de Opera si partial de Safari 3.0b Windows.

opacity
.test { background-color: #6374AB; width: 100%; color: #ffffff; } .opaque1 { // for all other browsers opacity: .5; } .opaque2 { // for IE5-7 filter: alpha(opacity=50); } .opaque3 { // for IE8 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

17

Tehnologii Web - CSS nivelurile 2 i 3

}

Seteaza transparenta unui element. resize

p#test { border: 1px solid #000000; overflow: auto; resize: both; } Safari poate redimensiona un element daca acesta nu are atributul overflow=visible. Acest lucru nu este conform cu specificatie, care nu aminteste nimic despre overflow.

text-overflow
p.test { border: 1px solid #000000; white-space: nowrap; width: 100%; overflow: hidden; text-overflow: ellipsis; } text-overflow: ellipsis intra in actiune atunci cand: elementul are overflow altul decat visible (daca overflow: visible textul este afisat pu si simplu); elemental are white-space: nowrap sau ceva similar prin care textul este constrans sa fie afisat.

text-shadow
p.test { text-shadow: #6374AB 20px -12px 2px; } Dupa cum vedeti text-shadow acepta patru valori:

1. Coloare umbrei textului (#6374AB); 2. Coordonata X umbrei textului (20px), relativa la text; 3. Coordonata Y umbrei textului (-12px), relativa la text;

18

Tehnologii Web - CSS nivelurile 2 i 3

4. Raza obscuritatii (blur radius) umbrei textului (2px), care inseamna spatial folosit de umbra textului este intinsa, obtinand astfel efectul blur. 0 insemna: fara blur. Daca setati o valoarea prea mare textul va deveni neinteligibil. Alte noutati pregatite de CSS3: Grids (CSS3 design avansat) nu este suportat inca. Scrollbar colours (Extensie MS suportat doar de IE 5.5+). Implementarea RGBa in CSS3

RGBa (Red Green Blue Alpha), reprezinta un model de culoare, avand la baza culorile rosu, verde si albastru. Diferenta intre RGBa si RGB, este ca primul, mai are un al patrulea canal, Alpha, care da proprietatea transparentei. RGBa urmeaza a fi implementat in CSS3, permitand astfel sa specifice valorilor RGB si alpha-transparenta.

#unid { background : rgba(255, 255, 255, .12);

Primele 3 valori 255, sunt valorile culorii RGB, iar a 4 a valoarea reprezinta nivelul transparentei culorii. Nivelul transparentei va avea valori cuprinse intre 0 si 1, unde valoarea 0 va da o transparenta totala, iar valoarea 1 tranparenta va fi nula.

Reintroducerea regulei CSS, @font-face

Inca de la inceputul versiunii CSS 1, @font-face a fost introdusa pentru a reda in continutul unei pagini web tipografia pe care web designer-ul o doreste. Incepand cu CSS 2.1, regula a fost scoasa, ea nemaifiind implementata in browsere ulterior! O data cu CSS 3.0 se discuta despre reintroducerea @font-face-ului, iar browser-ul Firefox 3.1, s-a reusit implementarea ei. Prima regula a unui web designer ar fi ca pagina creata sa arate la fel in toate browserele. Cum celelalte browsere nu suporta inca aceasta regula, ramane totusi o problema folosirea ei.

CSS3 este in lucru si probabil vor aparea o multime de articole si pareri pana se va scrie varianta finala a recomandarilor de catre W3C.

19

Tehnologii Web - CSS nivelurile 2 i 3 4. Bibliografie http://www.w3schools.com http://www.w3.org/TR/css3-color/#rgba-color http://css-tricks.com/examples/DifferentSelectionColors/ http://www.webdevout.net/browser-support-css http://www.quirksmode.org/css/contents.html http://www.howtocreate.co.uk/ http://www.webreference.com

20