HTML koda bloka līmeņa elements (piemēram, tīmekļa lapa) tiek rādīts secīgā secībā. Lai mainītu pasūtījumu, lai padarītu lapu izskatīgu pievilcīgāku vai uzlabotu tā lietderību, jums būs jāpārklāj bloki, ieskaitot attēlus, lai ap to tiktu plūst šīs lapas teksts.
Tīmekļa nosacījumos šis efekts ir pazīstams kā "peldošs" attēls. Šis stils tiek panākts ar CSS īpašumu, 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ē.
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:
Paragrāfa teksts skan šeit. Šajā piemērā mums ir galvas fotoattēla attēls, tādēļ šis teksts, visticamāk, būs par personu, kurai ir jābūt headshot.
Pēc noklusējuma mūsu tīmekļa lapa tiek rādīta virs attēla virs teksta, jo 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.
Paragrāfa teksts skan šeit. Šajā piemērā mums ir galvas fotoattēla attēls, tādēļ šis teksts, visticamāk, būs par personu, kurai ir jābūt headshot.
Ievērojiet, ka šī "kreisā" grupa pati par sevi neko nedara. Lai sasniegtu vēlamo stilu, mums nākamajā vietā jāizmanto CSS.
CSS stili
Izmantojot mūsu HTML vietni (ieskaitot mūsu klases atribūtu "pa kreisi"), mēs tagad 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:
. pa kreisi { pludiņš: 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. Neatkarīgi no izmantotā termina HTML jābūt klases atribūtam, kas darbojas ar faktisko CSS stilu, kas nosaka vizuālās izmaiņas, kuras vēlaties veikt. Šī 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, kurā šis attēls atrodas nodaļā ar "galvenā satura" klases vērtību. Lai izveidotu šo attēlu, jūs varētu uzrakstīt šo CSS: Galvenais saturs img { pludiņš: 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 tiek peldē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 apvieno elementa stilu ar tā strukturālo marķējumu. Tiešsaistes paraugprakse diktē, ka lapas stilam un struktūrai jābūt atsevišķai. Šī segregācija ir īpaši noderīga, 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. Alternatīvi veidi, kā sasniegt šos stilus
Paragrāfa teksts skan šeit. Šajā piemērā mums ir galvas fotoattēla attēls, tādēļ šis teksts, visticamāk, būs par personu, kurai ir jābūt headshot. Izvairieties no iekšējiem stiliem
Paragrāfa teksts skan šeit. Šajā piemērā mums ir galvas fotoattēla attēls, tādēļ šis teksts, visticamāk, būs par personu, kurai ir jābūt headshot.
