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
1646
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
Klaukkalan onnettomuus 4.4
Klaukkalassa oli tänään se kolmen nuoren naisen onnettomuus, onko kellään mitään tietoa mitä kävi tai ketä onnettomuudes1034613Yleltä tyrmäävä uutinen
Ylen uutisen mukaan Raamattu on keksitty n. 2600. Putoaako kristinuskolta pohja kokonaan alta pois? https://yle.fi/a/743891368- 1861062
Pakko kertoa mies
Äitini tietää, että olen ihastunut sinuun. 😳 halusin että hän näkisi sinun kuvan ja pyysin googlaamaan sinua. Kommentti1091052Sinä vain tulit elämääni
Ja joku tarkoitus sillä on ollut. Näyttämään mitä olen ja kuinka arvokas voisin olla. Se muutti ja käänsi elämäni suunna86970Millaisia ajatuksia on kaivatusta ja tilanteestanne tänään?
Kerro omista mietteistäsi tai lähetä terveisiä. Ehkä hän lukee ja lähettää sinulle takaisin omia mietteitään.47911- 64901
Riitta-Liisa ja Toni Roponen: Ero! Riitta-Liisa Roponen kertoo asiasta Instagramissa.
Riitta-Liisa ja Toni Roponen eroavat. Riitta-Liisa Roponen kertoo asiasta Instagramissa. – Talvi on ollut elämäni synk11882tilitoimistopiirainen huutaa
mikä tää piiraisen tilitoimistomies oikee on? olin kuullut vaikka mitä huhuja, että ihan valtavan äkkipikanen mies mutt10877- 64866