Proiectare situri Web

Cascading Style Sheets

2004/2005 - Mihaela Brut [1]

Proiectare situri Web

Beneficii CSS
CSS (Cascading Style Sheet ) descrie modul de prezentare a unei pagini HTML sau XML Cod curat, timp de download rapid Control global al stilului de afiare Separarea prii de prezentare a documentelor Web de coninutul lor Definirea nfirii i ablonului tuturor paginilor unui sit Web ntr-un singur loc

2004/2005 - Mihaela Brut [2]

Proiectare situri Web

Sintax
Un document CSS conine o list de perechi alctuite din selectori (pentru indicarea elementelor HTML) i descriptori (modul de afiare a acestora)
2004/2005 - Mihaela Brut [3]

Ex: h1 {color: green; font-family: Verdana} toate elementele h1 vor fi afiate cu font Verdana de culoare verde Selectorii sunt elemente simple HTML sau XML, dar i diverse combinaii de astfel de elemente Descriptorii sunt definii de specificaia CSS

Proiectare situri Web

Sintax
Forma general a declaraiilor:
selector { proprietate: valoare }

sau
selector, ..., selector
2004/2005 - Mihaela Brut [4]

proprietate: valoare; ... proprietate: valoare

Proiectare situri Web

Exemple
/* Comentariile se scriu astfel */ h1,h2,h3 {font-family: Arial, sans-serif;} /* va fi utilizat primul font disponibil din list */ p, table, li, address { /* stiluri aplicate tuturor tag-urilor */ font-family: "Courier New"; /* numele compuse necesit ghilimele */ margin-left: 15pt; /* indentare */ } th {background-color:#FAEBD7} body { background-color: #ffffff;} /* codurile culorilor exprimate n hexa */

2004/2005 - Mihaela Brut [5]

Proiectare situri Web

Selectori
Selector simplu de element:
body { background-color: #ffffff }

Selectori multipli:
em, i {color: red}

pot fi repetai:
2004/2005 - Mihaela Brut [6]

h1, h2, h3 {font-family: Verdana; color: red} h1, h3 {font-weight: bold; color: pink} Cnd dou valori se suprapun, ultima o suprascrie pe cea anterioar

Selectorul universal * are efect asupra tuturor elementelor:

* {color: blue} Cnd dou valori se suprapun, selectorii specifici i suprascriu pe cei generali

Proiectare situri Web

Selectori
Selector descendent precizeaz un element avnd un anumit ascendent:
p code { color: brown } Formateaz elementele code aflate n interiorul paragrafelor

Selector copil > precizeaz un element avnd un anumit printe:

2004/2005 - Mihaela Brut [7]

h3 > em { font-weight: bold } Formateaz elementele em al cror printe imediat este h3

Selector adiacent aleg un element dac urmeaz imediat dup un altul:

b + i { font-size: 8pt } Ex: <b>Aici este bold</b> <i>i imediat italic</i> Rezultat: Aici este bold i imediat italic

Proiectare situri Web

Selectori
Selector simplu de atribut precizeaz elementele avnd un anumit atribut, indiferent de valoarea acestuia:
Sintax: element [atribut] { ... } Ex: table [border] { ... }
2004/2005 - Mihaela Brut [8]

Selector de atribut cu valoare precizeaz elementele avnd un anumit atribut, cu o anumit valoare:
Sintax: element [atribut="valoare"] { ... } Ex: table[border="0"] { ... }

Proiectare situri Web

Atributul class
Permite definirea mai multor seturi de proprieti de stil pentru un acelai element
n foaia de stiluri: [Link] {font-size: 24pt; color: red} [Link] {font-size: 8pt} n documentul HTML: <p class="important"> Termen de predare: mine!</p> <p class=obs">Observaie adiacent.</p>

2004/2005 - Mihaela Brut [9]

Pot fi definite proprieti aplicabile tuturor elementelor definite ca aparinnd unei clase:
.obs {font-size: 8pt}

Proiectare situri Web

Atributul id
Definit la fel ca i atributul class, dar utilizeaz # n locul .
n foaia CSS: p#important {font-style: italic} # important {font-style: italic} n documentul HTML: <p id="important"> sau

2004/2005 - Mihaela Brut [10]

class i id pot fi utilizae simultan, putnd avea chiar acelai nume:

<p class="important" id="important">

Proiectare situri Web

Elementele div i span

Elementele HTML div i span au scopul de a grupa coninut cruia s i se aplice aceleai proprieti CSS div determin trecerea la linie nou nainte i dup, nu ns i span. Exemplu:
CSS: div {background-color: #66FFFF} [Link] {color: red} HTML: <div>Elementul div e tratat ca un paragraf, iar <span class="color">elementul span</span> nu este.</div>

2004/2005 - Mihaela Brut [11]

Proiectare situri Web

Utilizare CSS
Exist 3 modaliti de utilizare CSS:
Foaie de stiluri extern Caracteristica cea mai puternic Se asociaz cu HTML i XML Toate proprietile CSS pot fi utilizate Foaie de stiluri ncorporat Se asociaz cu HTML, nu i cu XML Toate proprietile CSS pot fi utilizate Stiluri Inline Se asociaz cu HTML, nu i cu XML Forme limitate ale sintaxei CSS

2004/2005 - Mihaela Brut [12]

Proiectare situri Web

Foi de stiluri externe

n HTML, n interiorul elementului <head> :
<link rel="stylesheet" type="text/css" href="URL Foaie de stil">

Ca instruciune de procesare n prologul unui document XML:

2004/2005 - Mihaela Brut [13]

<?xml-stylesheet href="URL Foaie de stil type="text/css"?>

Obs: "text/css" este tipul MIME corespunztor documentelor CSS

Proiectare situri Web

Foi de stiluri ncorporate

n HTML, n interiorul elementului <head>: <style TYPE="text/css"> <!-2004/2005 - Mihaela Brut [14]

--> </style> Obs: ncadrarea proprietilor ntr-un comentariu HTML este o modalitate de a le ascunde de navigatoarele mai vechi, fr suport pentru CSS

CSS Style Sheet

Proiectare situri Web

Stiluri inline
Atributul style poate fi asociat oricrui element HTML:
<elem-html style="proprietate: valoare"> sau <elem-html style=" proprietate: valoare; proprietate: valoare; ...; proprietate: valoare"> Util doar cnd se opereaz asupra unui mic fragment HTML Prezentri mixte de informaie ntr-un acelai HTML Dezordine n codul HTML Nu pot fi utilizate toate caracteristicile CSS

2004/2005 - Mihaela Brut [15]

Avantaj:

Dezavantaje:

Proiectare situri Web

Ordinea n cascad
Proprietile de stil vor fi aplicate documentelor HTML n urmtoarea ordine:
[Link] implicite ale navigatorului [Link] de stiluri extern [Link] de stiluri intern (din cadrul elem. <head>) [Link] inline (asociate prin atributul style)

2004/2005 - Mihaela Brut [16]

Cnd dou proprieti se suprapun, cea mai apropiat (cea mai recent aplicat) are ctig.

Proiectare situri Web

Exemplu de cascad
Foaia extern de stil: h3 { color: red; text-align: left; font-size: 8pt } Foaia intern de stil: h3 { text-align: right; font-size: 20pt } Valorile selectate: color: red; text-align: right; font-size: 20pt

2004/2005 - Mihaela Brut [17]

Proiectare situri Web

Boxa de afiare
Orice tip de coninut (text, imagine) este mrginit de zonele padding, border i margin, fiecare avnd laturile top, left, bottom i right

2004/2005 - Mihaela Brut [18]

Proiectare situri Web

Fonturi
font-family:
inherit (acelai font ca i elementul printe) Verdana, "Courier New", ... serif | sans-serif | cursive | fantasy | monospace (Generic: navigatorul va decide ce font s utilizeze) inherit | smaller | larger | xx-small | x-small | small | medium | large | x-large | xx-large | 12pt

font-size:
2004/2005 - Mihaela Brut [19]

font-weight:
normal | bold | bolder | lighter | 100 | 200 | ... | 700

font-style:
normal | italic | oblique

Proiectare situri Web

Proprieti condensate
Proprietile nrudite pot fi combinate:
h2 { font-weight: bold; font-variant: small-caps; font-size: 12pt; line-height: 14pt; font-family: sans-serif }

2004/2005 - Mihaela Brut [20]

poate fi scris condensat:

h2 { font: bold small-caps 12pt/14pt sans-serif }

Proiectare situri Web

Culori i uniti de msur

color: i background-color:
aqua | black | blue | fuchsia | gray | green | lime | maroon | navy | olive | purple | red | silver | teal | white | #FF0000 | #F00 | rgb(255, 0, 0) | Alte nume specifice

navigatoarelor (nerecomandate)

Unitile de msur:
2004/2005 - Mihaela Brut [21]

em, ex, px, %

limea literei m, nlimea literei x, numr de pixeli, procente din dimensiunea motenit inches, centimetri, milimetri, puncte tipografice (1 pt = 1/72 dintr-un inch), picas (1 pica = 12 pt)

in, cm, mm, pt, pc

Proiectare situri Web

Text
text-align:
left | right | center | justify

text-decoration:
none | underline | overline | line-through

text-transform:
2004/2005 - Mihaela Brut [22]

none | capitalize | uppercase | lowercase

text-indent

length | 10% (indenteaz prima linie de text) normal | pre | nowrap

white-space:

Proiectare situri Web

Pseudo clase
Elemente ale cror stare (i nfiare) se poate modifica n timp Sintax: element:pseudo-clas {...}
a:link {color:darkred} legtur care nu a mai fost vizitat a:visited {color:blue} legtur care a mai fost vizitat a:active {color:red} legtur selectat la momentul curent a:hover {color:navy} legtur deasupra creia este plasat mouse-ul (fr a fi apsat)

2004/2005 - Mihaela Brut [23]

Proiectare situri Web

Pseudo elemente
p:first-line { text-indent: 15%; } p:first-letter { font-size: 200%; }

2004/2005 - Mihaela Brut [24]

Proiectare situri Web

Editoare CSS
Cascade DTP: CSSEdit 1.6:
2004/2005 - Mihaela Brut [25]

[Link] [Link] [Link] [Link]

Style Master:

Style Studio v3.76:

etc.: [Link]

Proiectare situri Web

Validare
Validator CSS:
[Link] [Link]
2004/2005 - Mihaela Brut [26]

Validator HTML:
[Link]

Proiectare situri Web

Bibliografie
W3Schools online tutorial
[Link]

Dave Raggett, Adding a Touch of Style

[Link]

[Link]
2004/2005 - Mihaela Brut [27]

CSS Primer:

[Link]

[Link] [Link]

Proiectare situri Web

ntrebri?
2004/2005 - Mihaela Brut [28]