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

544

    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. Vasemmistohallitus palauttaa hintasääntelyn, esim. bensalitra vain 1e.

      Tuleva vasemmistolaisista koostuva hallitus ottaa käyttöön vanhat hyvät keinot pitää hinnat kurissa. Tähän tarkoitukse
      Maailman menoa
      83
      4597
    2. Vasemmistolainen valehteli jälleen - Purra tai persut eivät luvanneet "euron bensaa"

      Väite "euron bensasta" on ensisijaisesti poliittisten vastustajien käyttämä puhdas vale. Persut kyllä kampanjoivat näky
      Maailman menoa
      110
      3820
    3. Arman Alizadin viesti puna-aktivisteille: "Pitäkää lärvinne nytkin kiinni"

      Arman Alizad kritisoi vasemmiston kaksinaismoralismia. Iranissa syntynyt suosikkijuontaja Arman Alizad pakeni perheensä
      Maailman menoa
      173
      3612
    4. Minja Koskela nostanut vasemmistoliiton kannatuksen ennätykseen

      Koskela valittiin puolueen johtoon lokakuussa 2024, ja silloin Ylen kysely antoi puolueelle 9,3 prosentin kannatuksen.
      Maailman menoa
      55
      2046
    5. Antti johtaa Petteriä jo 7,1 prosenttiyksiköllä

      Tällä menolla sdp menee kokoomuksesta kierroksella ohi jo tällä vaalikaudella. https://yle.fi/a/74-20213575
      Maailman menoa
      71
      1928
    6. Mitä on tullut

      Entisen abcn rakennuksen tilalle se oli tyhjillään monta vuotta siellä oli jo nyt valot onko huoltoasema? 5:30.
      Haapavesi
      89
      1259
    7. Harmi nainen kun

      olet niin elähtäneen näköinen. Miestä et koskaan löydä itelles. j
      Ikävä
      129
      1104
    8. Palosta selvinnyt 18 vuotias munira tarvitsi tulkin kun puhui Iltalehdelle

      Suomessa asuva 18 vuotias tarvii tulkin !!! Tää Suomea puhumaton on palossa kuolleen naisen veli ja asui perheen kanssa.
      Vantaa
      140
      1050
    9. Minne pyydän sut?

      Jotta saan nähdä 🤨
      Ikävä
      57
      963
    10. Mikä homma?

      https://share.google/NvruSS4P4EzjTWPov Poliisilla oli keskiviikkona 4. maaliskuuta yksityisasunnossa Saarijärvellä tehtä
      Saarijärvi
      27
      882
    Aihe