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
1686
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
Taas nuoren kuolema
Vasunmäentiellä paha onnettomuus. Nuori nainen menehtyi. Niiin sydäntä riipaisevaa 😭1124288PropsApp Koodi
Haluatko ansaita ja kilpailla fiksusti samalla kun seuraat urheilua? Props tekee sen mahdolliseksi. Sovelluksessa pääset23883Persut yrittävät epätoivon vimmalla
kiertää häirintä asian https://www.iltalehti.fi/politiikka/a/5389f072-60d9-4ef8-aa7b-c11f0eda66cf jonka muut puolueet a1053528Elikkäs persuissa ovat pahimmat häiriköijät
Koska sieltä tuli kaikkein kovin ulahdus. Persujen peesissä seuraa kokoomus js hajuraon päässä röhkii kepulaiset. Olipa703254"Skandaali muhii SDP:ssä" - "pelon ilmapiiri vallitsee"
Puolueen johto on vähintään vastuussa ilmapiiristä, jossa häirinnän uhrit eivät ole saaneet ääntään kuuluviin. Vyyhdin1043134IL: "Kyykyttämistä, alistamista, painostamista, huutamista ja tiuskimista SDP:n
eduskuntaryhmässä." Häirintäkohu puolueen ympärillä paisuu. Iltalehden haastattelemien SDP-lähteiden mukaan eduskunta-702788Riikka runnoo: konkursseja eniten 30 vuoteen
Vuonna 2025 Suomessa haettiin konkurssiin yhteensä 3 906 yritystä. Konkurssiluku oli suurin sitten vuoden 1996.1062606Tehomaksu rankaisisi normaalista sähkönkäytöstä
Energiaviraston valmistelema tehomaksumalli herättää aiheellista huolta erityisesti tavallisten kotitalouksien näkökulma382572Ahdistelu ongelmaa vain vasemmistossa - ei oikeiston edustajissa
Mutta demarit ovat tunnetusti sivistymättömiä, ja vähemmän fiksuja.282282Jari Sillanpää isossa leikkauksessa - Paljastaa, mitä uralle tapahtuu!
Palaako Siltsu keikoille? Artisti, ex-tangokuningas Jari Sillanpää on ollut lonkkaleikkauksessa ja kotiinpaluu on edessä271847