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
1673
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
- 934069
Miksi juuri vasemmiston puolelta tulee niin paljon luusereita, kelapummeja jne.
Tämä asia ihmetyttää suuresti.613349Kehutaan vaihteeksi Perussuomalaisia
Perussuomalaiset ovat olleet melkoisen lokakampanjoinnin kohteena, vaikka ovat saaneet paljon hyvää aikaiseksi. Nyt on1603042Putin 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,672999SDP 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.802497Suomalainen lähti ilman takkia sotaan
Malli oli "kajander", johon kuului pelkästään kokardi, ja sotilaan itse metsästä katkoma puukeppi ryssien huitomiseen.52316Patteriauton 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 a282014Polttomoottoriauto on köyhän merkki
Kun ei ole varaa ostaa sähköautoa, niin joutuu köyhän autoa käyttämään.1832008Roiskelä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 s641969- 951393