Kry die feite met hierdie wenke
Alle webblaaiers sluit in wat bekend staan as "defauly style." Hierdie is style wat die voorkoms en gevoel van HTML-elemente dikteer in die afwesigheid van enige ander stylinligting. Byvoorbeeld, in byna elke blaaier is die standaard voorkoms van hiperskakels 'n helderblou kleur met 'n onderstreep. Dit is hoe hierdie skakels lyk, tensy jy hulle vertel om op 'n ander manier te vertoon.
Standaard blaaierstyle kan nuttig wees, maar in baie gevalle wil webontwerpers hierdie style verwyder sodat hulle vars kan begin met style wat hulle 100% beheer. Dit word gedoen met behulp van wat bekend staan as 'n "meesterstylblad."
'N Meesterstyl moet die eerste styleblad wees wat jy in al jou dokumente noem. U gebruik 'n meesterstyl om die standaard blaaierinstellings uit te vee wat probleme in webleser met kruisblaaier kan veroorsaak. Sodra jy die style met 'n meesterstylblad uitgehaal het, begin jou ontwerp van dieselfde plek in al die blaaiers - soos 'n skoon seil vir verf.
Globale verstek
Jou meesterstylblad moet begin deur die marges, paddings en grense op die bladsy te nul . Sommige webblaaier verstek die liggaamsdeel van die dokument na 1 of 2 pixels wat uit die ruitblaaie van die blaaier ingeprent is. Dit maak seker dat hulle almal dieselfde vertoon:
html, liggaam {marge: 0px; vulling: 0px; grens: 0px; }U wil ook die font konsekwent maak. Maak seker dat jy ook die lettergrootte op 100 persent of 1em stel, sodat jou bladsy toeganklik is, maar die grootte is steeds konsekwent. En wees seker dat die lynhoogte ingesluit word.
liggaam (font: 1em / 1.25 Arial, Helvetica, sans-serif; }Opskrif opskrif
Opskrifte of koptekstipes (H1, H2, H3, ens.) Is gewoonlik verstek vir vet teks met groot marges of om hulle heen. Deur die gewig, marges en opvulling skoon te maak, verseker jy dat hierdie etikette steeds groter (of kleiner) bly as die teks rondom hulle sonder ekstra style:
h1, h2, h3, h4, h5, h6 (marge: 0; vulling: 0; font-gewig: normaal; font-familie: Arial, Helvetica, sans-serif; }U kan dalk oorweeg om spesifieke groottes, letterspasiëring en paddings aan u koptekens te stel, maar dit hang regtig van die styl van die webwerf wat u ontwerp en moet buite die meesterstylblad gelaat word. Jy kan meer style vir hierdie opskrifte byvoeg as wat nodig is vir jou spesifieke ontwerp.
Vlak teks opmaak
Daarbenewens is daar ander teks etikette wat u seker moet uitvee. Een stel wat mense dikwels vergeet, is die tafelselle-etikette (TH en TD) en vormtekens (SELECT, TEXTAREA en INPUT). As jy nie dieselfde grootte as jou liggaam en paragraaf teks stel nie, kan jy onaangenaam verras wees oor hoe die blaaiers hulle gee.
p, th, td, li, dd, dt, ul, ol, blockquote, q, akroniem, abbr, a, invoer, selekteer, teksarea {marge: 0; vulling: 0; font: normale normale normale 1em / 1.25 Arial, Helvetica, sans-serif; }Dit is ook lekker om jou kwotasies (BLOCKQUOTE en Q), akronieme en afkortings 'n bietjie ekstra styl te gee sodat hulle 'n bietjie meer uitstaan.
blockquote {marge: 1.25em; vulling: 1.25em} q {font-styl: kursief; } akroniem, abbr {wyser: hulp; rand-bodem: 1px gestippel; }Skakels en prente
Skakels is maklik om te bestuur en te verander van die genoemde blou onderstreepte teks. Ek verkies altyd dat my skakels altyd onderstreep word, maar as u dit anders verkies, kan u hierdie opsies afsonderlik stel. Ek sluit ook nie kleure in die meesterstylvel in nie, want dit hang af van die ontwerp.
a, a: skakel, a: besoek, a: aktief, a: hover {teks-versiering: onderstreep; }Met beelde is dit belangrik om die grense af te skakel. Terwyl die meeste blaaiers nie 'n grens rondom 'n gewone beeld vertoon nie, word die blaaiers aangeskakel wanneer die prent gekoppel word. Om dit reg te stel:
img {grens: geen; }tafels
Terwyl tabelle nie meer vir uitlegdoeleindes gebruik word nie, kan u werf dit nog steeds gebruik vir werklike tabluar-data. Dit is 'n goeie gebruik van HTML-tabelle. Ons het reeds seker gemaak dat die standaard teks grootte dieselfde is vir u tafelselle, maar daar is 'n paar ander style wat u moet stel sodat u tabelle dieselfde bly:
tabel {marge: 0; vulling: 0; grens: geen; }vorms
Soos met ander elemente, moet jy die marges en paddings rondom jou vorms uitvee. Nog 'n ding wat ek graag doen, is om die vormtiket as " inline " te herskryf sodat dit nie ekstra spasie byvoeg waar jy die kode in die kode plaas nie. Soos met ander tekselemente definieer ek die fontinligting vir kies, teksarea en insette hierbo, sodat dit dieselfde is as die res van my teks.
vorm {marge: 0; vulling: 0; vertoon: inline; }Dit is ook 'n goeie idee om die wyser vir jou etikette te verander. Dit help mense om te sien dat die etiket iets sal doen wanneer hulle dit kliek.
etiket {wyser: wyser; }Algemene klasse
Vir hierdie deel van die meesterstyl moet u klasse definieer wat vir u sin maak. Dit is 'n paar van die klasse wat ek die meeste gebruik. Let daarop dat hulle nie op 'n spesifieke element ingestel is nie, sodat jy hulle kan toewys aan alles wat jy nodig het:
. duidelike (duidelike: albei; }. floatLeft {float: left; }. Float Right {float: right; }. TextLeft {text-align: left; }. text Right (text-align: right; }. TextCenter {text-align: center; } .textRustify {text-align: justify; }. Blok Sentrum {vertoon: blok; marge-links: outomaties; marge-regs: motor; } / * Onthou om breedte * / .bold {font-weight: bold; } .italic {font-style: italic; }. onderlyn {teks-versiering: onderstreep; }. Onbevoeg {marge-links: 0; padding-links: 0; }. nomargin {marge: 0; }. oplaai {padding: 0; } .nobullet {list-style: none; lys-styl-beeld: geen; }Onthou dat omdat hierdie klasse voor enige ander style geskryf is en hulle net klasse is, is dit maklik om te ignoreer met meer spesifieke styl eienskappe wat later in die kaskade voorkom . As jy vind dat jy 'n gewone klas op 'n element stel en dit nie in werking tree nie, moet jy seker maak dat daar nie 'n ander styl is in een van jou latere styleheets wat dieselfde element raak nie.
Die hele Meester Stylvel
/ * Global Default * / html, body {margin: 0px; vulling: 0px; grens: 0px; } liggaam {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Headlines * / h1, h2, h3, h4, h5, h6 (marge: 0; vulling: 0; font-gewig: normaal; font-familie: Arial, Helvetica, sans-serif; } / * Teksstyle * / p, th, td, li, dd, dt, ul, ol, blockquote, q, akroniem, abbr, a, invoer, selekteer, teksarea {marge: 0; vulling: 0; font: normale normale normale 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {marge: 1.25em; vulling: 1.25em} q {font-styl: kursief; } akroniem, abbr {wyser: hulp; rand-bodem: 1px gestippel; } klein {font-size: .85em; } groot {font-size: 1.2em; } / * Skakels en prente * / a, a: skakel, a: besoek, a: aktief, a: sweeftuig {teksversiering: onderstreep; } img {grens: geen; } / * Tabelle * / tabel {marge: 0; vulling: 0; grens: geen; } / * Vorms * / vorm {marge: 0; vulling: 0; vertoon: inline; } etiket {wyser: wyser; } / * Common Classes * / .clear {clear: both; }. floatLeft {float: left; }. Float Right {float: right; }. TextLeft {text-align: left; }. text Right (text-align: right; }. TextCenter {text-align: center; } .textRustify {text-align: justify; }. Blok Sentrum {vertoon: blok; marge-links: outomaties; marge-regs: motor; } / * Onthou om breedte * / .bold {font-weight: bold; } .italic {font-style: italic; }. onderlyn {teks-versiering: onderstreep; }. Onbevoeg {marge-links: 0; padding-links: 0; }. nomargin {marge: 0; }. oplaai {padding: 0; } .nobullet {list-style: none; lys-styl-beeld: geen; }Oorspronklike artikel deur Jennifer Krynin. Geredigeer deur Jeremy Girard op 10/6/17