20 korisnih CSS savjeta za početnike

U starim vremenima, mnogo ovisimo o programerima i programerima koji će vam pomoći ažurirati web-lokaciju, čak i kada je samo mala. Zahvaljujući CSS-u i njegovoj fleksibilnosti, stilovi se mogu izdvojiti odvojeno od kodova. Sada, uz osnovno razumijevanje CSS-a, čak i početnik može lako promijeniti stil web-mjesta.

Bilo da ste zainteresirani za podizanje CSS-a kako biste stvorili vlastitu web-lokaciju, ili samo da biste podesili izgled i osjećaj vašeg bloga - uvijek je dobro početi s osnovama kako biste dobili jači temelj. Pogledajmo neke CSS savjeti za koje smo mislili da bi moglo biti korisno početnici. Cijeli popis nakon skoka.

1. Koristiti reset.css

   Kada je riječ o prikazivanju CSS stilova, preglednici poput Firefoxa i Internet Explorera imaju različite načine rukovanja njima. reset.css resetira sve temeljne stilove, tako da započinje s pravim praznim novim stilskim listovima.

   Evo nekoliko uobičajenih reset.css okviri - Yahoo Reset CSS, CSS Reseta Erica Meyera, Tripoli

2. Koristite kratki CSS

   Kratki CSS vam daje kraći način pisanja CSS kodova, a najvažnije od svega - čini kod jasnijim i lakšim za razumijevanje.

   Umjesto stvaranja CSS-a kao što je ovaj

   .header pozadinska boja: #fff; background-image: url (slika.gif); pozadina-ponavljanje: nema ponavljanja; položaj pozadine: gore lijevo; 

   Može se kratko prenijeti na sljedeće:

   .header pozadina: #fff url (slika.gif) nema ponavljanja gore lijevo

   Više - Uvod u CSS skraćenicu, Korisna CSS skraćena svojstva

3. Razumijevanje klasa i iskaznica

   Ova dva selektora često zbunjuju početnike. U CSS-u, klasa predstavlja točku "." dok iskaznica je hash '#' iskaznica koristi se u stilu koji je jedinstven i ne ponavlja se, klasa s druge strane, može biti ponovno korištenje.

   Više - Klasa u odnosu na ID Kada koristiti klasu, ID | Primjena razreda i ID-a zajedno

4. Snaga od

5. a.k.a popis veza, vrlo je koristan kada se ispravno koriste
   ili
   , osobito za oblikovanje navigacijskog izbornika.

   • Zaboraviti , probati

     Jedna od najvećih prednosti CSS-a je upotreba

     postići potpunu fleksibilnost u pogledu stila.

     su slične

     , gdje su sadržaji "zaključani" unutar

     stanica. Sigurno je najviše reći izgledi mogu se postići uporabom i pravilan styling, možda osim masivnog tabularnog sadržaja. Više - Stolovi su mrtvi, Tablice vs. CSS, CSS vs tablice CSS alati za otklanjanje pogrešaka Uvijek je dobro odmah pregledati izgled, a tijekom podešavanja CSS-a bolje razumjeti i ispraviti CSS stilove. Evo nekih besplatnih CSS alata za ispravljanje pogrešaka koje možete instalirati u preglednik: FireFox Web Developer, DOM Inspector, alatna traka za razvojne inženjere programa Internet Explorer i Firebug. Izbjegavajte suvišne selektore Ponekad CSS deklaracija može biti jednostavnija, što znači ako nađete kodiranje sljedećeg: ul li … ol li … tablica tr td … Mogu se skratiti na samo li … td … Obrazloženje: će postojati samo unutar ili i i samo će biti unutra tako da ih stvarno nije potrebno ponovno umetati. poznavanje !važno Bilo koji stil označen s !važno će se koristiti bez obzira na to da li ispod njega postoji pravilo za prepisivanje. .stranica boja pozadine: plava! važna; Pozadina boja: crvena; U gornjem primjeru, pozadine-boja: plava će biti prilagođen jer je označen sa !važno, čak i kad postoji background-color: red; ispod njega. !važno koristi se u situaciji u kojoj želite prisiliti stil bez da ga nešto prepišete, no možda neće raditi u programu Internet Explorer. Zamijenite tekst slikom To se obično zamjenjuje praksom titula od naslova koji se temelji na tekstu do slike. Evo kako to radite. h1 text-indent: -9999px; pozadina: url ("title.jpg") bez ponavljanja; Širina: 100piks; visina: 50 piksela; Obrazloženje: text-alineja: -9999px; baca vaš naslov teksta izvan zaslona, ​​zamijenjen slikom koju je oglasio korisnik pozadina: … s fiksnim širina i visina. Razumijevanje CSS pozicioniranja Sljedeći članak daje vam jasan uvid u korištenje CSS pozicioniranja - položaj: … Više - Saznajte CSS pozicioniranje u deset koraka CSS @uvoz vs Postoje dva načina za pozivanje vanjske CSS datoteke - odnosno pomoću @uvoz i . Ako niste sigurni koju ćete metodu koristiti, evo nekoliko članaka koji će vam pomoći da odlučite. Više - Razlika između @importa i veze Projektiranje obrazaca u CSS-u Web obrasci mogu se jednostavno dizajnirati i prilagoditi pomoću CSS-a. Sljedeći članci pokazuju kako: Više - Oblik bez tablice, Oblik vrta, Stiliziranje još više oblika kontrole Budite inspirirani Ako tražite inspiraciju za lijepo dizajniranu web-lokaciju baziranu na CSS-u, ili jednostavno pregledavate kako biste pronašli neki dobar korisnički interfejs, ovdje su neke od CSS prezentacijskih stranica koje preporučujemo: CSS Remix CSS Beauty CSS Elite CSS Mania CSS curenje Čuvajte CSS kodove Ako su vaši CSS kodovi neuredni, završit ćete u zbunjujućem kodiranju i teško ćete procijeniti prethodni kod. Za početak, možete stvoriti odgovarajuće uvlačenje, ispravno ih komentirati. Više - 12 Načela za čuvanje vašeg koda, Formatirajte CSS kodove na mreži Mjerenje tipografije: px vs em Ako imate problema s odabirom upotrebe mjerne jedinice px ili em? Sljedeći članci mogu vam dati bolje razumijevanje tipografskih jedinica. Tablica kompatibilnosti CSS preglednika Svi znamo da svaki preglednik ima različite načine prikazivanja CSS stilova. Dobro je imati referencu, grafikon ili popis koji prikazuje cjelokupnu CSS kompatibilnost za svaki preglednik. CSS tablica podrške: # 1, # 2, # 3, # 4. Dizajn multicolumns u CSS Imate li problema s ispravnim poravnavanjem lijevog, srednjeg i desnog stupca? Evo nekoliko članaka koji bi mogli pomoći: U potrazi za Svetim Gralom Faux Columns Razlozi zbog kojih su vaši CSS stupci zabrljali Litte kutije (primjeri) Izgledi s više stupaca izlaze iz kutije Apsolutni stupci Nabavite besplatne CSS urednike Namjenski urednici su uvijek bolji od bilježnice. Evo nekoliko preporuka: Više - Jednostavan CSS, blokčić za bilješke ++, CSS uređivač u stilu Razumijevanje vrsta medija Postoji nekoliko vrsta medija kada prijavljujete CSS . ispis, projekcija i zaslon su neke od najčešće korištenih vrsta. Razumijevanje i korištenje na pravilan način omogućuje bolju pristupačnost korisnika. Sljedeći članak objašnjava kako se nositi s CSS medijima. Više - CSS i vrste medija, Vrste medija W3, Vrste CSS medija, Vrste medija CSS2 20 Korisne iPhone aplikacije za programere i dizajnere 20 Korisni SVG alati za bolju grafiku 20 Ultra lagani i elegantni fontovi za web dizajnere Sljedeći članak 20 Korisni dodaci za Firefox Prethodni članak 20 Korisne aplikacije za dobivanje najviše iz Instagram