Mar a bheir thu air falbh stoidhle brabhsair bunaiteach le duilleag maighstir-stoidhle

Faigh am fiosrachadh leis na molaidhean seo

Tha na brabhsairean lìn uile a 'gabhail a-steach na tha air a bheil "stoidhlichean mì-laghail". Is iad seo stoidhlichean a tha a 'toirt sealladh agus faireachdainn de eileamaidean HTML às aonais fiosrachadh stoidhle sam bith eile. Mar eisimpleir, ann am cha mhòr a h-uile h-sealladair tha coltas geal gorm le fo-loidhne ann an sealladh bunaiteach de cho-cheanglaichean. Seo mar a tha na ceanglaichean sin a 'coimhead mura innis thu dhaibh a bhith air an taisbeanadh ann an dòigh eadar-dhealaichte.

Faodaidh stoidhlean bunaiteach brabhsair a bhith cuideachail, ach ann an iomadh cùis tha luchd-dealbhaidh lìn ag iarraidh na stoidhlichean sin a thoirt air falbh gus an urrainn dhaibh tòiseachadh ùr le stoidhlichean gu bheil iad 100% fo smachd. Tha seo air a dhèanamh leis an t-ainm "prìomh stoidhle stoidhle".

Bu chòir bileag stoidhle maighstir a bhith mar chiad dhuilleag-stoidhle air a bheil thu a 'gairm anns na sgrìobhainnean gu lèir. Bidh tu a 'cleachdadh prìomh dhuilleag stoidhle gus na roghainnean brabhsair bunaiteach a shoilleireachadh a dh' adhbharaicheas duilgheadasan ann an dealbhadh lìn thar-bhrabhsair. Aon uair 's gu bheil thu air na stoidhlichean a ghlanadh le prìomh stoidhle stoidhle, bidh an dealbhadh agad a' tòiseachadh bhon aon àite anns a h-uile brabhsair - coltach ri canabhas glan airson a pheantadh.

Prìomh-dhùnaidhean cruinneil

Bu chòir do mhac-stoidhle stoidhle tòiseachadh le bhith a ' neadachadh a-mach na h-oirean, pàillidhean agus crìochan air an duilleig. Bidh cuid de na brabhsairean-lìn a 'mairsinn corp an sgrìobhainn gu 1 no 2 piogsail air a chòmhdach bho oir na h-uinneige. Tha seo a 'dèanamh cinnteach gu bheil iad uile a' taisbeanadh an aon rud:

html, body {marg: 0px; lannachadh: 0px; crìochan: 0px; }

Tha thu cuideachd airson an cruth-clò a dhèanamh cunbhalach. Dèan cinnteach cuideachd gun cuir thu an clò cruth gu 100 sa cheud no 1em, gus am bi do dhuilleag ruigsinneach, ach tha am meud fhathast cunbhalach. Agus bi cinnteach gum bi àirde-loidhne ann.

body {font: 1em / 1.25 Arial, Helvetica, sans-serif; }

Ceann-làimhseachadh

Mar as trice bidh clò-bhualadh ceann-cinnidh no cinn-cinn (H1, H2, H3, msaa) gu bhith nan teacsa dhubh le iomaill mhòra no gleabadh timcheall orra. Le bhith a 'glanadh a' chuideam, na h-iomairean agus an cleasachadh, nì thu cinnteach gu bheil na tagaichean sin fhathast nas motha (no nas lugha) na an teacsa mun cuairt orra gun stoidhlichean a bharrachd a bhith aca:

h1, h2, h3, h4, h5, h6 {marg: 0; gleabadh: 0; cruth-cuideam: àbhaisteach; teaghlach-clò: Arial, Helvetica, sans-serif; }

Is dòcha gum bi thu airson beachdachadh air meudan sònraichte a shuidheachadh, farsaingeachd litrichean agus paddings do na prìomh tagaichean agad, ach tha sin an urra ri stoidhle an làraich a tha thu a 'dealbhadh agus a dh' fhaodadh a bhith air fhàgail às an duilleag maighstir stoidhle. Faodaidh tu barrachd stoidhlean a chur ris na cinn sin mar a dh 'fheumar airson do dhealbhadh sònraichte.

Cruth-clò teacsa

A bharrachd air na cinn-naidheachd air an taobh thall, tha tagaichean teacsa eile ann agus bu chòir dhut a bhith cinnteach gun cuir thu às. Is e aon seata gu bheil daoine tric a 'dìochuimhneachadh na tagaichean cealla bùird (TH agus TD) agus a' cruthachadh tagaichean (SELECT, TEXTAREA agus INPUT). Mura h-eil thu a 'suidheachadh an fheadhainn chun an aon mheud ris a' bhodhaig agad agus teacsa paragraf, is dòcha gu bheil thu iongantach gu mì-thoilichte air mar a bheir na brabhsairean iad.

p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {marg: 0; gleabadh: 0; cruth: àbhaisteach àbhaisteach 1em / 1.25 Arial, Helvetica, sans-serif; }

Tha e cuideachd glè mhath a bhith a 'toirt seachad do luachadh (BLOCKQUOTE agus Q), acronyms, agus giorrachaidhean stoidhle beagan a bharrachd, gus am bi iad a' seasamh a-mach beagan a bharrachd:

bacadh air {marg: 1.25em; batrachadh: 1.25em} q {stoidhle clò-clò: clò eadailteach; } acronym, abbr {cursor: help; crìch a 'chrìch: 1px air falbh; }

Ceanglaichean agus Dealbhan

Tha ceanglaichean furasta a làimhseachadh agus atharrachadh bhon teacsa fo-loidhne gorm a chaidh ainmeachadh roimhe seo. Is fheàrr leam a bhith daonnan a 'cur cuideam air na ceanglaichean agam, ach ma tha e nas fheàrr leibh e ann an dòigh eadar-dhealaichte faodaidh tu na roghainnean sin a shuidheachadh air leth. Chan eil mi cuideachd a 'toirt a-steach dathan anns an duilleag maighstir stoidhle, oir tha sin an crochadh air an dealbhadh.

a, a: link, a: visited, a: active, a: hover {text-decoration: underline; }

Le ìomhaighean, tha e cudromach na crìochan a thionndadh. Ged nach eil a 'mhòr-chuid de bhrabhsairean a' sealltainn crìch timcheall ìomhaigh shìmplidh, nuair a tha an ìomhaigh ceangailte, bidh na brabhsairean a 'tionndadh na crìche. Gus seo a rèiteachadh:

img {crìoch: gin; }

Clàran

Ged nach eilear a 'cleachdadh chlàran airson adhbharan cruth a-nis, faodaidh gum bi làrach agad fhathast gan cleachdadh airson dàta tabluar fìor. Tha seo fìor mhath air clàran HTML. Tha sinn mar-thà air dèanamh cinnteach gu bheil meud teacsa bunaiteach an aon rud airson na ceallan bùird agad, ach tha beagan stoidhlichean eile ann a bu chòir dhut a shocrachadh gus am bi na clàran agad mar an ceudna:

clàr {marg: 0; gleabadh: 0; crìch: gin; }

Foirmean

Coltach ri eileamaidean eile, bu chòir dhut na h-oirean agus pàillidhean mu na foirmean agad a shoilleireachadh. Is e rud eile a tha mi a 'còrdadh rium a dhèanamh ath-sgrìobhadh an taga foirmeil mar " inline " gus nach cuir e àite a bharrachd far a bheil thu a' cur an tag anns a 'chòd. Mar le eileamaidean teacsa eile, tha mi a 'mìneachadh fiosrachadh a' chruth-clò airson taghadh, textarea agus cuir a-steach gu h-àrd, gus am bi e mar an ceudna ris a 'chòrr de mo theacsa.

foirm {marg: 0; gleabadh: 0; taisbeanadh: in-loidhne; }

Tha e cuideachd na dheagh bheachd an cursair atharrachadh airson na bileagan agad. Tha seo a 'cuideachadh dhaoine a bhith a' faicinn gum bi am bileag a 'dèanamh rudeigin nuair a phutas iad e.

label {cursor: pointer; }

Clasaichean Coitcheann

Airson a 'phàirt seo den phrìomh stoidhle, bu chòir dhut clasaichean a mhìneachadh a tha a' dèanamh ciall dhut. Seo cuid de na clasaichean a bhios mi a 'cleachdadh gu tric. Thoir an aire nach eil iad air an suidheachadh gu eileamaid shònraichte sam bith, agus mar sin faodaidh tu an fheadhainn a dh 'fheumas tu a shònrachadh:

.clear {clear: an dà chuid; } .floatLeft {flùraichean: clì; } .floatRight {flùraichean: deas; } .textLeft {text-align: left; } .textRight {text-align: deas; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {taisbeanadh: bloc; iomall-clì: auto; ceart-taobh: carbad; } / * cuimhnich gun cuir thu leud * / .bold {font-weight: trom; } .italic {font-style: italic; } .underline {sgeadachadh-teacs: foillsich; }. taobh a-staigh {clì-clì: 0; lanadh-chlì: 0; } .nomargin {marg: 0; }. a 'cur suas {padding: 0; } .nobullet {liosta-stoidhle: none; list-style-image: none; }

Cuimhnichibh air sgàth 's gu bheil na clasaichean sin sgrìobhte ro stoidhlichean sam bith eile agus gu bheil iad dìreach clasaichean, tha iad furasta an cur an sàs le feartan stoidhle nas mionaidiche a bhios a' tachairt nas fhaide air adhart anns an easgann . Ma lorgas tu gu bheil thu a 'suidheachadh clas coitcheann air eileamaid agus nach eil e èifeachdach, bu chòir dhut dèanamh cinnteach nach dèan stoidhle eile ann an aon de na duilleagan-stoidhle as ùire agad a bheir buaidh air an aon eileamaid sin.

An clàr iomlan de mhodalan stoidhle

/ * Prìomh-dhùnaidhean cruinneil * / html, body {marg: 0px; lannachadh: 0px; crìochan: 0px; } body {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Headlines * / h1, h2, h3, h4, h5, h6 {marg: 0; gleabadh: 0; cruth-cuideam: àbhaisteach; teaghlach-clò: Arial, Helvetica, sans-serif; } / * Text Styles * / p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {marggin: 0; gleabadh: 0; cruth: àbhaisteach àbhaisteach 1em / 1.25 Arial, Helvetica, sans-serif; } cuir bacadh air {marg: 1.25em; batrachadh: 1.25em} q {stoidhle clò-clò: clò eadailteach; } acronym, abbr {cursor: help; crìch a 'chrìch: 1px air falbh; } beag {font-size: .85em; } mòr {font-size: 1.2em; } / * Links and Images * / a, a: link, a: visited, a: active, a: hover {text-decoration: underline; } img {crìoch: gin; } / * Clàran * / clàr {marg: 0; gleabadh: 0; crìch: gin; } / * Foirmean * / form {marg: 0; gleabadh: 0; taisbeanadh: in-loidhne; } label {cursor: punter; } / * Clasaichean Coitcheann * / .clear {clear: an dà chuid; } .floatLeft {flùraichean: clì; } .floatRight {flùraichean: deas; } .textLeft {text-align: left; } .textRight {text-align: deas; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {taisbeanadh: bloc; iomall-clì: auto; ceart-taobh: carbad; } / * cuimhnich gun cuir thu leud * / .bold {font-weight: trom; } .italic {font-style: italic; } .underline {sgeadachadh-teacs: foillsich; }. taobh a-staigh {clì-clì: 0; lanadh-chlì: 0; } .nomargin {marg: 0; }. a 'cur suas {padding: 0; } .nobullet {liosta-stoidhle: none; list-style-image: none; }

Artaigil tùsail le Jennifer Krynin. Air a dheasachadh le Jeremy Girard air 10/6/17