Kushandisa CSS kurongedza mufananidzo kune rumwe rutivi rworuboshwe rwekutepa peji yewebhu
Tarisa panenge peji peji rebhusi nhasi uye uchaona kusanganiswa kwemashoko nemifananidzo zvichiita huwandu hwemaji iwayo. Zviri nyore kuwedzera mavara uye mifananidzo kune peji . Musoro wacho unodhindwa uchishandisa standard HTML tags sendima, mazita, uye misoro, apo mifananidzo inosanganisira kushandisa chinhu .
Iko kukwanisa kuita zvinyorwa uye izvozvi zvifananidzo zvinoshanda zvakanaka pamwe chete ndizvo zvinoita kuti web designers vasarudze! Iwe hausi kungoda kuti mifananidzo yako nemifananidzo zvioneke imwe pashure pechimwe, iyo ndiyo nzira iyo mabhii-level ezvo achagadzirisa nekutadza. Aiwa, iwe unoda kudzora kuti zvinyorwa nemifananidzo zvinotenderera sei mune zvichazove iwe webhusaiti yako inoonekwa.
Kuva nechimiro chinowirirana nechokuruboshwe chepeji apo mutsara wejiji iyo inoyerera ichikomberedza iyo inowanzogadzirwa mushonga wezvinyorwa zvakagadziridzwa uyewo pamapeji ewebhu. Mukutaura kwehutano , izvi zvinozivikanwa sechichikwira chifananidzo . Iyi tsika inowanikwa neCSS pfuma ye "float". Iyi pfuma inobvumira mharidzo kuti iyerere yakapoteredza mufananidzo wakasara-wakatarisana kurudyi rwayo. (Kana kupoteredza mufananidzo wakarurama-wakatarisana kuruboshwe rwayo.) Ngationei kuti tingaita sei izvi zvinoonekwa.
Tanga ne HTML
Chinhu chokutanga chamunofanira kuita ndechei HTML yekushanda nayo. Nokuda kwemuenzaniso wedu, tinonyora ndima yemashoko uye kuwedzera mufananidzo pakutanga kwemavara (tisati tanyora, asi mushure mokuzarura
tag). Heino izvo izvo HTML markup inoita se:
Nekusavapo, peji yedu yewebhu ingaratidza nemufananidzo pamusoro pezvinyorwa. Izvi ndezvokuti mifananidzo yakavhara-level zvinhu mu HTML. Izvi zvinoreva kuti shanduro inoratidzira mitsetse yakatarisana mushure mokunge uye shure kwechikamu chechifananidzo chisipo. Tichashandura kutarisa kusingaoneki nekutsvaga kuCSS. Chokutanga, zvisinei, tichawedzera kirasi kukosha kumufananidzo wedu . Chikoro ichocho chichaita se "hook" yatichashandisa muCSS yedu gare gare.
Cherechedza kuti boka iri re "kuruboshwe" hariiti chinhu chairo pachako! Kuti isu tiwane mararamiro edu aidikanwa, tinofanira kushandisa CSS inotevera.
CSS Styles
Ne HTML yedu munzvimbo, kusanganisira maitiro edu ekirasi ye "kuruboshwe", isu zvino tinokwanisa kutendeukira kuCSS. Tinogona kuwedzera mutemo kumatsetseetheni edu anokwanisa kutenderera chifananidzo ichocho uyezve kuwedzera padding duku pedyo nayo kuitira kuti rugwaro rwacho ruchazopoteredza chifananidzo harukanganisi zvakare. Heino CSS unogona kunyora:
.left {float: kuruboshwe; padding: 0 20px 20px 0; }Iyi nzira inotenderera ichi chifananidzo kuruboshwe uye inowedzera padding duku (kushandisa imwe CSS shorthand) kurudyi uye pasi pechifananidzo.
Kana iwe ukaongorora peji iri rine iyi HTML mumushanduri, chifananidzo chakanga chave chichienzaniswa nechokuruboshwe uye zvinyorwa zvendima zvingaratidzika kune zvakakwana nehuwandu hwakaenzana hwokuparadzaniswa pakati pezviviri. Cherechedza kukosha kwekirasi ye "kuruboshwe" yatakashandisa isinganzwisisi. Tingave takazvitumidza chero chinhu nokuti izwi rokuti "kuruboshwe" hariiti chinhu pacharo. Izvi zvinoda kuva nechikwata chekirasi mu HTML inoshanda neCss chaiyo chaiyo inotarisa maonero ekuona iwe uri kutsvaga kuita.
Nzira Dzakasiyana-siyana dzekuwana maStyles aya
Iyi nzira yekupa mufananidzo wechinhu chikwata chechikoro uye zvino kushandisa shanduro yeCSS yakawanda inotenderera iyo chinhu ndeimwe nzira yaungagona kuita nayo "chisikwa chakasimirirwa" kutarisa. Iwe unogonawo kutora kirasi kukosha kwechimiro uye chimiro chacho neCSS nekunyora imwe sarudzo chaiyo. Semuenzaniso, ngatitarirei muenzaniso apo chifananidzo ichocho chiri mukati mekuparadzanisa nekirasi rinokosha re "main-content".
Kuti utaure chifananidzo ichi, unogona kunyora CSS iyi:
.main-content img {float: kuruboshwe; padding: 0 20px 20px 0; }Mune sceario iyi, chimiro chedu chinenge chichienzaniswa nechokuruboshwe, uye zvinyorwa zvichitenderera zvakapoteredza sepakutanga, asi hatina kuwedzera kuwedzera kwechikwata chechikoro kusvika pamakona edu. Kuita izvi pachikwereti kunogona kubatsira kusika duku ye HTML faira, iyo ichava nyore kugadzirisa uye inogonawo kubatsira kuvandudza kushanda.
Pakupedzisira, unogona kuwedzera maitiro acho zvakananga ku HTML yako markup, seizvi:
Iyi nzira inonzi " inline mafaira ". Hazvibvumirwi nokuti zvinonyatsobatanidza chimiro chechimwe chinhu uye chimiro chayo. IWebhu yakanakisisa maitiro anoita kuti chimiro uye chimiro che peji chirambe chichiparadzaniswa. Izvi zvinonyanya kubatsira apo peji rako rinofanira kuchinja mararamiro aro uye kutarisa masikirwo akasiyana-siyana e-screen nemashandisi ane webhusaiti yekubvuma. Kuva netsika ye peji yakapindirana mu HTML ichaita kuti zvive zvakaoma zvikuru kunyora mharidzo yevhidhiyo iyo ichagadzirisa kutaridzika kwewebsite yako sezvinodikanwa kune zvikwangwani zvakasiyana.
Nyaya yekutanga naJennifer Krynin. Yakarongedzwa naJeremy Girard musi we4/3/17.