Hanki tosiasiat näillä vinkillä
Kaikkiin selaimiin kuuluu "oletuksena tyylejä". Nämä ovat tyylit, jotka sanovat HTML-elementtien ulkoasua ilman muita tyylitietoja. Esimerkiksi lähes kaikissa selaimissa oletusnäkymä hyperlinkkejä on kirkkaan sininen väri, jossa on alleviivaus. Näin linkit näyttävät, ellet kerro heille näyttämään eri tavalla.
Oletusselaimen tyylit voivat olla hyödyllisiä, mutta monissa tapauksissa web-suunnittelijat haluavat poistaa nämä tyylit niin, että ne voivat aloittaa tyylikkäillä uusilla tyylillä, jotka ovat 100% hallinnassa. Tämä tehdään käyttämällä "master-tyylitaulukkoa".
Master-tyylitaulukon pitäisi olla ensimmäinen tyylitaulukko, johon soitat kaikissa asiakirjoissa. Käytät päätyyleistyökertaa poistaaksesi oletusselaimen asetukset, jotka voivat aiheuttaa ongelmia selaimen selaimessa. Kun olet poistanut tyylejä master-tyylisivulla, suunnittelu alkaa samalta paikalta kaikissa selaimissa - kuten puhdas kangas maalausta varten.
Globaalit oletukset
Master-tyylisivun pitäisi aloittaa nollaamalla sivulla olevat marginaalit, tasot ja reunukset . Jotkin Web-selaimet olettavat asiakirjan rungon 1 tai 2 pikseliksi selaimen reunojen reunoilta. Tämä varmistaa, että kaikki näyttävät samanlaisia:
html, keho {marginaali: 0px; pehmuste: 0px; raja: 0px; }Haluat myös tehdä fontin yhdenmukaiseksi. Muista myös asettaa kirjasinkoko 100 prosenttiin tai 1em, niin että sivusi on käytettävissä, mutta koko on edelleen johdonmukainen. Ja varmista, että sisällytät rivin korkeuden.
body {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Otsikon muotoilu
Otsikko- tai otsikkotunnisteet (H1, H2, H3 jne.) Ovat yleensä lihavoitu teksti, jossa on suuria marginaaleja tai pehmusteita niiden ympärillä. Tyhjennä paino, marginaalit ja pehmuste, varmista, että nämä tunnisteet ovat edelleen suurempia (tai pienempiä) kuin ympäröivä teksti ilman ylimääräisiä tyylejä:
h1, h2, h3, h4, h5, h6 {marginaali: 0; pehmuste: 0; font-paino: normaali; fonttiperhe: Arial, Helvetica, sans-serif; }Haluat ehkä harkita erityisten koon, kirjainten välisen etäisyyden ja tasoituksen asettamista otsikkotunnisteihisi, mutta se riippuu todellisuudessa suunnittelemaasi tyyliin ja sitä ei saa jättää päätyylilevystä. Voit lisätä näitä tyylejä muotojen mukaan.
Tavallinen tekstimuotoilu
Ylätunnisteiden lisäksi on muita tekstiketjuja, joiden pitäisi olla varmoja irti. Yksi ryhmä, jonka ihmiset usein unohtavat, ovat taulukon solutunnisteet (TH ja TD) ja lomaketunnisteet (SELECT, TEXTAREA ja INPUT). Jos et aseta niitä koolle kuin kehosi ja kappaleen teksti, saatat olla yllättävää siitä, miten selaimet tekevät niistä.
p, th, td, li, dd, dt, ul, ol, blockquote, q, lyhenne, abbr, a, input, select, textarea {marginaali: 0; pehmuste: 0; fontti: normaali normaali normaali 1em / 1.25 Arial, Helvetica, sans-serif; }On myös mukavaa antaa tarjouksesi (BLOCKQUOTE ja Q), lyhenteet ja lyhenteet hieman ylimääräistä tyyliä, jotta ne erottuvat hieman enemmän:
blockquote {margin: 1.25em; pehmuste: 1.25em} q {font-style: italic; } lyhenne, abbr {kursori: apu; raja-pohja: 1px katkoviiva; }Linkit ja kuvat
Linkkejä on helppo hallita ja vaihtaa edellä mainitusta kirkkaan sinisestä alleviivattua tekstiä. Mieluummin aina linkkini ovat aina alleviivattuja, mutta jos haluat eri tavalla, voit asettaa nämä vaihtoehdot erikseen. Minulla ei myöskään ole värejä päätyylilevylle, koska se riippuu suunnittelusta.
a, a: linkki, a: vieraili, a: aktiivinen, a: hover {teksti-decoration: underline; }Kuvien kanssa on tärkeää poistaa reunat käytöstä. Vaikka useimmat selaimet eivät näytä reunaa tavallisen kuvan ympärille, kun kuva on linkitetty, selaimet kytkeytyvät rajalle. Voit korjata tämän:
img {border: ei; }taulukot
Vaikka taulukoita ei enää käytetä ulkoasutarkoituksiin, sivusto voi silti käyttää niitä todellisiin tabluar-tietoihin. Tämä on hieno HTML-taulukoiden käyttö. Olemme jo varmistaneet, että oletuskoko on sama taulukon soluille, mutta on olemassa muutamia muita tyylejä, jotka sinun on asetettava niin, että taulukot pysyvät samana:
taulukko {marginaali: 0; pehmuste: 0; raja: ei yhtään; }Lomakkeet
Kuten muidenkin tekijöiden kanssa, sinun on selvitettävä marginaalit ja tasaukset lomakkeiden ympärillä. Toinen asia, jonka haluan tehdä, on muokata lomakekoodi " inlineiksi " niin, että se ei lisää ylimääräistä tilaa, johon sijoitat tunnisteen koodiin. Kuten muillakin tekstielementeillä, määritän fontti-informaation valitulle, textarea-alueelle ja syötettäväksi yllä, niin että se on sama kuin muulla tekstillä.
muoto {marginaali: 0; pehmuste: 0; näyttö: inline; }On myös hyvä vaihtaa kohdistimesi tarroille. Tämä auttaa ihmisiä näkemään, että tarra tekee jotain klikkaamalla sitä.
etiketti {kohdistin: osoitin; }Yhteiset luokat
Tämän osion päätyylitasolla sinun on määriteltävä luokat järkeviksi. Nämä ovat joitain luokkia, joita käytän useimmiten. Huomaa, että niitä ei ole asetettu mihinkään tiettyyn elementtiin, joten voit määrittää ne mitä tarvitset:
.clear {clear: molemmat; } .floatLeft {float: vasemmalle; } .floatRight {float: oikea; } .textLeft {text-align: left; } .textRight {text-align: oikea; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: block; marginaali-vasen: auto; marginaali-oikea: auto; } / * muista asettaa leveys * / .bold {font-weight: bold; } .italic {font-style: italic; } .underline {text-decoration: underline; } .noindent {margin-left: 0; pehmuste-vasen: 0; } .nomargin {marginaali: 0; } .nopadding {padding: 0; } .nobullet {list-style: none; list-style-image: ei mitään; }Muista, että koska nämä luokat ovat kirjoitettuja ennen muita tyylejä ja ne ovat vain luokkia, ne on helppo ohittaa entistä tarkempien tyyppisten ominaisuuksien kanssa, joita esiintyy myöhemmin kaskadissa . Jos huomaat, että olet määrittänyt yhteisen luokan elementille, eikä se tule voimaan, tarkista, että jollakin myöhemmistä tyylitiedostoistasi ei ole muuta tyyliä, joka vaikuttaa samaan elementtiin.
Koko Master-tyylisivu
/ * Globaalit oletukset * / html, body {marginaali: 0px; pehmuste: 0px; raja: 0px; } body {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Otsikot * / h1, h2, h3, h4, h5, h6 {marginaali: 0; pehmuste: 0; font-paino: normaali; fonttiperhe: Arial, Helvetica, sans-serif; } / * Tekstityylit * / p, th, td, li, dd, dt, ul, ol, blockquote, q, lyhenne, abbr, a, input, select, textarea {margin: 0; pehmuste: 0; fontti: normaali normaali normaali 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {margin: 1.25em; pehmuste: 1.25em} q {font-style: italic; } lyhenne, abbr {kursori: apu; raja-pohja: 1px katkoviiva; } pieni {font-size: .85em; } iso {font-size: 1.2em; } / * Linkit ja kuvat * / a, a: linkki, a: käynyt, a: aktiivinen, a: hover {text-decoration: underline; } img {border: none; } / * Taulukot * / taulukko {marginaali: 0; pehmuste: 0; raja: ei yhtään; } / * Lomakkeet * / lomake {marginaali: 0; pehmuste: 0; näyttö: inline; } label {kursori: osoitin; } / * Yhteiset luokat * / .clear {clear: both; } .floatLeft {float: vasemmalle; } .floatRight {float: oikea; } .textLeft {text-align: left; } .textRight {text-align: oikea; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: block; marginaali-vasen: auto; marginaali-oikea: auto; } / * muista asettaa leveys * / .bold {font-weight: bold; } .italic {font-style: italic; } .underline {text-decoration: underline; } .noindent {margin-left: 0; pehmuste-vasen: 0; } .nomargin {marginaali: 0; } .nopadding {padding: 0; } .nobullet {list-style: none; list-style-image: ei mitään; }Alkuperäinen artikkeli Jennifer Krynin. Julkaisija Jeremy Girard 10.6.17