CSS. Miten aloittaa?

Tavallista tyhmempi

Minulla on kotisivut ja ne olen tehnyt pelkästään html:ää käyttäen. Kun haluan muuttaa sivuni erinlaisiksi niin tulee vastaan aika iso työ. Tajuan, että CSS on vastaus tähän, mutta millä nyt kannattaa aloittaa: CSS1:llä tai CSS2:lla. Löydän kyllä oppaita, siis suomenkielisiä netistä vaikka kuinka paljon. Ongelmaksi muodostuu minulla se, että oon näiden kaikkien ohjeiden kanssa ihan sekaisin. Onko CSS1 vanhentunut? Pitääkö käyttää CSS2:sta vai miten teen. Pyydän ystävällisesti apua teiltä viisaammilta. Kiitos!

9

1673

    Vastaukset

    Anonyymi (Kirjaudu / Rekisteröidy)
    5000
    • Höpö.

      css2 sisältää kaiken saman kuin css1 plus lisämäärityksiä. Css1 ei siis ole vanhentunut.
      Nykyselaimet tukevat jo varsin hyvin molempia css-tasoja.
      On myös olemassa css3 joka sisältää edelleen uusia ominaisuuksia. Näitä ei varmaan selaimet vielä juurikaan tue.

      Itse käytän editorina TopStylea, jonka kevytversio (lite) on ilmainen. Siinä näkee kätevästi mitkä ominaisuudet sisältyvät molempiin css-versioihin ja mitkä ainoastaan css1:een.
      Lisäksi siinä on merkitty mitä ominaisuuksia mitkäkin selaimet eivät tue ja mitä tukevat vain osittain. Nämä kyllä kannattaa aina tarkistaa koekatselemalla itse selaimilla.

      http://www.newsgator.com/NGOLProduct.aspx?ProdId=TopStyle&ProdView=lite


      Kun siirryt css:n käyttöön, niin siirry samantien KOKONAAN. Jätä siis pois KAIKKI html:llä tehdyt ulkoasuun vaikuttavat määritykset. Toisin sanoen:
      tee sivut ainoastaan Strictillä html:llä.

      Lisäksi kannattaa miettiä mahdollisimman tarkkaan mitä mahdollisesti haluat myöhemmin määritellä css:llä. Suunnittele siis sivut niin että rakenne on oikeasti looginen ja laita elementteihin valmiiksi kunnon id- ja class-tunnukset.

    • Poro1

      Miten siis aloittaa?
      Noh, kun teet css tiedoston, ei siihen tule mitään html koodia, vain ainoastaan css koodia.
      Jokaiseen sivuun, johon haluat css tiedoston vaikuttavan pitää laittaa osioon linkki css tiedostoon:

      Tällöin css tiedoston muuttaminen vaikuttaa kyseisiin sivuihin, etkä joudu tekemään joka sivulle samaa työtä.

      Jos enkku taipuu niin hyvä paikka opiskella on:
      http://www.w3schools.com/css/css_examples.asp
      Voit itse testailla muutoksia ja niiden vaikutuksia.

      Onnea hommaan! Ja kysy ihmeessä lisää jos siltä tuntuu...

      :)

      • Tavallista tyhmempi

        Kiitos teille asiallisista vastauksista, on niistä ollut apua.
        Englannin kieli ei taivu oikein hyvin, mutta ymmärrän kyllä jotakin tältä sivulta http://www.w3schools.com/css/css_examples.asp
        En vaan löydä vastausta seuraavaan: Minulla on sivu mihin tulee aluksi sivun pääotsikko ja sitten seuraavaksi vaakasuoraan linkkirivi. Sitten vielä tulee sivun alaotsikko; nämä on OK. Sitten minun pitää pystyä jakamaan loppu sivusta kolmeen pystysuuntaiseen, tasalevyiseen osaan mihin tulee tekstiä kuhunkin ja tätä en ymmärrä miten sen saan sen aikaiseksi. Onko "div" se juttu millä määritän sen ja mitenkä?


      • Höpö.
        Tavallista tyhmempi kirjoitti:

        Kiitos teille asiallisista vastauksista, on niistä ollut apua.
        Englannin kieli ei taivu oikein hyvin, mutta ymmärrän kyllä jotakin tältä sivulta http://www.w3schools.com/css/css_examples.asp
        En vaan löydä vastausta seuraavaan: Minulla on sivu mihin tulee aluksi sivun pääotsikko ja sitten seuraavaksi vaakasuoraan linkkirivi. Sitten vielä tulee sivun alaotsikko; nämä on OK. Sitten minun pitää pystyä jakamaan loppu sivusta kolmeen pystysuuntaiseen, tasalevyiseen osaan mihin tulee tekstiä kuhunkin ja tätä en ymmärrä miten sen saan sen aikaiseksi. Onko "div" se juttu millä määritän sen ja mitenkä?

           Lorem Ipsum

           
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sed tellus. Pellentesque pretium, eros rhoncus posuere posuere, dolor tellus pharetra massa, et condimentum arcu lorem sed odio. Vestibulum dolor sapien, iaculis non, hendrerit in, facilisis laoreet, nunc.
           

           
               Nulla lectus. Praesent tempus, urna ac molestie lacinia, lacus libero commodo nisi, vitae sodales enim pede vel dui. Etiam erat mauris, malesuada ut, lobortis in, facilisis ac, erat. Fusce lacinia cursus nulla. Praesent imperdiet magna at est lacinia fermentum.
           

           
              Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed eu tortor. Nulla sit amet ligula et orci commodo sollicitudin. Donec quam nunc, tempor eu, blandit sit amet, tincidunt quis, lorem. Phasellus congue placerat nisl.
           




        Hienoahan tuossa on juuri se, että tuollaisena se näyttää aivan kuin siinä ei olisi käytetty muita elementtejä kuin otsikkoa ( ) ja tekstikappaleita ( ). Toimii siis vaikka millä antiikkiselaimella ja kännykkäruudulla.

        Css:llä se vähän muuttuu:

           #palstoitus {
              width: 80%;
              padding: 0px;
              border: 1px solid Black;
           }
           #palstoitus h1 { text-align: center; }
           #palstoitus div {
              width: 33%;
              display: inline;
              float: right;
           }
           #palstoitus div p { margin: 8px;}



        Kysy jos jäi jokin juttu tuossa ymmärtämättä.

        Noita palstoja nyt ei tarvitsisi erikseen nimetä, mutta koitan aina jättää mahdollisimman hyvän ulkoasun muokkausmahdollisuuden tulevia mielenmuutoksia varten.


      • Höpö.
        Höpö. kirjoitti:

           Lorem Ipsum

           
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sed tellus. Pellentesque pretium, eros rhoncus posuere posuere, dolor tellus pharetra massa, et condimentum arcu lorem sed odio. Vestibulum dolor sapien, iaculis non, hendrerit in, facilisis laoreet, nunc.
           

           
               Nulla lectus. Praesent tempus, urna ac molestie lacinia, lacus libero commodo nisi, vitae sodales enim pede vel dui. Etiam erat mauris, malesuada ut, lobortis in, facilisis ac, erat. Fusce lacinia cursus nulla. Praesent imperdiet magna at est lacinia fermentum.
           

           
              Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed eu tortor. Nulla sit amet ligula et orci commodo sollicitudin. Donec quam nunc, tempor eu, blandit sit amet, tincidunt quis, lorem. Phasellus congue placerat nisl.
           




        Hienoahan tuossa on juuri se, että tuollaisena se näyttää aivan kuin siinä ei olisi käytetty muita elementtejä kuin otsikkoa ( ) ja tekstikappaleita ( ). Toimii siis vaikka millä antiikkiselaimella ja kännykkäruudulla.

        Css:llä se vähän muuttuu:

           #palstoitus {
              width: 80%;
              padding: 0px;
              border: 1px solid Black;
           }
           #palstoitus h1 { text-align: center; }
           #palstoitus div {
              width: 33%;
              display: inline;
              float: right;
           }
           #palstoitus div p { margin: 8px;}



        Kysy jos jäi jokin juttu tuossa ymmärtämättä.

        Noita palstoja nyt ei tarvitsisi erikseen nimetä, mutta koitan aina jättää mahdollisimman hyvän ulkoasun muokkausmahdollisuuden tulevia mielenmuutoksia varten.

        »koitan aina jättää mahdollisimman hyvän ulkoasun muokkausmahdollisuuden tulevia mielenmuutoksia varten»

        Jos vaikka haluaisinkin muuttaa systeemin tällaiseksi:


           #palstoitus {
              width: 80%;
              padding: 0px;
              border: 1px solid Black;
           }
           #palstoitus h1 { text-align: center; }
           #palstoitus p { margin: 8px; }
           #palstoitus .palsta1 { font-style: italic; }
           #palstoitus .palsta2, #palstoitus .palsta3 {
              width: 49%;
              text-align: justify;
              font-family: Arial, Helvetica, sans-serif;
           }
           #palstoitus .palsta2 { float: left; }
           #palstoitus .palsta3 { float: right; }


      • Tavallista tyhmempi
        Höpö. kirjoitti:

        »koitan aina jättää mahdollisimman hyvän ulkoasun muokkausmahdollisuuden tulevia mielenmuutoksia varten»

        Jos vaikka haluaisinkin muuttaa systeemin tällaiseksi:


           #palstoitus {
              width: 80%;
              padding: 0px;
              border: 1px solid Black;
           }
           #palstoitus h1 { text-align: center; }
           #palstoitus p { margin: 8px; }
           #palstoitus .palsta1 { font-style: italic; }
           #palstoitus .palsta2, #palstoitus .palsta3 {
              width: 49%;
              text-align: justify;
              font-family: Arial, Helvetica, sans-serif;
           }
           #palstoitus .palsta2 { float: left; }
           #palstoitus .palsta3 { float: right; }

        tapahdu mitään, mulla on 3 tekstikappaletta edelleen alekkain.


      • Höpö.
        Tavallista tyhmempi kirjoitti:

        tapahdu mitään, mulla on 3 tekstikappaletta edelleen alekkain.

        Tuosta copypaste. Ei VOI olla onnistumatta:





           Palstat

           

           #palstoitus {
              width: 80%;
              padding: 0px;
           }

           #palstoitus h1 { text-align: center; }

           #palstoitus div {
              width: 33%;
              display: inline;
              float: right;
           }

           #palstoitus div p { margin: 8px;}

           






           Lorem Ipsum

           
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sed tellus. Pellentesque pretium, eros rhoncus posuere posuere, dolor tellus pharetra massa, et condimentum arcu lorem sed odio. Vestibulum dolor sapien, iaculis non, hendrerit in, facilisis laoreet, nunc.
           

           
               Nulla lectus. Praesent tempus, urna ac molestie lacinia, lacus libero commodo nisi, vitae sodales enim pede vel dui. Etiam erat mauris, malesuada ut, lobortis in, facilisis ac, erat. Fusce lacinia cursus nulla. Praesent imperdiet magna at est lacinia fermentum.
           

           
              Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed eu tortor. Nulla sit amet ligula et orci commodo sollicitudin. Donec quam nunc, tempor eu, blandit sit amet, tincidunt quis, lorem. Phasellus congue placerat nisl.
           


      • Tavallista tyhmempi
        Höpö. kirjoitti:

        Tuosta copypaste. Ei VOI olla onnistumatta:





           Palstat

           

           #palstoitus {
              width: 80%;
              padding: 0px;
           }

           #palstoitus h1 { text-align: center; }

           #palstoitus div {
              width: 33%;
              display: inline;
              float: right;
           }

           #palstoitus div p { margin: 8px;}

           






           Lorem Ipsum

           
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sed tellus. Pellentesque pretium, eros rhoncus posuere posuere, dolor tellus pharetra massa, et condimentum arcu lorem sed odio. Vestibulum dolor sapien, iaculis non, hendrerit in, facilisis laoreet, nunc.
           

           
               Nulla lectus. Praesent tempus, urna ac molestie lacinia, lacus libero commodo nisi, vitae sodales enim pede vel dui. Etiam erat mauris, malesuada ut, lobortis in, facilisis ac, erat. Fusce lacinia cursus nulla. Praesent imperdiet magna at est lacinia fermentum.
           

           
              Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed eu tortor. Nulla sit amet ligula et orci commodo sollicitudin. Donec quam nunc, tempor eu, blandit sit amet, tincidunt quis, lorem. Phasellus congue placerat nisl.
           

        onnistui. Mulla oli "" väärässä paikassa. Kiitos sulle erittäin paljon avusta.
        Ihmettelen muuten, että mitenkä täälläkin neuvotaan kai ihan samaa asiaa tekemään "html-koodilla". Jos olen oikein ymmärtänyt, että kun käyttää CSS:ää niin palstoituksessa ei tarvita enää tekstin sekaan mitään ", jne.


      • Höpö.
        Tavallista tyhmempi kirjoitti:

        onnistui. Mulla oli "" väärässä paikassa. Kiitos sulle erittäin paljon avusta.
        Ihmettelen muuten, että mitenkä täälläkin neuvotaan kai ihan samaa asiaa tekemään "html-koodilla". Jos olen oikein ymmärtänyt, että kun käyttää CSS:ää niin palstoituksessa ei tarvita enää tekstin sekaan mitään ", jne.

        ovat taulukoiden elementtejä. Taulukot ovat erittäin hyviä taulukkomuotoisen datan esittämisessä, mutta itse taitossa css on paljon monipuolisempi ja joustavampi.

        Toki on helpompi oppia tekemään edellinen taulukolla, mutta taulukkotaitossa on myös ongelmansa.


    Ketjusta on poistettu 0 sääntöjenvastaista viestiä.

    Luetuimmat keskustelut

    1. MIksi suurin osa persuista on alkoholisteja?

      Tätä jäin pohdiskelemaan....
      Maailman menoa
      93
      4069
    2. 61
      3349
    3. Kehutaan vaihteeksi Perussuomalaisia

      Perussuomalaiset ovat olleet melkoisen lokakampanjoinnin kohteena, vaikka ovat saaneet paljon hyvää aikaiseksi. Nyt on
      Maailman menoa
      160
      3042
    4. Putin lähti takki auki sotaan....

      Luuli, että kolmessa päivässä hoidetaan, nyt on mennyt 3,5 vuotta eikä voitosta tietoakaan. Kaiken lisäksi putin luuli,
      Maailman menoa
      67
      2999
    5. SDP ylivoimainen ykkönen

      En ole koskaan viitsinyt käydä äänestämässä, mutta nyt SDP:n etumatka on niin kutkuttava, että pakkohan se on vaivautua.
      Maailman menoa
      80
      2497
    6. Suomalainen lähti ilman takkia sotaan

      Malli oli "kajander", johon kuului pelkästään kokardi, ja sotilaan itse metsästä katkoma puukeppi ryssien huitomiseen.
      Maailman menoa
      5
      2316
    7. Patteriauton ovia ei saatu auki - kuljettaja koki hirvittävän kuoleman!

      ”Oviongelma johti kuskin kuolemaan kolarissa – tämä ratkaisu saatetaan kieltää kokonaan Sivulliset pyrkivät tempomaan a
      Maailman menoa
      28
      2014
    8. Polttomoottoriauto on köyhän merkki

      Kun ei ole varaa ostaa sähköautoa, niin joutuu köyhän autoa käyttämään.
      Maailman menoa
      183
      2008
    9. Roiskeläpät takaisin niin alkaa lasit kestämään

      "Tuulilaseja hajottava talvi-ilmiö on ehkä ratkennut" Tämän päivän autoissa kun on esimerkiksi vanhempaa autokalustoa s
      Yleistä autoilusta
      64
      1969
    10. Kaivattusi ominaistuoksu?

      Itse vastaan juustonaksu 😅
      Ikävä
      95
      1393
    Aihe