Css - luokat

Sisältää
tehtäviä!

Joskus on tarpeen tehdä usealle elementille samoja ominaisuuksia. Tällöin voidaan käyttää luokkaa class.

Alla on määritelty tyyli elementeille, joiden class="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 class="taulu">Jotain tekstiä </div> 
<div class="taulu">Toinen teksti, jotain muuta</div> 

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

</body>
</html>

Huomaa!
Luokka määritellään luokan nimen edessä olevalla pisteellä (.taulu), kun id määriteltiin nimen edessä olevalla risuaidalla (#taulu).

Lisää tyylejä

Tyylin muuttaminen

Luokkaan kuuluvat elementit haetaan käskyllä 

haku = document.select(".luokanNimi")

Haku antaa tulokseksi listan, jonka alkiot voidaan käydä läpi ja muuttaa niiden tyyli 

from browser import document

def muutaTyyli(event):
	haku = document.select(".taulu")
	for alkio in haku:
		alkio.style.borderColor = "#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.select(".taulu")
	for alkio in haku:
		alkio.style.borderColor = "#00ff00"
	
document['nappi1'].bind("click", muutaTyyli)

</script>

</head>

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

<div class="taulu">Jotain tekstiä </div> 
<div class="taulu">Toinen teksti, jotain muuta</div> 

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

</body>
</html>

Tehtävä 1:

Muuta ohjelmaa siten, että luokan .taulu tekstikenttien taustaväri muuttuu punaiseksi nappia painamalla.

Tehtävä 2:

Kirjoita nappiin ohjelma mikä muuttaa reunan värin joka toisella painannuksella punaiseksi, joka toisella vihreäksi.
Voit käyttää hyväksi if-lausetta .