https://peda.net/id/644c60883d3 2017-05-20T12:04:55+03:00 https://peda.net/:static/537/peda.net.logo.bg.svg <div class="license">Tämän sivun lisenssi <a rel="license" href="https://peda.net/info">Peda.net-yleislisenssi</a></div> https://peda.net/id/6d2978303d3 2024-04-23T09:22:41+03:00 <table class="module m2975117 type_text" border=""><!--filtered attribute: cellspacing="0"--><!--filtered attribute: cellpadding="0"--> <tbody> <tr> <td class="moduleheader"> <h3>CSS-tyylitiedoston teko</h3> </td> </tr> <tr> <td class="modulecontent">Luo resurssienhallinnassa <b>tyyli.css</b> <b>kotisivujen kansioon</b> klikkaamalla hiiren oikealla näppäimellä ja valitsemalla <b>Uusi --&gt; Tekstitiedosto</b>. Varmista, että Näytä-valikossa on ruksi kohdassa <b>Tiedostotunnisteet</b> (ks. kuva alla).<br/> <br/> <b>Kopioi Listamaticista</b> valitsemasi <b>navigoinnin CSS-osuus</b> tyyli.css-tiedostoon ja tallenna <b>Tiedosto --&gt; Tallenna</b> (ctrl + s) .<br/> <br/> <b>Lisää nettisivun html-koodin rivi</b><br/> &lt; link rel=&quot;stylesheet&quot; href=&quot;tyyli.css&quot; type=&quot;text/css&quot; &gt;<br/> &lt; HEAD&gt;&lt; /HEAD&gt; -tagien väliin<br/> <br/> (muista poistaa ylimääräiset välilyönnit &lt; merkkien jälkeen)<br/> <br/> <br/> </td> </tr> </tbody> </table> <div class="h_filler"> </div> <table class="module m2975118 type_text" border=""><!--filtered attribute: cellspacing="0"--><!--filtered attribute: cellpadding="0"--> <tbody> <tr> <td class="moduleheader"> <h3>CSS - tietoa</h3> </td> </tr> <tr> <td class="modulecontent">CSS:n avulla www-sivujen muotoilu helpottuu huomattavasti. CSS-tiedostossa määritellään www sivuston muotoilut ja itse sisältö löytyy HTML-tiedostosta. CSS:n voi sisällyttää HTML-tiedostoonkin, mutta em. mainittu tapa on selkeämpi.<br/> <br/> Esimerkki otsikkotyylin 1 muotoilusta CSS-tyylitiedostossa:<br/> <br/> h1 {<br/> text-align: left; /*<b> tasaus vasemmalle </b>*/<br/> margin-left: 0.5em;<br/> font-weight:bold; /*<b> lihavointi </b>*/<br/> <br/> Kommentoi CSS-koodisi, jotta sen muokkaaminen on helppoa myöhemminkin. Kommentit tulevat<br/> /*<b> ja </b>*/ merkkien väliin, ks. yllä.<br/> <br/> Esimerkkejä CSS-tyylitiedoston vaikutuksesta www-sivun ulkonäköön:<br/> <a href="http://www.cs.tut.fi/~jkorpela/vompatit/index.html" rel="noopener nofollow ugc" target="_blank"><span class="editor underline">http://www.cs.tut.fi/~jkorpela/vompatit/index.html</span></a> (Vompattisivu)<br/> <br/> <br/> ASCII-art, eli kirjaimista, numeroista ja erikoismerkeistä piirretyt kuvat &amp; logot ovat tuttuja tietokoneiden alkuajoilta. CSS antaa niillekin aivan uuden ilmeen. Katso vaikkapa merkkien O|\\|\\\\((8ooo((8oooo))boOoooooo)boOooooooooo///?????___???CCO avulla piirretty Homer Simpson: <a href="http://nedbatchelder.com/blog/200805/css_homer_animated.html" rel="noopener nofollow ugc" target="_blank"><span class="editor underline">http://nedbatchelder.com/blog/200805/css_homer_animated.html</span></a> .</td> </tr> </tbody> </table> <div class="h_filler"> </div> <table class="module m2975119 type_links" border=""><!--filtered attribute: cellspacing="0"--><!--filtered attribute: cellpadding="0"--> <tbody> <tr> <td class="moduleheader"> <h3>Linkit</h3> </td> </tr> <tr> <td class="modulecontent"> <table><!--filtered attribute: cellspacing="0"--><!--filtered attribute: cellpadding="0"--> <tbody> <tr> <td class="contentcell"> <div class="contenttitle"><a href="http://css.maxdesign.com.au/index.htm" rel="noopener nofollow ugc" target="_blank"><span class="editor underline">maxdesign</span></a></div> CSS mukana mm. navigaation toteutuksessa.</td> </tr> <tr> <td class="contentcell"> <div class="contenttitle"><a href="http://phoenity.com/newtedge/horizontal_nav/" rel="noopener nofollow ugc" target="_blank"><span class="editor underline">CSS horizontal navigation list</span></a></div> Tyylikäs vaakatasoinen navigaatio.</td> </tr> <tr> <td class="contentcell"> <div class="contenttitle"><a href="http://koti.mbnet.fi/~petepe/petepeweb.htm" rel="noopener nofollow ugc" target="_blank"><span class="editor underline">Petepeweb</span></a></div> Petepeweb on Internet-tekniikoihin erikoistunut sivusto, jonka tarkoitus on jakaa suomenkielistä tietoutta eri WWW-tekniikoista.</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> 2017-05-20T12:05:10+03:00