Një Përmbledhje e Fletëve të Cascading Style me Sheet Style Style
Kur ndërtoni një faqe interneti nga e para, është e mençur të filloni me stilet themelore të përcaktuara. Është si duke filluar me një kanavacë të pastër dhe furça të freskëta. Një nga problemet e para që përballen web designer është se shfletuesit e internetit janë të gjitha të ndryshme. Madhësia e parazgjedhur e shkrimit është e ndryshme nga platforma në platformë, familja e parazgjedhur e shkronjave është e ndryshme, disa shfletues përcaktojnë kufijtë dhe mbushje në etiketën e trupit ndërsa të tjerët nuk e bëjnë kështu. Merrni rreth këtyre mospërputhjeve duke përcaktuar stilet e paracaktuara për faqet tuaja të uebit.
CSS dhe grupi i karaktereve
Së pari gjërat e para, vendosni grupin e karaktereve të dokumenteve tuaja CSS tek utf-8 . Ndërsa ka të ngjarë që shumica e faqeve që dizajnoni janë të shkruara në anglisht, disa mund të lokalizohen - të përshtatura për kontekste të ndryshme gjuhësore dhe kulturore. Kur ata janë, utf-8 thjeshton procesin. Vendosja e grupit të karaktereve në fletën e stilit të jashtëm nuk do të ketë përparësi mbi një header HTTP , por në të gjitha situatat e tjera, do të ndodhë.
Është e lehtë për të vendosur grupin e karaktereve. Për rreshtin e parë të dokumentit CSS shkruani:
@charset "utf-8";Në këtë mënyrë, nëse përdorni karaktere ndërkombëtare në pronësinë e përmbajtjes ose si emra të klasës dhe ID, fleta e stilit do të vazhdojë të funksionojë si duhet.
Dizajnimi i Trupit të faqes
Gjë tjetër që nevojat për një stil stil të parazgjedhur janë stilet për të zero nga margjinat, mbushjet dhe kufijtë. Kjo siguron që të gjithë shfletuesit të vendosin përmbajtjen në të njëjtin vend dhe nuk ka hapësira të fshehura midis shfletuesit dhe përmbajtjes. Për shumicën e faqeve web, kjo është shumë afër buzë për tekstin, por është e rëndësishme që të filloni atje në mënyrë që imazhet e sfondit dhe ndarjet e faqeve të rreshtohen në mënyrë të saktë.
html, trupi {margin: 0px; mbushje: 0px; kufiri: 0px; }Vendosni skedarin e parazgjedhur të parazgjedhur ose ngjyrën e shkrimit në të zezë dhe ngjyrën e sfondit të parazgjedhur në të bardhë Ndërsa kjo ka shumë të ngjarë të ndryshojë për shumicën e faqeve të faqeve web, pasi këto ngjyra standarde të vendosura në trup dhe etiketa HTML fillimisht e bëjnë faqen më të lehtë të lexohen dhe të punojnë me të.
html, trupi (ngjyra: # 000; sfond: #fff; }Default Font Styles
Madhësia e shkronjave dhe familja e shkronjave janë diçka që do të ndryshojë në mënyrë të pashmangshme sapo dizajni të mbajë, por të fillojë me madhësinë e parazgjedhur të shkronjave 1 em dhe një familje të parazgjedhur të fontit të Arial, Gjenevë ose disa font të tjerë sans-serif. Përdorimi i ems mban faqe si të arritshme të jetë e mundur, dhe një font sans-serif është më e lexueshme në ekran.
html, trupi, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; }Mund të ketë vende të tjera ku mund të gjeni tekst, por p , th , td , li , dd dhe dt janë një fillim i mirë për përcaktimin e shkronjave bazë. Përfshini HTML dhe trupin vetëm në rast, por shumë shfletues mbizotërojnë zgjedhjet e shkrimit nëse përcaktoni vetëm fontet tuaj për HTML ose trup.
titujt
Titujt HTML janë të rëndësishme për t'u përdorur për të ndihmuar në hartimin e faqes tuaj dhe për të lejuar që motorët e kërkimit të hyjnë më thellë në faqen tuaj. Pa stil, ato janë të gjitha mjaft të shëmtuara, kështu që vendosni stilet e parazgjedhur në të gjitha ato dhe përcaktoni familjen e shkronjave dhe madhësitë e shkronjave për secilën.
h1, h2, h3, h4, h5, h6 {font-familja: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; }Mos harroni lidhjet
Dizajni i ngjyrave të lidhjes është pothuajse gjithmonë një pjesë kritike e dizajnit, por nëse nuk i definoni ato në stilet e paracaktuar, shanset janë që ju të harroni të paktën një nga pseudo-klasat. Përcaktoni ato me një ndryshim të vogël në ngjyrë blu dhe pastaj ndryshoni ato sapo të keni gamën e ngjyrave për vendin e përcaktuar.
Për të vendosur lidhjet në hije të ngjyrës blu, vendosni:
- lidhjet si blu
- vizitoi lidhjet si blu të errët
- hover lidhjet si blu të lehta
- lidhje aktive si blu edhe më të zbehtë
siç tregohet në këtë shembull:
a: lidhje {color: # 00f; } a: vizito {color: # 009; } a: hover {color: # 06f; } a: aktiv {color: # 0cf; } Duke formuar lidhjet me një skemë të ngjyrave mjaft të parrezikshme siguron që unë nuk do të harroj asnjë nga klasat, dhe gjithashtu i bëj ato pak më pak zhurmë sesa parazgjedhja blu, e kuqe dhe e purpurt.Full Style Sheet
Këtu është fleta e plotë e stilit:
@charset "utf-8"; html, trupi {margin: 0px; mbushje: 0px; kufiri: 0px; ngjyra: # 000; sfond: #fff; } html, trupi, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 {font-familja: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; } a: link {ngjyra: # 00f; } a: vizito {color: # 009; } a: hover {color: # 06f; } a: aktiv {color: # 0cf; }