Olen perehtynyt hieman Css:n. Tuntuu hankalalta. Ohjeissa mainitaan usein, että erillinen linkitetty tiedosto on kätevämpi kuin joka sivulle laitettu. Niin varmaan mutta miksi sit niin monissa sivustoissa on joka sivulla CSS-koodia HEAD-osiossa? Eikö kandis laittaa se yks linkitetty tiedosto ja homma olis siinä?
CSS
Pekko
17618
0Äänestä
Muut lukivat myös
Odottaa vastausta
Näihin keskusteluihin ei ole vielä vastattu. Ole ensimmäinen.
Vastaukset 17
Vanhimmat
"Olen perehtynyt hieman Css:n. Tuntuu hankalalta."
No mikäpä opettelematta helppoa oliskaan. Helpompaa se mielestäni on kuin pelaaminen frameilla tai taulukoilla, joiden soluihin on ängetty lisää taulukoita.
"Ohjeissa mainitaan usein, että erillinen linkitetty tiedosto on kätevämpi kuin joka sivulle laitettu. Niin varmaan mutta miksi sit niin monissa sivustoissa on joka sivulla CSS-koodia HEAD-osiossa?"
Niinno, kuka mitenkin. Useinhan noita inline tyylejä käytetään vain muutamia rivejä ja loput on ängetty suoraan HTML:n sekaan. Valitettavasti. Ei kai se kuitenkaan tarkoita sitä, että sinun kannattaisi tehdä "väärin" koska kaikki muutkin tekevät?
Tulevaisuudessa dokumenttityypin määritys kertoo, kuinka inline tyylejä/skriptejä käsitellään. Esim XHTML 1.1 ei salli noita, joten selain hylkää moiset kokonaan.
" Eikö kandis laittaa se yks linkitetty tiedosto ja homma olis siinä? "
Niinpä...
Ei se CSS lopultakaan niin kamalan vaikeaa ole, jos osaa HTML:n. Ensin kyllä kannattaa opetella HTML. Sitä kun vähän aika käyttelee, huomaa kuinka paljon on CSS:stä apua, kun alkaa muutella jo tekemiään sivuja.
Yksi linkitetty on ylivertaisen kätevä esim. kun on paljon sivuja, kymmeniä tai satoja (kököh...), ja koko ulkoasumääritykset on tehty tyylitiedostoon ja tätä on kurinalaisesti noudatettu kaikilla html:sivuilla. Nyt kun haluaa vaihtaa väriä tai fonttia tai taustakuvaa yms. ei tarvitse tehdä muuta kun muuttaa yhtä arvoa tyylitiedostossa ja päivitys on tehty kaikkiin sivuihin kerralla! Samalla kun tyylimääritteet laitetaan ulkoiseen tiedostoon, itse html-sivun rakenne tulee "kauniimmaksi" ja helppolukuisemmaksi -> helpompi päivittää.
Eli sillä ei ole mitään merkitystä sivujen toimivuuteen onko ne tyylit erillisessä tiedostossa vai siellä sivuilla?
Nyt vastaan vaikka en ole 100% varma, mutta sillä käsittääkseni ei ole merkitystä. Yleensä erillistä tiedostoa käytetään kattamaan koko sivuston tyylejä. "Siellä sivulla" olevat taas ovat sen takia, että ne tyylit on tarkoitettu vain sille yhdelle sivulle. Paremmin tietävät saavat mielellään korjata, jos olen väärässä.
"Eli sillä ei ole mitään merkitystä sivujen toimivuuteen onko ne tyylit erillisessä tiedostossa vai siellä sivuilla?"
Ei, niinkauan kuin dokumenttityyppi on oikein valittu. Selaimet jättävät inline-tyylit joissain tapauksissa kokonaan näyttämättä.
Properly Using CSS and JavaScript in XHTML Documents:
http://devedge.netscape.com/viewsource/2003/xhtml-style-script/
Käytän häpeämättömästi hyväkseni mahdollisuutta "mainostaa" pientä projektiani:
http://www.yojih.net/csslayout/
Jotakin kummallista tein. Kun siirsin HEAD-osiossa olevan CSS:n omaan tiedostoonsa ( muuttamatta sitä) sivun navi (se oli navin määrittely) lakkasi toimimasta kuten piti. Muu kyllä toimi. Siirsin CSS-määrittelyn takaisin HEAD-osioon ja kaikki pelaa.
Kuulostaa siltä kuin siirrossa olisi jäänyt jostain puolipiste pois tai johinkin ilmaantunut ylimääräinen merkki.
Vaikea arvailla dokumenttia näkemättä. Millä selaimilla kokeilit?
Kokeilin vain IE kutosella. Olen varmaankin jättänyt jotakin pois. Tein sen kyllä copy-toiminnalla. Olen niin aloittelija etten huomaa aina kaikkea. Kokeilenpa vielä uudelleen enkä heti siirrä komentoja pois. Missä on sellaisia palvelimia minne voi laittaa sivunsa hetkeksi?
"Olen niin aloittelija etten huomaa aina kaikkea."
Tiedän tunteen. Täälläkin välillä on ihmetys suuri, kun jostain unohtuu puolipiste :)
"Missä on sellaisia palvelimia minne voi laittaa sivunsa hetkeksi?"
No kai sulla on tila mihin olet sivustosi ajatellut sijoittaa? Luo sinne vaikka temppi-kansio, johon voit uppia kokeiluja.
IE toimi ihan kivasti työpöydältä ajettuna minullakin, mutta palvelimelle siirretty dokumentti antoi vain XML-virheilmoja. Ei jostain syystä hyväksynyt palvelimella katseltuna muutamia merkkejä.
Olit harvinaisen oikeassa. Puolipiste puuttui yhdestä kohtaa. Tarkkaa on. Kyl tässä huomaa kokoajan jotakin oppivansa. Tosin tieto lisää tuskaa ja sitä tuntee olevansa täysin oppimaton.
Kiitti ohjeista.
Olet oikeassa, monet hölmöilevät, älä niistä välitä.
Katsopa tätä, todella hieno esimerkki CSS:n käytöstä ja mahdollisuuksista. Varmasti myös paljon mahdollisuuksia ottaa oppia:
http://www.csszengarden.com/
Ja aika kiva työkalu CSS:n käyttöön:
http://www.bradsoft.com/topstyle/index.asp
Nyt olen saanut siistittyä todella paljon aloittamaani sivua. Turhat taulukot pois. Yksi on kylläkin jäljellä. Taidot eivät ihan vielä ole mestarisluokkaa. Voiko taulukon td-osioon määritellä ominaisuuksia css-avulla.?
Voi.
td {
background: transparent none;
color: Black;
}
Ahaa. Voiko sit käyttää myös eri luokkia eri td-soluun?
Tarkoitan näitä class="HHH"
" Ahaa. Voiko sit käyttää myös eri luokkia eri td-soluun?
Tarkoitan näitä class="HHH""
table.luokkafoo {
background: yellow none;
color: Black;
margin: 0px;
padding: 5px;
border: 1px black solid;
width: 500px;
height: 500px;
}
tr.luokkafoo {
background: transparent none;
color: Black;
}
td.luokkafoo {
background: blue none;
color: Black;
margin: 5px;
padding: 5px;
border: 1px red dotted;
}
ja html:
Siis jos haluaa erilaisia määrityksiä eri soluhin:
td {background: #AAA;}
td.kelta{background: #ff6;}
td.puna{background: #f66;}
solu 1
solu 2
solu 2