Tutorial Css

<< Inapoi
Inainte >>

Introducere

Css (Cascading Style Sheet), este un set de instrucţiuni prin care se poate interveni asupra modului de prezentare a elementelor html dintr-o pagină web. Adică, folosirea unui anumit stil de prezentare a elementelor.

Stilurile Css pot fi adăugate într-o pagină web in 3 moduri.


Css intern

În acest mod, caracteristicile de stil ale elementelor, vor fi declarate în secţiunea <head>, între tag-urile <style> si </style>.
Elementele html din secţiunea <body>, vor prelua aceste caracteristici. Are avantajul că aceste stiluri pot fi folosite de toate elementele din pagina web.


Css intern

Css în linie

În acest mod, caracteristicile de stil ale elementelor, vor fi declarate în secţiunea <body>, pentru fiecare element în parte.


Css in linie

Css extern

În acest mod, caracteristicile de stil ale elementelor, vor fi plasate într-un fişier extern, denumit: style.css (orice nume, cu extensia .css).
Avantajul major este că stilurile elementelor pot fi preluate din orice pagină web din site. Însa, pentru aceasta, în secţiunea <head> a fiecărei pagini web, trebuie să plasăm instrucţiunea:


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


Css extern

Html5 recomandă folosirea stilului Css extern, aceasta ducând la încarcarea mai rapidă a paginilor în browser.
În continuare, vom folosi pentru exemplificare, numai stiluri externe.


Fundal Css (background)

Fundalul paginii web poate fi o culoare:


Fundal culoare Css

Sau poate fi o imagine:


Fundal imagine Css

Imaginea de fundal se poate repeta pe orizontală, folosind instrucţiunea:


background-repeat: repeat-x;


Se poate repeta pe verticală, folosind instrucţiunea:


background-repeat: repeat-y;


Se poate repeta atât pe orizontală cât şi pe verticală, folosind instrucţiunea (care este default):


background-repeat: repeat;


Sau poate să nu se repete, folosind instrucţiunea:


background-repeat: no-repeat;


Poziţia imaginii de fundal, poate fi setată ca:


background-position:left top, center top, right top, left center, center center, right center, left bottom, center bottom, right bottom.


Se poate seta şi în procente, faţă de marginea de sus şi din stânga a paginii web:


background-position: 40% 60%;


Sau în pixeli, faţă de marginea de sus şi din stânga a paginii web:


background-position:200px 100px;


Se poate de asemenea seta poziţia imaginii de fundal fixă, astfel ca în timpul derulării paginii, aceasta ramane vizibilă (fixă):


background-position:fixed;


Fundal imagine Css

Contururi Css (borders)

Proprietaţile contururilor Css sunt: stilul, laţimea şi culoarea.
Stilul contururilor poate fi:


border-style: dotted, dashed, solid, groove, double, dotted dashed solid double, none.
Laţimea (width), se poate exprima in pixeli, em, procente, vw.
Culoarea poate fi reprezentată prin: nume culoare, culoare în hexazecimal (HEX) sau culoare RGB.


Contururi Css

Fonturi Css

Cu ajutorul carateristicilor fonturilor, putem ataşa diferite stiluri pasajelor de text din paginile web.
Caracteristicile fonturilor sunt:
Familia fontului, care poate fi:


font-family: "Times New Roman", Arial, Verdana,...


Înfăţişarea fontului, se foloseşte pentru adaugarea unui tip nou de font. Întai downloadăm fontul england-webfont.ttf şi îl punem în directorul fonts. În fişierul: style.css, scriem:


@font-face {
font-family: 'EnglandHandDBRegular';
src: url('fonts/england-webfont.ttf');
}

p. {
font-family: "EnglandHandDBRegular";
font-style: normal;
color:#886a08;
text-decoration: none;
text-align: center;
}



Apoi, în pagina web, în secţiunea <body>, vom scrie:


<p>Test font nou</p>


Fonturi Css

Stilul fontului, care poate fi:


font-style: normal, italic, oblique.


Mărimea fontului, care poate fi exprimată în: pixeli, em, procente, vw.


font-size: 40px, 2em, 100%, 3vw, ...


Grosimea fontului, care poate fi:


font-weight: normal, bold.


Variaţia fontului, care poate fi:


font-variant: normal, small-caps.


Fonturi Css

Link-uri Css

Pentru a impune un stil unui link, se poate folosi: familia fontului, culoarea, culoarea de fundal, mărimea fontului, stilul fontului, ...
Link-urile folosesc tag-ul <a>, urmat de referinţa paginii care va fi afişată la accesarea link-ului.


<a href="https"//www.jweb.ro">Jweb site link</a>


Există selectori pentru link-uri, aceştia schimbând culoarea link-ului în funcţie de starea lui: link normal, link vizitat, link selectat,...


a:link {
color: brown;
}
a:visited {
color: yellow;
}
a:hover {
color: green;
}
a:active {
color: red;
}


În mod normal, un link apare subliniat in pagina web. Pentru a suprima textul subliniat, folosim:


a:link {
text-decoration: none;
}


Link-uri Css

Margini Css

Pentru orice element din pagina web se pot seta: marginea de sus, marginea de jos, marginea din stânga şi marginea din dreapta.
Valorile pot fi exprimate în: pixeli, em, procente sau vw.


Margini Css

Spaţiul din jurul elementelor în Css (padding)

Ca şi în cazul marginilor, se definesc spaţii in jurul elementelor, în sus, jos, stânga şi dreapta.


Spatii Css

Poziţionarea elementelor în Css

Poziţionarea elementelor în Css poate fi: statică, absolută, fixă, relativă, aderentă.
Alinierea textului, se poate realiza astfel:


text-align: left, center, right, justify.


Centrarea unui element, se realizează setând: margin: auto;


Centrare element Css

Centrarea unei imagini, se realizează setând: margin-left: auto; şi margin-right: auto;


Centrare imagine Css

Alinierea unei imagini folosind poziţia absolută, se realizeaza setând distanţa faţă de marginea de sus şi cea din stânga a paginii web.


Aliniere imagine Css

Alinierea unei imagini folosind proprietatea de plutire (float). Se poate alinia imaginea în stânga sau în dreapta.


Aliniere imagine Css

Alinierea unui element se poate realiza şi folosind poziţionarea relativă, când poziţionarea elementului nu se mai face faţă de marginile paginii web, ci faţă de celelalte elemente din pagină.


Selectori Css

Selectorii css pot fi: elemente (p { color: blue;}), clase (.font1 { font-size: 20px; color: red;}), identificatori (#text1 {font-style: italic; color: green;}), sau selectori universali (* {color: brown;}).
Aceştia pot fi accesaţi de elementele p, h1, ..., h6, a, span si div, astfel:


Selectori Css

Pentru realizarea link-urilor spre secţiuni din aceeaşi pagină web, secţiunile vor avea un identificator (id), iar la referinţa href se va seta acel identificator (#id), ca în figura urmatoare:


Selectori Css

Media elemente Css

Se referă la personalizari ale elementelor paginilor web pentru diverse echipamente: ecrane de vizualizare, imprimante, redarea sunetului.
Pentru vizualizarea unei pagini web în diferite feluri, în funcţie de rezolutia ecranului, se folosesc instrucţiunile: @media screen.


@media screen and (min-width: 400px) {
body {
background-color: yellow;
}
}


De asemenea, pentru a stabili reguli de imprimare a unei pagini web (fără meniu de navigare, fără culoare de fundal, cu ce tip de font şi culoare), se folosesc instructiunile: @media print.


@media print {
body { background: white; }
#menu { display: none; }
#wrapper, #content {
width: auto;
border: 0;
margin: 0 5%;
padding: 0;
float: none;
}
}

<< Inapoi
Inainte >>