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!
CSS. Miten aloittaa?
Tavallista tyhmempi
9
1614
Vastaukset
- 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
Suomi on täysin sekaisin
Jo ties monettako päivää hirveä itku ja poru jostain helvetin nilviäisistä. https://www.is.fi/taloussanomat/art-20000104504839Ensimmäisestä kohtaamisesta saakka
minulla on ollut hämmentynyt olo. Miten voit tuntua siltä, että olisin tuntenut sinut aina? Sinun kanssasi on yhtä aikaa151722Aivan täysin tahallinen teko
Ei mitään puolusteluja, eikä selittelyitä. Kuljettajalle kerrottiin asiasta siinä paikanpäällä, mutta silti hän ajoi ves941468Suomussalmi saatu vihdoin maailmankartalle!
Nyt kun Suomussalmi on vihdoin viimein saatu ennennäkemättömällä tavalla maailman tietoisuuteen niin voitaisiin järjestä531359Olet saanut minut sekoamaan
Tunteiden ristiaallokossa vellominen on ollut melkoinen kokemus. Ei kukaan ole saanut minua niin raiteiltaan kuin sinä.221326Mainehaitta metsäkonefirmalle
Hukkajoen tapahtumista liikkuu paljon huhuja. Eikö kannattaisi julkaista raakkuja tuhonneen metsäkoneyrityksen nimi, kos531218Oho! Maajussi-Kallelta pakit saanut morsioehdokas Miss Suomi -kisoissa! Tunnistaisitko hänet nyt?
Hmm, tunnistaisitko?!? Onnea missihulinoihin! Lue lisää ja katso kuvat: https://www.suomi24.fi/viihde/oho-maajussi-01075Myönnän sinulle nyt
Että olen erittäin mustasukkainen sinusta jo nyt. Ikävä on tämä tunne, kun tietämättömyyden solista nousee myrkkyä miele541000Pysytäänkö nainen
edelleen yhtä viileän tyynenä kun nähdään. Uskotko että tahtoessani saisin murettua tyyneytesi hyvin helposti.57885Olen käyttäytynyt ristiriitaisesti
eikä minusta varmaankaan ota mitään selvää. Se johtuu siitä, kun järki sanoo ei, ei, ei ja sydän sanoo kyllä, kyllä, kyl60859