Introducere in css
Fisierul CSS (cascading style sheet - foi de stil in cascada) va permite separarea continutului (X)HTML de stilul de afisare in pagina. Ca de obicei, utilizati codul (X)HTML pentru aranjarea continutului in pagina, insa toata prezentarea (fonturi, culori, fundaluri, borduri, etc) se realizeaza din fisierul CSS. In acest moment, puteti folosi CSS-urile in doua moduri, si anume interne sau externe.
Exista cateva modalitati de afisare a fisierelor CSS:
1. Stilurile Interne
<head>
<title>titlu pagina</title>
<style type="text/css">
a:link { color: #BB2F2E; text-decoration: none; }
a:visited { color: #BB2F2E; text-decoration: none; }
a:hover { color: #A58684; text-decoration: none; }
</style>
</head>
<title>titlu pagina</title>
<style type="text/css">
a:link { color: #BB2F2E; text-decoration: none; }
a:visited { color: #BB2F2E; text-decoration: none; }
a:hover { color: #A58684; text-decoration: none; }
</style>
</head>
*Acest cod va face ca toate linkurile de pe pagina ta sa fie culoarea #BB2F2E iar cand treci cursorul pe deasupra linkului va fi de culoare #A58684 .
2. Stilurile externe
<head>
<title> titlu pagina </title>
<link rel="stylesheet" type="text/css" href="stil.css" />
</head>
<title> titlu pagina </title>
<link rel="stylesheet" type="text/css" href="stil.css" />
</head>
Folosind metoda fisierelor CSS externe, toate paginile (X)HTML vor folosi acelasi fisier de stil. Asta inseamna ca dca doriti sa faceti o schimbare care sa aiba efect in toate paginile, este de ajuns sa modificati un singur fisier, si anume cel de stil (.css), si efectul se va observa pe toate paginile (X)HTML ce folosesc acel fisier. Astfel faceti schimbari in tot siteul, indiferent de cate pagini are, fara efort si mai ales foarte repede.
3. Stilurile in linie
<span style="background-color: violet; color: white; padding-left: 20px;">text alb pe fond violet cu spatiu de 20 pixeli in stanga</span>
Rezultat: text alb pe fond violet cu spatiu de 20 pixeli in stanga
Span-ul css
Span-urile sunt similare diviziilor cu exceptia ca sunt de tipul "in linie" si nu de tip "bloc". Span-urile nu executa implicit linie noua dupa inserarea lor. Puteti folosi span-ul pentru stilizarea unor zone de text, dupa cum urmeaza:
<span class="italic">Acest text este italic</span>
In fisierul CSS avem:
.italic{
font-style: italic;
}
font-style: italic;
}
Rezultatul final este: Acest text este italic.
Padding css
Padding-ul este distanta dintre bordura unui element (X)HTML si continutul lui.
padding-top: lungime procent;
padding-left: lungime procent;
padding-right: lungime procent;
padding-bottom: lungime procent;
padding-left: lungime procent;
padding-right: lungime procent;
padding-bottom: lungime procent;
Puteti observa in exemplul de mai sus, ca aveti la dispozitie doua posibilitati pentru proprietatea "padding": lungime si procent. Este posibil sa declarati padding-ul pentru un element intr-o singura proprietate, astfel:
padding: 10px 10px 10px 10px;
Daca declarati toate cele patru valori, ca in exemplul de mai sus, ordinea lor este urmatoarea:
In cazul in care declarati o singura valoare, aceasta este valabila pentru toate cele patru laterale ale elementului respectiv.
padding: 10px;
Daca declarati doar doua sau trei valori, valorile nedeclarate sunt luate din partile opuse:
Dupa cum stiti ordinea celor 4 valori este: sus, dreapta, jos, stanga. Cand declarati doar primele doua inseamna ca ati declarat valoarea pentru sus si pentru dreapta. Valorile pentru celelalte doua vor fi: jos=sus, stanga=dreapta.
Daca nu declarati padding-ul unui element, acesta va fi implicit egal cu zero.
Ancore, linkuri si pseudo clase
Mai jos, gasiti cateva metode prin care puteti utiliza CSS-ul pentru a stiliza linkurile:
a:link {color: #009900;}
a:visited {color: #999999;}
a:hover {color: #333333;}
a:focus {color: #333333;}
a:active {color: #009900;}
a:visited {color: #999999;}
a:hover {color: #333333;}
a:focus {color: #333333;}
a:active {color: #009900;}
Sa presupunem ca div-ul nostru se numeste "group".Vom avea atunci:
a.group:link {color: #009900;}
a.group:visited {color: #999999;}
a.group:hover {color: #333333;}
a.group:focus {color: #333333;}
a.group:active {color: #009900;}
a.group:visited {color: #999999;}
a.group:hover {color: #333333;}
a.group:focus {color: #333333;}
a.group:active {color: #009900;}
In acest caz, va trebui sa atribuiti fiecarui link clasa potrivita:
<a class="group" href="#" title="textul linkului"> textul linkului </a>
Background
Proprietatile CSS folosite pentru efectul de fundal sunt:
background-color: #000000;
background-image: url(imagine.jpg);
background-repeat: no-repeat;/repeat;/repeat-x;/repeat-y;/inherit;
background-attachment: scroll;/fixed;/inherit;
background-position: left top;/left center;/left bottom;/right top;/right center;/right bottom;/center top;/center center;/center bottom;/x% y%;/xpos ypos;/inherit;
background-image: url(imagine.jpg);
background-repeat: no-repeat;/repeat;/repeat-x;/repeat-y;/inherit;
background-attachment: scroll;/fixed;/inherit;
background-position: left top;/left center;/left bottom;/right top;/right center;/right bottom;/center top;/center center;/center bottom;/x% y%;/xpos ypos;/inherit;
Dar mai scurt ar fi asa:
background: #000000 url(imagine.png) top left fixed no-repeat;
0 comentarii:
Trimiteți un comentariu