Css - tyylit

Sisältää
tehtäviä!

Css tarjoaa keinot muuttaa kaikkien sivun elementtien ominaisuuksia. Yleensä css-tyylit kirjoitetaan sivun head-osioon tagien <style> ja </style> sisään.

Alla on määritelty tyyli elementille, minkä id="taulu". 

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://www.matikki.fi/guidebook-python/brython/brython380/brython.js"></script>

<title>Brython</title>

<style>

#taulu {
	width:300px;
	height:40px;
	font-size:20px;
	font-weight:bold;
	border:solid 2px #ff0000;
	text-align:center;
	color:#0000ff;
}

</style>

<script type="text/python">

</script>

</head>

<body onload="brython({debug:1,indexedDB: false})">

<div id="taulu">Jotain tekstiä </div> 

<input type="button" value="Klikkaa" id="nappi1" />

</body>
</html>

Lisää tyylejä

Tyylin muuttaminen

Elementin tyyliä voidaan muuttaa sivulle upotetussa ohjelmassa viittaamalla elementin style-ominaisuuteen. Alla funktiossa muutaTyyli haetaan ensin elementti muuttujaan haku, jonka jälkeen muutetaan elementin style.color-ominaisuutta. 

from browser import document

def muutaTyyli(event):
	haku = document["taulu"]
	haku.style.color = "#00ff00"
	
document['nappi1'].bind("click", muutaTyyli)


<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://www.matikki.fi/guidebook-python/brython/brython380/brython.js"></script>

<title>Brython</title>

<style>

#taulu {
	width:300px;
	height:40px;
	font-size:20px;
	font-weight:bold;
	border:solid 2px #ff0000;
	text-align:center;
	color:#0000ff;
}

</style>

<script type="text/python">
from browser import document

def muutaTyyli(event):
	haku = document["taulu"]
	haku.style.color = "#00ff00"
	
document['nappi1'].bind("click", muutaTyyli)

</script>

</head>

<body onload="brython({debug:1,indexedDB: false})">

<div id="taulu">Jotain tekstiä </div> 

<input type="button" value="Klikkaa" id="nappi1" />

</body>
</html>

Huomautus:
Jos muutat ominaisuutta, joka on kaksiosainen, esimerkiksi font-size, joudut kirjoittamaan ohjelmaan ominaisuuden muodossa fontSize, eli 

from browser import document

def muutaTyyli(event):
	haku = document["taulu"]
	haku.style.fontSize = "15px"
	
document['nappi1'].bind("click", muutaTyyli)

Tehtävä 1:

Kirjoita tyyli napille ja muuta ohjelmaa siten, että napin tekstin väri muuttuu punaiseksi nappia painamalla.

Tehtävä 2:

Lisää sivulle kaksi nappia. Toinen napin pitää piilottaa tekstikenttä "taulu" ja toisen tuoda sen taas näkyviin.
Löydät ominaisuuksia sivulta.