Css 1 Intro

Fisa css 1
Intro Selectorul class

In general putem spune ca toate stilurile se vor Se pot defini mai multe stiluri pentru un acelasi
aplica in cascada intr-o noua foaie de stiluri selector.
virtuala dupa urmatoarele reguli unde numarul 4
are cea mai mare prioritate. Sa presupunem ca dorim doua tipuri de paragrafe
in pagina noastra: unul aliniat la dreapta iar unul
1. Browser default - Stilul implicit al aliniat la stanga.
browserului (care coloreaza link-urile in
albastru si care face o ordonare sumara a p.right {text-align: right}
informatiei) p.center {text-align: center}
2. Foaie de stiluri externa, inclusa cu <link
href = "stil.css" rel="stylesheet" ... Trebuie folosit atributul class
3. Foaie de stiluri interna – in interiorul lui
head in <style> <p class="right">
4. Stil inline, in interiorul unui element html This paragraph will be right-aligned.
<p style="color: #FFF; width:100px"> ...</p> </p>
<p class="center">
This paragraph will be center-aligned.
Deci stilul inline are cea mai mare prioritate </p>
urmand celalte in ordine de la 3 la 1
Pentru a aplica mai mult de o clasa pentru un
Sintaxa CSS este formata din trei parti: selector, o
element se introduc ambele clase. Astfel
proprietate si o valoare
paragraful urmator va fi de stil "center" si "bold"
selector {property: value}
<p class="center bold">
This is a paragraph.
In exemplul urmator se defineste un paragraf </p>
centrat si culoare text rosu.
Se poate omite numele tagului in selector. Se
p {text-align:center;color:red} poate defini astfel o clasa ce poate fi folosita
pentru orice tag.
Pentru a realiza definitii usor de citit proprietatile
pot fi introduse fiecare pe cate o linie .center {text-align: center}
p In codul de mai jos atat elementul h1 cat si p sunt

{ de clasa center, ambele urmand regulile definite
text-align: center;
color: black;
pentru selectorul ".center"
font-family: arial
} <h1 class="center">
This heading will be center-aligned
</h1>
Gruparea <p class="center">
This paragraph will also be center-
aligned.
Selectorii pot fi grupati. Fiecare selector se separa </p>
cu virgula. In exemplul de mai jos sunt grupate
toate elementele de tip header. Toate elementele
Numele claselor nu pot incepe cu un numar!
header vor avea culoarea textului verde.
h1,h2,h3,h4,h5,h6
{
color: green
}
1
Fisa css 1
Adaugarea de stiluri elementelor cu

anumite atribute
Foaie de stiluri interna
Se pot aplica stiluri elementelor HTML care au
anumite atribute. Regula de mai jos se va potrivi <head>
tuturor elementelor care au atributul type de <style type="text/css">
valoare "text" hr {color: sienna}
p {margin-left: 20px}
body {background-image:
input[type="text"] {background-color: url("images/back40.gif")}
blue} </style>
</head>
Selectorul id Stiluri inline

util doar pentru cazuri particulare, nu este deloc
Se pot defini stiluri pentru elementele HTML cu folositor cand avem de aplicat un stil de multe ori
ajutorul selectorului id: #.
<p style="color: sienna; margin-left:
20px">
#green {color: green}
This is a paragraph
</p>
Regula de mai jos se va potrivi pentru orice
element p cu un id de valoare "para1"
Foi de stiluri multiple
p#para1
{ Daca anumite proprietati au fost setate pentru un
text-align: center; selector in tipuri diferite de stiluri atunci vor fi
color: red mostenite proprietatile din stilul cu prioritate mai
} mare.
Comentariile CSS ... foarte utile) ex: stil extern

/* Acesta e un comentariu */
p h3
{ {
text-align: center; color: red;
/* Alt comentariu */ text-align: left;
color: black; font-size: 8pt
font-family: arial }
}
si un stil intern:
Foaie de stiluri externa
Toate regulile pot fi scrise intr-un fisier cu h3
extensia css. Stilurile pot fi aplicate introducand {
text-align: right;
un link la acel fisier :
font-size: 20pt
<head> }
<link rel="stylesheet" type="text/css"
href="stilulMeu.css" />
</head> rezultatul va fi:
Avantajul consta in faptul ca putem aplica un set
color: red;
intreg de reguli intr-o pagina web doar text-align: right;
introducand o linie de cod ca cea de mai sus. font-size: 20pt
Culoarea este mostenita din stilul extern iar
Pentru cazul in care avem de aplicat un stil doar la
alinierea si dimensiunea din stilul intern
pagina curenta putem folosi un stil declarat intern.
2

Css 1 Intro

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Css 1 Intro

Încărcat de

Drepturi de autor:

Formate disponibile

Fisa css 1

Intro Selectorul class

p In codul de mai jos atat elementul h1 cat si p sunt

Adaugarea de stiluri elementelor cu

Selectorul id Stiluri inline

Comentariile CSS ... foarte utile) ex: stil extern

S-ar putea să vă placă și