Setšoantšo sa setsi, se ngotsoeng, 'me u thibe likarolo ha u haha marang-rang
Haeba u ntse u ithuta ho haha mawebsaete , e 'ngoe ea maqheka a tloaelehileng ao u tla hloka ho a tseba ke mokhoa oa ho kenya lintho ka har'a fensetere ea sebapali. Sena se ka bolela ho kenya setšoantšo setšoantšong leqepheng lena, kapa e ka ba setsi-ho lumella litemana tse kang lihlooho joaloka karolo ea moqapi.
Tsela e nepahetseng ea ho finyella ponahalo ena ea pono ea litšoantšo tse bohareng kapa mongolo kapa esita le leqephe la hau kaofela la marang-rang ke ho sebelisa Li-Sheet Style Style (CSS) . Boholo ba thepa ea centering bo 'nile ba CSS ho tloha version 1.0,' me ba sebetsa haholo ka CSS3 le mehleng ea kajeno li-browser .
Joaloka likarolo tse ngata tsa moqapi oa marang-rang, ho na le mekhoa e mengata ea ho sebelisa CSS ho theha likarolo leqepheng la websaete. A re hlahlobeng litsela tse fapaneng tsa ho sebelisa CSS ho finyella ponahalo ena ea ponahalo.
Ka Kakaretso ea Ho Sebelisa CSS ho Setsi sa Elements ka HTML
Ho qala ka CSS ho ka ba phephetso ho qala baqapi ba web hobane ho na le litsela tse ngata tse fapaneng tsa ho finyella mokhoa ona o le mong oa pono. Le hoja mekhoa ea mefuta e fapa-fapaneng e ka 'na ea e-ba e ntle kapa e nang le mekhoa e metle ea liwebsaete tse tsebang hore hase mekhoa eohle e sebetsang ho litho tsohle, sena se ka ba phephetso e tšabehang bakeng sa litsebi tse ncha tsa websaete kaha mekhoa e fapa-fapaneng e bolela hore ba hloka ho tseba hore na ba tla sebelisa nako efe. Ntho e molemo ka ho fetisisa ea ho e etsa ke ho utloisisa litsela tse 'maloa. Ha u qala ho li sebelisa, u tla ithuta hore na ke mokhoa ofe o sebetsang hantle ka ho fetisisa liketsahalong life.
Boemong bo phahameng, o ka sebelisa CSS ho:
- Tlhaloso ea setsi
- Setsi sebopeho sa sephara (joaloka karohano)
- Setsi setšoantšo
- Etsa ka holimo setsi kapa setšoantšo
Lilemong tse ngata (tse ngata) tse fetileng, baetsi ba marang-rang ba ka sebelisa setsi sa
Ho qalisa Text ka CSS
Ntho e bonolo ka ho fetisisa eo u ka e tsebang leqepheng la marang-rang ke mongolo. Ho na le mohala o le mong feela oa setaele seo u lokelang ho se tseba ho etsa sena: ho ngollana ka mongolo. Nka mokhoa oa CSS ka tlase, mohlala:
p.center {text-align: bohareng; }}
Ka moeli ona oa CSS, serapa se seng le se seng se ngotsoeng le sehlopha sa bohareng se tla be se le boemong bo holimo ka hare ho motsoako oa motsoali. Ka mohlala, haeba serapa se ne se le ka hare ho karohano, e bolelang hore e ne e le ngoana oa karohano eo, e ne e tla ba ka hare ho
Mona ke mohlala oa sehlopha sena se sebelisitsoeng tokomaneng ea HTML:
Tlhahiso ena e thehiloe
Ha u qeta ho ngola mongolo o nang le mongolo-ho lumellana le thepa, hopola hore o tla be o le ka hare ho oona o nang le ntho e 'ngoe empa e seng karolo e ka hare ho leqephe le leng le le leng. Hape hopola hore ho na le ntho e boima ho bala litemana tse bohareng ba lihlooho, kahoo sebelisa mokhoa ona ka mokhoa o fokolang. Lihlooho tsa sehlooho le lihlopha tse nyenyane tsa mongolo, tse kang teaser text for an article kapa tse ling tse dikahare, hangata li bonolo ho bala le ho beha ha li tsepamisitsoe, empa likhalo tse kholoanyane tsa mongolo, joaloka sehlooho se feletseng ka boeona, e ka ba phephetso ho ja haeba litaba li ne li le setsi se feletseng e lokile. Hopola, ho bala kamehla ke ntho ea bohlokoa ha ho tluoa tabeng ea websaete ea marang-rang!
Ho kenya li-Blocks tsa Content le CSS
Lithako ke lintho tse ling tse leqepheng la hau tse nang le bophara bo hlalositsoeng 'me li thehiloe e le sebopeho sa sebopeho sa thibelo. Hangata, li-blocks tsena li bōptjoa ka ho sebelisa HTML
div.center {
marge: 0 koloi;
bophara: 80em;
}}
Sekhahla sena sa CSS sa thepa ea marang-rang se ne se tla beha litebelisoa tse ka holimo le tse ka tlase ho bohlokoa ba 0, ha ka ho le letšehali le ka ho le letona ho ka sebelisa "auto." Sena se nka sebaka leha e le sefe se fumanehang 'me se arohana ka tsela e tšoanang pakeng tsa mahlakoreng a mabeli a fensetere ea ho shebella, ka mokhoa o atlehang ho theha karolo e hlahang leqepheng.
Mona e sebelisoa ka HTML:
empa taba e ka hare ho eona e sala e lumellane.
Hafeela sebaka sa hau se na le bophara bo hlalositsoeng, se tla ikemela ka hare ho ntho e nang le eona. Mongolo o ka lebokoseng leo o ke ke oa behoa ka hare ho oona, empa o tla sala o lokile. Ena ke lengolo le ngotsoeng-le utloahala ka ho sa feleng libukeng tsa marang-rang. Haeba o ne o batla hore taba eo e be boemong bo botle, o ka sebelisa thepa-align thepa eo re e tšohliloeng pejana ka mokhoa ona le ho arola karohano.
Ho kenya lifoto ka CSS
Le hoja lipapatso tse ngata li tla bontša litšoantšo tse sebelisitsoeng ho sebelisa thepa e lumellanang le mongolo eo re seng re e shebane le serapa, hase maikutlo a nepahetseng ho itšetleha ka mokhoa oo kaha ha o khothalletsoe ke W3C . Kaha ha e kgothaletswe, kamehla ho na le monyetla wa hore di-browsers tsa nakong e tlang li ka khetha ho hlokomoloha mokhoa ona.
Ho e-na le ho sebelisa mongolo-ho lumellana ho theha setšoantšo, u lokela ho bolella sebapali ka ho hlaka hore setšoantšo ke sebopeho sa litekanyetso. Ka tsela ena, o ka e hohela ka tsela eo u neng u tla e thibela. Mona ke CSS ho etsa hore sena se etsahale:
img.center {
hlahisa: thibela;
marginal-left: koloi;
marginal-right: auto;
}}
Hona ke HTML eo e leng setšoantšo seo re ka ratang ho ba le sona:
U ka boela ua beha lintho tse sebelisoang ka Inthaneteng CSS (bona ka tlase), empa mokhoa ona ha o buelloe kaha o eketsa mekhoa ea pono ea hau ka tatellano ea hau ea HTML. Hopola, re batla ho arola mokhoa oa sebopeho le sebopeho, kahoo o eketsa mekhoa ea CSS ho HTML ea hau ka khefu hore karohano e be e lokelang ho qojoa ha ho khoneha.
Lisebelisoa tsa Motheo Ho latela Vertically le CSS
Ho kenya lintho ka lehlakoreng le leng kamehla ho 'nile ha e-ba thata ka ho qaptjoa ha websaete, empa ka ho lokolloa ha Module ea CSS Flexible Box Layout ka CSS3, hona joale ho na le tsela ea ho e etsa.
Ho lumellana ka tsela e tšoanang ho sebetsa ka mokhoa o tšoanang le ho lumellana ho holimo ho koahetsoeng ka holimo. Thepa ea CSS e totobetse-e lumellane le bohlokoa ba bohareng.
. {
ho lekana ho lekana: bohareng;
}}
Ho nyahama ho mokhoa ona ke hore hase bohle ba libapali ba tšehetsang CSS FlexBox, le hoja ba bangata ba ntse ba tla ho mokhoa ona o mocha oa mokhoa oa CSS! Ha e le hantle, li-browser tsa kajeno tsa kajeno li tšehetsa mokhoa ona oa CSS. Sena se bolela hore lintho tsa hau feela tse amehang ka Flexbox e ka ba phetolelo ea khale ea sebapali.
Haeba u na le mathata le li-browser tsa khale, W3C e khothalletsa hore u behe litemana ka holimo ka setsing ho sebelisa mokhoa o latelang:
- Beha lisebelisoa hore li behe ka hare ho ntho e nang le eona, e kang div.
- Beha bophahamo ba bonyane ho se nang le ntho.
- Bolela hore o na le ntho e kang sele ea tafole.
- Beha ho lumellana ha molumo ho "bohareng."
Ka mohlala, mona ke CSS:
. {
bolelele ba metsotso: 12em;
bonts'a: tafole-sele;
ho lekana ho lekana: bohareng;
}}
Hona mona ke HTML:
Mongolo ona o sekametse ka lebokoseng.
Centering Vertical le Older Versions tsa Internet Explorer
Ho na le litsela tse ling tsa ho qobella Internet Explorer (IE) hore e be bohareng ebe o sebelisa maikutlo a mangoloo e le hore feela IE e bone mekhoa, empa e batla e le ea bolutu le e fosahetseng. Litaba tse monate ke hore ka qeto ea morao-rao ea Microsoft ea ho tlohela tšehetso ea liphetolelo tsa khale tsa IE, li-browser tse sa tšehetsoeng li lokela ho ba tseleng ea bona kapele, ho nolofaletsa baetsi ba liwebsaete ho sebelisa mekhoa ea mekhoa ea mekhoa ea mehleng ea kajeno joaloka CSS FlexBox e tla etsa hore bohle ba CSS, eseng feela ho ipehela pele, ho bonolo haholo ho bohle ba etsang liwebsaete tsa marang-rang.