Ulkoisen CSS tiedoston lisääminen?
Eli ensin lisätään xhtml:ään linkki, joka menee CSS:ään. Mutta miten CSS "liitetään" siihen? Ja että tietää sen varmasti olevan liitetty ja oikeaan kohtaan? Ehkä tiedän tai sitten en. Tärkein kysymys on, missä järjestyksessä CSS:ään laitetaan niitä tyylijuttuja?? Kiitos avusta, jos osaat neuvoa. Ohjeessa ei ole järjestystä mainittu.
Mikä on paras tapa laittaa CSS? Vaihtoehtoja oli 3 ohjeessa. Kokeilin ulkoista linkkiä laittaa koska sitä suositeltiin, silloin voi yhdestä kohdasta muuttaa monen sivun ulkoasua kuulemma.
Mikä on paras tapa laittaa CSS? Vaihtoehtoja oli 3 ohjeessa. Kokeilin ulkoista linkkiä laittaa koska sitä suositeltiin, silloin voi yhdestä kohdasta muuttaa monen sivun ulkoasua kuulemma.
Ihan perusteita. On kolme tapaa jolla voit määritellä CSS-tyylejä sivulle
1. Sisäinen/Upotettu (internal/embedded)
- määritellään sivun head osiossa "style" tagin avulla
- uudelleenkäytettävä sivun sisällä
2. Ulkoinen (external)
- linkitetään sivun head osiossa "link" tagin avulla
- uudelleenkäytettävä usealla sivulla
3. Inline
- määritellään suoraan html-tageihin style attribuutin avulla.
- ei uudelleenkäytettävyyttä
Yleensä ulkoinen tyylisivu on järkevin vaihtoehto ellei ole jotain erityistä syytä käyttää sisäistä tai inline-tyylejä. Ulkoisen tyylsiivun määrittely tapahtuu sivun "head" osiossa käyttäen "link"-tagia.
Esim.
Yhdellä sivulla voi olla useampia tyylisivuja ja tyylien määrittelytapoja voidaan sekoittaa (esim samalla sivulla voi olla sekä sisäisellä tyylisivulla, ulkoisella että inline tyyleillä tyylitettyjä elementtejä). Jos useampi tyylisääntö koskee samaa elementtiä niin ns. kaskadijärjestys (cascading order) määrää mikä tyyli voittaa. Yleissääntönä tarkemmin kohdistettu tyylisääntö voittaa geneerisemmin määritellyn. Ihan kaikkea tänne on turha edes yrittää mahduttaa mutta ne säännöt on olemassa ja niitä kannattaa lueskella kunnes ymmärtää ne edes noin suurinpiirtein :)
Täällä noista kaskadisäännöistä ja järjestyksestä
http://www.w3.org/TR/CSS2/cascade.html#cascade
http://www.w3.org/TR/css3-cascade/#cascade-and-inheritance
Sitten netistä löytää vähän helpompilukuisia sepostuksia (voi olla kuitenkin hieman epätäydellisempiä):
http://www.boogiejack.com/CSS_4.html
http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css
http://www.blooberry.com/indexdot/css/topics/cascade.htm
"Tärkein kysymys on, missä järjestyksessä CSS:ään laitetaan niitä tyylijuttuja??"
Meinasi unehtua tämä. Sinänsä järjestyksellä ei ole paljoa väliä missä ne laitat. Kuten tuossa jo aiemmin tuli ilmi, voimassaolevat tyylit määräytyvät enemmän muiden asioiden mukaan. Vain siinä tapauksessa että kaksi täsmälleen samanarvoista tyyliä koskee samaa elementtiä niin myöhempi määrittely korvaa aiemman.
1. Sisäinen/Upotettu (internal/embedded)
- määritellään sivun head osiossa "style" tagin avulla
- uudelleenkäytettävä sivun sisällä
2. Ulkoinen (external)
- linkitetään sivun head osiossa "link" tagin avulla
- uudelleenkäytettävä usealla sivulla
3. Inline
- määritellään suoraan html-tageihin style attribuutin avulla.
- ei uudelleenkäytettävyyttä
Yleensä ulkoinen tyylisivu on järkevin vaihtoehto ellei ole jotain erityistä syytä käyttää sisäistä tai inline-tyylejä. Ulkoisen tyylsiivun määrittely tapahtuu sivun "head" osiossa käyttäen "link"-tagia.
Esim.
Yhdellä sivulla voi olla useampia tyylisivuja ja tyylien määrittelytapoja voidaan sekoittaa (esim samalla sivulla voi olla sekä sisäisellä tyylisivulla, ulkoisella että inline tyyleillä tyylitettyjä elementtejä). Jos useampi tyylisääntö koskee samaa elementtiä niin ns. kaskadijärjestys (cascading order) määrää mikä tyyli voittaa. Yleissääntönä tarkemmin kohdistettu tyylisääntö voittaa geneerisemmin määritellyn. Ihan kaikkea tänne on turha edes yrittää mahduttaa mutta ne säännöt on olemassa ja niitä kannattaa lueskella kunnes ymmärtää ne edes noin suurinpiirtein :)
Täällä noista kaskadisäännöistä ja järjestyksestä
http://www.w3.org/TR/CSS2/cascade.html#cascade
http://www.w3.org/TR/css3-cascade/#cascade-and-inheritance
Sitten netistä löytää vähän helpompilukuisia sepostuksia (voi olla kuitenkin hieman epätäydellisempiä):
http://www.boogiejack.com/CSS_4.html
http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css
http://www.blooberry.com/indexdot/css/topics/cascade.htm
"Tärkein kysymys on, missä järjestyksessä CSS:ään laitetaan niitä tyylijuttuja??"
Meinasi unehtua tämä. Sinänsä järjestyksellä ei ole paljoa väliä missä ne laitat. Kuten tuossa jo aiemmin tuli ilmi, voimassaolevat tyylit määräytyvät enemmän muiden asioiden mukaan. Vain siinä tapauksessa että kaksi täsmälleen samanarvoista tyyliä koskee samaa elementtiä niin myöhempi määrittely korvaa aiemman.
Jos pitää XHTML:ää käyttää jostain syystä, niin sitten
missä oma.css on CSS-tiedoston nimi (ja tiedosto samaan kansioon kuin XHTML-tiedosto) joka kirjoitetaan head-elementin sisään. Sen sijainnilla siellä ei ole merkitystä, jos et käytä useaa CSS-tiedostoa.
Kannattaa testata jollakin tosi yksinkertaisella CSS-tiedostolla ensin, jotta näkee, että homma pelaa. Sisällöksi aluksi vaikka
body { background: green }
Ja kyllä, ulkoinen CSS-tiedosto on paras vaihtoehto.
Tyylijuttujen järjestys CSS-tiedostossa on paljolti tyylikysymys. ☺ Valitse sinulle sopiva. Yleensä hyvä järjestys on sellainen, jossa alussa on yleiset asetukset ja myöhemmin erityiset, esimerkiksi vain yhtä tiettyä elementtiä koskevat. Asetukset voi sitten ryhmitellä joko tyylipiirteen mukaan (esim. ensin marginaalit, sitten värit, sitten fontit jne.) tai elementtityypin mukaan (esim. ensin kaikkia elementtejä koskevat asetukset, sitten body-elementtiä, sitten otsikkoelementtejä jne.).
Järjestyksellä on merkitystä, jos kaksi sääntöä asettaa tietylle elementille tietyn elementin. Silloin järjestys on yksi asia (kaikkein viimeisenä huomioon otettava) ratkaistaessa, mikä asetus voittaa.
missä oma.css on CSS-tiedoston nimi (ja tiedosto samaan kansioon kuin XHTML-tiedosto) joka kirjoitetaan head-elementin sisään. Sen sijainnilla siellä ei ole merkitystä, jos et käytä useaa CSS-tiedostoa.
Kannattaa testata jollakin tosi yksinkertaisella CSS-tiedostolla ensin, jotta näkee, että homma pelaa. Sisällöksi aluksi vaikka
body { background: green }
Ja kyllä, ulkoinen CSS-tiedosto on paras vaihtoehto.
Tyylijuttujen järjestys CSS-tiedostossa on paljolti tyylikysymys. ☺ Valitse sinulle sopiva. Yleensä hyvä järjestys on sellainen, jossa alussa on yleiset asetukset ja myöhemmin erityiset, esimerkiksi vain yhtä tiettyä elementtiä koskevat. Asetukset voi sitten ryhmitellä joko tyylipiirteen mukaan (esim. ensin marginaalit, sitten värit, sitten fontit jne.) tai elementtityypin mukaan (esim. ensin kaikkia elementtejä koskevat asetukset, sitten body-elementtiä, sitten otsikkoelementtejä jne.).
Järjestyksellä on merkitystä, jos kaksi sääntöä asettaa tietylle elementille tietyn elementin. Silloin järjestys on yksi asia (kaikkein viimeisenä huomioon otettava) ratkaistaessa, mikä asetus voittaa.
Kiitos paljon teille kummallekin todella hyvistä ohjeista! En varmaan olisi päässyt eteenpäin ilman niitä, tai olisi ollut vaikeuksia. Kysymykset pyörivät aiemmin päässä ympyrää. :)
Luen ohjeitanne vielä uudelleenkin muistin virkistykseksi, lähden kokeilemaan xhtml tiedoston ja css tiedoston kanssa. Ne aukeavat erikseen (klikatessa), mutta varmaankin pääasia että se linkki on sinne css:ään, xhtml:stä. Luen myös kirjan ja netin ohjeistuksia. Luultavasti tulee joskus uusia kysymyksiä, mutta näillä vastauksilla pääsee onneksi hyvin eteenpäin. Helpotti huomattavasti.
Luen ohjeitanne vielä uudelleenkin muistin virkistykseksi, lähden kokeilemaan xhtml tiedoston ja css tiedoston kanssa. Ne aukeavat erikseen (klikatessa), mutta varmaankin pääasia että se linkki on sinne css:ään, xhtml:stä. Luen myös kirjan ja netin ohjeistuksia. Luultavasti tulee joskus uusia kysymyksiä, mutta näillä vastauksilla pääsee onneksi hyvin eteenpäin. Helpotti huomattavasti.
Kerro mielipiteesi
dfgdgdgssssss
13.6.2013 12:57