Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

HTML i CSS: Szachownica

czwartek,

HTML i CSS: Szachownica

Wykonanie szachownicy z pomocą języków HTML i CSS tylko pozornie wydaje się trudne.

Szachownica

Symbole szachowe

Konieczność dołączenia do projektu symboli szachowych nie wygląda zachęcająco, jednak okazuje się, że nie ma potrzeby tworzenia (lub pozyskania) dodatkowych plików graficznych. Symbole szachowe zostały zdefiniowane w Unikodzie i aby je wyświetlić, wystarczy zastosować właściwe odwołanie znakowe lub wręcz „wkleić” je do dokumentu.

NazwaSymbolUnikodHTML (dec.)HTML (hex.)
królU+2654♔♔
hetmanU+2655♕♕
wieżaU+2656♖♖
goniecU+2657♗♗
skoczekU+2658♘♘
pionekU+2659♙♙
królU+265A♚♚
hetmanU+265B♛♛
wieżaU+265C♜♜
goniecU+265D♝♝
skoczekU+265E♞♞
pionekU+265F♟♟

Kod HTML

Do przedstawienia szachownicy wykorzystano tabelę HTML. Zgodnie z zasadami gry w szachy ma ona wymiary osiem na osiem pól (osiem wierszy po osiem pól każdy).

<table class="szachy">
  <tbody>
    <tr>
      <td>♜</td>
      <td>♞</td>
      <td>♝</td>
      <td>♛</td>
      <td>♚</td>
      <td>♝</td>
      <td>♞</td>
      <td>♜</td>
    </tr>
    <tr>
      <td>♟</td>
      <td>♟</td>
      <td>♟</td>
      <td>♟</td>
      <td>♟</td>
      <td>♟</td>
      <td>♟</td>
      <td>♟</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>♙</td>
      <td>♙</td>
      <td>♙</td>
      <td>♙</td>
      <td>♙</td>
      <td>♙</td>
      <td>♙</td>
      <td>♙</td>
    </tr>
    <tr>
      <td>♖</td>
      <td>♘</td>
      <td>♗</td>
      <td>♕</td>
      <td>♔</td>
      <td>♗</td>
      <td>♘</td>
      <td>♖</td>
    </tr>
  </tbody>
</table>

Kod CSS

Szachownica otrzymała obramowanie (własność border dla selektora .szachy). Reguły CSS width oraz height zastosowane do każdego pola tabeli (selektor .szachy td) służą do ustawienia stałych rozmiarów. Własności text-align oraz vertical-align „wyśrodkowują” figury odpowiednio w poziomie i w pionie. Selektor .szachy tr:nth-child(odd) td:nth-child(even) odnosi się do parzystych (even) pól nieparzystych (odd) wierszy. Ostatni selektor wybiera elementy „odwrotnie” czyli parzyste pola nieparzystych wierszy.

.szachy {
	border:solid 1px #777;
}
.szachy td {
	width:36px;
	height:36px;
	text-align: center;
	vertical-align: middle;
	font-size:20px;
}
.szachy tr:nth-child(odd) td:nth-child(even) {
	background: #ccc;
}
.szachy tr:nth-child(even) td:nth-child(odd) {
	background: #ccc;
}

Trzy miesiące temu na naszej stronie…

Artykuł: Przebieg wojny o Falklandy

Przebieg wojny o Falklandy

Artykuł: Piotr Nowak

Piotr Nowak

Artykuł: Jan Falkowski

Jan Falkowski

Artykuł: Krystyna Wituska

Krystyna Wituska

Artykuł: Międzynarodowy Dzień Zapobiegania Narkomanii

Międzynarodowy Dzień Zapobiegania Narkomanii

Artykuł: Windows 98

Windows 98

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły