Sunteți pe pagina 1din 43

Curs 2

CSS - Foi de Stil

La inceput a fost HTML...


HTML a fost initial dezvoltat de catreTim Berners-Lee la universitatea CERN A capatat popularitate datorita browserului Mosaic dezvoltat la NCSA HTML 2.0 - Noiembrie 1993, vezi RFC1866 HTML+ (1993) si HTML 3.0 (1995) propuneau o paleta mai larga de functionalitati HTML 3.2 1996 - Recomandarea W3C pentru HTML - un conses al funtionalitatilor HTML HTML 4.0 - 18 Decembrie 1997 HTML 4.01 este o revizuire a HTML 4.0

...apoi a fost prea mult HTML...


Realizatorii paginilor web au fost la inceput mai preocupati de aspect si prea putin de structura: Imagini, imagini, imagini Tabele HTML Ca urmare: pagini web de mari dimensiuni si greu de incarcat aratau sau functionau diferit pe browsere diferite mentenanta dificila era necesar duplicarea continului pentru versiunea "printer-friendly" dificil (si imprecis) pentru motoarele de cautare sa le indexeze

Exemplu - Layout cu tabele HTML


Ingrediente: 1. 1 buc. editor de text (Notepad, Eclipse) 2. 1 buc. Server Web (Apache) 3. 1 legatura Browser Web (Firefox, IE, Safari, Chrome) LayoutWithTables.html

Tabele HTML pentru prezentare?


Se pot folosi....dar! amesteca instructiunile pentru prezentare cu datele de prezentat dimensiunea paginii web poate ajunge nedorit de mare Utilizatorul va descarca instructiunile de prezentare la fiecare pagina Modificarea paginilor (prezentare sau continut) dificila Mentinerea unui aspect consistent a paginilor dintr-un site dificila greu de vizualizat pentru utilizatorii de telefoane, PDA sau pentru persoanele cu dizabiliztati

Alte tehnici de layout....


...de evitat.... Adnotari orientate exclusiv prezentare, ex:<font>, <b> Artificii de spatiere folosind .gif Tabele pentru layout Atribute ale adnotarilor ex:bgcolor,background

Si atunci cum?
Impartirea paginii inDIViziuni logice Folosirea foilor de stil pentru definirea modului de aparitie a fiecarei constructii

CSS
Cascading Style Sheets

Exemplu - Layout cu CSS


Ingrediente: 1. 1 buc. editor de text (Notepad, Eclipse) 2. 1 buc. Server Web (Apache) 3. 1 legatura Browser Web (Firefox, IE, Safari, Chrome) LayoutWithCSS.html

Ce este CSS
CSS = Cascading Style Sheets Stilurile - definesc modul de aparitie a elementelor HTML Sunt grupate/stocate in Foi de stil Au fost introduse odata cu HTML 4.0 Mai multe definitii de stil se vor combina intr-unul.

Folosirea CSS in HTML


<HTML> <HEAD> <TITLE>Buna dimineata A02!</TITLE> <LINK REL="stylesheet" TYPE="text/css" HREF="sheet1.css" /> <STYLE TYPE="text/css"> @import url(sheet2.css); H1 {color: maroon;} BODY {background: yellow;} </STYLE> </HEAD> <BODY> <H1>Brrrrr!</H1> <P STYLE="color: gray;">A02 este cel mai mare frigider de pe suprafata pamantului. </P> </BODY> </HTML>

Folosirea CSS in HTML cont.


Informatia CSS poate fi specificata in 3 locuri/moduri: In anumite taguri din "body"-ul documentului HTML
<P STYLE="color: gray;">A02 ....

In "head-ul" documentului HTML Folosind tag-ul<STYLE>


<STYLE TYPE="text/css"> import url(sheet2.css); H1 color: maroon; BODY background: yellow; </STYLE>

In fisiere css comune mai multor documente HTML Foi de stil externe
<LINK REL="stylesheet" TYPE="text/css" HREF="sheet1.css" TITLE="Default" MEDIA="all">

Tag-ul LINK
Referinta la o foaie de stil externa
<LINK REL="stylesheet" TYPE="text/css" HREF="sheet1.css" TITLE=" Default">

Scopul de baza - sa permita asocierea altor documente cu documentul HTML CSS il foloseste pentru a asocia foi de stil cu HTML Trebie folosit in cadrul sectiunii HEAD O foaie de stil poate fi coumuna mai multor documente HTML

Atributele tag-ului LINK


Atribute obligatorii TYPE descrie tipul de date din documentul referit(in cazul css este intodeauna: "text/css") HREF specifica un URL cu locatia foii de stil Atribute optionale REL - "relatie", poate fi "stylesheet" sau "alternate stylesheet" TITLE folosit pentru cazurile cand sunt incarcate mai multe foi de stil intr-o pagina MEDIA specifica mediumul pt care va fi folosit CSS. (e.g. monitor, proiector, imprimanta, IPhone)

Tag-ul STYLE
Stilurile definite de tag-ul STYLE sunt denumite si "document style sheet" sau "embedded style sheet" Definesc stiluri care se aplica documentului Pot contine referinte catre foi de stil externe folosind directiva "@import"
<STYLE> exemplu de folosire <STYLE TYPE="text/css"> @import url(sheet2.css); H1 {color: maroon;} BODY {background: yellow;} </STYLE>

Stiluri inline
Exemplu folosire stil inline <P STYLE="color: gray;">A02 .... Folosit cand se doreste modificarea stilului unor elemente singulare Atributul STYLE poate fi asociat oricarui tag folosit in interiorul sectiunii BODY Nici o alta parte a documentului nu va fi afectata de acest atribut

Sintaxa stiluri
Un stil (o regula) este compusa din 2 blocuri Selector:spune browserului care dintre elemente va folosi un anumit format Declaratii stil: O lista cu instructiuni de formatare aplicabile elementului identificat de selector.
selector {property:value; property: value; ...}

Tag selector
Sunt usor de identificat intr-o regula CSS deoarece poarta acelasi nume cu tagul HTML Tag selector - afecteaza toate instantele de pe pagina a tagului HTML selectat ex:
P { margin:0 0 1em 0; text-align:center; color:#fff;}

Dar pentru cazurile in care (de exemplu) unele paragrafe trebuie sa arate diferit?

DA, solutia este: Class selector


permite identificare/modificarea mai precisa (sau mai rafinata) a elementelor de formatat. poate fi creat si apoi aplicat selectiv unei clase de taguri HTML de pe pagina numele clasei poate fi orice cuvant cu unele restrictii: numele de class selcector trebuie sa inceapa cu "." numai litere, numere, cratima si underscore in numele clasei Dupa "." trebuie sa urmeze litera (NU cifra) Numele de clase sunt "Case sensitive".

Class selector
Definirea unui class selector
.special { color:#FF0000; font-family:"Monotype Corsiva"; } Folosirea unui class selector
<p class="special"> Some paragraph content...</p> sau <h3 class="special"> The actual heading...</h3>

NOTE: Atributul HTML "class" are ca valoare numele class selector FARA prefixul ".". Semnul punct este necesar pentru numele class selector numai in cadrul foii de stil.

ID Selector
ID selector este similar cu class selector cu urmatoarele deosebiri: Daca un stil apare de mai multe ori pe pagina se foloseste class selector ID selector identifica o sectiune care apare doar o singura data in pagina. A se considera folosirea lor cand se doreste evitare conflictelor. Browserul acorda ID selector o prioritate mai mare decat class selector Semnul diez (#) identifica un ID selector

Folosirea ID selector
Definirea ID selector
#banner { background: #CC0000; height: 300px; width: 720px; }

Folosirea ID selector
<p id="copyright">

Pseudo-Classes
Permite asocierea de stiluri la structuri care nu exista in document CSS1, pune la dispozitie 3 pseudo-classes: :link - se refera la orice tag care contine un hyperlink care indica o adresa ce nu a fost vizitata :visited - la fel ca mai sus dar catre o adresa deja vizitata :active - orice tag ce contine hyperlink si care este in proces de a fi activat (click sau similar) :hover - permite modificarea aparentei unui hyperlink atunci cand cursorul trece peste el.

Folosirea pseudo-classes
A:visited {color: red; background: yellow;}

Asta e tot! Linkurile vizitate vor fi acum rosii si vor avea fundalul galben. Semnul (:) indica faptul ca se foloseste o pseudoclasa

Descendent selectors
Un document HTML este format din tag-uri imbricate in alte tag-uri Descendent selector permit folosirea acestei ierarhii si aplicarea reglilor de formatare diferit Partea de selector a regulii este compusa din 2 sau mai multi selectori separati prin spatiu. Fiecare spatiu poate fi tradus: "ce poate fi gasit in", "care este parte din"

Exemple descendent selector

h1 strong { color: red; } /*poate contine mai mult de 2 elemente.*/ ul li a { font-family: Arial; } /* nu trebuie specificata intreaga cale a ierarhiei*/ body li a {font-family: Arial; } /*Nu se limiteaza doar la tag selector*/ p .intro a { color: yellow; }

Grup de selectori
Permit aplicarea unui stil la mai multi selectori in acelasi timp Pentru a defini un grup de selectori, se creeaza o lista de selectori separati prin virgula. Exemplu grup selector:
h1, h2, h3, h4, h5, h6 { color: #F1CD33; }

Selector universal (*)


Asterisk * este denumit selector universal. folosit pentru selectarea tuturor tag-urilor Poate fi folosit ca parte din descendent selector Exemplu:
* { font-weight: bold; } /*Vreau toate elementele bold*/ #banner * {font-weight: bold;}

Tag-ul <DIV>
Tag-ul <DIV> identifica o DIViziune logica a paginii Odata grupate in acest fel, se pot aplica instructiuni de formatare doar tag-urilor din interior folosind un..."class selector" Exemplu:
<div class="photo"> <img src="flower.jpg alt="Big yellow flower"/> <p>Sun flower is a beautiful flower</p> </div>

Declaratia clasei .photo poate include instructiuni de formatare, stiluri pentru toate elementele din interiorul tagului DIV

Tag-ul <SPAN>
Poate fi folosit pentru a aplica o clasa sau un ID la doar o parte dintr-un tag Se mai numesc si elemente inline Exemplu de folosire a <SPAN>:
<p>Welcome to <span class="companyName">Tratoria Il Calcio</span> - we have much better food than <span class="companyName">McDonald</span> or <span class="companyName">KFC</span> </p>

Regulile de formatare definite de class selector . companyName vor fi aplicate numai numelor de restaurante.

Mostenirea
Este procesul prin care proprietatile CSS care sunt aplicate unui tag sunt transmise tagurilor descendente Mostenirea functioneaza de-a lungul mai multor descendenti Exemplu:
body { font-size: 10pt } h1 { font-size: 130% } ...
<BODY> <H1>A <EM>large</EM> heading</H1> </BODY> H1 va fi cu font-size 13pt EM va fi cu font-size 13pt

Limitari ale mostenirii


Exista unele cazuri in care mostenirea nu se aplica strict: Ca regula generala, proprietatile care afecteaza marginile sau culorile de fundal ale elementelor nu se mostenesc. Browserele folosesc propriile stiluri pentru a formata unele elemente. e.g linkuri

Prioritatea
Ce se intampla in situatii de acest fel? .grape {color:purple;} H1 {color:red;} ... <H1 class="grape"> Un text</H1> CSS asigura o formula pentru determinarea prioritatea stilului - Specificity

Cum se calculeaza prioritatea


Un tag selector valoreaza 1 punct Un class selector valoreaza 10 puncte Un ID selector valoreaza 100 puncte Stilurile inline valoreaza 1000 puncte Exemplu de calculare a prioritatii un tag selector pentru tagul <img> (specificity = 1) un ID selector denumite #logo (specificity = 100) mai mult de 1 selector #banner .byline (specificity = 100+10)

Importanta
Unele reguli pot fi marcate ca fiind mai importante se foloseste fraza "!important;" Regulile marcate cu "!important;" nu au o valoare de specificitate (10000 poate fi asumat) O regula "!important" va suprascrie chiar si atributele de stil inline. !important exemplu de folosire
H1 {color: gray !important;} .. <H1 style="color: red">text</H1>

Cum sunt rezolvate conflictele


1. Gaseste toate declaratiile care contin un selector pentru un anumit element. 2. Sorteaza in functie de prioritatea specificata explicit 3. Sorteaza in functie de specificitate 4. Sorteaza in functie de ordinea aparitiei declaratiei. Cu cat apare mai tarziu cu atat are pondere mai mare.

Tipuri Media - directiva @media


@media print { body { font-size: 10pt } } @media screen { body { font-size: 13px } } @media screen, print { body { line-height: 1.2 }}

Culori
Culori predefinite preluate setul standard Windows VGA aqua gray navy silver black green olive teal blue lime purplewhite fuchsia maroon red yellow Culori specificate de RGB ca procent rgb(<Rosu>%, <verde>%, <albastru>%) Valori zecimale (0-255)rgb(<Red>, <Green>, <Blue>) Valori Hexa - #RRGGBB Exemple:
H1 {color: gray;} /*Named colors*/ H1 {color: rgb(50%,50%,50%);} /*Percentage colors*/ H1{color: rgb(36, 66,89)} /*Decimal numbers*/ H1{color: #A03FFF} /*Hexadecimal colors*/

Unitati de masura
absolute units Inches - in - 2.54 cm = 1 inch Centimeters -cm Millimeters -mm Points- pt - folosit de printere. Sunt72 pt intr-un inch Picas -pc - Unpica = 12 pt unitati relative em ex

Box Model
Fiecare tag HTML este tratat ca o cutie (box) In jurul continutului unui tag exista diferite proprietati cu ajutorul carora se poate realiza spatierea. padding - spatiul dintre continut si margine(border) border - o linie trasata in jurul elementului Margin - spatiu care separa un tag de altul Pentru un anumit tag, se pot folosi oricare din aceste proprietati in combinatie

proprietati de spatiere - Box Model CSS

Pozitionarea folosind CSS


CSS ofera proprietati care permit controlul pozitiei elementelor HTML Exista 4 tipuri de pozitionare: Absoluta: se specifica pozitia pentru sus, jos stanga dreapta Relativa: pozitia este relativa ordinea in cadrul documentului Fixed: elementul este blocat intr-o pozitie pe ecran Static: urmareste ordinea in documentul HTML

Exemple pozitionare folosind CSS

Bibliografie
http://www.w3schools.com/css/default.asp http://www.w3.org/TR/CSS21/cover.html#minitoc