Professional Documents
Culture Documents
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
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
Sintax
Forma general a declaraiilor:
selector { proprietate: valoare }
sau
selector, ..., selector
2004/2005 - Mihaela Brut [4]
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 */
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
Selectori
Selector descendent precizeaz un element avnd un anumit ascendent:
p code { color: brown } Formateaz elementele code aflate n interiorul paragrafelor
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"] { ... }
Atributul class
Permite definirea mai multor seturi de proprieti de stil pentru un acelai element
n foaia de stiluri: p.important {font-size: 24pt; color: red} p.obs {font-size: 8pt} n documentul HTML: <p class="important"> Termen de predare: mine!</p> <p class=obs">Observaie adiacent.</p>
Pot fi definite proprieti aplicabile tuturor elementelor definite ca aparinnd unei clase:
.obs {font-size: 8pt}
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
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
--> </style> Obs: ncadrarea proprietilor ntr-un comentariu HTML este o modalitate de a le ascunde de navigatoarele mai vechi, fr suport pentru CSS
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
Avantaj:
Dezavantaje:
Ordinea n cascad
Proprietile de stil vor fi aplicate documentelor HTML n urmtoarea ordine:
1.Proprietile implicite ale navigatorului 2.Foaia de stiluri extern 3.Foaia de stiluri intern (din cadrul elem. <head>) 4.Stilurile inline (asociate prin atributul style)
Cnd dou proprieti se suprapun, cea mai apropiat (cea mai recent aplicat) are ctig.
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
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
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
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 }
navigatoarelor (nerecomandate)
Unitile de msur:
2004/2005 - Mihaela Brut [21]
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)
Text
text-align:
left | right | center | justify
text-decoration:
none | underline | overline | line-through
text-transform:
2004/2005 - Mihaela Brut [22]
text-indent
white-space:
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)
Pseudo elemente
p:first-line { text-indent: 15%; } p:first-letter { font-size: 200%; }
Editoare CSS
Cascade DTP: CSSEdit 1.6:
2004/2005 - Mihaela Brut [25]
Style Master:
etc.: http://www.w3.org/Style/CSS/#editors
Validare
Validator CSS:
http://jigsaw.w3.org/css-validator/ http://www.style-sheets.com/validator.asp
2004/2005 - Mihaela Brut [26]
Validator HTML:
http://validator.w3.org/
Bibliografie
W3Schools online tutorial
http://www.w3schools.com/css/css_syntax.asp
http://www.csszengarden.com
2004/2005 - Mihaela Brut [27]
CSS Primer:
http://www.moock.org/webdesign/css/
http://webreference.com/html/tutorials/ http://www.webreview.com/style/
ntrebri?
2004/2005 - Mihaela Brut [28]