Înregistrarea stilurilor CSS pentru fiecare pagină a site-ului este foarte incomodă, consumatoare de timp și pagina va fi deschisă mai încet. Să luăm în considerare modul de transferare a stilurilor CSS într-un fișier separat, care va determina aspectul tuturor paginilor site-ului. De exemplu, luați codul site-ului pe care l-am proiectat în stilurile CSS. Indicați imediat toate stilurile pe care le-am prescris.
/ # Scriere stiluri pentru meniul orizontal # /
# tabs10
lățime: 600px;
>
# tabs10 ul <
marja: 0;
umplutură: 0px 0px 0px;
listă: nu există;
>
# tabs10 li <
afișare: inline;
marja: 0;
umplutura: 0;
> # tabs10 a <
float: stânga;
fundal: url ("tableft10.gif") nu-repeta stânga sus;
marja: 0;
umplutură: 0 0 0 4px;
text-decoration: nici unul;
>
# tabs10 a span <
float: stânga;
afișare: bloc;
fundal: url ("tabright10.gif") nu-repeta dreapta sus;
umplutura: 1px 7px 1px 1px;
culoare: #FFF;
> / * Comentează Backslash Hack ascunde regula de la IE5-Mac \ * /
# tabs10 un interval / * Sfârșit IE5-Mac hack * /
# tabs9 a: deschiderea cursorului <
culoare: #FFF;
>
# tabs10 a: hover <
pozitie fundal: 0% -42px;
>
# tabs10 a: deschiderea cursorului <
pozitie fundal: 100% -42px;
>
# tabs10 #current a <
pozitie fundal: 0% -42px;
>
# tabs10 #current a span <
pozitie fundal: 100% -42px;
>
/ # Aici stilurile pentru coloanele din stânga și din dreapta sunt scrise # /
#navlist <
culoare: alb;
fundal: # 17a;
frontieră de fund: 0.2m solid # 17a;
frontieră-dreapta: 0.2m solid # 17a;
padding: 0 1px;
margin-stânga: 0;
lățime: 12cm;
font: normal 10px Verdana, sans-serif;
>
#navlist li <
listă: nu există;
marja: 0;
dimensiune font: 1em;
>
#navlist a <
afișare: bloc;
text-decoration: nici unul;
marginea inferioară: 0,5;
margin-top: 0,5;
culoare: alb;
fundal: # 39c;
lățimea graniței: 1px;
stilul frontal: solid;
culoarea frontală: # 5bd # 035 # 068 # 6cf;
frontal-stânga: solid 1em # fc0;
umplutură: 0,25 mm 0,5 mm 0,4 mm 0,75;
>
#navlist a <
lățime: 99%; / * este necesar doar pentru Internet Explorer * /
>
#navlist a <
voce-familie: ""> "";
voce-familie: moștenire;
lățime: 9,6; / * Tantek-hack ar trebui folosit numai dacă Internet-Explorer 6 este în modul compatibil cu standardele * /
>
#navcontainer> #navlist a <
lățime: auto; / * este necesar numai dacă utilizați hack-urile de mai sus pentru Internet Explorer * /
>
#navlist a: hover, #navlist un # curent: hover <
fundal: # 28b;
culoarea frontală: # 069 # 6cf # 5bd # fc0;
umplutura: 0,4m 0,35em 0,25em 0,9em;
>
#navlist a: activ, #navratați un # curent: activ <
fundal: # 17a;
culoarea frontală: # 069 # 6cf # 5bd alb;
umplutura: 0,4m 0,35em 0,25em 0,9em;
> ->
/ # Înregistram lista neimprimată și încheiem toate legăturile din această listă în container pentru meniul orizontal # /
/ # Scrie o listă neimprimată pentru meniul din stânga # /
Împărțiți site-ul în cinci blocuri folosind PHP
Împărțim acest cod în patru părți: capacul, meniul din stânga, locul pentru text și meniul din partea dreaptă. Pentru o mai mare claritate, voi evidenția aceste zone în cod. Până când întregul site este creat folosind stiluri CSS, vom lua și vom proiecta doar coloana din dreapta în CSS, iar capacul, meniul din stânga și pagina pentru textul pe care nu o vom atinge și nu lăsăm ca atare. Deci, vedeți diferența
/ # Scrieți o listă neimprimată pentru meniul din dreapta # /
Acum, decupăm întreaga selecție, unde avem toate stilurile. Deschideți și lipiți în notebook ceea ce am copiat (tăiat) și salvați fișierul sub numele: "style.css" Firește, fișierul este salvat în același director în care se află site-ul nostru.
Apoi, în partea de sus a site-ului, în loc să scrie. care face o trimitere la fișierul în care sunt localizate toate stilurile și care este salvat ca "style.css". Pe site, această intrare este deja introdusă și evidențiată.
Încă o dată, rețineți că între brațul "
Pentru unii, stilul -
este un mod complicat
vorbesc despre o simplă,
pentru alții - o cale simplă
vorbesc despre dificil.
"Inpropart"
Trimiteți-le prietenilor: