Tutorial complet CSS
In cazul de fata se remarca asemanarea cu eticheta font din HTML care accepta argumentele type, style, size si weight.
3.1 font-family
font-family este de fapt o lista de fonturi din care browserul va folosi in ordinea in care le recunoaste (primul folosit va fi primul din lista, daca nu este recunoscut il foloseste pe al doilea si tot asa mai departe). Este recomandat ca ultima pozitie din lista sa fie un font generic (de exemplu serif, sans-serif sau monospace).
In situatia in care numele fontului este format din doua cuvinte se incadreaza intre ghilimele duble pentru ca browserul sa le interpreteze impreuna.
Exemplu: CSS introdus in HEAD aplicat etichetei p. Browserul nu recunoaste primele doua fonturi din lista, folosindu-l pe al treilea
<head>
<title>Exemplu 3_1</title>
<style type="text/css">
<!-- p{font-family: font1,font2,arial;}-->
</style>
</head>
<body>
<p>Text scris cu cu fontul Arial</p>
Text negru
<p>Text scris cu cu fontul Arial</p>
</body>
</html>
Exemplu: acelasi exemplu dar CSS introdus in eticheta p din HTML
<head>
<title>Exemplu 3_2</title>
</head>
<body>
<p style="font-family: font1,font2,arial;">Text scris cu cu fontul Arial</p>
Text negru
<p style="font-family: font1,font2,arial;">Text scris cu cu fontul Arial</p>
</body>
</html>
3.2 font-size
Este parametrul prin care stabilim dimesiunea fontului, exprimat in pixeli (px), puncte (pt), keywords sau procente. Are o functionare asemanatoare cu eticheta <font>.
Exemplu: CSS introdus in HEAD aplicat etichetei p, dimensiunea exprimata in pixeli
<head>
<title>Exemplu 3_3</title>
<style type="text/css">
<!-- p{font-size: 20px;}-->
</style>
</head>
<body>
<p>Text scris cu font de 20px</p>
Text negru
</body>
</html>
Pentru dimensiunea exprimata in puncte folosim acelasi exemplu inlocuid px cu pt.
Dimensiunea exprimata prin keywords foloseste cuvinte in loc de cifre. Sapte cuvinte inlocuiesc dimensiunile de la 1 la 7 de la veche eticheta FONT FACE din HTML.
| CSS keyword | numar FONT size |
| xx-small | 1 |
| x-small | 2 |
| small | 3 |
| medium | 4 |
| large | 5 |
| x-large | 6 |
| xx-large | 7 |
Pentru verificare se poate folosi exemplul anterior in care se inlocuieste 20px cu unul din cuvintele de mai sus.
Procentele sunt o alta valoare pe care o poate lua font-size. Aceasta modalitate poate fi vizualizata diferit de browsere diferite.
Ca verificare folositi acelasi exemplu schimband 20px cu 200%.
3.3 font-style
font-style este folosit pentru a adauga caracteristica italica fontului. Poate lua valorile normal si italic.
<!-- p{font-style: italic;}-->
</style>
3.4 font-weight
font-weight este paramerul care stabileste grosimea caracterului putand lua valorile numerice de la 100 la 900 sau BOLD, BOLDER, LIGHTER.
<!-- p{font-weight: 700;}-->
</style>
3.4 Compunerea stilurilor
Stilurile prezentate anterior pot fi folosite simultan in interiorul aceeasi etichete fiind despartite de caracterul ; (punct si virgula).
Exemplu: folosirea unui stil compus aplicat etichetei p
<head>
<title>Exemplu 3_4</title>
<style type="text/css">
<!--
p{
font-family: arial;
font-size: 20px;
font-style: italic;
font-weight: 800;}
-->
</style>
</head>
<body>
<p>Text scris cu Arial, 20px, italic, 800</p>
Text negru
</body>
</html>
Link-ul autorului:
www.drogoreanu.ro/tutorials/css.php
Comentarii
mi-a placut foarte mult expunerea precisa, fara inflorituri. daca as avea banuti sigur as face cursuri cu acest domn.
multumesc mult
danut
<b>super</b>
Ms mult pt timpul acordat in realizarea acestui tutorial
Util, 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.
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 ...
Imi spune si mie cineva cum pot trage o linie verticala de exemplu la un CV si cum pot numerota randurile?Multumesc
articolul este ffff bun .stiind f.bine html si css este usor sa treci mai departe.altfel o dai "in bara".
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
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!
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
Voteaza acest articol!
Trimite un comentariu!
