CSS pentru toti

November 3, 2008 — pibbrill

Va intrebati ce este CSS-ul…

…diferite modalitati de afisare ale paginilor HTML, numite si stiluri. Stilul se refera la culori, fonturi, aranjare in pagina, stilul hyperlink-urilor,etc. CSS sau “Cascading Style Sheets” ajuta la afisarea elementelor de HTML in functie de instructiunile definite de designer.

Sintaxa unui stil…

….un tuplu de trei elemente: selector, proprietate si valoare.

selector {proprietate: valoare}
Ex:
h1 {color: green}

Daca punem mai multe atribute…

…le putem pune pe mai multe linii pentru o mai buna percepere

p {
color:black ;
font-family=arial ;
background-color:red
}

Daca vrem mai multe stiluri…
…pentru acelasi element HTML folosim clasa.identificator

h1.green {color:green}
h1.red {color:red}
<h1 class="green">Hello</h1>
<h1 class="red">Hello!</h1>

Daca vrem un stil pentru mai multe elemente HTML …

…atunci vom renunta la clasa (elementul HTML)

.left {text:align: left}
<p class="left">Hello world</p>

Unde putem defini stiluri CSS...

…se pot defini in patru locuri:

  • nivelul 1 al browser-ului
  • nivelul 2: intr-un fisier extern, salvat cu extensia .css
  • nivelul 3: in interiorul HTML-ului in cadrul <head>
  • nivelul 4: chiar in interiorul elementului

Nivelul 2: intr-un fisier .css

<head>
<link rel="stylesheet" type="text/css"
href="un_stil_definit.css" />
</head>

Nivelul 3: in cadrul <head>

<head>
<style type="text/css">
h1 {color: red}
p {font-family=arial }
</style>
</head>

Nivelul 4: in interiorul elementului

<p style="color: red; font-family=arial">
Hello world
</p>

Spor la CeSeSe!

Posted in Uncategorized. Tags: . Leave a Comment »