Css 1 intro

Administrator Data inscrierii: 07/Dec/2013 Mesaje: 1103

Citat:

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> ...</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 colorit textului verde.
h1,h2,h3,h4,h5,h6
{
color: green
}

Selectorul class

Se pot defini mai numeroase stiluri pentru un acelasi selector.
Sa presupunem ca dorim doua soiuri 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>
This paragraph will be right-aligned.
</p>
<p>
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>
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>
This heading will be center-aligned
</h1>
<p>
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 susținerea selectorului id: #.
#green {color: green}
Regula de mai jos se va potrivi pentru indiferent ce element p cu un id de valoare "para1"
p#para1
{
text-align: center;
color: red
}

Comentariile CSS ... extrem de utile)

/* Asta 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>
</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 utiliza un stil declarat intern.

Foaie de stiluri interna

<head>
<style>
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 așezat un stil de multe ori
<p>
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 mărimea din stilul intern