Sant imaj, tèks, ak blòk eleman lè bati sou sit entènèt
Si ou ap aprann ki jan yo bati sit entènèt , youn nan ke trik nouvèl yo ki pi komen ou pral bezwen metrize se ki jan yo sant atik nan fenèt navigatè a. Sa a ka vle di santre yon imaj sou paj la, oswa li ta ka sant-jistifye tèks tankou tit kòm yon pati nan konsepsyon an.
Fason ki apwopriye a akonpli sa a vizyèl gade nan imaj santre oswa tèks oswa menm Paj Web tout sa a se lè l sèvi avèk Cascading Style Sheets (CSS) . Pifò nan pwopriyete yo pou Santralizasyon yo te nan CSS depi vèsyon 1.0, epi yo travay gwo ak CSS3 ak navigatè entènèt modèn.
Tankou anpil aspè nan konsepsyon sit entènèt, gen plizyè fason pou itilize CSS nan eleman sant nan yon paj entènèt. Ann pran yon gade nan kèk fason diferan yo sèvi ak CSS reyalize sa a gade vizyèl.
Sou Apèsi sou Sèvi ak CSS nan eleman Sant nan HTML
Santralizasyon ak CSS kapab yon defi pou kòmanse konsèpteur entènèt paske gen anpil fason diferan pou reyalize yon sèl estil vizyèl sa a. Pandan ke varyete nan metòd ka bèl oswa sezonman devlopè entènèt ki konnen ke se pa tout teknik travay sou chak eleman, sa a ka fò anpil defi pou pi nouvo pwofesyonèl entènèt depi varyete nan lajè nan metòd vle di yo bezwen konnen ki lè yo sèvi ak ki apwòch. Bagay ki pi bon fè se jwenn yon konpreyansyon sou kèk apwòch. Kòm ou kòmanse sèvi ak yo, ou pral aprann ki metòd travay pi byen nan ki ka.
Nan yon nivo segondè, ou ka itilize CSS pou:
- Sant tèks
- Sant yon eleman blòk-nivo (tankou yon divizyon)
- Sant yon imaj
- Vètikal sant yon blòk oswa yon imaj
Anpil (anpil) ane de sa, konsèpteur entènèt te kapab itilize eleman
Santre tèks ak CSS
Bagay ki pi fasil nan sant sou yon Paj Web se tèks. Gen yon sèl pwopriyete estil ou bezwen konnen pou fè sa: tèks aliman. Pran style la CSS anba a, pou egzanp:
p.center {tèks aliman: sant; }}
Avèk liy sa a nan CSS, chak paragraf ki ekri ak klas la sant yo ta dwe santre orizontal andedan eleman paran li yo. Pou egzanp, si paragraf la te andedan yon divizyon, sa vle di li te yon timoun nan divizyon sa a, li ta santre orizontal nan andedan
Isit la nan yon egzanp nan klas sa a aplike nan dokiman an HTML:
tèks sa a santre.
Lè santre tèks ak tèks-aliman pwopriyete a, sonje ke li pral santre nan eleman ki genyen li yo epi li pa nesesèman santre nan paj la plen tèt li. Sonje tou ke sant-jistifye tèks ka difisil pou li pou blòk gwo kontni, se konsa itilize sa a style ti kras. Tit yo ak blòk ti tèks, tankou tèks kolye pou yon atik oswa lòt kontni, yo souvan fasil pou li ak amann lè santre, men pi gwo blòk nan tèks, tankou atik la plen tèt li, ta dwe difisil pou konsome si kontni an te konplètman sant jistifye. Sonje byen, lizibilite se toujou kle lè li rive tèks sou sit wèb!
Santralman blòk nan kontni ak CSS
Blòk yo se nenpòt eleman nan paj ou an ki gen yon lajè defini epi yo etabli kòm yon eleman blòk-nivo. Oftentimes, blòk sa yo kreye pa itilize eleman
div.center {
Marge: 0 oto;
lajè: 80em;
}}
Sa a Sten CSS pou pwopriyete a Marge ta mete march yo tèt ak anba nan yon valè 0, pandan y ap kite la ak dwa ta itilize "oto." Sa a esansyèlman pran nenpòt ki espas ki disponib ak divize li respire ant de pati yo nan fenèt la viewport, efektivman santre eleman ki nan paj la.
Isit la li se aplike nan HTML la:
men tèks la anndan li kite aliyen.
Osi lontan ke blòk ou gen yon lajè defini, li pral sant tèt li andedan eleman ki genyen. Tèks ki genyen nan blòk sa a pa pral santre nan li, men yo pral kite-jistifye. Sa a se becaus tèks ki rete-jistifye nan default la nan navigatè entènèt. Si ou te vle tèks la santre kòm byen, ou ta ka itilize pwopriyete a tèks-aliman nou kouvri pi bonè nan konjonksyon avèk metòd sa a nan sant divizyon an.
Santralizasyon Imaj ak CSS
Pandan ke pifò navigateurs yo pral montre imaj santre lè l sèvi avèk menm tèks-aliman pwopriyete a nou deja gade pou paragraf la, li pa yon bon lide konte sou teknik sa kòm li pa rekòmande pa W3C la . Depi li pa rekòmande, gen toujou yon chans ke vèsyon lavni nan navigatè te kapab chwazi yo inyore metòd sa a.
Olye pou yo sèvi ak tèks-aliman sant yon imaj, ou ta dwe klèman di navigatè a ke imaj la se yon eleman blòk-nivo. Fason sa a, ou ka sant li tankou ou ta nenpòt lòt blòk. Isit la se CSS la fè sa a rive:
img.center {
ekspozisyon: blòk;
Marge-bò gòch: oto;
Marge-dwa: oto;
}}
Ak isit la se HTML la ki pou imaj la ke nou ta renmen yo dwe santre:
Ou kapab tou objè sant lè l sèvi avèk nan CSS liy (gade anba a), men apwòch sa a PA rekòmande depi li ajoute estil vizyèl nan marke HTML ou. Sonje byen, nou vle separe style ak estrikti, se konsa ajoute CSS Styles nan Kòd HTML ou a ak repo ke separasyon ak, kòm sa yo, li ta dwe evite kèlkeswa lè sa posib.
Santre Eleman vètikal ak CSS
Santre objè vètikal te toujou difisil nan konsepsyon sit entènèt, men avèk liberasyon CSS Flexible Layout Box modil la nan CSS3, gen kounye a yon fason fè li.
Aliyman vètikal travay menm jan ak aliyman orizontal ki kouvri anwo a. Pwopriyete CSS la vètikal-aliman ak valè presegondè a.
.vcenter {
vètikal-aliman: mwayen;
}}
Inconvénient a apwòch sa a se ke se pa tout navigatè sipò CSS FlexBox, byenke pi plis ak plis ap vini alantou nouvo metòd layout CSS sa a! An reyalite, tout navigatè modèn jodi a sipòte sa a style CSS. Sa vle di ke enkyetid sèlman ou ak Flexbox ta dwe pi gran vèsyon navigatè.
Si w gen pwoblèm ak navigatè ki pi gran, W3C rekòmande ke ou sant tèks vètikal nan yon veso ki itilize metòd sa a:
- Mete eleman yo dwe santre andedan yon eleman ki genyen, tankou yon div.
- Mete yon wotè minimòm sou eleman ki genyen.
- Esplike ki genyen eleman kòm yon selil tab.
- Mete aliyman vètikal la nan "mitan."
Pa egzanp, isit la se CSS la:
.vcenter {
min-wotè: 12em;
ekspozisyon: tabèl selil;
vètikal-aliman: mwayen;
}}
Ak isit la se HTML la:
Tèks sa a vètikal santre nan bwat la.
Vètikal santre ak vèsyon ki pi gran nan Internet Explorer
Gen kèk fason yo fòse Internet Explorer (IE) nan sant ak Lè sa a, sèvi ak kòmantè kondisyonèl pou ke sèlman IE wè estil yo, men yo se yon ti jan entèpretasyon ak lèd. Bon nouvèl la se ke ak desizyon ki sot pase Microsoft a gout sipò pou vèsyon ki pi ansyen nan IE, sa yo Navigatè navigatè yo ta dwe sou wout yo soti byento, fè li pi fasil pou konsèpteur entènèt yo sèvi ak apwòch Layout modèn tankou FlexBox CSS ki pral fè tout layout CSS, pa sèlman santre, pi fasil pou tout konsèpteur entènèt.