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ł: Intel Core i9

Intel Core i9

Artykuł: Święto Lotnictwa Polskiego

Święto Lotnictwa Polskiego

Artykuł: Polska Marynarka Wojenna w okresie Pierwszej Rzeczpospolitej

Polska Marynarka Wojenna w okresie Pierwszej Rzeczpospolitej

Artykuł: Utworzenie Marynarki Wojennej

Utworzenie Marynarki Wojennej

Artykuł: Dzień, w którym słońce zaszło w&nbsp;południe

Dzień, w którym słońce zaszło w południe

Artykuł: GeForce 300

GeForce 300

Artykuł: Sega Dreamcast

Sega Dreamcast

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły