Siirry sivun sisältöön Avut CSS HTML JavaScript Kotisivu

display

display-ominaisuudella asetetaan elementti johonkin esitystapakategoriaan. Arvoksi kelpaavat seuraavat avainsanat:

DOM-viittaus: olio.style.display

Huomiot

Ominaisuuden alkuarvo inline koskee käytännössä vain uusia ja/tai tuntemattomia elementtejä, koska monelle elementille asetetaan muita arvoja selainten oletustyyleistä.

Esimerkki

Huomio! Tämän esimerkin toiminnallisuus vaatii tyylitukea.

Tämän dokumentin luetteloalkiot, eli LI-elementit, saavat selaimen oletustyylien kautta display-ominaisuuden arvoksi list-item. :

Lisätietoja englanniksi

Käytännön sovellus: räätälöity vihjelaatikko

Huomio! Tämän esimerkin toiminnallisuus vaatii tyylitukea.

Seuraavassa toteutetaan, elementin esitystapaan vaikuttamalla, työkaluvihjeeksi (tooltip) kutsuttu efekti. Esimerkin vuoksi seuraavan luettelon 1. alkion linkin vihjeteksti on toteutettu perinteisesti TITLE-attribuutilla ja 2. alkion pääosin display-ominaisuuden arvomuutoksella.

On vielä huomioitava, että räätälöity vihjelaatikko voidaan toteuttaa monella eri tavalla, myös TITLE-attribuuttia hyväksikäyttäen. Tässä on pyritty mahdollisimman yksinkertaiseen ratkaisuun, jossa merkkaus koostuu A-elementistä, joka sisältää SPAN-elementin:

<a href="javascript:window.alert('Tämä on esimerkkilinkki.\n\nMuuta oma kohteesi tilalle.')">vihjelaatikko
<span>Tyyleillä toteutettu vihjelaatikko.</span></a>

Tyyleissä elementteihin viitataan seuraavasti:

/*Piilotetaan A-elementin lapsina esiintyvät SPAN-elementit:*/
a > span {
display:none;
}
/*Mutta käyttäjän osoittimen alla:*/
a:hover > span {
/*Esitetään elementti tekstitasolla:*/
display:inline;
/*Poistetaan elementtivirrasta ehdottomalla asettelulla:*/
position:absolute;
/*Asetetaan laatikon maksimileveys:*/
max-width:20em;
/*Säädetään marginaaleilla laatikon sijaintia:*/
margin-top:1em; 
margin-left:1em;
/*Poistetaan linkkitekstin (oletus)alleviivaus:*/
text-decoration:none;
/*Edustan ja taustan väritys:*/
color:#fff;
background:#000;
/*Muita ulkoasumäärityksiä tarpeen mukaan:*/
padding:0.5em;
border:3px solid red;
}
CSS 2.1 -ominaisuusreferenssi | CSS 2.1 -luokitusominaisuudet