1920
|
1.jpg |
Inainte sa incepem sa adaugam file CSS,sa aruncam un ochi si sa vedem cu arata siteul nostu in browser:
|
2.jpg |
Bun,acum sa incepem...
1. Pentru a crea un file CSS extern,selectionam CSSDesigner,apoi la Origini,apasam semnul "+" si apoi selectam Crea un nuovo file CSS:
|
3.jpg |
2. In urmatoare fereastra Crea un nuovo file Css,la File/Url:scriem numele stile,la Agg.come:lasam selectionat Collegamento si apoi dam OK:
|
4.jpg |
3. In acest punct,la Origini,trebuie sa avem selectat stile.css,cel creat anterior,apoi mergem la Selettori,unde apasam semnul"+",si incepem sa adaugam regulile CSS:
|
5.jpg |
4. Dupa ce am apasat "+" , scriem body,de aici incepem sa adaugam regulile CSS:
|
6.jpg |
La body,vom schimba doar culoarea la background...Cu body selectat in Selettori,mergem la Proprieta,iar la categoria Sfondo,schimbam background-color:
|
7.jpg |
O sa o schimbam intr-un gri si va arata asa:
|
8.jpg |
5. In Selettori din nou apasam "+",si creem o noua regula:h1,h2,h3,h4,h5,h6,p,ol,ul,li.Aceasta e regula de reset.La aceasta regula ,mergem la Proprieta si la margin selectam 0 px in toate directiile:
|
9.jpg |
6. Mai departe in Selettori,facem o noua regula,pentru #wrapper,se scrie cu semnul"#"in fata ptr.ca este un "div id".Acestuia ii setam o latime(width):900px,margin:auto (left,right) si background-color:un gri mai deschis decat body.Rezultatul va fii acesta:
|
10.jpg |
7. Urmatoarea regula pe care o adaugam in Selettori ,este pentru header.In Proprieta,acestuia ii dam o inaltime(height):150px; si o latime(width):100%.Latime o setam 100% deoarece va avea latime de la #wrapper ,de 900 px.
|
11.jpg |
Putem adauga si o imagine in header la aceste dimensiuni.La Proprieta,in background-image,selectam urlsi punem poza pe care o dorim:
|
12.jpg |
8. Mai facem o regula si la article.La acesta ii dam un padding:10px(top-sus)si ii schimbam culoarea la text:
|
13.jpg |
9. Acum facem si la footer.Acestuia ii dam un padding:10px(top-bottom,sus-jos),text-allign:center si background-color:
|
14.jpg |
In acest punct ,selectam File,dam Salva tutto si apoi F12,pentru a vedea cum arata acum siteul nostru in browser:
|
15.jpg |
Asa arata acum siteul nostru dupa ce am aplicat regulile CSS.A fost un simplu exemplu ptr a arata cum se adauga un file CSS extern...Spor !!!
