{"id":238696,"date":"2022-04-06T13:00:00","date_gmt":"2022-04-06T10:00:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=238696"},"modified":"2021-10-27T05:43:32","modified_gmt":"2021-10-27T02:43:32","slug":"mika-on-css-ja-miten-se-vaikuttaa-wordpressiin","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/mika-on-css-ja-miten-se-vaikuttaa-wordpressiin\/","title":{"rendered":"Mik\u00e4 on CSS ja miten se vaikuttaa WordPressiin?"},"content":{"rendered":"

Jos k\u00e4yt\u00e4t WordPress-sivustoa, kohtaat varmasti termin "CSS". T\u00e4ss\u00e4 viestiss\u00e4 opit, mit\u00e4 CSS on ja miten se vaikuttaa sivustoosi.<\/p>\n

T\u00e4m\u00e4 on nopea yleiskatsaus, joten et opi kirjoittamaan CSS:\u00e4\u00e4, mutta ymm\u00e4rr\u00e4t sen paikan verkossa ja sivustollasi.<\/p>\n

Mik\u00e4 on CSS?<\/h2>\n

CSS:\u00e4\u00e4 k\u00e4ytet\u00e4\u00e4n verkkosivujen tyyliin. Se on kirjoitettu pelk\u00e4st\u00e4\u00e4n verkkosivuston ulkoasun muuttamiseksi.<\/p>\n

Katso t\u00e4m\u00e4 kuvakaappaus osoitteesta IMDb.com:<\/p>\n

\"Mik\u00e4<\/a><\/p>\n

Kuvakaappaus 1: IMDb<\/p>\n

Vertaa nyt t\u00e4t\u00e4 t\u00e4h\u00e4n kuvakaappaukseen IMDb:st\u00e4 CSS ollessa pois p\u00e4\u00e4lt\u00e4:<\/p>\n

\"Mik\u00e4<\/a><\/p>\n

Kuvakaappaus 2: IMDb \u2013 Ei CSS:\u00e4\u00e4<\/p>\n

Ei niin kaunis, eik\u00f6?<\/p>\n

Sis\u00e4lt\u00f6 \u2013 sanat, linkit jne. \u2013 on t\u00e4sm\u00e4lleen sama molemmissa esimerkeiss\u00e4. Erona on ilmeinen tyylin puute.<\/p>\n

Kuvakaappauksessa 2 on luettelo linkeist\u00e4, jotka tavallisesti muotoiltaisiin valikoilta.<\/p>\n

Kun sanoin, ett\u00e4 CSS:\u00e4\u00e4 k\u00e4ytet\u00e4\u00e4n verkkosivujen tyyliin, tarkoitan, ett\u00e4 se on tapa, jolla verkkosivut muotoillaan. Ilman sit\u00e4 kaikki sivustot n\u00e4ytt\u00e4isiv\u00e4t yll\u00e4 olevan kuvakaappauksen kaltaisilta. T\u00e4m\u00e4 her\u00e4tt\u00e4\u00e4 kysymyksen, mit\u00e4 me n\u00e4emme tuossa kuvakaappauksessa?<\/p>\n

Rakennettu HTML:ll\u00e4, tyylitelty CSS:ll\u00e4<\/h3>\n

Ymm\u00e4rt\u00e4\u00e4ksesi CSS:n paikan verkossa, sinun on tiedett\u00e4v\u00e4 HTML.<\/p>\n

T\u00e4lt\u00e4 n\u00e4ytt\u00e4\u00e4 raaka-HTML samassa IMDb-kotisivun osassa:<\/p>\n

\"Mik\u00e4<\/a><\/p>\n

Kuvakaappaus 3: IMDb \u2013 HTML<\/p>\n

Kuvakaappauksessa 3 n\u00e4et HTML-koodin, jota usein kutsutaan "l\u00e4hdekoodiksi". T\u00e4st\u00e4 nettisivut tehd\u00e4\u00e4n. Se on se, mit\u00e4 selaimesi lukee ja mit\u00e4 Googlebot n\u00e4kee indeksoidessaan sivustoasi.<\/p>\n

Kun vierailet verkkosivulla, selaimesi ottaa raaka-HTML-koodin (kuvakaappaus 3) ja luo k\u00e4ytt\u00f6kelpoisen verkkosivun (kuvakaappaus 2). Jos CSS-tiedostoja on, ne ladataan ja niit\u00e4 k\u00e4ytet\u00e4\u00e4n verkkosivun tyyliin (kuvakaappaus 1).<\/p>\n

CSS WordPressill\u00e4<\/h2>\n

Yhteenvetona voidaan todeta, ett\u00e4 sivustot on tehty HTML:ll\u00e4 ja tyylitelty CSS:ll\u00e4. WordPress-sivustosi ei ole erilainen.<\/p>\n

K\u00e4yt\u00e4nn\u00f6ss\u00e4 on hy\u00f6dyllist\u00e4 tiet\u00e4\u00e4, ett\u00e4 HTML:\u00e4\u00e4 k\u00e4ytet\u00e4\u00e4n sis\u00e4ll\u00f6n lis\u00e4\u00e4miseen sivulle ja CSS:\u00e4\u00e4 aina sen tyyliin. Kaikki tyylimuutokset, joita haluat tehd\u00e4 sivustollesi \u2013 suurentaa logon kokoa, muuttaa taustav\u00e4ri\u00e4 jne. \u2013 tehd\u00e4\u00e4n CSS:ll\u00e4.<\/p>\n

Toivottavasti t\u00e4m\u00e4 auttaa ymm\u00e4rt\u00e4m\u00e4\u00e4n CSS:\u00e4\u00e4 ja sen paikkaa sivustossasi. Jos sinulla on kysytt\u00e4v\u00e4\u00e4, l\u00e4het\u00e4 ne 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":"

Jos k\u00e4yt\u00e4t WordPress-sivustoa, kohtaat varmasti termin ”CSS”. T\u00e4ss\u00e4 viestiss\u00e4 opit, mit\u00e4 CSS on ja miten se vaikuttaa sivustoosi.<\/p>\n","protected":false},"author":1,"featured_media":261699,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[550],"tags":[843],"class_list":["post-238696","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\/238696","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=238696"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/238696\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media\/261699"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media?parent=238696"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/categories?post=238696"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/tags?post=238696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}