[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
 Etsi sivuiltani: [Apua]
AihepiiriluetteloCSS-oppaan etusivuOpassivut > 2. Miten CSS liitetään Web-sivuihin > Tyyliattribuutteihin sijoitetut tyylisivut (jakso 2/3)

Tyyliattribuutteihin sijoitetut tyylisivut

Jos tyylisivuja määritellään elementtien sisällä käyttäen tyyliattribuuttia. Muista tyylisivuen määrittelyistä poiketen tyyliattribuutin sisällä olevalla kuvauksella ei käytetä kaarisulkuja. Esim.:

<TD style="border:1px solid #660033">

Menettely ei oleellisesti poikkea HTML 3.2:n attribuuttimäärittelyistä. Tätä menettelytapaa nimitetään englanninkielisissä teksteissä myös rivinsisäisten tyylien käyttämiseksi (inline style sheets or vain inline styles; termi on hieman ongelmallinen - lue Alaviite 1[S][Pw]). Jos haluat muuttaa elementin aloitusmerkinnän sisään tekemääsi määrittelyä, joudut etsimään sen muun koodin seasta aivan kuin HTML 3.2 esitysasua koskevat attribuutit! Tällä tavoin määriteltyjä tyylisivuja voitaisiin nimittää elementtitason tyylisivuiksi. Ne voidaan antaa useimmille elementeille, ei kuitenkaan juurielementeille, jolle HTML 4.01 spesifikaation mukaan voi antaa vain kieliattribuutteja.

Elementtitason tuomasta rajoituksesta huolimatta myös näillä tyylisivuilla on perustavalaatuisia eroja HTML 3.2 elementtien ulkoasua määritteleviin attribuutteihin nähden:

  1. Määrittelyt voivat olla paljon monipuolisempia. HTML 3.2 esitysasua koskevia attribuutteja (muunkinlaisia attribuutteja on olemassa) voi antaa vain yhden kerrallaan eli attribuutilla voi olla kerrallaan vain yksi arvo.
  2. HTML 3.2 dokumenteissa ei voi antaa tietylle elementille kuin vain rajoitetun määrän attribuutteja. CSS-ominaisuudet eivät ole sidonnaisia tiettyihin elementteihin kuten HTML 3.2 attribuutit. Tosin on tilanteita, että kaikkia CSS-ominaisuuksia ei oteta huomioon (mainitsen tällaisia tapauksia muilla sivuilla yksittäisissä asiayhteyksissä).

Vaikka tyyliattribuutit ovat heikoin tapa hyödyntää CSS-ominaisuuksia, ne ovat kuitenkin käyttökelpoisia esim. silloin, kun määritellään elementeille absoluuttisia paikkoja. Seuraava määrittely antaa kuvalle elementille 120 pikselin sijainnin sivun yläreunasta laskien (voit määritellä kuvan muut arvot joko HTML 3.2 attribuuteilla tai lisätä tyyliattribuutin sisään enemmän CSS-ominaisuuksia ([M][S][Pw])):

<IMG src="../Kuvat/Css/omakuvaIso.gif" style="position:absolute; top:120px;">

Käytä tyyliattribuutteja harkiten! Mieti ensin tarvitsetko välttämättä juuri tiettyyn kohtaan erillismäärittelyn.

Selainkohtaisia huomautuksia:.

  1. Netscape-selaimet eivät hyväksy tyyliattribuutin kanssa kaarisulkuja (asia ei ole kuitenkaan kovin yksiselitteinen ja käsittelen ongelmia Alaviite 2:ssa[S][Pw]).

  2. Suorat tyylimäärittelyt ovat kaikkien CSS:ää tukevien selainten luettavissa. Erityisesti Netscape 4.x -selaimilla on suuria toimintavaikeuksia CSS:n kanssa, jolloin sille ei pidä antaa samaa CSS:ää kuin esim. Opera ja MS IE -selaimille. Käyn erillissivulla[S][Pw] tarkemmin lävitse, miten Netscapen suhteen tulee menetellä.


[Alku]
 

Alaviite 1. Termin inline style sheets ongelma on siinä, että sanaa inline käytetään yleensä sanan block vastakohtana. Molemmat kuvaavat elementtien peruskäyttäytymistä. Mikäli termi olisi sopusoinnussa tämän jaottelun kanssa, se koskisi vain tyypillisiä rivinsisäiselementtejä, kuten EM. Parhaiten se sopisi elementille SPAN, joka on nimenomaisesti tarkoitettu rivinsisäisiin tyyli- ja kieliohituksiin.

Tällä kertaa ei ole kuitenkaan kyse elementtien käyttäytymisestä, vaan kyse on dokumentin runko-osaan sijoitetuista eli lähdekoodiin upotetuista (embedded) tyylisivuista. Kyseltyäni asiasta sain seuraavan vastauksen:

Yes, inline has two meanings: something can be inline in the source tai in the output... An inline style is a style that is embedded in the source, an inline element is an element that will look like a phrase in a line on output... Most people talk about "inline style" tai "style attribute",...

Suomalaisittain osuvinta on kirjoittaa vain tyyliattribuuteista, sillä niitä käytetään yksinomaan dokumentin runko-osassa. Käytän myös ilmaisua elementtitason tyylisivut (element-level style sheets).

Alaviite 2. Tyyliattribuutin oikeasta syntaksista on ollut erimielisyyksiä. Useimmat selaimet hyväksyvät style="{}", jolloin tulee selvemmin esille, että tyyliattribuutin sisällä on upotettu CSS-kuvauslohko. Mutta kyseinen syntaksi on vastoin tavanomaista HTML-syntaksia eikä Netscape sitä hyväksy. Kun keskustelin David Baronin kanssa, hän sanoi, että oikea syntaksi on style="". Tarkasteltuani asiaa syvällisesti, olen asiasta eri mieltä. Olennaista on se, että dominoivaksi syntaksiksi on valittu HTML eikä CSS, joten asialle ei enää voi tehdä mitään. Nykyinen syntaksi on saman kaltainen kuin JavaScript-kirjoitteilla, joissa voidaan koota yhteen monia toimintoja, jotka erotetaan toisistaan ";"-merkillä, esim.: onClick="uusikkunaa(); if(browser) nayta(10, 'b')".

[Alku]