redirect 301
February 27, 2010
Social Networking Sites
March 28, 2010

css | caracteristici

Foi de stiluri: grupuri de proprietati definind modul de aparitie a elementelor unor limbaje de marcare (HTML, XML,…)

• Cascading Style Sheets – nivelul 1 (dec.1996)

• Cascading Style Sheets – nivelul 2 (mai 1998)

• Cascading Style Sheets – nivelul 3 (in curs de cercetare)

relate



css | clase

• Definirea de proprietati pentru o clasa (grup) de elemente:

.nume_de_clasa.intens { font-weight: bolder; color:green }

• Utilizare prin intermediul atributului “class”:

<p class=”intens”>Paragraf ingrosat si verde.</p>
<h2 class=”intens”>Titlu ingrosat si verde</h2>

• Alternativa: identificator #nume_de_identificator

#intens { font-weight: bolder; color:green }
<p id=”intens”>Paragraf ingrosat si verde.</p>



css | stiluri

• Stiluri aplicate in functie de context: p em { color: blue }

<p>Un paragraf <em>albastru doar aici</em>…</p>
<em>Acesta este italic si atit!</em>

• Grupare de stiluri:
h1, h2, a, td { font-family: Arial; font-size: 16pt }
h2 { font-style:italic }



css | pseudo

Pseudo-clase: a:link, a:visited, a:active

a:link { color:red }
a:visited img { color:yellow; border:solid }
a:active { background:blue }

Pseudo-elemente: first-line, first-letter

p:first-line { text-indent: 5% }
p:first-letter { font-size: 200%; float:left }


css | fonturi

• font-family: serif (Times), sans-serif (Arial), cursive (Chancery), fantasy (Western), monospace (Courier)
• font-style: normal, italic, oblique
• font-weight: normal, bold, lighter, 100..900
• font-size: x-small, medium, large, 10pt, 16pt, larger, smaller, -10%, +50%

p { font-size: 12pt; font-family: Arial, sans-serif }

li { font-style: italic; font-weight: bold; font-size: -25% }


css | fundal&culori

• color: denumire_culoare | rgb(N,N,N)
• background-color: denumire_culoare | rgb(N,N,N)
• background-image: url (fisier)
• background-repeat: repeat-x, repeat-y, no-repeat
• background-position: vertical orizontal

h2 { color: navy; background-image: url(web-bg.gif) }

body { background-image: url(https://www.infoiasi.ro/fcs/img/fcslogo.gif);

background-repeat: no-repeat;

background-position: top right;

}



css | text

• letter-spacing: numar
• text-decoration: none, underline, overline, line-through, blink
• vertical-align: top, middle, bottom
• text-transform: capitalize, uppercase, lowercase
• text-align: left, center, right, justify
• text-indent: numar
• line-height: numar

a { text-decoration: none; text-transform: uppercase }

p { text-indent: 2cm; line-height: 1.2; text-align: justify }


css | propr.clasif.

• white-space: normal, pre, nowrap
• list-style-type: disc, circle, square, decimal, lower-roman, upper-roman, none, …
• list-style-image: url (fisier)
• list-style-position: inside, outside

pre { white-space: pre; margin-left: 10px }

ul li {

list-style-image: url(web-bullet.gif);

list-style-type: disc

}