Webb­utveckling

CSS och listor

Numrerade listor

Vi har redan pratat om hur vi kan ändra utseendet på våra numrerade listor med HTML:

<ol type="i">
	<li>...</li>
</ol>

1. i
2. I
3. 1
4. a
5. A

Vi kan åstadkomma samma resultat genom CSS-kod:

ol{
	list-style-type: lower-roman;
}

1. lower-roman
2. upper-roman
3. decimal
4. decimal-leading-zero
5. lower-alpha
6. upper-alpha
7. lower-greek

Även om det är mer att skriva för att göra en lista annorlunda, så blir det mindre om man tänker på att man kan få det att gälla för flera olika listor samtidigt.

Onumrerade listor

Med CSS kan vi också ändra på hur onumrerade listor ska se ut:

ul{
	list-style-type: square;
}

• square
• disc
• circle
• none

Bilder som punkter

Vi kan också lägga till en bild som vi vill använda som punkt istället för någon av de inbyggda.

ul{
	list-style-image: url("bilden");
}

• Titta
• Här

Det är dock viktigt att tänka på storleken på bilden. Somliga föreslår att man lägger in den som en bakgrundsbild och sen justerar padding så att den ser ut att vara en punkt. Då har de också använt sig av list-style-type: none;

list-style-position

Kommandot list-style-position justerar hur punbkten och texten ska ligga i förhållande till varandra.

ul{
	list-style-position: outside; /* Detta är standard */
}

• För att visa hur detta fungerar behöver vi ha en del text (eller använde <br/> men vad är det roliga i det). Så nu skriver jag på här för få till en radbrytning eftersom jag skriver så mycket. Jag hade också kunnat ställa in width i min CSS för att göra det lättare för mig.

ul{
	list-style-position: inside; 
}

• För att visa hur detta fungerar behöver vi ha en del text (eller använde <br/> men vad är det roliga i det). Så nu skriver jag på här för få till en radbrytning eftersom jag skriver så mycket. Jag hade också kunnat ställa in width i min CSS för att göra det lättare för mig.

CSS och tabeller

Snabb recap

<table>
	<caption>Officiella äventyr till Dungeons and Dragons</caption>
	<thead>
		<tr>
			<th>Utgåva</th>
			<th>Äventyr</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>3rd</td>
			<td>30</td>
		</tr>
		<tr>
			<td>4th</td>
			<td>24</td>
		</tr>
		<tr>
			<td>5th</td>
			<td>22</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<th>Summa</th>
			<td>76</td>
		</tr>
	</tfoot>
</table>

Oläslighet

Det är vanligt att tänka att ett rutnät gör en tabell mer lättläst. Det kan stämma på en liten tabell, men så fort du har en stor tabell med flera rader och kolumner så blir det kladdigt.

Läslighet

När vi har en tabell med mycket data, om det är många kolumner eller många rader så hjälper det att ha alternerande färg på rader/kolumner.

tr:nth-child(2n){ /* Ändrar på varannan rad */
	background-color: yellow;
}

För att öka läsligheten ytterliggare så kan vi lägga till en regel för vad som ska hända om man håller musen över en rad:

tr:hover{
	background-color: silver;
}

Vi kan också fixa så att den rutan vi håller över byter färg

td:hover{
	background-color: black;
	color: yellow;
}

Vi kan också få den cell vi hovrar över att ploppa ut:

td:hover{
	background-color: black;
	color: yellow;
	padding: 5px;
}

Siffor i tabeller är ofta bäst att högerjustera för att man lättare ska kunna se storleksordningen på dem.

.tal{
	text-align: right;
}