Gorila Agencija Web dizajn | Internet marketing | SEO

Sedam CSS Savjeti o izgledu

By: Sandesh
Najteže u CSS da biste dobili pravo se izgled Vaše web lokacije. Evo nekoliko savjeta koje se bave upravo s tim. Neke od ovih savjeta nisu baš nove, ili raketna znanost, ali nadamo se da će nekome spasiti malo smetaju negdje!

Savjet 1: Clear iz zadane postavke padding i margina prije početka rada.

Različiti preglednici imaju različite zadane margine i padding veličinama, tako da želite početi s čistim škriljevca, da tako kažemo. Koristite ovu naredbu:

*

(

margin: 0;

padding: 0;

border: 0;

)

da biste izbrisali sve zadane margine i padding postavljanje. Također imajte na umu granice, koja je postavljena na 0. Imajte na umu da ako to učinite, od vas će također dobiti osloboditi dana pesky ljubičaste granice okrugli click-moći slike, iako neki ljudi tvrde da je ljubičasta granicu je nužno za dostupnost i upotrebljivost. Ali puno ljudi ne sviđa ljubičasta granice okrugli slike, a ovo je jedan od načina da možete dobiti osloboditi od njega u jednom naletu bez potrebe za postavljanje img border = 0 za svaku sliku (koja je protiv strogih pravila za označavanje u bilo slučaj).

Savjet 2: Kako bi vaš izgled centra, koristite div kontejner da sadrži sve sadržaje

Proglasiti kako slijedi:

# Kontejner

(
margin: 0 auto;
širina: xxxpx;
)

Postoji nekoliko bodova ovdje uzeti na znanje. NE izjavljujem širina biti 100%. Ovaj poraz cijelog objekta jer ćete jednostavno morati proglasiti sub elementi unutar kontejnera, a zatim ih koriste centra margin: 0 auto. Ovo je vrlo loše jer to znači da umjesto Ocenjujuchi središnje izgleda jednom, morat ćete se jave na više mjesta za svaki element unutar kontejnera.

Savjet 3: Rad od vrha prema dolje

Doslovno počnete raditi na vašem CSS raspored počevši od vrha najviše elemente u dizajnu, te 'top' elemente u HTML-u, kao što je tijelo, kao i svoj glavni kontejnera.

Objavite svoje CSS naredbi na najvišoj razini moguće i pokušati proglasiti nešto što samo jednom i to neka kaskada kroz sve. Samo nadjačati naredbe na nižoj razini kada se strogo potrebno. To sprječava govorljiv CSS datoteku koja je teško održavati i razumjeti. Na primjer, ako imate (margin: 0 auto) postavke na svakom sub div unutar vaše kontejner - vi ste u nevolji.

Savjet 4: Dokument što radite i koristiti svitac i Krijesnica preglednik to debug

Niste vaše pisanje CSS koda samo za sebe, neki dan neke siromašne travnjak morat će se ispraviti greške. Provjerite brojne komentare unutar vašeg CSS datoteku da objasni zašto radite stvari koje na specifičan način.

Neuklapanje u sa ovaj, možete pronaći sebe ima popraviti tuđi CSS češće nego što mislite (ili čak i svoj vlastiti, za taj tvar). Koristite Firebug dodatak za Firefox za ispravljanje svoj CSS. To je život skrbitelj s obzirom na dajući vam uvid u točno gdje svoj dizajn može biti slomljen i zašto.

Jedini problem s ovim je da bi mogli raditi svoj dizajn savršeno u Firefox, ali ne iu IE5, IE6 ili IE7. To nas dovodi do slijedećeg savjet.

Savjet 5: Odlučite koju preglednicima ćete izgraditi za CSS i test iz početka

Neki čistunaca inzistirati na stvaranje siguran da vaše web stranice rade za sve moguće preglednike, drugi samo izraditi Internet funkcionirati za 'velike' preglednicima. Kako ćete znati točno što preglednici se koriste najviše? Još jednom W3 Schools doći u pomoć.

Na sljedećoj stranici, možete vidjeti koje preglednici su najpopularnije: http://www.w3schools.com/browsers/browsers_stats.asp. S ove stranice možete vidjeti da nešto poput IE5 se koristi samo oko 1,1% od preglednicima. To je do vas da li vi uzeti u obzir da isplati graditi svoj CSS da bude kompatibilan s ovim preglednik, ili da li ste samo ide na testiranje kompatibilnosti sa IE6, IE7 i Firefox, na primjer. Što god radite, kada početi graditi svoj CSS, krenuti od vrha, i testirati svaki postavke u svakoj od preglednicima kao što ide zajedno. Ne postoji ništa gore od izgradnju savršenog web stranice u Firefoxu, a zatim pronalaženje pravo nakon te imati kodirane 1000 linija css datoteku koja je slomljena u IE6. Da bi onda debug i popraviti svoj kod nakon činjenica je noćna mora.

Savjet 6: Ovdje je neugodno mali savjet za popravljajući tvoj CSS u IE6 ili IE7

Recimo da vaš dizajn radi savršeno u Firefox, ali je slomljen u IE6. Ne možete koristiti svitac utvrditi gdje je problem i može biti jer to radi u Firefoxu. Nemate luksuz korištenja svitac u IE6, pa kako da li vi ispravljanje IE6 ili IE7 stilova? Ja često naći da to pomaže da dodate (border: 1 px solid red) ili (border: 1 px solid purple) na problematične elemente. Na ovaj način često mogu vidjeti zašto neki elementi ne uklapaju u prostor. To je posramljujući mali savjet, budući da je tako primitivno i jednostavno, ali to radi!

Savjet 7: Razumjeti pluta

Plutajući elemenata je bitno za razumjeti, posebno u kontekstu dobivanja vašeg doplutao elemente za rad u različitim preglednicima!

Uglavnom elemente kao što su divs je doplutao do lijeve ili desne (nikad na vrh ili dno, samo bočno). Evo nekoliko stvari koje treba uzeti u obzir s lebdio elementima. Svaki element mora imati lebdio eksplicitno navedeno širine. Ako koriste doplutao divs stvoriti tri stupca ili dva stupca, a širine odrediti u smislu postotaka, a ne fiksne širine, a ako ne koristi postotke, uvjerite se da postoci ne dodati do 100 %, to često će izazvati pravu najviše stupac pasti ispod ostalo, jasno pokazuje da se pokušavate uklopiti nešto na raspolaganju prostor koji je preširok za to. Umjesto uporabe postotaka koji dodati do malo ispod 100%, kao što su 25%, 49%, 24% za lijevog stupca, srednji stupac i desnom stupcu.

Plutajući elementi mogu biti vrlo složen da razumiju i to je vrijedno provesti neko vrijeme na dobar web stranice koje pružaju određene smjernice i savjete, kao što su pozicija Is Everything web stranicu.

Zaključak

Ovi savjeti za CSS layout nadamo trebao uštedjeti malo vremena i truda prilikom sljedećeg morati pobijediti panel-stol-manje dizajna na predaju!

© 2009, admin . Copyright 2009. Sva prava pridržana.

Spasiti