 |
|
 |
 |
| Subiectul anterior :: Subiectul urmator |
| Autor |
Mesaj |
Admin
Administrator
Data inscrierii: 07/Dec/2013
Mesaje: 44
|
 Trimis: 22/01/2017 18:52 Titlul subiectului: Css 1 intro |
|
|
| 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 nuanță 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 numeroase 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 întrebuințat 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 indiferent ce 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 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>
</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 așezat 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 fixat 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 soiuri diverse 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 |
|
|
| Sus » |
|
|
|
|
|
Nu puteti crea un subiect nou in acest forum
Nu puteti raspunde in subiectele acestui forum
Nu puteti modifica mesajele proprii din acest forum
Nu puteti sterge mesajele proprii din acest forum
Nu puteti vota in chestionarele din acest forum
|
|
 |
|
|
 |
|
