CCS:llä nopea ulkoasun vaihto

VOLVO

Eli siis kuulin, että CSS olisi ohjelma, jolla voisi nopeasti vaihtaa ulkoasun vaihtamalla sen vaan yhdelle sivulle. Niin, että mitenköhän tämä onnistuisi? Älkääkä pliis antako mitään englanninkielisiä sivuja, kun en niitä jaksa selailla, että mieluummin ihan omaa juttua. Ja jos sen yhden sivun, jolla vaihtaa koko ulkoasun tekee CSS:llä niin voinko tehdä muut ihan tavallisesti HTML-koodeilla muistiolla vai eikö se käy?

7

542

    Vastaukset

    Anonyymi (Kirjaudu / Rekisteröidy)
    5000
    • Poro1

      css on tyylitiedosto jossa määrätään mm. linkkien värit, taustat, tekstien koko, väri, fontti, jne.

      Tee sivut tavallisesti muistiolla (?) ja sivulle vain linkitys tähän .css tiedostoon.

      Googlella löytyy monta sivua jossa asiasta lisää...

    • Töppö

      Css ei ole ohjelma sen enempää kuin html.
      Html on merkintäkieli, jolla esitetään sivun rakenne, css on tehniikka jolla määritellään ulkoasu.

      Tää nyt ei varmasti ole paras mahdollinen opas, mutta varmaan tuosta saat ainakin jonkinlaisen peruskäsityksen siitä missä mennään:
      http://koti.mbnet.fi/~petepe/css1/

      Googlella tosiaan löytyy oppaita pilvin pimein.

      Css-määritykset voi upottaa ihan html-komentojen joukkoon, mutta suositeltavampaa on käyttää erillista css-tiedostoa joka linkitetään kaikille sivuille. Editorina voi käyttä Notepadia, mutta ihan oikeita css-editoreitakin löytyy. Itse käytän TopStyleä ( http://www.bradsoft.com/download/index.asp ). Lite versio on ilmainen ja se riittää pitkälle.

      • Töppö

      • VOLVO
        Töppö kirjoitti:

        http://www.csszengarden.com/tr/finnish/

        Tämä ei ole opas vaan ihan esimerkki siitä miten sivun ulkoasu voidaan muuttaa täysin erilaiseksi pelkästään tyylitiedostoa vaihtamalla.

        Mutta jos tekisin muuten tavan sivut HTML-koodeilla muistion avulla niin tekisinkö vaan toiseen muistioon tämän ulkoasun? Ja miten voin laittaa linkin tähän ulkoasu-tiedostoon? En kyllä tiedä onnistuuko se noin, mutta toivon.


      • Töppö
        VOLVO kirjoitti:

        Mutta jos tekisin muuten tavan sivut HTML-koodeilla muistion avulla niin tekisinkö vaan toiseen muistioon tämän ulkoasun? Ja miten voin laittaa linkin tähän ulkoasu-tiedostoon? En kyllä tiedä onnistuuko se noin, mutta toivon.

        ..jos haluat. Tosin itse käytän mieluummin editoria.

        --------- index.html ----------

           Esimerkki
           

           Otsikko

           Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

           Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
           

        -------------------------------

        ---------- tyyli.css ----------

           body {
              background-color: #FFEFD5;
              font-family: Arial, Helvetica, sans-serif;
              padding-left: 300px;
              padding-right: 50px;
           }
           #sisalmys {
              border: 1px solid White;
              padding: 10px;
              text-align: justify;
           }
           h1 {
              color: #DCA8FF;
           }

        ------------------------------

        Tai vaihtoehtoisesti tyylitiedosto voisi olla tällainen:

        ---------- tyyli.css ----------

           body {
              background-color: White;
              font-family: monospace;
              color: Gray;
           }
           #sisalmys {
              margin-left: 9em;
           }
           h1 {
              color: Red;
              margin-left: 9em;
           }

        ------------------------------

        No nää nyt ei ollu mitään huippuhienoja esimerkkejä mut kuiteskii..


      • VOLVO
        Töppö kirjoitti:

        ..jos haluat. Tosin itse käytän mieluummin editoria.

        --------- index.html ----------

           Esimerkki
           

           Otsikko

           Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

           Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
           

        -------------------------------

        ---------- tyyli.css ----------

           body {
              background-color: #FFEFD5;
              font-family: Arial, Helvetica, sans-serif;
              padding-left: 300px;
              padding-right: 50px;
           }
           #sisalmys {
              border: 1px solid White;
              padding: 10px;
              text-align: justify;
           }
           h1 {
              color: #DCA8FF;
           }

        ------------------------------

        Tai vaihtoehtoisesti tyylitiedosto voisi olla tällainen:

        ---------- tyyli.css ----------

           body {
              background-color: White;
              font-family: monospace;
              color: Gray;
           }
           #sisalmys {
              margin-left: 9em;
           }
           h1 {
              color: Red;
              margin-left: 9em;
           }

        ------------------------------

        No nää nyt ei ollu mitään huippuhienoja esimerkkejä mut kuiteskii..

        Miten saa tuohon tyyli.css:ään tälläisen taulukon:

        teksti

        teksti

        teksti

        Ja siihen tyyli.css:ään miten saan nämä :

        {scrollbar-face-color: #9C8972;
        scrollbar-highlight-color: black;
        scrollbar-3dlight-color: #94826C;
        scrollbar-darkshadow-color: #94826C;
        scrollbar-shadow-color: black;
        scrollbar-arrow-color: black;
        scrollbar-track-color: #94826C;}

        A:link{color:#453F32;cursor:crosshair;text-decoration:none}
        A:visited{color:#453F32;cursor:crosshair;text-decoration:none}
        A:active{color:#453F32;cursor:crosshair;text-decoration:none}
        A:hover{color:white;cursor:crosshair;text-decoration:none;
        border-left:1px #000000 dotted; border-right:1px #000000 dotted;
        border-top:1px #000000 dotted; border-bottom:1px #000000 dotted;}

        body {font-family:verdana;color:#000000;font-size:10px;}

        body {background-image:url(http://www.jotain.com);}

        Jos voisitte auttaa kun en itse onnistu tässä :/


      • Töppö
        VOLVO kirjoitti:

        Miten saa tuohon tyyli.css:ään tälläisen taulukon:

        teksti

        teksti

        teksti

        Ja siihen tyyli.css:ään miten saan nämä :

        {scrollbar-face-color: #9C8972;
        scrollbar-highlight-color: black;
        scrollbar-3dlight-color: #94826C;
        scrollbar-darkshadow-color: #94826C;
        scrollbar-shadow-color: black;
        scrollbar-arrow-color: black;
        scrollbar-track-color: #94826C;}

        A:link{color:#453F32;cursor:crosshair;text-decoration:none}
        A:visited{color:#453F32;cursor:crosshair;text-decoration:none}
        A:active{color:#453F32;cursor:crosshair;text-decoration:none}
        A:hover{color:white;cursor:crosshair;text-decoration:none;
        border-left:1px #000000 dotted; border-right:1px #000000 dotted;
        border-top:1px #000000 dotted; border-bottom:1px #000000 dotted;}

        body {font-family:verdana;color:#000000;font-size:10px;}

        body {background-image:url(http://www.jotain.com);}

        Jos voisitte auttaa kun en itse onnistu tässä :/

        Taulukkoa ei laitetaa tyylitiedostoon, taulukot kuuluvat html-dokumenttiin.

        Ja kun kerran tarkoituksesi on käyttää css:ää niin kannattaisi jättää suosiolla pois vanhentuneet html-attribuutit kun ne on kätevämpi korvata sillä css:llä.

        Tarkoitan näitä:
        height="300"
        border="2"
        align=left
        width=150
        bgcolor=green

        ---------- index.html ----------

           Jaska   
           

           

           
           
              
                 teksti
              

              
                 teksti
                 teksti
              
           
           

           
           

        ---------- tyyli.css -----------

        body {
           background-image : url(http://www.jotain.com);
           color : #000000;
           font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
           font-size : 10px;
        }
        table {
           border : 2px solid;
           height : 300px;
           width : 600px;
        }
        td{
           border : 2px solid;
        }
        #solu1, #solu2 {
           background-color : #008000;
           height : 500px;
        }
        #solu1{
           width : 150px;
        }
        #solu2 {
           width : 500px;
        }
        a:link, a:visited, a:active{
           color : #453F32;
           cursor : crosshair;
           text-decoration : none;
        }
        a:hover{
           border-bottom : 1px #000000 dotted;
           border-left : 1px #000000 dotted;
           border-right : 1px #000000 dotted;
           border-top : 1px #000000 dotted;
           color : #FFFFFF;
           cursor : crosshair;
           text-decoration : none;
        }


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

    Luetuimmat keskustelut

    1. en vaan saa häntä pois

      Mielestäni pyörimästä. Onko kellekään toiselle käynyt näin? Ihastuin pakkomielteisesti noin vuosi sitten erääseen naiseen. Ei vaan katoa mielestä va
      Ikävä
      176
      2115
    2. Suomi24 kysely: ihmisten kuplautumista ei pääosin koeta vakavaksi ongelmaksi

      “Kuplautumista on mahdotonta estää. Ihmiset ovat aina viihtyneet samankaltaiset arvot ja maailmankatsomuksen jakavassa seurassa ja muodostaneet sen pe
      Suomi24 Blogi ★
      36
      1744
    3. Ohhoh! Glamourmalli Elena, 29, teetti tiimalasivartalon - Vei rahaa ja tuotti tuskaa - Katso kuvat!

      Transtaustainen glamourmalli Elena Vikström on käynyt vuosien ajan plastiikkakirurgisissa toimenpiteissä. Tästä näet lopputuloksen: https://www.suomi
      Kotimaiset julkkisjuorut
      10
      1461
    4. Ostiko Martina uuden ponin tyttärelleen, vai oliko myös Stefan itsekkin valitsemassa ponia .?

      Kiva kun on tyttärelle mielekäs harrastus annettu, ehkä vielä on tulevaisuudessa hänelle tärkeä ja valitsee sen perusteella tulevan ammatin.
      Kotimaiset julkkisjuorut
      233
      1240
    5. Sinä olet tärkeä

      Herätät minussa kunnioitusta. Kiehdot minua. En oikein saa kiinni sinusta. Ehkä juuri siksi. Aistin että sinäkin pidät minusta. Vetovoima on ollut alu
      Ihastuminen
      60
      1223
    6. Varisjärvellä mersu.

      Varisjärven tiellä tuli vanhamersu kylkiedellä mutkassa vastaan ja vähällä keulaan mutta tökkäs penkkaan, hyppäsin omasta autosta ulos ja kävin kiskas
      Suomussalmi
      16
      1067
    7. Belorf haistattaa seuraajiaan "You can hate me now"...

      Vai haistattaako lompakkoa, joka taisi viimeinkin ymmärtää häipyä Sofian ulottumattomiin ? Sofia raukka on niin typerä, että ottaa nostetta "omasta tv
      Kotimaiset julkkisjuorut
      59
      980
    8. Mitähän ajattelet J

      Tästä kaikesta? Mä välitän susta oikeasti.
      Ikävä
      60
      973
    9. Wau mikä kroppa Sofialla

      Kuva instassa kun on suihkurusketuksessa. Kyllä on muodot kohdallaan, on kuin jumalainen Venus patsas. Eikä ole mitään järkyttäviä lonkero tatuointeja
      Kotimaiset julkkisjuorut
      102
      670
    Aihe