Yfirlit yfir Cascading Style Sheets með sýni Style Sheet
Þegar þú ert að byggja upp vefsíðu frá grunni er það klárt að byrja með grundvallarstíllin sem eru skilgreind. Það er eins og að byrja með hreinu striga og fersku bursta. Eitt af fyrstu vandamálum sem vefhönnuðir standa frammi fyrir eru að vafrar eru allt öðruvísi. Sjálfgefin leturstærð er frábrugðin vettvang til vettvangs, sjálfgefið leturgerð fjölskyldunnar er öðruvísi, sumar vélar skilgreina margar og padding á líkamsmerkinu meðan aðrir gera það ekki og svo framvegis. Fáðu í kringum þessar ósamræmi með því að skilgreina sjálfgefin stíl fyrir vefsíður þínar.
CSS og stafasettið
Fyrst skaltu fyrst setja stafatöfluna á CSS skjölin til utf-8 . Þó að líklegt er að flestar síðurnar sem þú skrifar séu skrifaðar á ensku, gætu sumir verið staðbundnar aðlagaðir fyrir mismunandi tungumála og menningarlega samhengi. Þegar þeir eru búnir, utf-8 einfaldar ferlið. Að setja stafatáknið í ytri stíll lakanum hefur ekki forgang yfir HTTP haus en í öllum öðrum tilvikum mun það.
Það er auðvelt að stilla stafasettið. Fyrir fyrstu línu CSS skjalsins skrifaðu:
@charset "utf-8";Með þessum hætti, ef þú notar alþjóðlega stafi í innihaldsefninu eða sem kennitölu og kennitölu, þá mun stíllinn virka enn frekar.
Stíll Page líkamans
Það næsta sem sjálfgefið stíll lak þörfum eru stíl til að núll út marmar, padding og landamæri. Þetta tryggir að allir vöfrum setji efnið á sama stað og ekki eru nein falin rými milli vafrans og efnisins. Fyrir flesta vefsíður er þetta of nálægt brún textans, en það er mikilvægt að byrja þar þannig að bakgrunnsmynd og skipulagssvið séu raðað upp á réttan hátt.
html, líkami {margfeldi: 0px; padding: 0px; landamærin: 0px; }Stilltu sjálfgefna forgrunn eða leturlit í svart og sjálfgefna bakgrunnslitinn að hvítu. Þó að þetta muni líklega breytast fyrir flestar vefsíður hönnun, með því að hafa þessar venjulegu liti settar á líkamann og HTML tagi í fyrstu gerir síðunni auðveldara að lesa og vinna með.
html, líkami {litur: # 000; bakgrunnur: #fff; }Sjálfgefið leturgerðir
Leturstærðin og leturfjölskyldan eru eitthvað sem mun óhjákvæmilega breytast þegar hönnunin tekur að halda en byrja með sjálfgefin leturstærð 1 em og sjálfgefin leturgerð fjölskyldu Arial, Genf eða einhver önnur sans-serif leturgerð. Notkun ems heldur síðunni eins aðgengileg og mögulegt er og sans-serif letur er læsilegra á skjánum.
html, líkami, p, th, td, li, dd, dt {leturgerð: 1em Arial, Helvetica, sans-serif; }Það kann að vera annar staður þar sem þú gætir fundið texta, en p , th , td , li , dd og dt eru góð byrjun til að skilgreina grunn leturgerðina. Hafa með HTML og líkama bara í tilfelli, en margir vöfrur eru að hunsa leturvalið ef þú skilgreinir aðeins letur þínar fyrir HTML eða líkama.
Fyrirsagnir
HTML fyrirsagnir eru mikilvægar til að nota til að hjálpa yfirlitinu á síðuna þína og láta leitarvélar fá dýpra inn á síðuna þína. Án stíll, þau eru allt frekar ljót, svo settu sjálfgefin stíl á öllum þeim og skilgreindu leturgerðina og leturstærðina fyrir hvern.
h1, h2, h3, h4, h5, h6 {letur-fjölskylda: Arial, Helvetica, sans-serif; } h1 {leturstærð: 2em; } h2 {leturstærð: 1.5em; } h3 {leturstærð: 1.2em; } h4 {leturstærð: 1.0em; } h5 {leturstærð: 0.9em; } h6 {leturstærð: 0.8em; }Ekki gleyma tenglum
Stíll tengilinn litum er næstum alltaf mikilvægur hluti af hönnuninni, en ef þú skilgreinir þá ekki í sjálfgefinum stílum, þá eru líkurnar á að þú gleymir að minnsta kosti einum gervitíma. Skilgreina þá með litlum breytingum á bláu og þá breyta þeim þegar þú hefur litavalmynd fyrir síðuna sem er skilgreind.
Til að setja tengla í tónum af bláum, settu:
- tenglar eins og blár
- heimsótt tengla sem dökkblár
- sveifla tengist eins og ljósblátt
- virk tengsl sem jafnvel blekari blár
eins og sýnt er í þessu dæmi:
a: hlekkur {litur: # 00f; } a: heimsótt {lit: # 009; } a: sveima {litur: # 06f; } a: virk {litur: # 0cf; } Með því að stilla tenglana við nokkuð skaðlegt litasamsetningu tryggir það að ég muni ekki gleyma einhverjum bekkjum, og gerir þær líka svolítið minna hávær en sjálfgefið blár, rauður og fjólublár.Full Style Sheet
Hér er fullt stíll lak:
@charset "utf-8"; html, líkami {margfeldi: 0px; padding: 0px; landamærin: 0px; litur: # 000; bakgrunnur: #fff; } html, líkami, p, th, td, li, dd, dt {letur: 1em Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 {letur-fjölskylda: Arial, Helvetica, sans-serif; } h1 {leturstærð: 2em; } h2 {leturstærð: 1.5em; } h3 {leturstærð: 1.2em; } h4 {leturstærð: 1.0em; } h5 {leturstærð: 0.9em; } h6 {leturstærð: 0.8em; } a: hlekkur {litur: # 00f; } a: heimsótt {lit: # 009; } a: sveima {litur: # 06f; } a: virk {litur: # 0cf; }