Tutorial complet CSS
Folosind eticheta ol din HTML cream liste ordonate sau numerotate. Adaugand comenzi CSS in zona HEAD putem adauga pe langa numere si cifre sau alte simboluri. Browserul Netscape nu permite asocierea comenzilor CSS decat pentru eticheta li.
Sintaxa este:
<style type="text/css">
<!--
li {list-style-type: valoare;}
-->
</style>
<!--
li {list-style-type: valoare;}
-->
</style>
valoarea poate fi:
| valoare | disc |
| disc | disc |
| circle | cerc |
| square | patrat |
| decimal | numere intregi |
| lower-roman | numere romane, caractere mici (i, ii, iii, iv) |
| upper-roman | numere romane, caractere mari (I, II, III, IV) |
| upper-alpha | litere mari (A, B, C, D) |
| lower-alpha | litere mici (a, b, c, d) |
| none | nimic |
Exemplu: lista ordonata folosind marcaje cu litere mici
<html>
<head>
<title>Exemplu 6_1</title>
<style type="text/css">
<!--
li {list-style-type: lower-alpha;}
-->
</style>
</head>
<body>
Necesar materiale:
<ol>
<li>caramida</li>
<li>ciment</li>
<li>ipsos</li>
</ol>
</body>
</html>
<head>
<title>Exemplu 6_1</title>
<style type="text/css">
<!--
li {list-style-type: lower-alpha;}
-->
</style>
</head>
<body>
Necesar materiale:
<ol>
<li>caramida</li>
<li>ciment</li>
<li>ipsos</li>
</ol>
</body>
</html>
6.2 list-style-image
In afara simbolurilor de marcaj prestabilite cunoscute de browser pot fi folosite si imagini prin comansa CSS list-style-image. Imaginile sunt introduse prin adresa url().
Exemplu: lista ordonata folosind ca marcaj imaginea punct.gif
<html>
<head>
<title>Exemplu 6_2</title>
<style type="text/css">
<!--
li {list-style-image: url(punct.gif);}
-->
</style>
</head>
<body>
Necesar materiale:
<ul>
<li>caramida</li>
<li>ciment</li>
<li>ipsos</li>
</ul>
</body>
</html>
<head>
<title>Exemplu 6_2</title>
<style type="text/css">
<!--
li {list-style-image: url(punct.gif);}
-->
</style>
</head>
<body>
Necesar materiale:
<ul>
<li>caramida</li>
<li>ciment</li>
<li>ipsos</li>
</ul>
</body>
</html>
Link-ul autorului:
www.drogoreanu.ro/tutorials/css.php
Comentarii
danut manolache
mi-a placut foarte mult expunerea precisa, fara inflorituri. daca as avea banuti sigur as face cursuri cu acest domn.
multumesc mult
danut
mi-a placut foarte mult expunerea precisa, fara inflorituri. daca as avea banuti sigur as face cursuri cu acest domn.
multumesc mult
danut
23-Jul-2010 - 11:27
dan
<b>super</b>
<b>super</b>
05-Sep-2010 - 08:19
elena
Ms mult pt timpul acordat in realizarea acestui tutorial
Ms mult pt timpul acordat in realizarea acestui tutorial
10-Sep-2010 - 13:16
vizitator
Util, Multumesc
Util, Multumesc
25-Oct-2010 - 15:15
alina
Imi spuneti va rog ce cod trebuie sa contina o pagina simpla de css pe care sa o salvez cu .css pe notepad pe care apoi sa o pot folosi ca foaie externa sa puna culoarea de fundal pentru alte pagini? O pagina care se salveaza cu .CSS are doar elemente de CSS sau trebuie combinate cu HTML si salvata cu .CSS ? Pagina externa care contine link catre fisierul .CSS(si coduri HTML) trebuie salvata cu .CSS sau .HTML? Va multumesc.
Imi spuneti va rog ce cod trebuie sa contina o pagina simpla de css pe care sa o salvez cu .css pe notepad pe care apoi sa o pot folosi ca foaie externa sa puna culoarea de fundal pentru alte pagini? O pagina care se salveaza cu .CSS are doar elemente de CSS sau trebuie combinate cu HTML si salvata cu .CSS ? Pagina externa care contine link catre fisierul .CSS(si coduri HTML) trebuie salvata cu .CSS sau .HTML? Va multumesc.
18-Nov-2010 - 09:15
Mihai
Alina, n-am apucat sa citesc acest articol dar sunt sigur ca gasesti raspunsuri pentru intrebarile tale in el.
Totusi o sa incerc eu sa te lamurasc cat de cat cum sta treaba cu HTML-ul si CSS-ul ...
In primul rand sa spunem ca avem niste fisiere HTML in care avem niste TAG-uri de tip DIV, cateva de tip IMG si altele de tip A (ancora).
In sectiunea HEAD a fisierului cu extensia HTML se pune un link (<link rel="stylesheet" type="text/css" href="fisier_de_stil.css">) catre fisierul nostru cu extensia CSS.
In acest fisier CSS avem DOAR cod CSS, si facem legatura cu elementele din fisierul HTML prin ID-uri, CLASE si cateodata cu numele tagului (nerecomandat totusi).
Astfel, presupunand ca avem in fisierul cu extensia HTML un tag DIV cu ID-ul "test", in CSS il vom selecta cu "div#test".
"div" - numele de tag (putea fi la fel de bine "a", "img" sau un alt tag)
"#" - ne spune ca este vorba de un ID nu de o CLASA (clasa fiind notata cu punct)
"test" - numele ales de noi pentru div-ul respectiv.
Ca sa-ti raspund la intrebari...pentru a da valoare culorii de fundal a unui div sau a unei parti de continut exista atributul "background-color" (ex: div#test {background-color : red;} - div-ul cu id-ul numit "test" va avea culoarea de fundal rosie).
La a 2-a intrebare...O pagina salvata cu extensia CSS poate avea cod de mai multe feluri...dar niciodata HTML (la nivelul asta, la care esti, e bine sa stii ca se pune doar cod CSS).
Pagina "externa" cum o numesti tu...e defapt pagina principala care are partea de cod HTML unde exista obiectele cu numele lor ce urmeaza a fi stilizate intr-un fisier CSS si trebuie salvata cu extensia HTML.
Poate nu m-am facut foarte inteles ... dar sper ca te-am mai luminat putin ... si poate e util si pentru cei ce vor urma ...
Alina, n-am apucat sa citesc acest articol dar sunt sigur ca gasesti raspunsuri pentru intrebarile tale in el.
Totusi o sa incerc eu sa te lamurasc cat de cat cum sta treaba cu HTML-ul si CSS-ul ...
In primul rand sa spunem ca avem niste fisiere HTML in care avem niste TAG-uri de tip DIV, cateva de tip IMG si altele de tip A (ancora).
In sectiunea HEAD a fisierului cu extensia HTML se pune un link (<link rel="stylesheet" type="text/css" href="fisier_de_stil.css">) catre fisierul nostru cu extensia CSS.
In acest fisier CSS avem DOAR cod CSS, si facem legatura cu elementele din fisierul HTML prin ID-uri, CLASE si cateodata cu numele tagului (nerecomandat totusi).
Astfel, presupunand ca avem in fisierul cu extensia HTML un tag DIV cu ID-ul "test", in CSS il vom selecta cu "div#test".
"div" - numele de tag (putea fi la fel de bine "a", "img" sau un alt tag)
"#" - ne spune ca este vorba de un ID nu de o CLASA (clasa fiind notata cu punct)
"test" - numele ales de noi pentru div-ul respectiv.
Ca sa-ti raspund la intrebari...pentru a da valoare culorii de fundal a unui div sau a unei parti de continut exista atributul "background-color" (ex: div#test {background-color : red;} - div-ul cu id-ul numit "test" va avea culoarea de fundal rosie).
La a 2-a intrebare...O pagina salvata cu extensia CSS poate avea cod de mai multe feluri...dar niciodata HTML (la nivelul asta, la care esti, e bine sa stii ca se pune doar cod CSS).
Pagina "externa" cum o numesti tu...e defapt pagina principala care are partea de cod HTML unde exista obiectele cu numele lor ce urmeaza a fi stilizate intr-un fisier CSS si trebuie salvata cu extensia HTML.
Poate nu m-am facut foarte inteles ... dar sper ca te-am mai luminat putin ... si poate e util si pentru cei ce vor urma ...
19-Mar-2011 - 01:04
Alex
Imi spune si mie cineva cum pot trage o linie verticala de exemplu la un CV si cum pot numerota randurile?Multumesc
Imi spune si mie cineva cum pot trage o linie verticala de exemplu la un CV si cum pot numerota randurile?Multumesc
27-Mar-2011 - 11:55
Valentin
articolul este ffff bun .stiind f.bine html si css este usor sa treci mai departe.altfel o dai "in bara".
articolul este ffff bun .stiind f.bine html si css este usor sa treci mai departe.altfel o dai "in bara".
10-Apr-2011 - 13:36
Radu
cel mai tare site web de pe tot internetul. N-am cuvinte sa multumesc celor care au scris aceste tutoriale, atat de la obiect si le-au facut atat de accesibile. De mult caut un tutorial despre CSS iar in numai 8 pagini autorul a punctat depsre cam tot ce ai nevoie ca sa pornesti serios la drum.
Sunteti cei mai adevarati
cel mai tare site web de pe tot internetul. N-am cuvinte sa multumesc celor care au scris aceste tutoriale, atat de la obiect si le-au facut atat de accesibile. De mult caut un tutorial despre CSS iar in numai 8 pagini autorul a punctat depsre cam tot ce ai nevoie ca sa pornesti serios la drum.
Sunteti cei mai adevarati
17-Apr-2011 - 12:17
cornerro
exemplul 4.1 contine o greseala: codul css e pentru un "p" in timp ce html-ul introduce un "div".
limbajul e sofisticat si contine inconsecvente formale, uneori inadvertente semantice. pentru cei care au parcurs deja un tutorial de genul acestuia: http://www.html.net/tutorials/css/, lectiile de aici vor capata mai mult sens.
oricum, multumim pentru efort!
exemplul 4.1 contine o greseala: codul css e pentru un "p" in timp ce html-ul introduce un "div".
limbajul e sofisticat si contine inconsecvente formale, uneori inadvertente semantice. pentru cei care au parcurs deja un tutorial de genul acestuia: http://www.html.net/tutorials/css/, lectiile de aici vor capata mai mult sens.
oricum, multumim pentru efort!
05-Jun-2011 - 23:05
antinogel
ar fi fost f simplu si elegant, ceea ce nu este cazul, ca informatiile pe care le oferi sa le pui pe o singura pagina, nu sa trebuiasca sa navighezi prin nu stiu cate pagini, si de asemeni o posibilitatea de descarcare, salvare, printare, ceea ce de asemeni nu este cazul, probabil face parte din politica general de pe internet de pierdere de cat mai mult timp pe sit sau pagina, pentru ranking nu? slabut situl dar cu multe pretentii, ati impanzit internetul cu tot felul de tampenii
ar fi fost f simplu si elegant, ceea ce nu este cazul, ca informatiile pe care le oferi sa le pui pe o singura pagina, nu sa trebuiasca sa navighezi prin nu stiu cate pagini, si de asemeni o posibilitatea de descarcare, salvare, printare, ceea ce de asemeni nu este cazul, probabil face parte din politica general de pe internet de pierdere de cat mai mult timp pe sit sau pagina, pentru ranking nu? slabut situl dar cu multe pretentii, ati impanzit internetul cu tot felul de tampenii
08-Jul-2011 - 17:36
Voteaza acest articol!
Trimite un comentariu!
