{"id":2672,"date":"2015-02-13T10:05:39","date_gmt":"2015-02-13T08:05:39","guid":{"rendered":"http:\/\/jml.kapsi.fi\/jussi\/?page_id=2672"},"modified":"2019-11-14T12:05:28","modified_gmt":"2019-11-14T10:05:28","slug":"www-julkaiseminen-css","status":"publish","type":"page","link":"https:\/\/jml.kapsi.fi\/jussi\/www-julkaisemisen-perusteet\/www-julkaiseminen-css\/","title":{"rendered":"WWW-julkaisemisen perusteet &#8211; CSS"},"content":{"rendered":"\n<ul class=\"www-julkaiseminen-navi wp-block-list\"><li><a title=\"WWW-julkaisemisen perusteet\" href=\"\/jussi\/www-julkaisemisen-perusteet\/\">Etusivu<\/a><\/li><li><a title=\"WWW-julkaisemisen perusteet \u2013 HTML\" href=\"\/jussi\/www-julkaisemisen-perusteet\/www-julkaiseminen-html\/\">HTML<\/a><\/li><li><span class=\"current\">CSS<\/span><\/li><li><a title=\"WWW-julkaisemisen perusteet \u2013 Design\" href=\"\/jussi\/www-julkaisemisen-perusteet\/www-julkaisemisen-perusteet-design\/\">Design<\/a><\/li><li><a title=\"WWW-julkaisemisen perusteet \u2013 Linkit\" href=\"\/jussi\/www-julkaisemisen-perusteet\/www-julkaisemisen-perusteet-linkit\/\">Linkit<\/a><\/li><\/ul>\n\n\n\n<p>CSS (<em>Cascading Style Sheets<\/em>) on kieli, jolla m\u00e4\u00e4ritell\u00e4\u00e4n verkkodokumenttien ulkoasua. CSS-m\u00e4\u00e4ritykset ovat www-selaimelle annettuja ohjeita dokumentin eri elementtien ulkoasun esitt\u00e4miseen. CSS mahdollistaa dokumentin rakenteen ja ulkoasun m\u00e4\u00e4ritysten erottamisen toisistaan. Ulkoasum\u00e4\u00e4ritykset voidaan tehd\u00e4 erilliseen CSS-tiedostoon, johon voidaan viitata kaikilta verkkosivuston yksitt\u00e4isilt\u00e4 sivuilta.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><strong>Tunnilla:<\/strong> K\u00e4yd\u00e4\u00e4n l\u00e4pi kolme erilaista tapaa, joilla CSS-m\u00e4\u00e4rityksi\u00e4 voi liitt\u00e4\u00e4 HTML-dokumenttiin, ja miss\u00e4 tilanteessa mit\u00e4kin tapaa kannattaa k\u00e4ytt\u00e4\u00e4.<\/p><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Viittaaminen ulkopuoliseen CSS-tiedostoon<\/h2>\n\n\n\n<p>Koska sivustolla on v\u00e4hint\u00e4\u00e4n kolme sivua ja tarkoituksena on tehd\u00e4 niille yhten\u00e4inen ulkoasu, kannattaa luoda yksi erillinen CSS-tiedosto, jonka avulla samat ulkoasum\u00e4\u00e4ritykset liitet\u00e4\u00e4n. Selke\u00e4 nimi tiedostolle on esimerkiksi <em>style.css<\/em>. Viittaus luotuun CSS-tiedostoon liitet\u00e4\u00e4n jokaisen HTML-sivun HEAD-elementtiin, mink\u00e4 j\u00e4lkeen www-selain l\u00f6yt\u00e4\u00e4 sivulle tarkoitetut ulkoasum\u00e4\u00e4ritykset:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html>\n&lt;head>\n&lt;meta charset=\"UTF-8\">\n&lt;title>Sivun otsikko&lt;\/title>\n&lt;link href=\"style.css\" rel=\"stylesheet\" type=\"text\/css\">\n&lt;\/head>\n---<\/code><\/pre>\n\n\n\n<p>N\u00e4in toimien on mahdollista yht\u00e4 CSS-tiedostoa muokkaamalla vaikuttaa kaikkien sivuston sivujen ulkoasuun. Esimerkiksi ensimm\u00e4isen tason otsikon eli <code class=\"language-markup\">&lt;h1&gt;<\/code>-elementin ulkoasulle voisi antaa seuraavat ulkoasum\u00e4\u00e4ritykset:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>h1 {\n  color: #666666;\n  background-color: #eeeeee;\n  font-size: 1.5em;\n  border-bottom: 4px solid #999999;\n  font-family: helvetica, sans-serif;\n  padding: 0.5em; }<\/code><\/pre>\n\n\n\n<p>M\u00e4\u00e4ritys vaikuttaa nyt kaikkien niiden sivujen <code class=\"language-markup\">&lt;h1&gt;<\/code>-elementteihin, joihin kyseinen CSS-tiedosto on liitetty.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><strong>Tunnilla:<\/strong> K\u00e4yd\u00e4\u00e4n l\u00e4pi edell\u00e4 mainitut m\u00e4\u00e4ritykset ja niiden vaikutukset. Lis\u00e4t\u00e4\u00e4n erilaisia m\u00e4\u00e4rityksi\u00e4 my\u00f6s muille elementeille. Kirjasimen m\u00e4\u00e4rityksiin liittyen pohditaan muun muassa kiinte\u00e4n ja suhteellisen fonttikoon eroa sek\u00e4 erilaisten fonttien tarkoituksenmukaista k\u00e4ytt\u00f6\u00e4.<\/p><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">M\u00e4\u00e4ritysten kohdistaminen <em>class<\/em>-valitsimella<\/h2>\n\n\n\n<p>Class- eli luokkavalitsimella on mahdollista kohdistaa CSS-m\u00e4\u00e4rityksi\u00e4 eri elementeille. Esim. seuraavassa tekstikappaleessa on kohtia, jotka halutaan korostaa <code class=\"language-markup\">&lt;strong&gt;<\/code>-elementin avulla, mutta toista kohtaa halutaa korostaa viel\u00e4 erityisen painokkaasti:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p>T\u00e4m\u00e4 on tekstikappale, jossa on &lt;strong>t\u00e4rke\u00e4\u00e4&lt;\/strong>\nmutta my\u00f6s &lt;strong>eritt\u00e4in t\u00e4rke\u00e4\u00e4&lt;\/strong> asiaa.&lt;p\/><\/code><\/pre>\n\n\n\n<p>Oletusarvoisesti molemmat <code class=\"language-markup\">&lt;strong&gt;<\/code>-elementit ovat samanarvoisia, ja selain korostaa ne samalla tavalla, mutta <em>class<\/em>-valitsimella elementit voidaan <em>luokitella<\/em> ja erottaa ne toisistaan:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p>T\u00e4m\u00e4 on tekstikappale, jossa on &lt;strong>t\u00e4rke\u00e4\u00e4&lt;\/strong>\nmutta my\u00f6s &lt;strong class=\"huom\">eritt\u00e4in t\u00e4rke\u00e4\u00e4&lt;\/strong>\nasiaa.&lt;p\/><\/code><\/pre>\n\n\n\n<p>Kun toiselle elementille (tai useille elementeille) on m\u00e4\u00e4ritelty oma luokka, voidaan siihen kohdistaa CSS:ss\u00e4 omia ulkoasum\u00e4\u00e4rityksi\u00e4, esim:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>strong.huom {\n  color: #ff0000;\n  background: transparent;\n}<\/code><\/pre>\n\n\n\n<p>Tai pelk\u00e4st\u00e4\u00e4n:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.huom {\n  color: #ff0000;\n  background: transparent;\n}<\/code><\/pre>\n\n\n\n<p>T\u00e4ss\u00e4 esimerkiss\u00e4 <code class=\"language-markup\">&lt;strong class=\"huom\"&gt;<\/code>-elementin halutaan tulostuvan www-selaimessa punaisella v\u00e4rill\u00e4. J\u00e4lkimm\u00e4inen CSS-m\u00e4\u00e4ritys vaikuttaisi my\u00f6s esim. HTML-elementtiin <code class=\"language-markup\">&lt;p&nbsp;class=\"huom\"&gt;<\/code>, koska siin\u00e4 <em>.huom<\/em> -luokkaa ei ole liitetty mihink\u00e4\u00e4n yksitt\u00e4iseen elementtiin. Ensimm\u00e4isen esimerkin <em>strong.huom<\/em> vaikuttaa ainoastaan <code class=\"language-markup\">&lt;strong class=\"huom\"&gt;<\/code> -elementteihin.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><strong>Tunnilla:<\/strong> Perehdyt\u00e4\u00e4n tarkemmin class-valitsimen k\u00e4ytt\u00f6\u00f6n.<\/p><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\"><em>div<\/em>-elementti &#8211; itse m\u00e4\u00e4ritelt\u00e4v\u00e4 lohkoelementti<\/h2>\n\n\n\n<p>Edell\u00e4 tehdyt m\u00e4\u00e4rittelyt on kohdennettu HTML-elementteihin, jotka on valittu k\u00e4ytt\u00f6\u00f6n niiden sis\u00e4ll\u00f6n merkityksen mukaan, esimerkiksi <code class=\"language-markup\">&lt;p&gt;<\/code>-elementti tekstikappaleelle.<\/p>\n\n\n\n<p><code class=\"language-markup\">&lt;div&gt;<\/code>-elementti on joustava lohkoelementti, jonka sis\u00e4ll\u00f6n merkityst\u00e4 m\u00e4\u00e4ritelty. Sit\u00e4 k\u00e4ytet\u00e4\u00e4n runsaasti sivujen asettelun apuna, esimerkiksi silloin kun sivu halutaan jakaa palstoihin. Esierkkisivustolla voidaan sivun varsinainen sis\u00e4lt\u00f6 sulkea oman <code class=\"language-markup\">&lt;div&gt;<\/code>-elemntin sis\u00e4\u00e4n seuraavasti:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html>\n&lt;head>\n&lt;meta charset=\"UTF-8\">\n&lt;title>Sivun otsikko&lt;\/title>\n&lt;link href=\"style.css\" rel=\"stylesheet\" type=\"text\/css\">\n&lt;\/head>\n\n&lt;div class=\"content\">\n\n&lt;h1>Ensimm\u00e4isen tason otsikko&lt;\/h1>\n\n&lt;ul class=\"navigaatio\">\n&lt;li>etusivu&lt;\/li>\n&lt;li>&lt;a href=\"portfolio.html\">portfolio&lt;\/a>&lt;\/li>\n&lt;li>&lt;a href=\"cv.html\">CV&lt;\/a>&lt;\/li>\n&lt;\/ul>\n\n&lt;p>Tekstikappale&lt;\/p>\n\n&lt;\/div>\n\n&lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n\n<p>Nyt k\u00e4yt\u00f6ss\u00e4 on luokkam\u00e4\u00e4rityksell\u00e4 <em>content<\/em> yksil\u00f6ity elementti, joka sis\u00e4lt\u00e4\u00e4 sivun kaiken varsinaisen sis\u00e4ll\u00f6n. CSS:n avulla on mahdollista esimerkiksi korostaa t\u00e4t\u00e4 elementti\u00e4 nostamalla se irti koko sivun taustasta taustav\u00e4rin ja reunuksen avulla:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body {\n  color: #000000;\n  background-color: #eeeeee;\n}\n\n#content {\n  border: 2px solid #999999;\n  color: #333333;\n  background-color: #ffffff;\n  padding: 0.5em;\n  max-width: 40em\n  margin: 2em auto;  \n}<\/code><\/pre>\n\n\n\n<p>Yll\u00e4 mainitussa esimerkiss\u00e4 koko sivun eli <code class=\"language-html\">&lt;body&gt;<\/code>-elementin taustav\u00e4riksi on m\u00e4\u00e4ritelty hyvin vaalea harmaa. Sis\u00e4lt\u00f6 nostetaan esiin taustasta asettamalla <em>content<\/em>-luokkam\u00e4\u00e4rityksell\u00e4 yksil\u00f6idyn <code class=\"language-markup\">&lt;div&gt;<\/code>-elementin taustav\u00e4ri valkoiseksi, m\u00e4\u00e4rittelem\u00e4ll\u00e4 sille tummempi harmaa reunaviiva sek\u00e4 m\u00e4\u00e4rittelem\u00e4ll\u00e4 sille maksimileveys ja automaatinnen marginaali.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><strong>Tunnilla:<\/strong> Elementtien leveyksiin liittyen kiinte\u00e4leveyksisten ja skaalautuvien sivujen eroja ja niihin liittyv\u00e4\u00e4 problematiikkaa.<\/p><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Linkkien ulkoasun m\u00e4\u00e4ritteleminen<\/h2>\n\n\n\n<p>CSS mahdollistaa linkkien ulkoasun muuttamisen. Ulkoasasuehdotukset voi antaa esimerkiksi tuoreelle, vierailemattomalle linkille, vieraillulle linkille ja linkille, jonka p\u00e4\u00e4ll\u00e4 hiiren osoitin on:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>a:link {\n  color: #000099;\n  background: transparent;\n}\n\na:visited {\n  color: #660099\n  background: transparent;\n}\n\na:hover {\n  color: #993333;\n  background-color: #ffff33;\n  text-decoration: none;\n}<\/code><\/pre>\n\n\n\n<p>Nyt linkkien ulkoasu vastaa muilta osin yleisesti k\u00e4yt\u00f6ss\u00e4 olevia oletusarvoja (linkki on sininen, vierailtu linkki violetti), mutta kun hiiren osoitin vied\u00e4\u00e4n linkin p\u00e4\u00e4lle, linkki muuttuu punaiseksi, sen alleviivaus h\u00e4vi\u00e4\u00e4 ja taustav\u00e4ri muuttuu.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><strong>Tunnilla:<\/strong> Perehdyt\u00e4\u00e4n tarkemmin linkkien ulkoasun m\u00e4\u00e4rittelyyn etenkin k\u00e4ytett\u00e4vyyden n\u00e4k\u00f6kulmasta. Mit\u00e4 tulisi ottaa huomioon, ett\u00e4 linkit erottuvat ja toimivat loogisesti.<\/p><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">CSS-m\u00e4\u00e4ritysten kohdistaminen elementin j\u00e4lkel\u00e4iselle<\/h2>\n\n\n\n<p>Viimeinen esimerkki havainnollistaa <strong>CSS-m\u00e4\u00e4ritysten kohdentamisen elementille silloin, kun se sijaitsee jonkin valitun elementin sis\u00e4ll\u00e4.<\/strong> Voisi esimerkiksi olla hy\u00f6dyllist\u00e4 erottaa navigaatio-osion linkit sivujen muista linkeist\u00e4. Navigaatiossa ei esimerkiksi v\u00e4ltt\u00e4m\u00e4tt\u00e4 ole tarpeellista tehd\u00e4 eroa uusien ja vierailluiden linkkien v\u00e4lill\u00e4, koska osio toistuu jokaisella sivulla samanlaisena ja samassa paikassa. Lis\u00e4ksi navigaatiolistan elementtien esitystavan voi muuttaa n\u00e4ytt\u00e4m\u00e4\u00e4n linkin vierekk\u00e4in, ei alekkain:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.navigointi a:link, .navigointi a:visited {\n  color: #000099;\n  background: transparent;\n  text-decoration: none;\n}\n\n.navigointi a:hover {\n  color: #993333; background-color: #ffff33;\n  text-decoration: none;\n}<\/code><\/pre>\n\n\n\n<p>Nyt m\u00e4\u00e4ritykset on kohdistettu ainoastaa luokalla <em>navigointi<\/em> yksil\u00f6idyn elementin sis\u00e4ll\u00e4 oleviin linkkeihin. Tuoreen ja vieraillun linkin m\u00e4\u00e4ritykset on yhdistetty, joten www-selaimen pit\u00e4isi n\u00e4ytt\u00e4\u00e4 ne samanlaisina.<\/p>\n\n\n\n<p>Sitten viel\u00e4 linkit vierekk\u00e4in seuravaan m\u00e4\u00e4rityksen avulla:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>#navigointi li {\n  display: inline;\n  margin-right: 0.5em\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Kokeile ja sovella<\/h3>\n\n\n\n<p>N\u00e4it\u00e4 l\u00e4pik\u00e4ymi\u00e4mme asioita soveltaen voit rakentaa aluillaan olevaa sivustoasi pidemm\u00e4lle. Katso viel\u00e4 pari ulkoasuun liittyv\u00e4\u00e4 vinkki\u00e4 viimeisest\u00e4 osiosta, mink\u00e4 j\u00e4lkeen voit paneutua kurssin loppuajaksi sivujesi tekemiseen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Etusivu HTML CSS Design Linkit CSS (Cascading Style Sheets) on kieli, jolla m\u00e4\u00e4ritell\u00e4\u00e4n verkkodokumenttien ulkoasua. CSS-m\u00e4\u00e4ritykset ovat www-selaimelle annettuja ohjeita dokumentin eri elementtien ulkoasun esitt\u00e4miseen. CSS mahdollistaa dokumentin rakenteen ja ulkoasun m\u00e4\u00e4ritysten erottamisen toisistaan. Ulkoasum\u00e4\u00e4ritykset voidaan tehd\u00e4 erilliseen CSS-tiedostoon, johon voidaan viitata kaikilta verkkosivuston yksitt\u00e4isilt\u00e4 sivuilta. Tunnilla: K\u00e4yd\u00e4\u00e4n l\u00e4pi kolme erilaista tapaa, joilla CSS-m\u00e4\u00e4rityksi\u00e4 voi [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":2668,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2672","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/pages\/2672","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/comments?post=2672"}],"version-history":[{"count":24,"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/pages\/2672\/revisions"}],"predecessor-version":[{"id":4185,"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/pages\/2672\/revisions\/4185"}],"up":[{"embeddable":true,"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/pages\/2668"}],"wp:attachment":[{"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/media?parent=2672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}