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ł: Test wiedzy o językach skryptowych

Test wiedzy o językach skryptowych

Artykuł: Edytor grafiki GIMP

Edytor grafiki GIMP

Artykuł: Wired Equivalent Privacy

Wired Equivalent Privacy

Artykuł: Kalkulator bc: Pętle

Kalkulator bc: Pętle

Artykuł: PHP: Przechowywanie danych sesji po stronie serwera

PHP: Przechowywanie danych sesji po stronie serwera

Artykuł: PHP: Udoskonalony system szablonów

PHP: Udoskonalony system szablonów

Artykuł: Wyświetlanie tablicy routingu

Wyświetlanie tablicy routingu

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły