Tutorial CSS

Pentru a nu creea un tutorial greu pentru voi, voi comprima informatiile de baza (ceea ce puteti face in CSS pentru toate versiunile disponibile pe forumgratuit.ro) in acest topic.


Pentru a va personaliza forumul folosind css accesati:

panoul Administratorului => Afisare => Imagini si culori => Culori => Foaie de stil CSS => Vedeti CSS-ul de baza al forumului dvs.

Copiati tot textul aparut in noua pagina si lipiti-l in pagina Foaie de stil CSS, in chenarul numit CSS.

Am sa adaug la culoare " #xxxxxx " - aici trebuie sa modificati dvs. culoarea
Pentru transparenta adaugati in locul codului de culoare cuvantul transparent


Ceea ce puteti voi modifica in css sunt urmatoarele lucruri:
* background-color: #xxxxxx; => Culoarea de fundal pentru regiunea numita (de obicei) cu 1-2 randuri mai sus fata de acest cod

* background-image: url("Link imagine"); => Imaginea de fundal pentru regiunea numita )de obicei) cu 2-3 randuri mai sus fata de acest cod

* background-attachment: ;
Ceea ce este cu rosu trebuie inlocuit cu una din cele 2 valori enumerate mai jos:
- scroll => imaginea de fundal se repeta
- fixed => imaginea de fundal ramane fixa, nu va mai aparea efectul de imagine asezata sub alta imagine

* border: XXX; => Culoarea bordurii care imprejmuieste o anumita regiune, numita (de obicei) cu 2-3 randuri mai sus fata de acest cod. Ceea ce este cu rosu trebuie inlocuit cu una din cele 3 valori enumerate mai jos:
- none => nu se afiseaza nici o bordura
- #xxxxxx => setati o culoare pentru bordura
- solid #xxxxxx Xpx; => daca doriti sa-i dati o anumita grosime bordurii. Setati culoarea si grosimea in pixels

* color : #xxxxxx; => culoare pentru text (text de completare, text in mesaj, text-link, etc.)

* text-decoration: XXX; => daca doriti ca un anumit text, dintr-o anumita regiune sa aiba un anumit efect. Ceea ce este cu rosu trebuie inlocuit cu una din cele 5 valori enumerate mai jos:
- none - textul nu are nici un efect
- underline - textul este subliniat cu bara continua
- overline - deasupra textului apare o bara continua
- line-through - textul este taiat la mijloc de o bara continua
- blink - textul clipeste

* font-size: Xpx; => Marimea unui anumit text, dintr-o anumita regiune numita (de obicei) cu 2 randuri mai sus fata de acest cod

* font-family: XX,YY,ZZ ; => Font-urile folosite intr-o anumita regiune numita (de obicei) cu 4-5 randuri mai sus fata de acest cod. Fonturile trebuie despartite prin virgula ( , ) far fara spatii intre carctere

* text-transform: XXX; => Ceea ce este cu rosu trebuie inlocuit cu una din cele 4 valori enumerate mai jos:
- none => textul este afisat normal
- capitalize => fiecare cuvant al textului incepe cu majusula
- uppercase => toate cuvintele vor fi scrise cu majuscule
- lowercase => nu se afiseaza majuscule

* cursor: XXX; => Ceea ce este cu rosu trebuie inlocuit cu una din cele 17 valori enumerate mai jos:
- url => adresa unui cursor personalizat de pe un anumit site: url("Link cursor");
- default => cursor implicit. De multe ori o sageata
- auto => cursor implicit. Browserul stabileste cursorul
- crosshair => cursorul apare ca o tinta de arma
- pointer => langa cursor va aparea un poinet (un dreptunchi care indica o legatura)
- move => cursorul indica ceva care ar trebuii miscat
- e-resize => cursorul indica faptul ca o margine poate fi mutata spre dreapta
- ne-resize => cursorul indica faptul ca o margine poate fi mutata spre dreapta si in sus
- nw-resize => cursorul indica faptul ca o margine poate fi mutata spre stanga si in sus
- n-resize => cursorul indica faptul ca o margine poate fi mutata in sus
- se-resize => cursorul indica faptul ca o margine poate fi mutata spre dreapta si in jos
- sw-resize => cursorul indica faptul ca o margine poate fi mutata spre stanga si in jos
- s-resize => cursorul indica faptul ca o margine poate fi mutata in jos
- w-resize => cursorul indica faptul ca o margine poate fi mutata spre stanga
- text => cursorul indica text
- wait => cursorul indica ca programul este ocupat (de multe ori un ceas cau o clepsidra)
- help => cursorul indica un ajutor

* text-align: XXX; => Pozitionare text. Ceea ce este cu rosu trebuie inlocuit cu una din cele 4 valori enumerate mai jos:
- left - text alineat la stanga, face actiunea butonului
- right - text alineat la dreapta, face actiunea butonului
- center - text pozitionat central, face actiunea butonului
- justifye - textul este incadrat din marginea stanga pana in marginea dreapta, face actiunea butonului



Acestea ar fi codurile de baza care se repeta "la infinit" ...
Momentan ma limitez aici, celelalte comenzi ridica un nivel mai crescut pentru web-designer

Reproducerea acestui tutorial nu este posibila fara acordul nostru, in conformitate cu articolul L122-1 apartinand ICC.