Как лучше всего использовать jQuery: с HTML или CSS для форматирования

Question

В рамках изучения jQuery я решил создать простую игру в крестики-нолики на JavaScript, и на данный момент я использую таблицу HTML для разметки и использую графические изображения в таблице.

Изображения представляют собой либо маленький кружок, либо большой X или O. Когда пользователь нажимает на кружок, он меняется на X или O, а затем проверяет, выиграна ли игра.

Хром, я знаю, но это хороший образовательный опыт.

Все изображения имеют одинаковый размер (круг имеет много пустого пространства), чтобы размер таблицы не изменился.

У меня вопрос двоякий.

1 / Должен ли я использовать CSS, а не таблицы для форматирования, и как это лучше всего сделать (таблицы HTML очень просты)?

2 / Есть ли лучший способ, чем использовать изображения, чтобы мне не приходилось создавать JPG заранее? Я пробовал с текстовыми метками (), но меня меняли цвета и подчеркивания?

Как вы, вероятно, можете сказать, мне комфортно с HTML, но не так с CSS.

Answer 1

Продолжайте и используйте таблицы для разметки - крестики-нолики - это сетка, поэтому имеет смысл использовать сетку для размещения игровой площадки. CSS можно использовать для цветов, шрифтов, границ и т. Д.

Вы можете использовать CSS для переопределения цветов и подчеркивания стилей якорей, но в IMO проще использовать изображения. PNG будет лучше, чем JPEG, потому что вы можете сделать изображения PNG прозрачными без артефактов.

Answer 2

Одно уточнение. Вы писали: «Должен ли я использовать CSS, а не таблицы ...» CSS можно применять ко всем элементам HTML. Четные столы.

Использование классов CSS с jQuery может сделать ваш javascript-код более простым и читабельным.

Например: вы определяете два класса CSS: «ОН» и «EX». (Текстовые или фоновые изображения будут работать нормально.) Затем при щелчке по ячейке вы добавляете соответствующий класс.

var ex_or_oh = 'EX'; // 'OH'
$('td.box').click(function() {
  var t = $(this);
  if (t.hasClass('OH') || t.hasClass('EX')) { return; } // spot taken
  t.addClass(ex_or_oh);
  (ex_or_oh == 'EX') ? ex_or_oh = 'OH' : ex_or_oh = 'EX';
});

И HTML будет выглядеть примерно так:

<table><tr>
  <td class="box"></td>
  <td class="box"></td>
  <td class="box"></td></tr>
  ...
</table>

Answer 3

Если вы хотите использовать jQuery осмысленно, вам нужно изучить CSS - CSS-селекторы являются одним из основных способов выразить вещи при использовании библиотеки. Одна из сильных сторон jQuery заключается в том, насколько легко он поддерживает разделение задач: сделайте свою семантическую разметку в HTML, определите внешний вид в CSS, а затем используйте jQuery для наложения улучшений поведения.

Что касается специфики:

1. Существует множество семантически значимых способов разметки доски крестики-нолики (таблица не является одним из них - каковы заголовки для строк?). Независимо от того, что вы используете, убедитесь, что вы понимаете блочную модель и специфичные для браузера ошибки в реализациях, которые вам нужно обойти.

2. Если вы изучаете CSS, вы можете использовать буквы «О» и «Х» как текст, а затем стилизовать их так, чтобы они выглядели так, как вы хотите ...

Answer 4

просто для развлечения вот базовая реализация CSS:

<!-- your html -->
<div id="board">
  <div class="square" id="topLeft">&nbsp;</div>
  <div class="square" id="topCenter">&nbsp;</div>
  <div class="square" id="topRight">&nbsp;</div>
<!-- 6 more .square divs! -->
</div>    

и вот ваш CSS

#board {
  width: 606px;
  height: 606px;
  border: 1px solid #000000;
}

.square {
  float: left;
  width: 200px;
  height: 200px;
  border: 1px dotted #CCCCCC;
}

дополнительные пиксели для учетной записи на доске для границы (1px x 2 стороны x 3 поля в строке = 6)

Вы можете изменить текстовое оформление с помощью следующего CSS:

a:hover, a:active, a:visited {
  text-decoration: none;
  font-color: blue;
}

во всяком случае, я не вижу никаких проблем с тем, что это таблица (таблицы в конце концов предназначены для табличных данных). Ссылочный сайт CSS, который я нашел полезным, это w3schools

Answer 5

Ну, это чего-то стоит, в моей HTML-игре в крестики-нолики Я не использовал таблицы или CSS. Я просто положил изображения рядом друг с другом и использую
s, чтобы разорвать линии.

Answer 6

Вы можете использовать таблицу с чем-то вроде:

.board {
    border-collapse: collapse;
}
.board td {
    width: 40px;
    height: 40px;
    border: 1px solid #666;
    font-size: 40px;
    line-height: 40px;
    font-family: 'courier new' serif;
    font-weight: bold;
    background-color: #ddf;
    text-align: center;
}

с

<table class="board">

и в каждой ячейке просто заполните письмо (X или O)

вы не обязаны использовать ссылки для взаимодействия. Вы можете использовать событие onclick непосредственно в ячейке таблицы:

<td onclick="alert(1)">

Веселитесь:)

Answer 7

В конце концов (когда браузеры догонят, особенно с IE8), «способ CSS» получить макет в виде таблицы без семантики HTML <table> будет использовать display: table-row; и display: table-cell;.

В статье есть хорошая статья: Все, что вы знаете о CSS, неверно