{"id":237231,"date":"2022-03-27T16:06:00","date_gmt":"2022-03-27T13:06:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=237231"},"modified":"2022-05-16T10:28:55","modified_gmt":"2022-05-16T07:28:55","slug":"kuinka-loytaa-css-valitsimia-wordpress-sivustoilta","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/kuinka-loytaa-css-valitsimia-wordpress-sivustoilta\/","title":{"rendered":"Kuinka l\u00f6yt\u00e4\u00e4 CSS-valitsimia WordPress-sivustoilta"},"content":{"rendered":"

Jossain vaiheessa ty\u00f6skennelless\u00e4si WordPressin kanssa sinun on harrastettava CSS:\u00e4\u00e4. Laajennus voi pyyt\u00e4\u00e4 sinua toimittamaan CSS-valitsimen\/-luokan, tai haluat ehk\u00e4 mukauttaa osan sivustostasi CSS:ll\u00e4.<\/p>\n

T\u00e4m\u00e4 viesti on tarkoitettu kaikille, joiden on l\u00f6ydett\u00e4v\u00e4 CSS-valitsin sivustostaan.<\/p>\n

Jos olet t\u00e4ysin ep\u00e4varma, mit\u00e4 CSS on ja mihin sit\u00e4 k\u00e4ytet\u00e4\u00e4n, tutustu ensin CSS with WordPress -yleiskatsausimme<\/a>.<\/p>\n

Kuinka l\u00f6yt\u00e4\u00e4 CSS-valitsimia<\/h2>\n

Tarvitset vain yhden ty\u00f6kalun ja sinulla on se jo: selain!<\/p>\n

Jokaisessa selaimessa on joukko kehitt\u00e4j\u00e4ty\u00f6kaluja<\/a>, joita voidaan k\u00e4ytt\u00e4\u00e4 verkkosivuston tutkimiseen. K\u00e4yt\u00e4n Chromea<\/a>, mutta voit k\u00e4ytt\u00e4\u00e4 mit\u00e4 tahansa nykyaikaista selainta. Heill\u00e4 kaikilla on eritt\u00e4in samanlainen ty\u00f6kalusarja.<\/p>\n

Tarkastele sivustosi HTML-koodia<\/h3>\n

Avaa ensin kotisivusi uudessa v\u00e4lilehdess\u00e4.<\/p>\n

Napsauta hiiren kakkospainikkeella mit\u00e4 tahansa sivun kohtaa ja valitse N\u00e4yt\u00e4 l\u00e4hde. T\u00e4m\u00e4 avaa t\u00e4lt\u00e4 n\u00e4ytt\u00e4v\u00e4n sivun uudessa v\u00e4lilehdess\u00e4:<\/p>\n

\"Kuinka<\/a><\/p>\n

Sivuston www.competethemes.com l\u00e4hdekoodi<\/p>\n

T\u00e4m\u00e4 on verkkosivun raaka-HTML. T\u00e4m\u00e4n Google, selaimesi ja kaikki muut ohjelmistot n\u00e4kev\u00e4t vieraillessaan sivustollasi. Se on koodi, jonka selaimesi hahmontaa verkkosivustoksi, jonka kanssa voit olla vuorovaikutuksessa.<\/p>\n

On t\u00e4rke\u00e4\u00e4 ymm\u00e4rt\u00e4\u00e4, ett\u00e4 jokainen sivustosi sivu on tehty t\u00e4llaisesta HTML:st\u00e4.<\/p>\n

Vaikka on hienoa n\u00e4hd\u00e4 koodi verkkosivuston takana, meill\u00e4 on parempi ja hy\u00f6dyllisempi tapa tarkastella sit\u00e4.<\/p>\n

Saat paremman kuvan HTML:st\u00e4<\/h3>\n

Palaa etusivullesi, napsauta hiiren kakkospainikkeella mit\u00e4 tahansa sivun osaa ja valitse t\u00e4ll\u00e4 kertaa "Tarkista" -vaihtoehto (saattaa sanoa "Tarkista elementti"). T\u00e4m\u00e4 avaa selaimesi kehitt\u00e4j\u00e4ty\u00f6kalut ja n\u00e4ytt\u00e4\u00e4 seuraavanlaisen ikkunan:<\/p>\n

T\u00e4m\u00e4 on toinen tapa tarkastella samaa HTML-koodia, jonka n\u00e4it juuri tarkastellessasi l\u00e4hdekoodia. Erona on, ett\u00e4 meill\u00e4 on nyt hierarkia, jonka kanssa voimme navigoida ja olla vuorovaikutuksessa.<\/p>\n

Jos t\u00e4m\u00e4 kaikki n\u00e4ytt\u00e4\u00e4 oudolta ja ylivoimaiselta, se ei haittaa. Tavoitteena ei ole hallita selaimesi kehitt\u00e4j\u00e4ty\u00f6kaluja, vaan l\u00f6yt\u00e4\u00e4 yksi CSS-valitsin sivustolta.<\/p>\n

Navigoi HTML:ss\u00e4<\/h3>\n

Kehitt\u00e4j\u00e4ty\u00f6kaluissasi on vasen puoli ja oikea puoli. Vasemmalla puolella on HTML-koodin hierarkia, jossa voimme navigoida. Oikean puolen voi j\u00e4tt\u00e4\u00e4 kokonaan huomiotta.<\/p>\n

Jos nyt viet hiiren osoittimen HTML-elementtien p\u00e4\u00e4lle kehitt\u00e4j\u00e4ty\u00f6kaluissa, huomaat jotain todella siisti\u00e4. Jokainen elementti korostuu sivulla, kun viet hiiren sen p\u00e4\u00e4lle.<\/p>\n

N\u00e4in p\u00e4\u00e4set helposti haluamaasi elementtiin. Itse asiassa sinun ei todellakaan tarvitse ymm\u00e4rt\u00e4\u00e4 HTML-koodia l\u00f6yt\u00e4\u00e4ksesi etsim\u00e4si elementin.<\/p>\n

On kaksi tapaa p\u00e4\u00e4st\u00e4 nopeasti suoraan kohdistettavaan elementtiin.<\/p>\n

Tapa 1: Navigoi k\u00e4ytt\u00e4m\u00e4ll\u00e4 nuolia<\/h4>\n

Oletetaan, ett\u00e4 minun t\u00e4ytyy p\u00e4\u00e4st\u00e4 linkkiin sivusivullani. Voin napsauttaa hiiren kakkospainikkeella jotakin sivun kohtaa ja k\u00e4ytt\u00e4\u00e4 sitten avattavan valikon nuolia p\u00e4\u00e4st\u00e4kseni linkkiin.<\/p>\n

Joka kerta kun napsautan nuolta, se paljastaa elementin sis\u00e4lt\u00e4m\u00e4t elementit. T\u00e4t\u00e4 tarvitaan usein, mutta seuraava menetelm\u00e4 voi olla viel\u00e4kin helpompi ja nopeampi.<\/p>\n

Tapa 2: Napsauta elementti\u00e4 hiiren kakkospainikkeella<\/h4>\n

Joskus voit valita juuri haluamasi elementin. Voit tehd\u00e4 t\u00e4m\u00e4n napsauttamalla elementti\u00e4 hiiren kakkospainikkeella ja kehitt\u00e4j\u00e4ty\u00f6kalut avautuvat jo korostaen elementti\u00e4.<\/p>\n

N\u00e4in voit navigoida samaan sivutuslinkkiin t\u00e4ll\u00e4 nopeammalla menetelm\u00e4ll\u00e4.<\/p>\n

Hanki CSS-valitsin<\/h3>\n

Kun olet l\u00f6yt\u00e4nyt etsim\u00e4si HTML-elementin, viimeinen vaihe on kopioida CSS-valitsin<\/a>.<\/p>\n

Alla olevassa kuvakaappauksessa n\u00e4et, ett\u00e4 siirr\u00e4n hiiren toisen sivun linkin p\u00e4\u00e4lle.<\/p>\n

\"Kuinka<\/a><\/p>\n

Linkkielementiss\u00e4 on luokka nimelt\u00e4 "sivunumerot", ja luokkaa voidaan k\u00e4ytt\u00e4\u00e4 CSS-valitsimena. Jos joudut kohdistamaan sivutuslinkkeihin, voit k\u00e4ytt\u00e4\u00e4 luokkaa "sivunumerot", koska jokaisessa linkiss\u00e4 on kyseinen luokka.<\/p>\n

Vinkki<\/strong>: Kun kirjoitat CSS:\u00e4\u00e4, kohdistat luokkiin, joiden nimen edess\u00e4 on piste, kuten ".page-numbers". Kun annat laajennukselle luokan, sinun on ehk\u00e4 sis\u00e4llytett\u00e4v\u00e4 piste tai ei.<\/p>\n

L\u00f6yd\u00e4 helposti CSS-valitsimia<\/h2>\n

Yll\u00e4 olevien vaiheiden avulla voit l\u00f6yt\u00e4\u00e4 CSS-luokan mist\u00e4 tahansa sivustosi elementist\u00e4. T\u00e4st\u00e4 on hy\u00f6ty\u00e4, kun muokkaat sivustoasi, ja sit\u00e4 tarvitaan, jotta tietyt laajennukset saadaan toimimaan.<\/p>\n

Jos sinulla on kysytt\u00e4v\u00e4\u00e4 t\u00e4st\u00e4 opetusohjelmasta, l\u00e4het\u00e4 se alla oleviin kommentteihin.<\/p>\n

Paljastus:<\/strong> T\u00e4m\u00e4 viesti saattaa sis\u00e4lt\u00e4\u00e4 kumppanilinkkej\u00e4. Tuotteen ostaminen jonkin n\u00e4ist\u00e4 linkeist\u00e4 tuottaa meille palkkion ilman lis\u00e4kuluja.<\/p>\n

: www.competethemes.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

Jotta voit muokata sivustoasi tai k\u00e4ytt\u00e4\u00e4 tiettyj\u00e4 laajennuksia, sinun on l\u00f6ydett\u00e4v\u00e4 CSS-valitsimet sivustostasi. Opi l\u00f6yt\u00e4m\u00e4\u00e4n mink\u00e4 tahansa valitsimen ryhtym\u00e4tt\u00e4 CSS-asiantuntijaksi.<\/p>\n","protected":false},"author":1,"featured_media":21633,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[550],"tags":[843],"class_list":["post-237231","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mukauta-wordpress","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/237231","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/comments?post=237231"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/237231\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media\/21633"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media?parent=237231"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/categories?post=237231"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/tags?post=237231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}