Salut! Numele meu este Bogdan si sunt aici din partea ItAssistant.org pentru a va prezenta standardul de editare al paginilor web CSS (prescurtare ce vine de la Cascading Style Sheet).
Din alte tutoriale de pe ItAssistant.org ati putut invata HTML, limbajul ce ne permite crearea paginilor web. Totusi, acesta are unele dazavantaje, printre care: incapabilitatea de a crea o posibilitate de a controla designul si asezarea in pagina si faptul ca daca avem un website si vrem sa schimbam fontul pe toate paginile trebuie sa modificam fiecare pagina in parte. Aceasta problema este rezolvata de CSS prin faptul ca o singura foaie de stil poate fi aplicata mai multor pagini web.
Acum voi trece la lucruri mai concrete si anume la prezentarea sintaxei CSS:
Selector{ proprietate:valoare; proprietate:valoare; }
Un exemplu concret:
h1{color:red}
Selectorul poate fi de mai multe feluri: un obiect, poate fi oricare dintre tag-urile html, un identificator sau o clasa. Despre diferentele dintre ele vom vorbi ceva mai tarziu.
Acum va voi arata cum puteti include stilurile CSS in paginile HTML pentru a avea efect.
Prima dintre modalitati este sa adaugam direct in tag atributul style in interiorul caruia introducem declaratii de forma proprietate:valoare; .
<h1 style=”color:blue;”>
Rezultatul este urmatorul: headerul este colorat cu albastru.
A doua modalitat este sa adaugam in seciunea head a documentului HTML tagul style in care vom introduce cod CSS.
<head> <style> P{text-align:center;} </style> </head>
Rezultatul acestei declaratii este ca toate paragrafele vor fi aliniate central.
Ultima si cea mai utila, intrucat rezolva problema de care v-am vorbit mai devreme, este crearea paginilor de stil externe, pagini ce pot fi aplicare mai multor pagini web. Acest lucru se face foarte simplu: creem un document text pe care il salvam cu extensia .css .
Pentru ca foaia de stil sa aiba efect asupra paginii web, in sectiunea head a documentului HTML trebuie sa introducem:
<head> <link rel=”stylesheet” href=”cale/document.css” type=”text/css”/> </head>
Atributul rel comunica browserului ca aceasta este o foaie de stil, atributul href reprezinta calea catre documentul CSS, iar atributul type comunca browserului ca in documentul acesta va gasi text CSS.
Puteti sa downloadati fisierele folosite in tutorialul video de: AICI.
Acestea sunt elementele de baza ale CSS-ului. Sper ca v-am trezit interesul si va astept cu mai multe tutoriale pe ItAssistant.org!
Tags: css-tutorial-video, introducere-tutorial-video
Interesant, incep sa inteleg si eu, ce e cu CSS!!!
Ma bucur ca ti se pare util tutorialul.In urmatoarele voi arata exact cum se lucreaza cu CSS.
Foarte tare tutorialul. Bravo !
foarte bun tutorialul, abia astept si continuarea…
nu de alta dar lucrez la un site, incerc sa-mi customizez eu cu forte proprii o tema wordpress (fiind novice in domeniu) si prin urmare de vreo 2 saptamani am inceput sa butonez la CSS.
apropo, pot sa va cer sfatul pt anumite chestii punctuale? unde pot sa fac asta, adica sa cer ajutorul?
de ex vreau sa modific spatii pe anumite zone, adica margins, paddings si altele de genul asta.
multam fain
Salut Laur!
Te ajutam cu mare drag , intra pe forum si posteazane intrebarile tale si in cel mai scurt timp vei primi un raspuns.Astfel ii vom ajuta si pe ceilalti sa invete din eventualele probleme.
Urmatorul tutorial va aparea in maxim 2 zile.
Gata. Am inaugurat sectiunea Programare adaugand primul thread acolo
Merci anticipat