IE40
ohjeita web-sivuston tekijälle
Tyylipohjat (Cascading Style Sheets, CSS; jäljempänä tyylipohjat) tarjoavat hyvin tehokkaita mahdollisuuksia dokumentin ulkoasun määrittämiseen. Ne ovat myös HTML-kielen uudempia lisäyksiä, ja vasta uusimmat selaimet tukevat niitä. Tässä esiteltävät ominaisuudet toimivat Internet Explorer 4.0- ja Netscape Navigator 4.0-selaimissa, ellei toisin ole mainittu. Myös IE 3.0 näyttää useimmat näistä muotoiluista.
Tyylipohjian idea on mahdollistaa dokumentin ulkoasun määrittäminne tarkasti. Esimerkiksi tekstin korkeus voidaan määritää pikseleinä, kun HTML:ssä ollaan perinteisesti tyydytty epämääräiseen tekstin kokoasteikkoon (1-7).
Tyylipohjilla muotoilumääritykset voidaan sijoittaa ulkoiseen tiedostoon, jolloin kaikki kyseistä pohjaa käyttävät tiedostot voidaan päivittää keskitetysti yhtä tiedostoa muuttamalla. Tyylipohjat tarjoavat siis paitsi tarkkuutta, myös helppoutta ja vaivattomuutta.
Monet muotoilut ovat mahdollisia käyttäen vain tyylipohjia, ne avaavat siis kokonaisuutena uusia mahdollisuuksia WWW-julkaisun tekijälle.
Seuraavalla esimerkillä havainnollistetaan tyylipohjien mahtia. Luomme perusdokumentin, joka näyttää varsin tavanomaiselta.
<html> <head> <title>CSS</title> </head> <body> <h1>Otsikko</h1> <p>Tämä teksti on perinteistä leipätekstiä.
<b> Osa siitä on lihavoitu</b>,
mutta silti se näyttää verraten tylsältä.</p> <ul> <li>Tämä listakin on perinteisen näköinen <li>eikö totta? </ul> </body> </html>
IE40
NC40
Lisäämme dokumenttiin nyt tyylimäärityksiä:
<html>
<head>
<title>CSS</title>
<style>
<!--
H1,B {font-style: italic}
P {font-family: verdana}
UL {list-style-type: lower-alpha}
-->
</style>
</head>
<body>
<h1>Otsikko</h1>
<p>Tämä teksti on perinteistä leipätekstiä.
<b> Osa siitä on lihavoitu</b>,
mutta silti se näyttää verraten tylsältä.</p>
<ul>
<li>Tämä listakin on perinteisen näköinen
<li>eikö totta?
</ul>
</body>
</html>
Huomataan, että tyylimäärityksiä voidaan tehdä muun muassa lisäämällä <STYLE> ja </STYLE> -tagit määrityksineen <HEAD>-osioon.
IE40
NC40
Kuten huomataan, muutokset dokumentin ulkoasussa ovat varsin dramaattisia. Nyt tutustutaan tarkemmin tyylipohjien käyttöön ja mahdollisuuksiin.
Tyylikomennot voidaan antaa, kuten edellisen kappaleen esimerkissä, dokumentin alussa, sijoittamlla ne <HEAD>-osioon laitettavien <STYLE> ja </STYLE>-tagien sisään. Tällöin on hyvä käyttää seuraavaa rakennetta:
..
<head>
<title>..</title>
<style>
<!--
valitsin1
{
määritys 1;
määritys 2;
}
valitsin2
{
määritys 1;
määritys 2;
}
-->
</style>
</head>
..
Kuten huomataan, voi erilaisia tyyliasetuksia olla paljonkin. Tämän takia tyylimääritykset vievät usein paljon tilaa. Siksi tyylimääritykset voidaan sijoittaa erilliseen tiedostoon.
Kun tyylikomennot sijoitetaan erilliseen tiedostoon, saavutettaan lukuisia etuja. Niistä merkittävimmät ovat.
Ulkoinen tiedosto on päätteeltään .CSS ja sen sisälle kirjoitetaan tyylimääritykset kuten edellä <!-- ja --> -tagien väliin. Ulkoiset tyylimääritykset otetaan käyttöön lisäämällä <HEAD> osioon rivi:
<LINK REL="stylesheet" TYPE="text/css" HREF="tiedosto.css">
Tyylimäärityksiä voidaan käyttää myös suoraan esimerkiksi <P>-tagissa:
<p style="color: blue;">Sinistä tekstiä</p>
Käyttökelpoisimpaan lopputulokseen päästään usein edellisiä keinoja yhdistellen. Tällöin yleiset asetukset voidaan antaa ulkoisessa tiedostossa, niitä voidaan tarkentaa dokumenttikohtaisesti <STYLE>-alueella ja hienosäätöä voidaan tapauskohtaisesti suorittaa antamalla määrityksiä myös ao. tagissa.
Tyylikomentoja voidaan antaa monella tavalla. Voimme joko määrittää HTML-elementtejä (P, H1, B) uudelleen, käyttää erityisiä luokkia tai niiden yhdistelmää.
Kuten edellä kuvatussa esimerkissä, useimmiten tyylikomentoja käytetään esimerkiksi tekstityyppien (P, H1, B) uudelleenmäärittämiseen. Seuraava esimerkki valaisee tilannnetta, jossa otsikkojen kirjaisinlajiksi halutaan Verdana:
<html> <head> <title>CSS</title> <style> <!-- H1,H2, H3
{ font-family: verdana} --> </style> </head> <body> <h1>Otsikko1</h1> <h2>Otsikko2</h2> <h3>Otsikko1</h3> </body> </html>
HTML-tageja voidaan siis ryhmittää tyylimäärityksiä annettaessa siten, että vaikutukset ulottuvat niihin kaikkiin.
Tällaiset asetukset ovat voimassa tilanteesta riippumatta koko dokumentissa.
IE40
NC40
Mikäli annamme tyylimäärityksen seuraavasti:
P I {text-decoration: underline}
On alleviivaus kursiivissa voimassa vain, jos sitä käytetään leipätekstin yhteydessä.
Edellä esiteltyä tapaa voidaan rajoittaa käyttämällä luokkia. Esimerkiksi voimme määritellä:
<html> <head> <title>CSS</title> <style> <!-- .class
{ font-family: verdana} #id
{ font-family: arial} --> </style> </head> <body> <h1>Otsikko1</h1> <h2 class="class">Otsikko2</h2> <h3 id="id">Otsikko1</h3> </body> </html>
Huomataan, että oleellisesti sama asia voidaan toteuttaa sekä käyttämällä class, että id-valitsimia. Käyttö eroaa yksityiskohdiltaan vain hieman.
Saatuja luokkia (esimerkissä class) voidaan käyttää riippumatta tagista. Esimerkiksi voisimme määritellä leipätekstin:
<p class=class>..</p>
Käyttämällä samaa luokkaa. CLASS ja ID -valitsimet tuovat huomattavasti lisää joustavuutta tyylipohjien käyttöön.
Edellisissä esimerkeissä esimerkiksi leipätekstiä määrittävä asetus tai luokka vaikuttaa koko kappaleeseen. Käyttämällä ns. aputagia <SPAN> voidaan osa tekstistä muotoiltua toisin. Seuraava esimerkki valoittaa tilannetta:
<html>
<head>
<title>CSS</title>
<style>
<!--
.verdana
{
font-family: verdana;
}
.as
{
color: blue;
text-decoration: underline;
}
-->
</style>
</head>
<body>
<h1 class=verdana>Otsikko1</h1>
<p>Tämä on normaalia leipätekstiä,
josta <span class=verdana>osa on
tyypiltään verdanaa</span>.
<p class=as>Tästä sinisestä ja
alleviivatusta tekstistä osa on
<div class=verdana> myöskin verdanaa,
mutta hupsis, se muodostaa oman
kappaleensa</div></p>
</body>
</html>
SPAN ja DIV toimivat pitkälti samalla tavalla, mutta DIV aiheuttaa määrittämänsä alueen muuttumisen omaksi kappaleeksi.
IE40
NC40
Tyylipohjien kanssa käytettävät mittayksiköt ovat moninaiset:
H1 { margin: 0.5in } tuumia, 1in = 2.54cm
H2 { line-height: 3cm } senttejä
H3 { word-spacing: 4mm } millimetrejä
H4 { font-size: 12pt } pisteitä, 1pt = 1/72 in
H4 { font-size: 1pc } picoja, 1pc = 12pt
Käytännössä tekstin kanssa käytetään pisteitä, sillä ne ovat muualta tietotekniikasta kovin tuttuja. Joissain tapauksissa myös prosentteja voidaan käyttää.
P {font-family : Arial}
Tämä muuttaa tekstin kirjaisinlajin Arialiksi. Koska samat kirjaisinlajit ei ole käytössä kaikilla käyttäjillä, voidaan määritellä vaihtoehtoisia kirjaisinlajeja, joista ensimmäistä järjestelmästä löytyvää käytetään:
P {font-family : Arial, Verdana}
P {font-weight : bold}
Sallittuja asetuksia ovat myös normal, bolder ja lighter.
Tämä saa tekstin lihavoiduksi.
P {font-style : italic}
Tekstistä tulee kursivoitua. Normaalia tekstiä saadaan määritteellä normal.
P { font-size : 12pt }
P { color : #FFFFFF}
P {color : blue}
Vihdoinkin HTML-kielessä on mahdollista määrittää tekstiriveille korkeus:
P {line-height=12 pt}
Mikäli tekstin kooksi on määritelty 12 pt, antaa rivin korkeus 24 pt siis kaksinkertaisen rivinvälin.
P { text-decoration: none / underline }
P { letter-spacing: 12pt }
Huomaa, että negatiivisetkin arvot sallitaan
Nyt on mahdollista antaa tekstillekin taustaväri:
P { background: blue }
P {text-align: left / right / center / justify}
Huomioi, että normaalikeinoin tekstin tasaaminen molemmista reunoista (justify) ei ole onnistunut aiemmin.
P { text-indent: 12 pt}
Tekstin sisentäminen, myös negatiiviset arvot sallitaan.
Valitse none, niin teksti on perinteisesti alleviivaamatonta, tai underline, niin teksti alleviivataan. Todellista hyötyä tästä on vasta linkkien yhteydessä:
A:link, A:visited, A:active, A:hover
{ text-decoration: none / underline }
link = normaali linkki
visited = linkki, jota on käytetty
active = linkki, jota painetaan hiirellä
hover = linkki, jonka päällä hiiren kursori on
Saat helposti taustavärin koko dokumentille:
BODY { background: red }
Tyylipohjilla onnistuu myös taustakuvan käyttäminen:
BODY { background: url(kuva1.gif) }
Voit kätevästi määrittää millaisia kuvioita käytetään missäkin listassa. Esimerkiksi:
UL {list-style: disc}
Muita määritteitä:
circle = ympyrä square = neliö none = ei mitään url (jotain) = kuvatiedoto verkosta
Esimerkki jälkimmäisestä:
UL { list-style: url(kolmioni.gif) square }
Oletuksena käytetään omaa kuvatiedostoa, mutta jos sitä ei ole tarjolla, käytetään neliötä.
Marginaalien asettamiseen tyylipohjat tuovat valtaisasti uutta:
BODY {margin-left: 12 pt}
Vasen marginaali
BODY {margin-right: 12 pt}
Oikea marginaali
BODY {margin-top: 12 pt}
Ylämarginaali
BODY {margin-bottom: 12 pt}
Alamarginaali
BODY {margin: 12 pt}
Koskettaa kaikkia marginaaleja
Huomaa, että tässä yhteydessä voit käyttää myös negatiivisia arvoja!
Seuraavassa dokumentissa annetaan lukuisia muotoilumäärityksiä käytettävälle tekstille:
<html>
<head>
<title>CSS</title>
<style>
<!--
H1, H2, H3
{
font-family: verdana;
}
P
{
font-family: verdana;
font-weigth: bold;
}
.harvempi
{
letter-spacing: 8pt;
}
-->
</style>
</head>
<body>
<h1>Otsikko1</h1>
<p>Tämä on normaalia leipätekstiä.</p>
<p class="harvempi">Tässä hieman
harvempaa leipätekstiä.</p>
<h3 class=harvempi>Tässä harvempi
alaotsikko</h3>
</body>
</html>
IE40
NC40
Tässä esimerkissä käytämme erilaisia linkkejä. Normaalistihan linkit ovat olleet esimerkiksi samanvärisiä koko dokumentissa.
<html>
<head>
<title>CSS</title>
<style>
<!--
A:link, A:visited
{ text-decoration: none }
A:hover
{ text-decoration: underline }
.isolinkki
{ font-size: 20pt;
color: blue }
.pienilinkki
{ font-size: 10pt;
color: red }
-->
</style>
</head>
<body>
<h1>Erilaisia linkkejä</h1>
<p>
<A class=isolinkki
HREF="http://www.microsoft.com">
Microsoft</A>
</p>
<p>
<A class=pienilinkki
HREF="http://www.asia.microsoft.com">
Aasian peilipalvelin</A> -
<A class=pienilinkki
HREF="http://www.eu.microsoft.com">
Euroopan peilipalvelin</A>.
</p>
</body>
</html>
Huomaa, että linkin alleviivaus on näkyvillä vain, kun hiiri on ao. linkin päällä. Netscape Communicator 4.0 ei tue tätä toiminnetta.
IE40
NC40
Tässä esimerkissä luomme dokumentin muotoilun kokonaan tyylipohjilla. Oheiseen dokumenttiin lisätään vain ulkoista tyylipohjaa kutsuva rivi:
<LINK REL="stylesheet" TYPE="text/css" HREF="perus.css">
Dokumentti on alunperin seuraavan kaltainen:
<html> <head> <title>CSS</title> </head> <body> <h1>Perusdokumentti</h1> <p>Tässä dokumentissa ei ole mitään erikoista, eihän?</p> <h3>Otsikotkin ovat perinteistä kokoa</h3> <ul> <li>Tämä listakin on perinteisen näköinen <li>eikö totta? </ul> </body> </html>
Tyylikomennot sisältävä perus.css-tiedosto:
H1
{
font-family: verdana;
color: green;
}
H3
{
font-family: verdana;
color: black;
}
P
{
font-family: arial;
color: green;
}
UL
{
list-style: square;
}
BODY
{
background: white;
margin-left: 40 pt;
margin-right: 40 pt;
margin-top: 40 pt;
margin-bottom: 40 pt;
}
Alkuperäinen dokumentti:
IE40
NC40
Tyylikomennot käyttöönottavan rivin lisääminen muuttaa ulkoasun dramattisesti:
IE40
NC40
Tyylipohjat tulevat vielä kehittymään, olenkin tässä esitellyt vain kaikkein merkittävimmät ominaisuudet. Lisätietoa tyylipohjista löydät kätevästi osoitteesta http://www.w3.org/Style/.
W3 on organisaatio, joka huolehtii mm. HTML:n kehityksestä.
Kiitos paljon hyvästä sivustosta, sain juuri tarvitsemani tiedot. Selkeä esitystapa ja havainnolliset ohjeet tekevät sivustosta helpon ja miellyttävän käyttää. Arvosana: 10+
9.9.2003 14:16Erittäin hienot ja kätevät sivut! Juuri sellaista tietoa, jota tarvitsen. :)
Sama juttu... 10+ arvosanaksi.
Loistavaa! Helppotajuisia ohjeita! Kiitos!
5.11.2003 15:05Voikos css-stylesheeteillä muunnella tableja?Miten tableihin voisi sitten asetella arvoja kuten valign="top" jne. Lisäksi nämä cellpaddingit ja cellspacingit olisi mukava saada noilla toimimaan. En ole ainakaan aiemmin onnistunut.
9.11.2003 17:14Tyylejä voi asettaa mille tahansa elementille, myös TABLE:lle.
Tutustu tyylipohjien dokumentaatioon osoitteessa http://www.w3.org/TR/CSS1.html . Lue sieltä vaikka kohdat 'vertical-align' ja 'text-align'. Nämä vastaavat HTML:n valign- ja align-attribuutteja.
A:link -valitsimella voi laittaa linkin värin mutta se ei muuta kuvalinkin kehyksen väriä, kuten tapahtuu hoidettaessa homma body-tagin attribuuteilla (link, alink, vlink). Miten tämä tehdään CSS:llä ?
22.1.2004 15:53Make: kyllä A:LINK -valitsin vaikuttaa kaikkeen, mikä A-tagin sisään jää, myös kuviin. Kokeilepa eri selaimilla.
20.2.2004 08:06Kiitos näistä loistavista ohjeista =)
21.3.2004 19:12Kerrankin hyvät suomenkieliset ohje sivustot
10+
hyvät sivut 10+
12.6.2004 12:47"SPAN ja DIV" -esimerkissä on kirjoitusvirhe: alleviivaus ei toimi, koska text-decoration on kirjoitettu väärin.
Todella hyvät sivut olet kokonaisuudessaan väsänyt. Lukaisin "HTML-tekniikoiden mustalista" -kirjoituksen ja huomasin, ettei taulukkoja pitäisi käyttää asetteluun. Olen ennen käyttänyt niitä paljon, mutta nyt olen kiinnostunut tekemään saman tyylipohjilla. Mitä keskeisiä määrittelyjä minun tulisi käyttää elementtien asettelussa? Hmh, ovatkohan ne float, position, display jne... Täytyypä opiskella lisää. :)
Hups, teitähän on monia tekijöitä. Kiitos kaikille.
15.6.2004 08:45Korjasin kirjoitusvirheen text-decorationissa.
En lähde tässä erittelemään taittotekniikoita tyylipohjilla, mutta seuraavista saattaa olla apua:
http://www.alistapart.com/articles/journey/
http://glish.com/css/
Kuva linkkien ympärille tulee kehys. miten sen sais pois?
28.7.2004 16:00Kuvalinkeistä saa linkkiominaisuuden osoittavan reunuksen pois määritteellä border.
<img src="omakuva.jpg" width="100" height="50" alt="Omakuva" border="0">
Border-määriteen käyttö on paheksuttavaa (deprecated), joten reunuksen poisto tulee toteuttaa tyylisäännöllä:
<img src="omakuva.jpg" width="100" height="50" alt="Omakuva" style="border-style: none;">
Miten kuvalinkkiin saa animaation?
9.9.2004 22:40Saisko jotenkin sillei, että kuva venyis toisesta reunasta toiseen?
Eikös linkkikuvaan saisi animaation sillei, että pistää sen GIF muodossa? Tai sit hösläät Flashilla.
Miten sais venytettyä kuvan toisesta reunasta toiseen? paitsi hösläämällä koolla?
3.10.2004 12:29Kuinka kykenen muuttamaan taustakuvan kokoa?Asetin erään kuvan sivujeni taustakuvaksi, mutta kuva kun oli hiukan liian pieni, niin kuvaa on sitten vierekkäin muutama kappale.
2.12.2004 09:27Miten saan laitettua taustakuvan vain marginaalien sisä- tai ulkopuolelle? Haluaisin että marginaalien reunan puolella olisi taustakuva ja marginaalien välissä olisi valkoinen pohja.
2.12.2004 12:45Vain marginaalien täyttäminen taustakuvalla on varsin helppo toteutus.
Annetaan ensin koko sivulle taustakuva body { background: url('tausta.png'); color: black; }.
Annetaan sitten diville, johon sisältö on kiedottu, taustaväri div#sisalto { background: white; color: black; }
HTML-koodi:
<body>
<div id="sisalto">
<h1>foobar</h1>
<p>foo</p>
<p>bar</p>
</div>
</body>
Muista aina antaa myös tekstille color-määrite kun määrität taustakuvia tai -värejä!
hyödyllistä kamaa ja moni puolista tietoa
ihan jees!!!
No nää sivut on 10++ plus 0%-100% 1000%!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!TOSI SELKE¤ET OHJEET&%¤&#%"¤&¤"%&"#)%"¤=&"%(=&%("=& %(&%"="("&=¤(&%"="("((= ®m
27.2.2005 18:06mä nyt en tajuu miten näit koti sivui tehään..
22.3.2005 18:27Miten saisi esim. copyright-tekstin pysymään ihan siellä sivun alareunassa, kun itse tekstiä ei kuitenkaan ole kuin puoli sivua?! yritin margin-bottomilla mutta se on ilmeisesti minimimääritys...
27.3.2005 14:48Margin-bottom vaikuttaa elementkin omaan alamarginaaliin, eikä sillä ole mitään tekemistä koko sivun asettelun kanssa.
Seuraava koodinpätkä asettanee tekstin alareunaan.
<div style="position: absolute; bottom: 0;">
© Mulla on kaikki oikeudet
</div>
Voisiko css:llä ratketa seuraavanlainen ongelma:
Sivujeni oikealla ja vasemmalla laidalla on kuvat omissa soluissaan. Molemmille kuville on annettu määritys tavallisella html:llä "heihgt="100%"". Firefox ymmärtää tämän, ja korottaakin kuvien korkeutta yhtä korkeiksi, kuin sivun sisältökin. Ie sitten taas ei ymmärrä jostain maagisesta syystä, ja jättää kuvat alkuperäiseen kokoonsa (joka on 1pt).
Koodin pätkä:
<td width="112" align="left" height="100%">
<img src="vasen_tausta.gif" height="100%" width="112">
</td>
Niin ja vielä lisäten edelliseen, sivujeni ulkoasun olen tehnyt taulukoilla css:n osaamattomuuteni takia, oliko aivan huono idea? Sivut ovat vielä sen verran alussa, että alusta aloittaminen css:n turvin ei tule olemaan mahdotonta.
Kiitokset mahtavista sivuista ja mahdollisesta vastauksesta jo etukäteen!
Mikko on ilmeisesti tekemässä kärpäsestä härkästä. Tässähän halutaan asettaa soluun tausta.
<td style="background-image: url('vasen_tausta.gif');"></td>
Kannattaa ihan tosiaan suunnitella sivut alun alkaen siten, että merkkaa tekstin ensin HTML:llä, sitten vasta ulkoasun CSS:llä.
Itse pidän myös vaihtoehdosta:
<td background="images/background.jpg">Pöö</td>
ei millää pahal mut toi teijän tausta väri juttu ei toimi..... mul tulee valkonen tausta mis lukee { background: "väri" }
et jos voitte neuvoo miten saan siihen tulee sen värin????
Siis aluksi en tajunnut yhtään mitään HTML stä. Mutta kun löysin nämät sivut niin tiedän KAIKEN tarpeellisen. Näistä sivuista on ollut paljon hyötä minulle, ja varmasti muillekkin.
!! KIITOS !!
Hyvät sivut joilla päsee hyvin alkuun, mutta nyt olisi ongelma. Miten saan tekstin alkamaan juuri tietystä kohdasta, marginaaleja en halua käyttää, sillä eri resoluutiolla teksti on jossain aivan muualla kuin pitäisi !?
20.5.2006 11:21Hyvät sivut oli opin paljon asiaa
30.6.2006 19:55Miten kuvan päälle saa tekstiä?
27.7.2006 09:49Mistä johtuu, että (ainakin Mozillalla) linkkien text-decoration aiheuttaa myös muun tekstin esim. <p>:ssä muuttumisen? Voiko tälle mitään?
27.7.2006 10:02Selvisikin kun jaksoi aikansa pähkäillä. Mutta kiitos loistavista sivuista!
30.9.2006 13:40<HTML>
<BODY>
<P>Mahtavat sivut!!! Hyvin selvää ja havainnollista. Nyt alankin tästä vähän niinku värkkää sivui... :D</P>
<hr>
<P>Arvosana: 10+</P>
<hr>
<FONT SIZE=1>no copyrights!</FONT>
</BODY>
</HTML>
Terve! Miten saa taustakuvan silleen että se pienenee ikkunan mukana? Eli kun lähtee vetämään selain ikkunan kulmasta nii taustakuva menee mukana?
14.1.2007 16:31Eli siis jos liitän CSS:n ulkoisesti, sen tiedoston on oltava samassa kansiossa muiden kotisivun tiedostojen kanssa, ne?
MUTTA. Pitääkö siihen vain laittaa juuri tuollaiset:
<style>
<!--
.verdana
{
font-family: verdana;
}
.as
{
color: blue;
text-decoration: underline;
}
-->
</style>
..tyyppiset koodit? Vai mitä sinne pitäisi laittaa? Koko sivun koodit yhdessä? En ole tajunnut näitä vieläkään. Entäs se, kun tuossakin esimerkissä nuo välit ovat valtavia. Summissaanko sitä vaan laitetaan jumalattomasti välilyöntejä, vai? Onko noilla väleillä suurikin merkitys ja miten ne tehdään? >____<
Oikeastaan tarvitsisin vain ohjetta, miten saan laatikon tekstiin marginaalit kummallekin puolelle ja tekstin tasautuvan vain vasemmalle reunalle. (Se venyttää sanat itsestään laatikon kummallekin reunalle.)
.ala {
font-size: 12px;// fontin koko
color: #C0c0c0; // fontin väri
text-align: left; //fontti tasataan vasem
margin-top: 10px; //yläreunasta on 10px marginaali
}
table.main
{
width: 600;
border: 0;
padding-top: 10px;
}
<style> jututkin voit jättää pois!
Mutta muista laittaa haluamaasi kohtaan esim <td class="ala" ..tai <p class="ala"... varsinaiseen html documenttiin.
Niin löytyykö diveistä jossain enemmän asiaa, kun oli aika suppeasti, esim kuinka teet sivupohjan sun muuta..
Mutta siis kuinka saat tekstiosion keskitettyä, sillain että sivuille jää taustaväri..? Diveillä siis..
TÄH?
En jaksanut lukee kaikkii mut mulle ei selvinny nää kaks juttuu: maksaaks se? ja missä se tehää!!!??!!
Niin ei tämä sivujen tekeminen maksa, sen julkaiseminen vain saattaa maksaa jos hommaa kunnon domainin. Muistiolla on hyvä lähteä liikkeelle sivuja tehdessä. Niin ja Anskulle vielä kommentti että ei siihen "ulkoiseen" .css tiedostoon tarvite laittaa <style> määrittelyitä. Laitat vain html tiedostoon head tagien sisään linkin siihen tiedostoon.
ESIM.
<HEAD>
<link rel="stylesheet" href="tyylipohjat.css" type:"text/css">
</HEAD>
ja se linkki kirjoitetaan tuon href attribuutin jälkeen. Eikä sen css tiedoston tietääkseni tarvitse olla samassa kansiossa muiden html tiedostojen kanssa, jos vain huomioi sen linkityksesä. esimerkiksi .css tiedosto voisi olla vaikka alikansiossa nimeltä "alikansio". Tällöin linkitys tapahtuisi seuraavasti:
<HEAD>
<link rel="stylesheet" href="alikansio\tyylipohjat.css" type:"text/css">
</HEAD>
Joku kyseli että miten kuvan päälle saa tekstiä. Siihen on ainakin yksi tapa:
teet aluksi taulukon ja laitat vaikkapa solun taustakuvaksi haluamasi kuvan.(solu ilmaistaan <td> tagilla) Tällöin solun kuuluu olla kuvasi kokoinen.
esim.
<table>
<tr>
<td background="kuva.png" width="200" height="150">
TÄHÄN TEKSTIÄ
</td>
</tr>
</table>
Osaisiko kukaan neuvoa miten tuonne hakupalkkiin saa oman sivustonsa logon. Esim. Googlessa siellä on googlen logo. ja tätä kirjottaessani siellä näkyy internet explorerin logo.
23.4.2007 16:02mitenköhän sivun koon voi määrittää, eli esimerkiksi jos haluaisin että leveys pysyisi vaikkapa tuona 1024px:ä eikä muuttuisi vaikka selainikkunan pienentäisi miten pieneksi tahansa.
13.6.2007 14:38Tossa oli mittayksiköistä... eli voisko tehä jonkin koodin jolla esim vaihtaa "## kiloa = ## paunaa"?
Sitä soveltaa ja laittaa esim. rahayksikönvaihtajan...
Ei se onnistu html-kielen avulla, eikä tietenkään css:ää voi myöskään käyttää siihen tarkoitukseen. Javascriptillä se saattaisi onnistua. Nuo mittayksiköt tarkoittivat esim. otsikon kokoa, se että ne oli selvennetty toisella mittayksiköllä auttaa vain havainnollistamaan sen tietyn mittayksikön kokoa. voit yrittää etsiä haluamaasi scriptiä osoitteesta http://javascript.internet.com
31.7.2007 15:47sain tarvitsemani tiedot...meni vaan kaua aikaa lukee mut who cares? arvosana 10+
1.11.2007 20:15Erinomainen sivusto! Sain paljon vinkkejä sivuihini tämän kautta! =D Mutta yksi asia jäi epäselväksi.. Miten voin määrittää sivujen "koon"? Elikkä en halua että sivuni ovat koko näyttöruudun kokoiset. Kiitoksia etukäteen!
10.12.2007 19:02miten mää saan kotisivun näkymään pienemmässä koossa?... ja miten voi kuvien pälle laitta tekstiä?
huiput sivut... ei muuta vois sanoo xD :)
millä koodilla voin saada hyvän käviä laskurin, joka otta vain kerran päivässä samalta koneelta?
Millä käskyllä, tai miten HTML:llä saan estettyä hiiren oikean näppäimen käytön sivuillani. Muistan koulussa joskus tehneeni niin kotisivuilleni, mutten muista enää miten sen tein. Haluaisin niin, että jos klikkaan oikeaa näppäintä esim tallentaakseen kuvan sivuilla, niin esiin paukahtaa vain teksti esim "copyright" tms. ? Tällöin ei myöskään näe lähdekoodia tms, "oikean näppäimen valikkoa"..
14.1.2008 18:11Miten saan taustakuvan liitettyä? Kun yritin laittaa, ja katsoin sen jälkeen, koodi näkyi tekstinä eikä taustakuva tullut sinne.
3.3.2008 14:55Kuules keijjo pitkänen olet täysi luuseri ja voit mennä muualle kertomaan silleen skoijar du anal?
4.3.2008 11:01Niin just!! tarviin äkkii tietoo miten saan taustakuvan näkyviin.. ku näkyy vaan koodi vai suoraan kopioin täältä!! APUA!!
4.3.2008 11:01Korjaus: *vaikka kopioin täältä!
28.3.2008 16:10kun on tehny ton nettisivun muistiolla ni mihin se pitää sen jälkeen laittaa??? ku ei oikeen selviä täältä oon talettanu sen ni miten se tulee sinne nettii?
18.4.2008 17:12penaerkkikalevi, sun pitää hostata ne sivut jonnekkin, etsi googlella joku sivujen hostaus paikka. Esim freewebsiin saa laittua omaa koodia.
23.4.2008 09:10lköj
24.4.2008 10:54Hei!
Onko HTML:ssä tai CSS:ssä sellaista koodia, että kuvasuhde näyttöön pysyy samana normaalissa tietokoneen näytössä, kuin laajakuvanäytössäkin, kun sivuja katsoo? Ettei laajakuvassa tarvitsisi skrollata.
En tiedä koodin pätkästä. Mutta html editorilla kuten nvulla pystyy.
21.9.2008 08:49Itse juuri harjoittelin ym. , kyllä näistä saa ihan selvää, turha valittaa jos ei aivo-kapasiteetti riitä.
7.10.2008 16:40Hyvät sivut (Y) :)
21.10.2008 13:18Ööh.. Olisko semmosta koodia jolla sais kirjoitettua kuvan päälle, en ole löytänyt, olisi kiva jos joku kertoisi. :-) Sekään ei ollut hyvä idea, laittaa taustakuvaksi kuvat ja kirjoittaa päälle. Suttaantu koko sivut!
21.10.2008 13:55<b>Ja tuotanoinnin, Olisko kellään tiedossa, kuinka suureksi ( kuinka paljon se merkitsee ) että kuinka iso numero marginaalissa täytyy olla? Minulla kun yritin, marginaalia ei tullut suuremmaksi edes kun laitoin 20. Mites se niin menikään?<b> :D
31.10.2008 18:05Kiitos mahtavasta oppaasta. Avullasi olen tehnyt 2 eri sivustoa. :D toisella sivustolla on jo muutama sponsorikin ja toinen on aika kesken eräinen. ISO käsi sinullle!! Kiitos viellä kerran, en ole nähnyt missään esitettävän html kieltä näin selkeästi ja esimerkillisesti.
- eki -
Miten onnistuu usean sivun teko? (siis samalla sivulla) Vähän vaikea selittää mutta esim. huuto.netin sivulla on vasemmassa laidassa ns. navigointi palkki josta pääsee saman sivun muille sivuille.
20.1.2009 15:18Eero: Sinun pitää tehdä ns. "pohjalinkki", joka tuntee koko sivustpn.
9.3.2009 11:14Kuinka tehdään teksti(tiedosto?) joka näkyy samana nettisivuston kaikilla sivuilla? Siis jos teen vaikka "ajankohtaista" -laatikon jonka on tarkoitus näkyä samanlaisena kaikilla alasivuillakin, mutta en halua päivittää ajankohtaisia tietoja jokaiselle sivulle erikseen. Olisi siis yksi "ajankohtaista" -tiedosto jota päivitän ja se näkyy kaikilla sivuilla sitten samanlaisena.
6.4.2009 08:29Kiitos mainiosta opastuksesta, kun näitä mikisoftin koneita on niin mahdotonta hallita, kun on kaikki htmmät ynnämuut hölpöttimet
9.7.2009 16:06Kiitos paljon!
Tämä auttoi minua paljon sivujeni teossa!
Arvosana: 10+ ;)
Miten sitten mä voin kattoa tuota mun kotisivua, tuolleen esikatseluna? (8,
11.11.2009 18:04Kannattaa ladata CoffeeCup -html-editori. Itse käytän sitä ja hyvin toimii!
7.1.2010 12:48eeee
8.8.2010 12:03Nyt vuonna 2010 lähes kaikki linkit tuolla css home site:ssa johtavat sivulle "Forbidden". omgrofllol
18.1.2011 09:40iha helvetin tylsä!
1.2.2011 08:47Ei tällästä paskaa kukaan jaksa julkee!!!!
1.2.2011 08:48täyttä shittiö
1.2.2011 08:48Aivan mahtava sivu. Paljon hyötyä.
26.5.2011 22:27öö hieman vanhanaikaista (:
24.11.2011 12:55ohhojjakkaa :o onpas tylsää ohjeistusta! Ja miksi vielä nykyaikana nettisivujen teko css:llä on näin hiivatun vaikeaa!? Kuka keksii sellaiset zydeemit ettei tarvitse koko ajan taulukoida ja skrivata jotain hemmetin koodia vaan voisi vihdoinkin keskittyä heti pelkkään taiteelliseen työhön eli layoutin tekoon sellaiseksi kun haluaa.