20 Koristni nasveti za začetnike

V starih časih smo veliko odvisni od razvijalcev in programerjev, ki pomagajo posodobiti spletno stran, tudi če je le manjša. Zahvaljujoč CSS-ju in njegovi prilagodljivosti se lahko slogi ločijo od kod. Zdaj, z nekaj osnovnega razumevanja CSS, lahko tudi novinec zlahka spremeni slog spletne strani.

Ali ste zainteresirani za pobiranje CSS-ja, da ustvarite lastno spletno stran, ali samo, da popravite videz vašega spletnega dnevnika in se počutite malo - vedno je dobro, da začnete z osnovami, da pridobite močnejše temelje. Poglejmo nekaj Nasveti za CSS za katere smo mislili, da bi bilo koristno začetnike. Popoln seznam po skoku.

1. Uporaba reset.css

   Ko gre za upodabljanje slogov CSS, imajo brskalniki, kot sta Firefox in Internet Explorer, različne načine ravnanja z njimi. reset.css ponastavi vse temeljne sloge, tako da začnete z resnično praznimi novimi slogovnimi slogovi.

   Tukaj je nekaj pogosto uporabljenih reset.css okviri - Yahoo Reset CSS, CSS Reseta Erica Meyerja, Tripoli

2. Uporabite kratico CSS

   Kratica CSS vam omogoča krajši način pisanja kod CSS, najpomembnejše pa je, da kodo postane jasnejša in lažje razumljiva.

   Namesto ustvarjanja CSS kot je ta

   .header ozadje-barva: #fff; ozadje-slika: url (image.gif); ponovitev v ozadju: brez ponovitve; položaj ozadja: zgoraj levo; 

   Lahko ga predstavimo v naslednjih primerih:

   .glava ozadje: #fff url (slika.gif) no-repeat gornja leva

   Več - Uvod v kratico CSS, Uporabne kratice CSS

3. Razumevanje Razred in ID

   Ta dva selektorja pogosto zmedeta začetnike. V CSS, razred je predstavljena s piko "." medtem id je zgoščeno "#" id se uporablja za slog, ki je edinstven in se ne ponavlja, razred na drugi strani pa se lahko ponovno uporabi.

   Več - Razred v primerjavi z ID-jem Kdaj uporabiti razred, ID | Uporaba razreda in ID skupaj

4. Moč

5. a.k.a seznam povezav, je zelo uporaben, kadar se pravilno uporabljajo
   ali
   , zlasti za oblikovanje navigacijskega menija.

   • Pozabi , poskusite

     Ena od največjih prednosti CSS je uporaba

     doseči popolno fleksibilnost glede oblikovanja.

     so podobne

     , kjer so vsebine "zaklenjene" znotraj. \ t

     celico. Večinoma je varno reči postavitve so dosegljive z uporabo in pravilen styling, morda morda razen masivnih tabelnih vsebin. Več - Mize so mrtve, Tabele Vs. CSS, CSS vs tabele Orodja za razhroščevanje CSS Vedno je dobro, da dobite takojšnji predogled postavitve med prilagajanjem CSS-a, pomaga bolje razumeti in razhroščiti CSS-sloge. Tukaj je nekaj brezplačnih orodij za razhroščevanje CSS, ki jih lahko namestite v brskalnik: FireFox Web Developer, DOM Inspector, orodna vrstica za razvijalce Internet Explorerja in Firebug. Izogibajte se odvečnih selektorjev Včasih je lahko vaša deklaracija CSS enostavnejša, kar pomeni, da ste kodirali naslednje: ul li … ol li … tabela tr td … Lahko se skrajšajo na samo li … td … Pojasnilo: bo obstajala samo znotraj ali in in bo samo notri zato jih res ni treba ponovno vstavljati. Poznavanje !pomembno Vsak slog, označen z !pomembno bo uporabljen ne glede na to, ali je pod njim pravilo prepisovanja. .stran barva ozadja: modra! pomembna; barva ozadja: rdeča; V zgornjem primeru, barva ozadja: modra bo prilagojena, ker je označena z !pomembno, tudi ko je barva ozadja: rdeča; pod njo. !pomembno se uporablja v okoliščinah, ko želite prisiliti slog, ne da bi ga nekaj prepisali, vendar morda ne bo deloval v Internet Explorerju. Zamenjaj besedilo s sliko To je običajno zamenjava naslov iz naslova, ki temelji na besedilu, na sliko. Evo, kako to storite. h1 besedilna-alineja: -9999px; ozadje: url ("title.jpg") brez ponavljanja; širina: 100px; višina: 50px; Pojasnilo: text-indent: -9999px; vrže vaš naslov besedila izklop zaslona, ​​ki ga nadomesti slika, ki jo je prijavil ozadje: … s fiksno premer in višine. Razumevanje položaja CSS V naslednjem članku je jasno razumevanje uporabe CSS pozicioniranja - položaj: … Več - Izvedite CSS pozicioniranje v desetih korakih CSS @import vs Obstajata dva načina za klicanje zunanje datoteke CSS - oziroma z uporabo @import in . Če niste prepričani, katero metodo boste uporabili, je tukaj nekaj člankov, ki vam bodo pomagali pri odločanju. Več - Razlika med @importom in povezavo Oblikovanje obrazcev v CSS Spletne obrazce lahko preprosto oblikujete in prilagodite s CSS. Ti členi vam prikazujejo, kako: Več - Oblika brez tabele, Obrazec Garden, Styling še več oblik nadzora Dobiti navdih Če iščete dobro oblikovano spletno stran, ki temelji na CSS, za navdih, ali pa preprosto brskate, da bi našli nekaj dobrega uporabniškega vmesnika, tukaj je nekaj strani z razstavo CSS, ki jo priporočamo: Remix CSS CSS Beauty CSS Elite CSS Mania CSS Leak Ohranite CSS kode Če so vaše kode CSS grdo, boste na koncu kodirali v zmedo in boste težko prebrali prejšnjo kodo. Za začetek lahko ustvarite ustrezno vdolbino, pravilno jih komentirate. Več - 12 Načela za ohranjanje kode, Oblikuj kode CSS na spletu Merjenje tipografije: px vs em Imate težave pri izbiri, kdaj uporabiti merilno enoto px ali em? Naslednji članki vam bodo omogočili boljše razumevanje tipografskih enot. Tabela združljivosti brskalnikov CSS Vsi vemo, da ima vsak brskalnik različne načine upodabljanja slogov CSS. Dobro je imeti referenco, grafikon ali seznam, ki prikazuje celotno združljivost CSS za vsak brskalnik. Tabela podpore za CSS: # 1, # 2, # 3, # 4. Oblikovanje večkolonc v CSS Imate težave s pravilno postavitvijo levega, srednjega in desnega stolpca? Tukaj je nekaj člankov, ki bi lahko pomagali: V iskanju svetega grala Faux Columns Glavni razlogi, zaradi katerih so vaši stolpci CSS zamočeni Litte škatle (primeri) Večplastne postavitve se vzpenjajo iz škatle Absolutni stolpci Pridobite brezplačne urejevalnike CSS Namenski urejevalniki so vedno boljši od beležnice. Nekaj ​​priporočamo: Več - Preprost CSS, Beležnica ++, Urejevalnik sloga CSS Razumevanje vrst medijev Ko deklarirate CSS, obstaja nekaj vrst medijev . Tiskanje, projekcija in zaslon so nekaj pogosto uporabljenih tipov. Razumevanje in uporaba na pravilen način omogoča boljšo dostopnost uporabnikom. V naslednjem članku je pojasnjeno, kako ravnati z vrstami CSS medijev. Več - CSS in mediji, Vrste medijev W3, Vrste medijev CSS, Vrste medijev CSS2 20 Uporabne aplikacije iPhone za razvijalce in oblikovalce 20 Uporabna orodja SVG za boljšo grafiko 20 Ultra lahka in elegantna pisava za spletne oblikovalce Naslednji članek 20 Uporabni dodatki Firefox Sidebar Prejšnji članek 20 Koristne aplikacije za največjo možno uporabo Instagrama