Trosolwg o Daflenni Arddull Casglu gyda Dalen Arddangos Enghreifftiol
Pan fyddwch yn adeiladu gwefan o'r dechrau, mae'n smart i ddechrau gyda'r arddulliau sylfaenol a ddiffinnir. Mae'n debyg i ddechrau gyda chynfas glân a brwsys ffres. Un o'r problemau cyntaf y mae dylunwyr gwe yn eu hwynebu yw bod porwyr gwe yn wahanol. Mae'r maint ffont diofyn yn wahanol i'r llwyfan i'r llwyfan, mae'r teulu ffont diofyn yn wahanol, mae rhai porwyr yn diffinio ymylon a paddio ar y tag corff tra nad yw eraill yn gwneud, ac yn y blaen. Ewch â'r anghysonderau hyn trwy ddiffinio'r arddulliau diofyn ar gyfer eich tudalennau gwe.
CSS a'r Set Cymeriad
Y pethau cyntaf yn gyntaf, gosodwch set cymeriad eich dogfennau CSS i utf-8 . Er ei bod yn debygol bod y rhan fwyaf o'r tudalennau rydych chi'n eu dylunio yn cael eu hysgrifennu yn Saesneg, efallai y bydd rhai wedi'u haddasu'n lleol ar gyfer cyd-destun ieithyddol a diwylliannol gwahanol. Pan fyddant, mae utf-8 yn symleiddio'r broses. Ni fydd gosod y cymeriad a osodir yn y ddalen arddull allanol yn cael blaenoriaeth dros bennawd HTTP , ond ym mhob sefyllfa arall, bydd.
Mae'n hawdd gosod set y cymeriad. Ar gyfer llinell gyntaf y ddogfen CSS ysgrifennwch:
@charset "utf-8";Fel hyn, os ydych chi'n defnyddio cymeriadau rhyngwladol yn yr eiddo cynnwys neu fel enwau dosbarth ac ID, bydd y ddalen arddull yn dal i weithio'n gywir.
Styling the Page Body
Y peth nesaf yw anghenion arddull diofyn arddulliau i sero allan ymylon, padio a ffiniau. Mae hyn yn sicrhau bod pob porwr yn gosod y cynnwys yn yr un lle, ac nid oes unrhyw leoedd cudd rhwng y porwr a'r cynnwys. Ar gyfer y rhan fwyaf o dudalennau gwe, mae hyn yn rhy agos at yr ymyl ar gyfer testun, ond mae'n bwysig dechrau yno fel bod delweddau cefndir ac adrannau cynllun wedi'u gosod yn gywir.
html, corff {ymyl: 0px; padio: 0px; ffin: 0px; }Gosodwch y blaendir neu lliw ffont diofyn i ddu a'r lliw cefndir diofyn i wyn. Er y bydd hyn yn fwyaf tebygol o newid ar gyfer y rhan fwyaf o gynlluniau tudalennau gwe, gan fod y lliwiau safonol hyn wedi'u gosod ar y corff a tag HTML ar y dechrau, mae'n gwneud y dudalen yn haws ei ddarllen a'i weithio.
html, body {lliw: # 000; cefndir: #fff; }Styles Ffurflen Ddiffygiol
Mae maint y ffont a'r teulu ffont yn rhywbeth a fydd yn anochel yn newid unwaith y bydd y dyluniad yn cael ei ddal ond yn dechrau gyda maint ffont diofyn 1 em a theulu ffont diofyn o Arial, Genefa, neu rywfaint o ffont sans-serif. Mae'r defnydd o ems yn cadw'r dudalen mor hygyrch â phosibl, ac mae ffont sans-serif yn fwy darllenadwy ar y sgrin.
html, corff, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; }Efallai y bydd llefydd eraill lle y gallech ddod o hyd i destun, ond mae p , th , td , li , dd , a dt yn ddechrau da ar gyfer diffinio'r ffont sylfaen. Dylech gynnwys HTML a chorff rhag ofn, ond mae llawer o borwyr yn goresgyn y dewisiadau ffont os ydych chi'n diffinio'ch ffontiau yn unig ar gyfer y HTML neu'r corff.
Penawdau
Mae penawdau HTML yn bwysig i'w defnyddio i helpu amlinellu eich safle a gadael i beiriannau chwilio fynd yn ddyfnach i'ch safle. Heb arddulliau, maent i gyd yn eithaf hyll, felly gosodwch arddulliau diofyn ar bob un ohonynt a diffiniwch y teulu ffont a'r meintiau ffont ar gyfer pob un.
h1, h2, h3, h4, h5, h6 {font-family: 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; }Don & # 39; t Anghofiwch y Dolenni
Mae ffurfio lliwiau'r cyswllt bron bob amser yn rhan hanfodol o'r cynllun, ond os na fyddwch chi'n eu diffinio yn yr arddulliau diofyn, mae'n bosib y byddwch chi'n anghofio o leiaf un o'r ffug-ddosbarthiadau. Diffiniwch nhw gyda rhywfaint o amrywiad bach ar las glas ac yna eu newid unwaith y bydd gennych y palet lliw ar gyfer y safle a ddiffinnir.
I osod y dolenni mewn lloriau glas, gosod:
- cysylltiadau fel glas
- Ymwelodd â chysylltiadau â glas tywyll
- hoffech gysylltiadau fel golau glas
- cysylltiadau gweithredol â hyd yn oed yn fwy glân
fel y dangosir yn yr enghraifft hon:
a: dolen {lliw: # 00f; } a: ymwelwyd {lliw: # 009; } a: hover {lliw: # 06f; } a: active {lliw: # 0cf; } Drwy ddylunio'r cysylltiadau â chynllun lliw gweddol ddiniwed, mae'n sicrhau na fyddaf yn anghofio unrhyw un o'r dosbarthiadau, a hefyd yn eu gwneud ychydig yn llai uchel na'r glas, coch a phorffor diofyn.Taflen Arddull Llawn
Dyma'r ddalen arddull lawn:
@charset "utf-8"; html, corff {ymyl: 0px; padio: 0px; ffin: 0px; lliw: # 000; cefndir: #fff; } html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 {font-family: 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: dolen {lliw: # 00f; } a: ymwelwyd {lliw: # 009; } a: hover {lliw: # 06f; } a: active {lliw: # 0cf; }