Css 1 intro

**Admin** Sam Sept 26, 2015 10:23 am

Intro

In general putem spune ca toate stilurile se vor aplica in cascada intr-o noua foaie de stiluri virtuala dupa urmatoarele reguli unde numarul 4 are cea mai mare prioritate.
1.Browser default - Stilul implicit al browserului (care coloreaza link-urile in albastru si care face o ordonare sumara a informatiei)
2.Foaie de stiluri externa, inclusa cu <link href = "stil.css" rel="stylesheet" ...
3.Foaie de stiluri interna – in interiorul lui head in <style>
4.Stil inline, in interiorul unui element html <p style="color: #FFF; width:100px"> ...</p>
Deci stilul inline are cea mai mare prioritate urmand celalte in ordine de la 3 la 1
Sintaxa CSS este formata din trei parti: selector, o proprietate si o valoare
selector {property: value}
In exemplul urmator se defineste un paragraf centrat si culoare text rosu.
p {text-align:center;color:red}
Pentru a realiza definitii usor de citit proprietatile pot fi introduse fiecare pe cate o linie
p
{
text-align: center;
color: black;
font-family: arial
}

Gruparea

Selectorii pot fi grupati. Fiecare selector se separa cu virgula. In exemplul de mai jos sunt grupate toate elementele de tip header. Toate elementele header vor avea culoarea textului verde.
h1,h2,h3,h4,h5,h6
{
color: green
}

Selectorul class

Se pot defini mai multe stiluri pentru un acelasi selector.
Sa presupunem ca dorim doua tipuri de paragrafe in pagina noastra: unul aliniat la dreapta iar unul aliniat la stanga.
p.right {text-align: right}
p.center {text-align: center}
Trebuie folosit atributul class
<p class="right">
This paragraph will be right-aligned.
</p>
<p class="center">
This paragraph will be center-aligned.
</p>
Pentru a aplica mai mult de o clasa pentru un element se introduc ambele clase. Astfel paragraful urmator va fi de stil "center" si "bold"
<p class="center bold">
This is a paragraph.
</p>
Se poate omite numele tagului in selector. Se poate defini astfel o clasa ce poate fi folosita pentru orice tag.
.center {text-align: center}
In codul de mai jos atat elementul h1 cat si p sunt de clasa center, ambele urmand regulile definite pentru selectorul ".center"
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
Numele claselor nu pot incepe cu un numar!

Adaugarea de stiluri elementelor cu anumite atribute

Se pot aplica stiluri elementelor HTML care au anumite atribute. Regula de mai jos se va potrivi tuturor elementelor care au atributul type de valoare "text"
input[type="text"] {background-color: blue}

Selectorul id

Se pot defini stiluri pentru elementele HTML cu ajutorul selectorului id: #.
#green {color: green}
Regula de mai jos se va potrivi pentru orice element p cu un id de valoare "para1"
p#para1
{
text-align: center;
color: red
}

Comentariile CSS ... foarte utile)

/* Acesta e un comentariu */
p
{
text-align: center;
/* Alt comentariu */
color: black;
font-family: arial
}

Foaie de stiluri externa

Toate regulile pot fi scrise intr-un fisier cu extensia css. Stilurile pot fi aplicate introducand un link la acel fisier :
<head>
<link rel="stylesheet" type="text/css"
href="stilulMeu.css" />
</head>
Avantajul consta in faptul ca putem aplica un set intreg de reguli intr-o pagina web doar introducand o linie de cod ca cea de mai sus.
Pentru cazul in care avem de aplicat un stil doar la pagina curenta putem folosi un stil declarat intern.

Foaie de stiluri interna

<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>

Stiluri inline

util doar pentru cazuri particulare, nu este deloc folositor cand avem de aplicat un stil de multe ori
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

Foi de stiluri multiple

Daca anumite proprietati au fost setate pentru un selector in tipuri diferite de stiluri atunci vor fi mostenite proprietatile din stilul cu prioritate mai mare.
ex: stil extern
h3
{
color: red;
text-align: left;
font-size: 8pt
}
si un stil intern:
h3
{
text-align: right;
font-size: 20pt
}
rezultatul va fi:
color: red;
text-align: right;
font-size: 20pt
Culoarea este mostenita din stilul extern iar alinierea si dimensiunea din stilul intern