CSS izmantošana, lai izlīdzinātu attēlu tīmekļa lapas izkārtojuma kreisajā pusē
Šodien izskatās gandrīz jebkura tīmekļa lapa, un jūs redzēsiet tekstu un attēlus, kas veido lielāko daļu no šīm lapām. Lapā ir viegli pievienot tekstu un attēlus . Teksts tiek kodēts, izmantojot standarta HTML tagus, piemēram, punktus, sarakstus un virsrakstus, kamēr attēli tiek iekļauti, izmantojot elementu .
Spēja padarīt šo tekstu un šos attēlus strādāt kopā ir tas, ko nosaka lieliski web dizaineri, izņemot! Jūs ne tikai vēlaties, lai jūsu teksts un attēli parādās viens pēc otra, tas ir, kā šie bloķēšanas līmeņa elementi pēc noklusējuma tiek izkārtoti. Nē, jūs vēlaties kontrolēt, kā teksts un attēli plūst kopā, kas galu galā būs jūsu vietnes vizuālais dizains.
Ja attēls ir izlīdzināts ar lapas kreiso pusi, kamēr lapas teksts plūst, tā ir kopēja dizaina apstrāde drukātajam dizainam un arī tīmekļa lapām. Tīmekļa nosacījumos šis efekts ir pazīstams kā attēla peldošs . Šis stils tiek panākts, izmantojot CSS īpašību, lai tas būtu "peldošs". Šis īpašums ļauj tekstu plūsmu pa kreiso izlīdzinātā attēla labajā pusē. (Vai ap taisnu izlīdzinātu attēlu tā kreisajā pusē.) Apskatīsim, kā sasniegt šo vizuālo efektu.
Sāciet ar HTML
Pirmā lieta, kas jums jādara, ir ar kādu HTML strādāt. Mūsu piemērā mēs rakstīsim teksta rindiņu un pievienosim attēlu rindkopas sākumā (pirms teksta, bet pēc atvēršanas
tag). Tālāk ir parādīts, kā izskatās HTML marķējums:
Pēc noklusējuma mūsu tīmekļa lapa tiek rādīta virs attēla virs teksta. Tas ir tāpēc, ka attēli ir bloka līmeņa elementi HTML. Tas nozīmē, ka pārlūks parāda līnijas pārtraukumus pirms un pēc attēla elementa pēc noklusējuma. Mēs mainīsim šo noklusējuma izskatu, pagriežot uz CSS. Pirmkārt, mēs pievienosim klases vērtību mūsu attēla elementam . Šī klase darbosies kā "āķis", kuru mēs izmantosim mūsu CSS vēlāk.
Ievērojiet, ka šī "kreisā" klases grupa pati par sevi neko nedara; Lai sasniegtu vēlamo stilu, mums nākamajā vietā jāizmanto CSS .
CSS stili
Izmantojot HTML vietni, tostarp mūsu klases atribūtu "pa kreisi", tagad mēs varam vērsties pie CSS. Mēs pievienotu noteikumu savai stilu lapai, kas varētu peldēt šo attēlu un arī pievienot mazliet polsterējumu blakus tam, lai teksts, kas galu galā aptītu attēlu, nav pārāk cieši saistīts ar to. Šeit ir CSS, kuru jūs varat rakstīt:
.pauda (peldēt: pa kreisi; polsterējums: 0 20px 20px 0; }Šis stils plūst šo attēlu pa kreisi un pievieno nedaudz polsterējumu (izmantojot kādu CSS stenogrāfiju) attēla labajā un apakšējā daļā.
Ja pārlūkprogrammā pārlūkprogrammā pārskatījāt lapu, kurā ir šis HTML, attēls tagad ir izlīdzināts pa kreisi, un šī punkta teksts šķiet pareizs ar atbilstošu atstarpi starp diviem. Ņemiet vērā, ka klases vērtība "left", ko mēs izmantojām, ir patvaļīga. Mēs varētu to nosaukt par kaut ko, jo termins "pa kreisi" pats par sevi nedara. Tam HTML klases atribūts, kas darbojas ar faktisko CSS stilu, kas nosaka vizuālās izmaiņas, kuras jūs vēlaties veikt.
Alternatīvi veidi, kā sasniegt šos stilus
Šī pieeja, piešķirot attēla elementam klases atribūtu un pēc tam izmantojot vispārējo CSS stilu, kas plūst elementu, ir tikai viens veids, kā jūs varētu paveikt šo izskatu, kas izlīdzināts pa kreisi. Jūs varētu arī noņemt klases vērtību no attēla un veidot to ar CSS, rakstot precīzāku atlasītāju. Piemēram, apskatīsim piemēru, ja šis attēls ir sadalījuma iekšpusē ar klases "galvenā satura" vērtību.
Lai izveidotu šo attēlu, jūs varētu uzrakstīt šo CSS:
Galvenais saturs img (peldēt: pa kreisi; polsterējums: 0 20px 20px 0; }Šajā scenārijā mūsu attēls tiks izlīdzināts pa kreisi, un teksts tāpat kā pirms tam ir pārpludināts, taču mums nav jāpievieno papildu atzīmes vērtība. To darot pēc apjoma, var palīdzēt izveidot mazāku HTML failu, kas būs vieglāk pārvaldāms un var arī palīdzēt uzlabot veiktspēju.
Visbeidzot, jūs pat varētu pievienot stilus tieši savā HTML marķējumā, piemēram, šādi:
Šo metodi sauc par " inline styles ". Tas nav ieteicams, jo tas skaidri apvieno elementa stilu ar tā strukturālo iezīmējumu. Tiešsaistes paraugprakse diktē, ka lapas stilam un struktūrai jābūt atsevišķai. Tas ir īpaši noderīgi, ja jūsu lapai ir jāmaina izkārtojums un jāizmeklē atšķirīgi ekrāna izmēri un ierīces ar atsaucīgu vietni. Izmantojot HTML stilā sajaukto lapu stilu, būs daudz grūtāk veidot multivides vaicājumus , kas pielāgos jūsu vietnes izskatu pēc nepieciešamības šiem dažādajiem ekrāniem.
Jennifera Krīnina oriģinālais raksts. Rediģējis Jeremijs Girards 4./3./17.