Curs 2 CSS
43
Curs 2 CSS - Foi de Stil
-
Upload
girju-elena-andrada -
Category
Documents
-
view
290 -
download
4
Transcript of Curs 2 CSS
Curs 2
CSS - Foi de Stil
La inceput a fost HTML...● HTML a fost initial dezvoltat de catre Tim 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 HTMLIngrediente:
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?
● 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
Se pot folosi....dar!
Alte tehnici de layout....
● Adnotari orientate exclusiv prezentare, ex: <font>, <b> ● Artificii de spatiere folosind .gif ● Tabele pentru layout● Atribute ale adnotarilor ex: bgcolor, background
...de evitat....
Si atunci cum?
○ Impartirea paginii in DIViziuni logice○ Folosirea foilor de stil pentru definirea modului de
aparitie a fiecarei constructii
CSSCascading Style Sheets
Exemplu - Layout cu CSSIngrediente:
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 HTMLFolosind 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 HTMLFoi 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 LINKAtribute obligatorii
● TYPE descrie tipul de date din documentul referit (in cazul css este intodeauna: "text/css")
● HREF specifica un URL cu locatia foii de stilAtribute 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 explicit3. Sorteaza in functie de specificitate4. 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
purple white 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. Sunt 72 pt intr-un
inch○ Picas -pc - Un pica = 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.asphttp://www.w3.org/TR/CSS21/cover.html#minitoc
