Lortu gertaerak aholku hauei
Nabigatzaile guztiek "defauly styles" gisa ezagutzen dute. Estiloak HTML elementu itxura eta sentimenduak dictate estilo beste edozein informazio ez egotea. Adibidez, ia nabigatzaile guztietan, hiperesteken itxura lehenetsia azentu azpiko urdin distiratsua da. Horrelako esteken itxura dute beste modu batera esateko esaten ez badituzu.
Nabigatzailearen estilo lehenetsiak lagungarria izan daiteke, baina, kasu askotan, web diseinatzaileek estilo hauek kendu nahi dituzte,% 100 kontrolatzen duten estiloekin fresko dabiltzanean. Honek "maisu-orriko estilo" izenez ezaguna egiten du.
Estilo-orriko maisu batek dokumentu guztietan deitzen duen lehen estilo-orria izan behar du. Mahaigaineko estilo pertsonalizatu bat erabiltzen duzu arakatzailearen web diseinuarekin arazoak sor ditzakeen arakatzailearen ezarpen lehenetsiak garbitzeko. Estiloak estilo-orri nagusirako garbitu ondoren, diseinua nabigatzaile guztietan leku berdinean hasten da, pintura margotu garbiak bezala.
Ezarpen orokorrak
Zure maisu-orriaren estiloa orriaren marjinak, estalkiak eta mugak murriztuz hasiko dira. Web arakatzaile batzuek dokumentuaren gorputza 1 edo 2 pixel-pixel dituzte, arakatzailearen paneleko ertzak garbitzen dituztenak. Horrek guztiak berdinak direla erakusten du:
html, body {marjina: 0px; betegarria: 0px; mugan: 0 px; }Letra-tipo koherentea ere egin nahi duzu. Ziurtatu ehuneko 100 edo 1em letra-tipoaren tamaina ere ezarri duzula, orrialdea eskuragarria izan dadin, baina tamaina koherentea da. Eta ziurtatu linearen altuera sartzea.
gorputza {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Titularra formateatzea
Goiburuko edo goiburuko etiketak (H1, H2, H3, etab.) Normalean testu lodia duten marjina handiak edo horien inguruko betegarria dira normalean. Pisua, marjinak eta beteginak ezabatuz, etiketa horiek oraindik ere handiagoa izaten dute (edo txikiagoak) testuko testuak baino gehiago estekarik gabe:
h1, h2, h3, h4, h5, h6 {marjina: 0; betegarria: 0; font-weight: normal; font-family: Arial, Helvetica, sans-serif; }Tamaina zehatzak, letra-tartea eta betegarriak zure titularren etiketak ezartzeko kontuan hartu nahi dituzu, baina diseinatzen ari zaren webgunearen estiloaren araberakoa da eta estilo maisuaren orrialdetik kanpo geratu behar da. Estilo horietako estilo gehiago gehi ditzakezu zure diseinu zehatzerako beharrezkoak diren bezala.
Testu arrunta formateatzea
Titularrak baino gehiago, argi utzi behar zenuke beste testu-etiketa batzuk. Maiztasun handiko mahaigaineko etiketak (TH eta TD) eta inprimaki etiketak (SELECT, TEXTAREA eta INPUT) maiz entzuten dira. Zure gorputzari eta paragrafoen testuei tamaina bera ezartzen ez bazaie, nabigatzaileek nola egiten dituzten harritu dezakete.
p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {marjina: 0; betegarria: 0; letra: normal normala 1em / 1.25 Arial, Helvetica, sans-serif; }Era berean, zure aipamenei (BLOCKQUOTE eta Q), akronimoak eta laburdura apur bat estilo gehigarrian emateko, apur bat gehiago nabarmentzen dira:
blockquote {marjina: 1.25em; betegarria: 1.25em} q {font-style: italic; } acronym, abbr {cursor: help; mugan behean: 1px hondatuta; }Loturak eta irudiak
Loturak errazago kudeatu eta aipatutako urdin distiratsua azpimarratutako testutik aldatzea erraza da. Beti nahiago dut nire estekak nabarmentzen jarraituko dutela, baina modu desberdinetan nahiago baduzu, aukera hauek bereiz ditzakezu bereizita. Ez dut maisutasun estiloaren koloreak ere barne hartzen, diseinuaren araberakoa baita.
a, a: lotura, a: bisitatua, a: aktiboa, a: hover {text-decoration: underline; }Irudiekin, garrantzitsua da mugak desaktibatzea. Nabigatzaile gehienek ez dute irudi arrunt baten inguruan ertza erakutsi, irudia estekatuta dagoenean, nabigatzaileek mugan jartzen dute. Hau konpontzeko:
img {mugartea: none; }Mahaiak
Mahaiak jada ez dira diseinurako erabilerarako erabiltzen, guneek oraindik erabil ditzakete tabluar datu errealetarako. HTML taulen erabilera ona da. Dagoeneko ziurtatu dugu testuaren tamaina lehenetsia bera dela zure taulako gelaxketan, baina ezarri behar dituzu beste estilo batzuk zure taulak berdina izan dadin:
taula {marjina: 0; betegarria: 0; mugan: none; }Inprimakiak
Beste elementu batzuekin bezala, zure inprimakien marjinak eta betegarriak garbitu beharko zenituzke. Beste gauza bat egin nahi dut "etiketaren" formako etiketa berriro idazten du, kodean etiketa jarri ez duen tokia gehitzen. Beste testu-elementu batzuekin bezala, hautapena, testua eta sarrerako letra-tipoaren informazioa definitzen dut, beraz, nire testuaren gainerakoa bezalakoa da.
forma {marjina: 0; betegarria: 0; bistaratu: inline; }Etiketaren kurtsorea aldatzeko ideia ona ere bada. Horrela, jendeak etiketa zerbait egingo du klik egiten duenean.
etiketa {kurtsorea: erakuslea; }Ohiko klaseak
Mahaigaineko estiloaren zati honetan, zu zentzua duten klaseak zehaztu behar dituzu. Hauek gehien erabiltzen ditugun klaseetako batzuk dira. Kontuan izan ez direla elementu jakin batetan ezarriko, beraz, beharrezkoak izan ditzakezu:
.clear {argi: bai; } .floatLeft {float: left; } .floatRight {float: right; } .textLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {bistaratu: blokea; marjina-ezkerra: auto; marjina-eskuinera: auto; } / * gogoratu zabalera ezartzeko * / .bold {font-weight: bold; } .italic {font-style: italic; } .underline {text-decoration: underline; } .noindent {margin-left: 0; padding-left: 0; } .nomargin {marjina: 0; } .nopadding {padding: 0; } .nobullet {list-style: none; list-style-image: none; }Gogoratu klaseak beste edozein estilo baino lehen idatzitakoak direla eta klaseak besterik ez direla, gainbehera errazagoa izango zaie kaskadako geroago gertatuko diren estiloko propietate zehatzagoei. Elementu bateko klase komun bat ezartzen baduzu eta ez baduzu inolako eraginik, ziurtatu elementu horri eragiten dioten beste estilo-orrietako estilo ez dagoela.
Master estilo-orri osoa
/ * Global Defaults * / html, body {marjina: 0px; betegarria: 0px; mugan: 0 px; } gorputza {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Izenburuak * / h1, h2, h3, h4, h5, h6 {marjina: 0; betegarria: 0; font-weight: normal; font-family: Arial, Helvetica, sans-serif; } / * Testu-estiloak * / p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {marjina: 0; betegarria: 0; letra: normal normala 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {margin: 1.25em; betegarria: 1.25em} q {font-style: italic; } acronym, abbr {cursor: help; mugan behean: 1px hondatuta; } txikia {font-size: .85em; } big {font-size: 1.2em; } / * Estekak eta irudiak * / a, a: esteka, a: bisitatua, a: aktiboa, a: hover {text-decoration: underline; } img {mugartea: none; } / * Taulak * / taula {marjina: 0; betegarria: 0; mugan: none; } / * Formak * / form {marjina: 0; betegarria: 0; bistaratu: inline; } etiketa {kurtsorea: erakuslea; } / * Klase komun * / .clear {argi: biak; } .floatLeft {float: left; } .floatRight {float: right; } .textLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {bistaratu: blokea; marjina-ezkerra: auto; marjina-eskuinera: auto; } / * gogoratu zabalera ezartzeko * / .bold {font-weight: bold; } .italic {font-style: italic; } .underline {text-decoration: underline; } .noindent {margin-left: 0; padding-left: 0; } .nomargin {marjina: 0; } .nopadding {padding: 0; } .nobullet {list-style: none; list-style-image: none; }Jennifer Krynin-en jatorrizko artikulua. Jeremy Girard-ek argitaratua17 / 17/17