Tutorial CSS

Tutorial CSS ncepnd cu HTML + CSS
Cuprins

1. Introducere n HTML 2. Adugarea culorilor 3. Adugarea fonturilor 4. Bara de navigare 5. Stiluri de link-uri 6. Linie orizontal 7. Stilul Extern CSS 8. Crearea fiierelor separate 9. Rezultatul final Lecturi viitoare
Acest tutorial se adreseaz celor care vor s nceap s utilizeze formatul CSS i nu au mai scris niciodat o pagin Web cu acest stil. Astfel vei putea nva baza HTML-ului, pentru a fi capabil s realizezi propriile tale pagini web. Nu explic amnunit formatul CSS, ci doar cum s creezi un fiier HTML, un fiier CSS i cum pot fi facute aceastea s lucreze mpreun. Dup aceea, se pot utiliza multe alte tutoriale pentru adugarea altor particulariti pentru fiierele HTML i CSS. Sau se pot utiliza programe specializate de editare HTML sau CSS, care ajut la crearea siturilor complexe. La sfritul tutorialului, vei realiza un fiier HTML, o pagin HTML ordonat i cu culori, totul cu ajutorul limbajului CSS.
Seciunile ce conin semnul de atenie! la nceput indic faptul c acesta este un material cu noiuni mai avansate fa de cel din restul textului. Dac deja eti familiarizat cu XML, atunci HTML i se va prea uor de nvat. V sftuim s nu citii tot acest tutorial dintr-o dat, ci s petrecei un sfert sau o jumtate de or parcurgnd cteva lecii dup care s reflectai asupra informaiei citite i apoi s trecei la lucru. Pregtire pentru HTML Crearea documentelor n HTML nu este dificil. Pentru nceput nu vei avea nevoie dect de Notepad++ i puin dedicaie. Dac eti nou n domeniu i nu ai parcurs nc Ghidul nceptorului, este indicat s petreci cteva minute citindul. Pagini Web
Paginile web au multe ntrebuinri. Aici sunt explicate cteva dintre argumente:

Cea mai simpl cale de a rspndii informaii pe internet O alt form de a-i amplifica afacerea Poi face cunoscut lumi c ai ceva de spus ntr-o pagin personal
Cuvinte de reinut

Tag - folosit pentru a specifica regiuni ale documentului HTML, pe care le va interpreta ulterior browser-ul. Tag-urile vor avea aceast nfiare: <tag> Element - este un tag complet, avnd un <tag> de deschidere i unul de nchidere </tag>. Attribute - este folosit pentru a modifica valoarea unui element n HTML. De obicei un element are mai multe atribute.
Deocamdat trebuie doar s reii c un tag este o comand pe care browser-ul o interpreteaz, c un element este un tag complet iar un atribut personalizeaz i modific un element n HTML.
Step 1: Scrierea unui document HTML

Pentru acest tutorial se va utiliza doar un simplu editor de text, i anume, Notepad++. Odat nelese principiile, se pot utiliza alte programe specializate cum ar fi Style Master, Dreamweaver sau GoLive. Dar pentru nceput, la scrierea primei pagini n format CSS, este bine s nu fie distras atenia de prea multe particulariti.
Deschide Notepad++ i copiaz urmtorul cod:
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE> Pagina mea WEB</TITLE> <STYLE type="text/css"> h1 { color: red } </STYLE> </HEAD> <BODY> <H1> Pagina mea WEB </H1> <P>Numele meu este (nume student) i sunt student al Facultatii de Ingineria Sistemelor Biotehnice. <P><img SRC="IMG_1420.jpg" WIDTH="300" HEIGHT="254"> </BODY> </HTML>
Salveaz fiierul cu numele PaginaMea.html i vizualizeaz-l n Browserul de Internet.
Elemente HTML
Elementele de HTML au multe ranguri. Tot ceea ce se vede, paragrafurile, bannerele, linkurile de navigare la dreapta i la stnga paginii, sunt toate elemente ale acestei pagini. Un element are trei pri: un tag de deschidere, coninutul elementului i tag-ul de nchidere. 1. <p> - tag-ul pentru deschiderea unui paragraf. 2. Coninutul elementului - paragraful propriu-zis. 3. </p> - tag-ul de nchidere. ***Nota: Toate paginile web vor avea cel puin elementele de baz: html, head, title i body. <html>element...</html> Un document HTML ntotdeauna va ncepe i va termina cu un tag <html> i respectiv </html>. Aceasta este structura standard a unui HTML. Elementul <head> Elementul <head> este cel care urmeaz. Atta timp ct l pui ntre html i body totul ar trebui s fie OK. "Head" nu are nici o funcie vizibil, aa c vom discuta despre acest aspect n tutorialele ulterioare. Totusi vreau s mentionez c <head> poate oferi browserului informaii foarte utile. Se pot nsera aici printre altele coduri Javascript sau CSS. Dac vei salva documentul i vei ncerca s dai un refresh la pagina inial din browser nu vei nota nici o diferen. Ai puin rbdare, n continuare vom studia cteva elemente vizibile. Elementul <title> Pentru ca totul s ias bine trebuie s pui tag-ul title nuntrul celui de head. Ceea ce vei scrie ntre cele dou tag-uri title (<title> i </title>) va putea fi vizualizat ca i numele browser-ului, de obicei n partea din stnga sus. Vei putea vedea titlul dup cum am mai spus n partea din stnga sus la marea majoritate a browser-elor Elementul <body> Elementul body este cel care definete nceperea coninutului pagini propriu-zise (titluri, paragrafuri, fotografii, muzic i orice altceva). Dup cum poti vedea n meniul de la stnga, vom trata pe rnd toate aceste elemente de coninut. Deocamdat tot ce trebuie s reii este c body ncapsuleaz tot coninutul paginii. Dac ai fcut totul bine, vei putea vedea prima ta pagin web. Poi pune orice nume doreti, doar
ine minte c numele descriptive sunt cele mai uor de gsit ulterior. Vizualizeaz acum toat isprava, dup care te invit s parcurgi urmtoarea seciune.
Prima linie a unui fiier HTML i spune browser-ului ce tip de HTML este (DOCTYPE nseamn DOCument TYPE). n acest caz, acesta este un document HTML versiunea 4.01.
Step 1. Deschide Notepad++ i copiaz urmtorul cod:
<html> <head> <title>Primul meu stil de pagina</title> </head> <body>  <ul class="navbar"> <li><a href="index.html">Home page</a> <li><a href="musings.html">Musings</a> <li><a href="town.html">My town</a> <li><a href="links.html">Links</a> </ul>  <h1> Primul meu stil de pagina </h1> <p> Bine ati venit pe pagina mea! <p>Lipsesc imaginile, dar in sfrit am un stil de pagina. Si am i link-uri, chiar daca nu duc nicaieri deocamdata; <p>Aici trebuie sa existe mai multe lucruri, dar deocamdata nu prea stiu ce.  <address> 25 Aprilie 2009<br> Realizat de mine.</address> </body> </html>
Salveaz fiierul cu numele PrimaPagina1.html i vizualizeaz-l in Browserul de Internet. Tagul <body> este locul unde se duce textul actual al documenului. n principiu, orice se afla n interiorul acestui tag va fi afisat, exceptand textul din interiorul , care serveste drept comentariu pentru noi nsine. Browser-ul il va ignora. n tag-urile din exemplu, <ul> Unordered List, introduce o lista n care itemi sunt nenumerotati. Tag-ul <li>List Item este nceputul listei de itemi. Tag-ul <p> Paragraf
este un, iar <a>Anchor reprezinta o ancora, care este folosita pentru crearea unui hyperlink. HTML pune la dispozitie trei tipuri de liste. <ol> va afisa o lista ordonata n timp ce <ul> una neordonata, iar pentru a realiza o lista de defnitii se foloseste <dl>. Foloseste atributele type i start pentru a realiza lista cea mai potrivita cerintelor tale.

<ul> - unsorted list, buline <ol> - ordered list, numere <dl> - definition list, lista de definitii.
HTML - Liste nenumerotate O lista nenumerotate se creaza cu ajutorul tagului <ul>. Listele nenumerotate deasemenea sunt de mai multe tipuri i anume, patratele, buline i cerculete.Valoarea standard redata de majoritatea browser-elor sunt bulinele. Lista ordonata (numerotata) Se foloseste tag-ul <ol>pentru a ncepe o lista ordonata. Prin punerea tagurilor <li></li> (list item) ntre tagurile <ol> i </ol> se semnalizeaza browser-ului elementele listei.
Dup cum se poate vedea, pagina nu este chiar aratoas
Step 2: Adugarea culorilor

Exista trei feluri distincte de a defini o culoare. Cea mai simpla metoda este aceea de a numi culorile (n engleza). De exemplu: black, white, red, green, i blue. Am alaturat mai jos numele de culori care sunt suportate n HTML. HTML - Sistemul de culori RGB Acest cod de culori nu este recomandat, deoarece Internet Explorer este singurul Browser care suporta valorile RGB n HTML. RGB este prescurtarea pentru: Red, Green, Blue. Fiecare dintre aceste culori poate lua orice valoare ntre 0 (nu coloreaza deloc) i 255 (n totalitate acea culoare). Dac se foloseste un browser care nu este Internet Explorer nu se obtine nici un rezultat. HTML - Sistemul de culori hexazecimal Sistemul hexazecimal este destul de dificil la prima vedere. Cu toate aceste te asigur c odata cu trecerea timpului, i cu putina practic, il vei ntelege pe deplin. Sistemul de culori hexazecimal este sistemul standard pentru toate browser-ele web. Este de ncredere i este compatibil nu numai n aplicatiile web. Sistemul hexazecimal este o reprezentare de 6 caractere de culoare. Primele doua caractere (RR) reprezinta valoarea rosu (red), urmatoarele doua (GG) sunt verde (green), iar ultimele doua (BB) sunt albastru (blue). Vom ncepe cu un stil de pagin ncorporat n interiorul fiierului HTML. Mai tarziu, vom realiza fiiere separate HTML i CSS. Separarea fiierelor este benefic, deoarece face mai usoara utilizarea aceluiasi stil de pagin pentru mai multe fiiere HTML: trebuie indicat stilul paginii doar odata. Dar pentru acest pas, vom pastra totul ntr-o singura pagin. Trebuie s adaugam un element <style> fiierului HTML. Stilul paginii va fi n interiorul acestui element. Asadar, vom merge napoi n ferestra editorului i adaugam urmatoarele linii n elementul head al fiierului HTML. Liniile ce trebuie adaugate sunt marcate cu rosu (liniile 4 8).
<html> <head> <title> Primul meu stil de pagina </title> <style type="text/css"> body { color: purple; background-color: #d8da3d } </style> </head> <body>
 <ul class="navbar"> <li><a href="index.html">Home page</a> <li><a href="musings.html">Musings</a> <li><a href="town.html">My town</a> <li><a href="links.html">Links</a> </ul>  <h1> Primul meu stil de pagina </h1> <p> Bine ati venit pe pagina mea! <p>Lipsesc imaginile, dar in sfrit am un stil de pagina. Si am i link-uri, chiar dac nu duc nicaieri deocamdata; <p>Aici trebuie sa existe mai multe lucruri, dar deocamdata nu prea stiu ce.  <address> 25 Aprilie 2009<br> Realizat de mine.</address> </body> </html>
Salveaz fiierul cu numele PrimaPagina2.html i vizualizeaz-l n Browserul de Internet. Prima linie introdus spune c acesta este un stil de pagin i de aceea este scris n format CSS (text/css). A doua linie spune c stilul este adaugat elementului body. Cea de-a treia linie seteaza n rosu culoarea textului iar urmatoarea linie seteaza n galben-verde culoarea fundalului.
Stilul paginilor n format CSS este realizat de reguli. Fiecare regul are trei pri: 1. selectorul (n exemplu: body), care spune browser-ului care parte a documentului este afectat de regul; 2. proprietatea (n exemplu, 'color' i 'background-color' sunt ambele proprieti), care specific ce aspect al traseului este reglat; 3. valoarea ('purple' i '#d8da3d'), care d valoarea proprietii stilului. Exemplul arat c regulile pot fi combinate. S-au stabilit dou proprieti, astfel nct am putut realiza dou reguli separate:
body { color: purple } body { background-color: #d8da3d }
dar din moment ce ambele reguli afecteaz elementul body, am scris "body", doar o dat i am pus proprietile i valorile mpreun. Pentru mai multe informaii despre Selectoare, a se vedea capitolul 2 din Lie & Bos. 7
Culoarea de fond a elementului bodyva fi, de asemenea, culoarea de fond a ntregului document. Nu am dat nici unuia din celelalte elemente (p, li, adresa ...) un fundal explicit, astfel nct, n mod implicit nu vor avea nici unul (sau: va fi transparent). Proprietatea "culoare" seteaz culoarea textului pentru elementul corp, iar toate celelalte elemente din interiorul corpului, motenesc aceasta culoare, cu excepia cazului n care n mod explicit aceste proprieti sunt suprascrise. (Vom aduga alte culori mai trziu.)
Cum arat un browser de pagini web, acum, c au fost adugate unele culori.
Culorile pot fi specificate n CSS n mai multe moduri. Acest exemplu arat dou dintre ele: prin nume ( "violet") i prin codul hexazecimal ( "# d8da3d").Exist aproximativ 140 de nume de culori, n timp ce codurile hexazecimale permit peste 16 milioane de culori. Adding a touch of style explic mai multe despre aceste coduri.
Step 3: Adugarea fonturilor

Tag-ul <font> este folosit pentru a modifica tipul de text, mrimea i culoarea. Folosete atributele "size","color", i "face" pentru a personaliza textul. Foloseste tag-ul <basefont> pentru a seta culoarea, mrimea i stilul ntregului tu text. n general tag-urile "font" i "basefont" nu se folosesc prea mult, n general se folosete Css-ul pentru a stabili atributele textului. Un alt lucru care este uor de fcut, este de a face distincie ntre fonturi pentru diferite elemente ale paginii. Deci, hai s setam textul cu un font "Georgia", cu excepia celui din rubrica H1, pe care l vom seta cu font "Helvetica". 8
Pe Web, nu putei fi niciodat sigur ce fonturi au pe computerele lor cititorii dumneavoastr, aa c vom aduga unele alternative: dac Georgia nu este disponibil, Times New Roman sau Times, sunt, de asemenea foarte bune, i, dac tot nu sunt, atunci browser-ul mai poate utiliza orice alte font cu serifs. Dac Helvetica este absent, Geneva, Arial i SunSans-Regular sunt destul de asemntoare c form, i dac nici una dintre aceste nu lucreaz, browser-ul are posibilitatea de a alege orice alt font care este mai mic dect serif. n editorul de text se adaug urmtoarele linii (liniile 6-7 i 10-12):
Step 3. Deschide Notepad++ i copiaz urmtorul cod::
<html> <head> <title> Primul meu stil de pagina </title> <style type="text/css"> body { font-family: Georgia, "Times New Roman", Times, serif; color: purple; background-color: #d8da3d } h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } </style> </head> <body>  <ul class="navbar"> <li><a href="index.html">Home page</a> <li><a href="musings.html">Musings</a> <li><a href="town.html">My town</a> <li><a href="links.html">Links</a> </ul>  <h1> Primul meu stil de pagina </h1> <p> Bine ati venit pe pagina mea! <p>Lipsesc imaginile, dar in sfrit am un stil de pagina. Si am i link-uri, chiar daca nu duc nicaieri deocamdata; <p>Aici trebuie sa existe mai multe lucruri, dar deocamdata nu prea stiu ce.  <address> 25 Aprilie 2009<br> Realizat de mine.</address> </body> </html>
Salveaz fiierul cu numele PrimaPagina3.html i vizualizeaz-l n Browserul de Internet. Dac salvai fiierul din nou i apsai pe "Rencrcare" n browser nu ar trebui s fie acum fonturi diferite pentru rubrica H1 i alte texte.
Acum, textul principal are un alt font fa de rubrica H1.
Step 4: Adugarea unui meniu de navigare

Lista din partea de sus a paginii HTML este menit s devin un meniu de navigare. Multe site-uri Web au un fel de meniu pe partea de sus sau pe partea lateral a paginii. i aceast pagin trebuie s aib de asemenea unul. Noi l vom pune pe partea stng, pentru c este un pic mai interesant dect cel de la nceput ... Meniul este deja n pagina HTML. Acesta este lista <ul> n partea de sus. Legturile din aceast list nu funcioneaz, deoarece "site-ul Web" realizat pn n prezent const doar
10
ntr-o singur pagin, dar asta nu conteaz acum. La un adevarat site Web, desigur, n meniu nu ar trebui s fie orice legturi. Deci, avem nevoie s trecem lista mai la stnga i s mutm restul de text un pic la dreapta, pentru a face loc pentru meniu. Proprietile formatului CSS pe care le folosim pentru aceasta sunt "padding-left" (pentru a muta corpul de text) i "position", "left" i "top" (pentru a deplasa meniul). Exist i alte modaliti de a face acest lucru. Dac v uitai pe "coloana" sau "schema" de pe pagina Learning CSS, vei gsi mai multe abloane gata de execuie. Dar acesta e O.K. pentru scopurile noastre. n fereastra editorului, adugai urmtoarele linii la fiierul HTML (liniile 6 i 11-15):
<html> <head> <title> Primul meu stil de pagina </title> <style type="text/css"> body { padding-left: 11em; font-family: Georgia, "Times New Roman", Times, serif; color: purple; background-color: #d8da3d } ul.navbar { position: absolute; top: 2em; left: 1em; width: 9em } h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } </style> </head> <body>  <ul class="navbar"> <li><a href="index.html">Home page</a> <li><a href="musings.html">Musings</a> <li><a href="town.html">My town</a> <li><a href="links.html">Links</a> </ul>  <h1> Primul meu stil de pagina </h1> <p> Bine ati venit pe pagina mea! <p>Lipsesc imaginile, dar in sfrit am un stil de pagina. Si am i link-uri, chiar daca nu duc nicieri deocamdata; <p>Aici trebuie sa existe mai multe lucruri, dar deocamdata nu prea stiu ce.
11
 <address> 25 Aprilie 2009<br> Realizat de mine:</address> </body> </html>
Salveaz fiierul cu numele PrimaPagina4.html i vizualizeaz-l n Browserul de Internet. Dac salvai fiierul din nou i il rencrci n browser, ar trebui s aib n prezent lista de link-uri n partea stnga a textului principal. Acum deja pare mult mai interesant, nu?
Textul principal a fost mutat mai la dreapta, precum i lista de link-uri, care este n prezent n partea stng a acestuia n loc de mai sus.
n 'position: absolute' , se spune c elementul ul este poziionat independent de orice alt text care vine nainte sau dup n document iar "left" i "top" indic faptul c aceea este pozitia. n acest caz, 2em de la nceput i 1em din partea stng a ferestrei. n cazul n care meniul este afiat cu un font de 12 puncte, atunci "2em" este de 24 de puncte. Emeste o unitate foarte util n CSS, deoarece aceasta poate s se adapteze n mod automat fontului pe care cititorul se ntmpl s-l utilizeze. Majoritatea browserelor au un meniu pentru creterea sau reducerea dimensiunii fonturilor.
12
Step 5: Stiluri de linkuri

Meniul de navigare nc arat c o list, n loc de un meniu. S adugm un stil pentru acesta. Vom elimina bulinele din list i vom muta elementele n stnga, n locul n care au fost bulinele. De asemenea, vom da fiecrui element propriul fundal alb i un ptrat negru. (De ce? Fr nici un motiv, doar pentru c putem.) Nu am spus ce culori ar trebui s fie pentru link-uri, deci haidei s adugm, de asemenea: albastru pentru link-urile pe care utilizatorul nu le-a vzut nc i violet pentru link-urile deja vizitate (liniile 12-14 i 22-32):
<html> <head> <title> Primul meu stil de pagina </title> <style type="text/css"> body { padding-left: 11em; font-family: Georgia, "Times New Roman", Times, serif; color: purple; background-color: #d8da3d } ul.navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 9em } h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } ul.navbar li { background: white; margin: 0.5em 0; padding: 0.3em; border-right: 1em solid black } ul.navbar a { text-decoration: none } a:link { color: blue } a:visited { color: purple } </style> </head> <body> 
13
<ul class="navbar"> <li><a href="index.html">Home page</a> <li><a href="musings.html">Musings</a> <li><a href="town.html">My town</a> <li><a href="links.html">Links</a> </ul>  <h1> Primul meu stil de pagina </h1> <p> Bine ati venit pe pagina mea! <p>Lipsesc imaginile, dar in sfrit am un stil de pagina. Si am i link-uri, chiar daca nu duc nicaieri deocamdata; <p>Aici trebuie sa existe mai multe lucruri, dar deocamdata nu prea stiu ce.  <address> 25 Aprilie 2009<br> Realizat de mine:</address> </body> </html>
Salveaz fiierul cu numele PrimaPagina5.html i vizualizeaz-l n Browserul de Internet.
Tradiional, browser-ul arat hyperlink-urile subliniate i cu culori. De obicei, culorile sunt similare cu ceea ce am specificat aici: albastru pentru link-uri ctre pagini care nu au fost vizitate nc (sau vizitate cu mult timp n urm), violet pentru pagini pe care leai vzut deja. n HTML, hiperlegturile sunt create cu <a> elemente, astfel nct ca s se specifice tipul de culori, avem nevoie s adugam o regul de stil pentru "a". Pentru a face diferena ntre link-urile vizitate i nevizitate, CSS prevede dou "pseudo-clase" (:link i :visited). Ele sunt denumite "pseudo-clase" pentru a le deosebi de clasele de atribute care apar n HTML direct, de exemplu, de clasa = "navbar" n exemplul nostru.
14
Step 6: Adugarea unei linii orizontale

n general se foloseste tag-ul <hr/> pentru a crea o linie orizontal. Acest tag este similar celui de linebreak <br/>. Dup cum se va vedea, tot ceea ce face acest tag este s deseneze o linie orizontal separnd diferite zone ale coninutului sau pur i simplu decoreaz pagina. Folosit cu iscusin poate da rezultate destul de neateptate. Rezultatul final, n plus pe stilul de pagin, este o regul pe orizontal creat pentru a separa textul de semntura din partea de jos. Vom utiliza "border-top" pentru a aduga o linie punctat deasupra elementului <address> (liniile 33-36):
<html> <head> <title> Primul meu stil de pagina </title> <style type="text/css"> body { padding-left: 11em; font-family: Georgia, "Times New Roman", Times, serif;
15
color: purple; background-color: #d8da3d } ul.navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 9em } h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } ul.navbar li { background: white; margin: 0.5em 0; padding: 0.3em; border-right: 1em solid black } ul.navbar a { text-decoration: none } a:link { color: blue } a:visited { color: purple } address { margin-top: 1em; padding-top: 1em; border-top: thin dotted } </style> </head> <body>  <ul class="navbar"> <li><a href="index.html">Home page</a> <li><a href="musings.html">Musings</a> <li><a href="town.html">My town</a> <li><a href="links.html">Links</a> </ul>  <h1> Primul meu stil de pagina </h1> <p> Bine ati venit pe pagina mea! <p>Lipsesc imaginile, dar in sfrit am un stil de pagina. Si am i link-uri, chiar daca nu duc nicaieri deocamdata; <p>Aici trebuie sa existe mai multe lucruri, dar deocamdata nu prea stiu ce.  <address> 25 Aprilie 2009<br> Realizat de mine:</address> </body> </html>
16
Salveaz fiierul cu numele PrimaPagina6.html i vizualizeaz-l n Browserul de Internet. Acum stilul nostru de pagin este complet. Apoi, vom vedea cum se salveaz stilul paginii ntr-un fiier separat, astfel ca i alte pagini s foloseasc acest stil de pagin.
Step 7: Salvarea stilului paginii ntr-un fiier separat

Stilurile definite n interiorul unui bloc <style>...</style> pot fi transferate ntr-un fiier extern existnd astfel posibilitatea asocierii lui mai multor fiiere HTML. Pentru a utiliza un stil definit ntr-un fiier extern se procedeaz astfel: 1. Se creaz un fiier care s conin numai descrierea stilurilor i se salveaz cu extensia ".css". Coninutul acestui fiier coincide cu coninutul unui bloc <style>...</style>, fr ca aceti delimitatori s fie inclui. 2. n fiierul HTML care utilizeaz stilurile definite n fiierul creat la punctul 1, se include n blocul <head>...</head> o etichet <link>, avnd trei atribute: - atributul "rel" cu valoarea "stylesheet"; - atributul "type" cu valoarea "text/css". - atributul "href" avnd ca valoare adresa URL a fiierului creat la punctul 1; Stilurile definite din fiierul CSS extern se activeaz ca i cum ar fi stiluri definite n fiierul HTML curent ntr-un bloc <style>...</style>. n prezent avem un fiier HTML cu un stil de pagin ncorporat. Dar, dac site-ul nostru a crescut, probabil, am dori mai multe pagini cu acelai stil de pagin. Nu exist o metod mai bun dect copierea paginii de stil n fiecare fiier: dac am pune n pagina de stil ntrun fiier separat, toate paginile pot puncta aceasta. Pentru a crea un fiier pagin de stil avem nevoie un alt fiier de text gol. Putei alege "New" din meniul File din editor, pentru a crea o fereastr goal. Apoi cut i paste tot ce este n interiorul elementului <style> din fiierul HTML n noua fereastr. Nu copiai i <style> </ style>. Acestea aparin HTML, nu i formatului CSS. Noua fereastr redactat, ar trebui s aib acum pagina de stil complet.
body { padding-left: 11em; font-family: Georgia, "Times New Roman", Times, serif; color: purple; background-color: #d8da3d } ul.navbar {
17
list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 9em } h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } ul.navbar li { background: white; margin: 0.5em 0; padding: 0.3em; border-right: 1em solid black } ul.navbar a { text-decoration: none } a:link { color: blue } a:visited { color: purple } address { margin-top: 1em; padding-top: 1em; border-top: thin dotted } h3 {text-shadow: 0.1em 0.1em #333} div.figure1 { float: left; width: 35%; border: thin silver solid; margin: 0.5em; padding: 0.5em; } div.figure p { text-align: center; font-style: italic; font-size: smaller; text-indent: 0; } img.scaled { width: 100%; } div.banner{ margin-top: 10em; padding-top: 10em; font-style: italic; font-size: smaller; }
Salveaz fiierul cu numele StilulMeu.css.
Cnd alegei "Save As ..." din meniul File, asigurai-v c este n acelai director / folder ca PrimaPagina.html, pagina de stil salvata ca "StilulMeu.css".
18
Acum du-te napoi la fereastra cu codul HTML. Stergei tot de la tag-ul <style> pn la </ style> i inclusiv eticheta i se realizeaz nlocuirea acestuia cu un element <link>, dup cum urmeaz (linia 4): Iat un fiier HTML cu un CSS extern:
<html> <head> <title> Primul meu stil de pagina </title> <link rel="stylesheet" href="StilulMeu.css"> </head> <body>  <ul class="navbar"> <li><a href="index.html">Home page</a> <li><a href="musings.html">Musings</a> <li><a href="town.html">My town</a> <li><a href="links.html">Links</a> </ul>  <h1> Primul meu stil de pagina </h1> <p> Bine ati venit pe pagina mea! <p>Lipsesc imaginile, dar in sfrit am un stil de pagina. Si am i link-uri, chiar daca nu duc nicaieri deocamdata; <p>Aici trebuie sa existe mai multe lucruri, dar deocamdata nu prea stiu ce.  <address> 25 Aprilie 2009<br> Realizat de mine.</address> </body> </html>
Salveaz fiierul cu numele PrimaPagina7.html i vizualizeaz-l n Browserul de Internet. Aceasta va spune browser-ului c pagina de stil, se gsete n fiierul numit "StilulMeu.css" i deoarece nu este menionat directorul, browser-ul va cuta n acelai director unde a gsit de fiierul HTML. Dac salvai fiierul HTML i-l rencrcai n browser, nu ar trebui s vedei nici o schimbare: pagina este n acelai stil, dar acum, stilul provine dintr-un fiier extern.
19
Step 8: Crearea fiierelor separate de legatur
<html> <head> <title> Orasul Meu</title> <link rel="stylesheet" href="StilulMeu.css"> </head> <body>  <ul class="navbar"> <li><a href="PrimulMeuSite.html">Home page</a> <li><a href="Pasiuni.html">Pasiuni</a> <li><a href="OrasulMeu.html">Orasul meu</a> <li><a href="Orar.html">Orar</a> <li><a href="CV.pdf">Curriculum Vitae</a> <li><a href="http://isb.pub.ro/">Links</a> </ul>
20
 <h1>Acesta este orasul meu</h1> <p>Bine ati venit in Orasul Meu! <div class="figure1"> <p><img class="scaled" src="st-tropez.jpg" alt="St. Tropez"> <p>Saint Tropez and its fort in the evening sun<p/> <a href="http://www.ot-saint-tropez.com/">Apaa aici</a> </div> </body> </html>
Salveaz fiierul cu numele OrasulMeu.html i vizualizeaz-l n Browserul de Internet.
<html> <head> <title> Pasiuni</title> <link rel="stylesheet" href="StilulMeu.css"> </head> <body>  <ul class="navbar"> <li><a href="PrimulMeuSite.html">Home page</a> <li><a href="Pasiuni.html">Pasiuni</a> <li><a href="OrasulMeu.html">Orasul meu</a> <li><a href="Orar.html">Orar</a> <li><a href="CV.html">Curriculum Vitae</a> <li><a href="http://isb.pub.ro/">Links</a> </ul> <div class="figure"> <p><img src="eiffel.jpg" width="116" height="200" alt="Eiffel tower"> <p>Scale model of the Eiffel tower in Parc Mini-France</p> <p><img src="Photo.jpg" width="300" height="200" alt="Photo "> <p>Scale model of the romanian village </p> </div> <div class="banner"> <p> <a href="../../../"><img alt="W3C" src="../../../Icons/w3c_home"></a> <a href="../../../Consortium/Activities">Activities</a> <a href="../../../TR/">Tech. reports</a> <a href="../../../Help/siteindex">Site index</a> <a href="../../../Consortium/Translation/">Translations</a> <a href="../../../Status">Software</a> <a href="http://search.w3.org/">Search</a> <em>Nearby:</em> <a href="../../">Style</a> <a href="../../CSS/">CSS</a>
21
<a href="./">tips & tricks</a> </div> </body> </html>
Salveaz fiierul cu numele Pasiuni.html i vizualizeaz-l n Browserul de Internet.
<html> <head> <title>Orarul meu</title> <link rel="stylesheet" href="StilulMeu.css"> </head> <body>  <ul class="navbar"> <li><a href="PrimulMeuSite.html">Home page</a> <li><a href="Pasiuni.html">Pasiuni</a> <li><a href="OrasulMeu.html">Orasul meu</a> <li><a href="Orar.html">Orar</a> <li><a href="CV.html">Curriculum Vitae</a> <li><a href="http://isb.pub.ro/">Links</a> </ul> <h1> Orar grupa 714 </h1> <p> Acesta este programul meu de scoala! <table <col <col <col <col <col <col width="100%" border="1"> align="center"></col> align="center"></col> align="center"></col> align="center"></col> align="center"></col> align="center"></c>
<thead color="green"> <tr> <th> Ora </th> <th>Luni</th> <th>Marti</th> <th>Miercuri</th> <th>Joi</th> <th>Vineri</th> </tr> </thead> <tbody color="blue" height="50px"> <tr align="center"> <td> 08.00-10.00 </td> <td> </td> <td> Programare </td> <td> T. materialelor curs </td> <td> T.M./Programare </td> <td> Desen tehnic/Programare </td>
22
</tr> <tr align="center"> <td> 10.00-12.00 </td> <td> Desen tehnic</td> <td> Fizica </td> <td> Analiza matematica II curs <td> </td> <td> Mecanica - curs </tdd> </tr> <tr align="center"> <td> 12.00-14.00 </td> <td> Sport</td> <td> </td> <td> Fizica I curs</td> <td> </td> <td> T. P. M. curs </tdd> </tr> <tr align="center"> <td> 14.00-16.00 </td> <td> T.P.M.</td> <td> </td> <td> </td> <td> </td> <td> </tdd> </tr> <tr align="center"> <td> 16.00-18.00 </td> <td> </td> <td>Analiza matematica </td> <td> </td> <td> Engleza </td> <td> </tdd> </tr> <tr align="center"> <td> 18.00-20.00 </td> <td> Mecanica </td> <td> PEDAGOGIE -curs (op) </td> <td> </td> <td> </td> <td> </tdd> </tr> </tbody> <tfoot color="red"> <tr> <td> </td> <td> </td> </tr> </tfoot> </table> </body> </html>
</td>
23
Salveaz fiierul cu numele Orar.html i vizualizeaz-l n Browserul de Internet.
Rezultatul final
Urmtorul pas este de a pune toate fiierele realizate n legatur pe site-ul Web. (Bine, dar este posibil s fie necesar s le schimbai un pic mai nti!!!). Dar cum o vei face, depinde de provider-ul vostru de Internet.
Step 9: Rezultatul Final
<html> <head> <title> Primul meu site WEB </title> <link rel="stylesheet" href="StilulMeu.css"> </head> <body>  <ul class="navbar"> <li><a href="PrimulMeuSite.html">Home page</a> <li><a href="Pasiuni.html">Pasiuni</a> <li><a href="OrasulMeu.html">Orasul meu</a>
24
<li><a href="Orar.html">Orar</a> <li><a href="CV_meu.pdf">Curriculum Vitae</a> <li><a href="http://isb.pub.ro/">Links</a> </ul>  <h1> Primul meu stil de pagina </h1> <p> Bine ati venit pe pagina mea! <p> Nu mai lipsesc imaginile, in sfrit am un stil de pagina. Si am i link-uri; <p>Aici trebuie sa existe mai multe lucruri, dar deocamdata nu prea stiu ce. <P><img SRC="DSCN2824.jpg" WIDTH="300" HEIGHT="254"> </p>  <address> 25 Aprilie 2009<br> <font color="WHITE"><marquee direction="left" style="background:purple">Realizat de Andreea Cristea</marquee></font> </address> <form method="get" action="mailto:adresa_mea@yahoo.com" > <p>Nume</p> <input type="text" name="autor" size="24" class="form" id="input1" /> <p>URL</p> <input type="text" name="url_autor" value="http://" size="24" class="form" id="input2" /> <p>Adresa de mail</p> <input type="text" name="email_autor" size="24" class="form" id="input3" /> <p>Comentariu</p> <textarea name="comentariu" rows="4" cols="40" class="form" id="input4"></textarea> <input type="hidden" name="id_site" value="646" /> <input type="submit" value="Trimite email " /> </form> </body> </html>
Salveaz fiierul cu numele PrimulMeuSite.html i vizualizeaz n Browser-ul de Internet.
Lecturi viitoare
Pentru introducerea n formatul CSS, vezi chapter 2 din Lie & Bos, sau Dave Raggett's intro to CSS. Alte informaii, incluznd mai multe tutoriale, se gsesc pe pagina learning CSS . 25

Limbă

Bine ați venit la Scribd!

Tutorial CSS

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Descriere:

Drepturi de autor:

Formate disponibile

Tutorial CSS

Încărcat de

Descriere:

Drepturi de autor:

Formate disponibile

Titluri conexe

Tutorial CSS ncepnd cu HTML + CSS

Step 1: Scrierea unui document HTML

Deschide Notepad++ i copiaz urmtorul cod:

Salveaz fiierul cu numele PaginaMea.html i vizualizeaz-l n Browserul de Internet.

Step 1. Deschide Notepad++ i copiaz urmtorul cod:

Dup cum se poate vedea, pagina nu este chiar aratoas

Step 2: Adugarea culorilor

Step 2. Deschide Notepad++ i copiaz urmtorul cod:

Step 3: Adugarea fonturilor

Step 3. Deschide Notepad++ i copiaz urmtorul cod::

Acum, textul principal are un alt font fa de rubrica H1.

Step 4: Adugarea unui meniu de navigare

Step 4. Deschide Notepad++ i copiaz urmtorul cod:

Step 5: Stiluri de linkuri

Step 5. Deschide Notepad++ i copiaz urmtorul cod:

Salveaz fiierul cu numele PrimaPagina5.html i vizualizeaz-l n Browserul de Internet.

Step 6: Adugarea unei linii orizontale

Step 6. Deschide Notepad++ i copiaz urmtorul cod:

Step 7: Salvarea stilului paginii ntr-un fiier separat

Step 7. Deschide Notepad++ i copiaz urmtorul cod:

Salveaz fiierul cu numele StilulMeu.css.

Deschide Notepad++ i copiaz urmtorul cod:

Step 8: Crearea fiierelor separate de legatur

Step 8. Deschide Notepad++ i copiaz urmtorul cod:

Salveaz fiierul cu numele OrasulMeu.html i vizualizeaz-l n Browserul de Internet.

Deschide Notepad++ i copiaz urmtorul cod:

<a href="./">tips&nbsp;&amp;&nbsp;tricks</a> </div> </body> </html>

Salveaz fiierul cu numele Pasiuni.html i vizualizeaz-l n Browserul de Internet.

Deschide Notepad++ i copiaz urmtorul cod:

Salveaz fiierul cu numele Orar.html i vizualizeaz-l n Browserul de Internet.

Step 9: Rezultatul Final

Step 9. Deschide Notepad++ i copiaz urmtorul cod:

Salveaz fiierul cu numele PrimulMeuSite.html i vizualizeaz n Browser-ul de Internet.

Mai multe de la Andronic Rosu

Titluri conexe

Evaluare

Partajare

<a href="./">tips & tricks</a> </div> </body> </html>