HTML / CSS для клан-новостей.

Предыдущий аналог этого топика мне сильно не нравился - как-то сильно всё в кучу было навалено. Удалил.
А оно оказывается кому-то было нужно) Попросили вернуть - переписал, возвращаю.
В комментах принимаются любые вопросы / предложения.
                                                                                                                                                   

Важно. В HTML просто так не начинается новая строка, если это явно не указать в коде через одиночный тег <br> (иначе перенос строки превращается в обычный пробел). На нашем форуме перед каждой новой строкой сервер автоматически добавляет этот тег. Это удобно для текста, но ломает все коды, разбитые на много строчек. Поэтому, писать код можно как угодно, но разместить его на форуме придется в одну строчку, без переносов строки. Здесь все примеры даны с переносами, для наглядности.

Удобные песочницы для кодов:

JsFiddle.net (я тут немного добавил условия под драко: Голд, цвета) + вверху кнопка "Tidy", приводит сжатый код в человеческий вид.
liveweave.com
playcode.io

Чтобы легче переносить коды на форум, есть специальный уменьшатор - работает для всего, убирает переносы строк.



Общие сведения

Ключевые технологи для работы со страницами в интернете:
HTML — HyperText Markup Language (язык гипертекстовой разметки)
CSS — Cascading Style Sheets (Каскадные таблицы стилей)
JS — JavaScript (так и переводится, ДжаваСкрипт - название языка. Не путать с Java)

Чтобы хорошо представить, есть известный пример с машиной.
HTML задает скелет/структуру: У машины будут 4 колеса, 1 руль, 4 двери, и дает примерное представление, что-где будет поставлено. CSS приходит и даёт элементам характеристики: Точное положение, размер, цвет, элементарный функционал: подошли к машине, двери открылись, отошли - закрылись. А JS уже отвечает за весь остальной функционал — мотор, руль, скорость, ускорение, сигнализация и прочее.

Вам с форума уже знакомы некоторые HTML-теги:

<b> — bold → Жирный
<i> — italic → Курсив
<u> — underline → Подчеркнутый
<s> — strikethrough → Зачеркнутый


Все теги можно комбинировать и встраивать друг в друга. В таком случае закрывающие теги должны быть поставлены в обратном порядке от открывающих, так:

<b><u><i> Текст </i></u></b> → Жирный подчеркнутый курсив



Текст, блоки, параграфы


<span> (англ.) — охват. Его как правило используют для стилизации текста. Характеристики по умолчанию: display: inline; т.е. встраивается в строку и ведет себя как обычный текст. </span>

<div> — division, раздел. Универсальный блочный тег, куда можно запихать всё что угодно, в том числе и текст. По умолчанию: display: block; — всё, что до и после этого элемента - остаются в разных строках, а сам - занимает отдельную строку и всю доступную ширину. </div>

<p> — paragraph. По умолчанию: display: block; margin: 1em 0; про margin (отступ) будет написано ниже, а em - единица измерения, равняется высоте текущего шрифта. Т.е. параграф не только переносится на новую строку, но и получает отступы сверху и снизу, в размере высоты шрифта.</p>




CSS


Любому HTML-тегу можно добавить атрибут style и прямо там и прописать все стили:

<span style="background-color: white; color: red; font-size: 30px;">текст</span>


Но как только элементов становится достаточно много, код превращается в кашу. К тому же могут встречаться много одинаковых элементов, с одинаковыми стилями. Для этого существует классная фишка: Элементу можно дать "имя", а стили привязать к этому имени, разместив их отдельно, в теге <style>. Тот же код из примера выше, только в виде отдельной таблицы стилей (напоминание, Нужно убрать все переносы строк, чтобы работало на нашем форуме):

<style>
.любое-имя {
  background-color: white;
  color: red;
  font-size: 30px;
}
</style>

<span class="любое-имя">текст</span>


Это дело позволяет HTML-коду оставаться таким же простым, каким он и должен быть. А если захочется что-то изменить в коде - изменение придется внести только в одном месте, а не редактровать все элементы.

Это "любое-имя" - не настолько уж любое. Оно не должно начинаться с числа, и может содержать любые буквы, числа, и символы -, _. Классы принято называть английскими словами, и без транслита.

Через "точку" выделяются элементы с данным классом. Это называется CSS-селектор. Существуют и более сложные комбо-селекторы, но они пока не нужны.

Сам тег style как правило добавляется где-то вверху страницы, а все используемые классы собираются туда, а не в отдельные теги. Если стилей становится многовато, можно добавлять комментарии между ними, /* Используя такие символы */



Картинки, обтекание, отступы

Тег для добавления картинок на страницу (один из немногих одиночных - без закрывающего тега):
<img src="ссылка">

img — image (изображение);
src — source (источник);

Ссылка должна быть прямая, именно на картинку, в формате .png, .jpg, .gif и т.п., а не на страницу с картинкой. Т.е. prnt.sc и похожие ресурсы для скринов отпадают. Одна из удобных: gyazo.com. Сделали скрин, добавили к ссылке .png и она будет работать.

А если где-то в инете встретили удачную картинку - не надо сразу спешить скринить. Наведите мышку на картинку, клик правой кнопкой, в большинстве случаев в открывшемся меню будет "copy image adress", "copy image URL" или "Cкопировать адрес"

Но картинка без какого либо позиционирования будет криво смотреться рядом с текстом. Чтобы расположить картинку справа или слева от текста, используют свойство float

<style> .left {float: left;} .right {float: right;}</style>

<img class="left" src="..."><img class="right" src="..."> Первая картинка окажется слева от этого текста, а вторая - справа. Если есть несколько картинок подряд и все они должны оказаться на одной стороне, легче запихнуть их в один общий блок и ему дать float, а не всем картинкам по очереди. Например:

<div class="left"><img src="..."> <img src="..."> <img src="..."></div> Будет три картинки подряд, все они - слева от этого текста. Причем, ранее определенный класс left будет работать и тут, не придется переписывать еще раз.


После добавления обтекания, окажется что текст слишком плотно прилипает к картинке и захочется добавить небольшой отступ между ними. Для этого используется margin. У него несколько вариантов записи, в зависимости от количества значений:

margin: 5px; /* Свободное поле по 5 пикселей во всех направлениях */
margin: 5px 10px; /* По 5 пикселей сверху и снизу, по 10 справа и слева */
margin: 1px 2px 3px 4px; /* По часовой стрелке: 1px сверху, 2px справа, 3px снизу, 4px слева */

Также, можно задать один margin в конкретном направлении. Последний с 4-мя значениями можно переписать так:
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;

Можно прописать и отрицательные числа - будет сдвиг в другую сторону.

margin: auto; display: block; — такая комбинация (уже без float) центрирует картинку.


К примеру, у картинок слева margin: 0 5px 5px 0; — сверху 0, справа 5, снизу 5, слева 0.
А код целиком (для наглядности с переносами строк, на самом деле - без):
>>> ( Пример на Fiddle )

<style> .float-left {float: left;} .marg-img {margin-right: 5px;} </style>

<div class="float-left">
  <img class="gold-frame marg-img" src="ссылка">
  <img class="gold-frame marg-img" src="ссылка">
  <img class="gold-frame marg-img" src="ссылка">
</div>


На нашем форуме есть встроенный класс, дающий элементу золотистую рамку, gold-frame.



Ссылки, игровые предметы

Простейшая ссылка:

<a href="ссылка">Клик</a>


a — anchor (якорь)
href — Hypertext REFerance (гипертекстовая ссылка)

Но возникает проблема — она не открывается в новой вкладке, а перегружает текущую. Если перед кликом на такую ссылку зажать левый CTRL - она откроется в новой вкладке. Но не все это знают, поэтому хорошо бы изначально сделать ссылки "как надо":

<a href="ссылка" target="_blank">Клик</a>

<a href="http://drako.ru/forum/drako/" target="_blank">ФОРУМ</a>


Но никто не мешает вместо текста ссылки, поставить туда картинку. Таким образом можно создавать картинки-ссылкы на игровые предметы. А на нашем форуме есть короткие коды для этого дела:

{item 1745}{item_image 1745}{item_image 1745,500}
АЦЦКИЙ орб отваги

500


(последнее - не моя ошибка, ровно так криво и отображается, см. дальше)
И, во что они реально превращаются "за кулисами":

{item 1745} → <a target="_blank" class="itemType6" href="/entity/item/1745.html" onmouseover="itemHint(this, 1745);">АЦЦКИЙ орб отваги</a>

{item_image 1745} → <a target="_blank" class="itemType6" href="/entity/item/1745.html" onmouseover="itemHint(this, 1745);"><img class="gold-frame" src="http://drako.ru/game/shared/data/itemTpls_picture/orb_of_courage_rd.png?ux=1300546988"></a>

{item_image 1745,500} → <a target="_blank" class="itemType6 obj" href="/entity/item/1745.html" onmouseover="itemHint(this, 1745);"><br><img class="gold-frame" src="http://drako.ru/game/shared/data/itemTpls_picture/orb_of_courage_rd.png?ux=1300546988"><br><span class="qty">500</span><br></a>


В 3-м варианте с указанием количества предметов, ставится куча лишних переносов строки br, из-за которых картинка отображается неправильно. Если вручную будете добавлять код - нужно исключить оттуда br (отключил их копирование), а если использовать короткие {...} коды, где-то вверху страницы надо добавить

<style> .obj br {display: none;} </style>


Это значит "найти все теги br внутри элементов с классом obj и скрыть их"

obj и qty — специальные встроенные классы на форуме, обеспечивающие правильное позиционирование, шрифт и цвет чисел.

itemType6 — класс красного цвета игровых предметов. Есть классы и для всех других цветов, от itemType1 до 6, но они не нужны, если предмет показывается в виде картинки, а не текста. Для черного цвета нет класса, но можно добавить свой и спокойно красить. Какой-нибудь <style> .black {color: black !important;} </style>

onmouseover="itemHint(this, 1745);" — JavaScript-функция function itemHint(e, num){...}, написанная где-то в коде форума. И она срабатывает каждый раз при наведении курсора на предмет - показывает инфо. Не нужно знать его код, надо просто знать, что он вот так работает, если добавить в HTML-код.



Цвет


В сетчатке нашего глаза есть колбочки, воспринимающие цвет. Их разделяют на три группы, каждая из которых интенсивнее реагирует на красный, зеленый или синий цвет. Помимо своего основного цвета - они умеют различать и соседние оттенки. Таким образом, когда смотрим, например, на желтый предмет (т.е. он поглощает все остальные цвета, но отражает желтый) — немного возбуждаются колбочки красного цвета, немного - зеленого, в итоге мозг понимает это как "желтый". Прикол в том, что если взять кучу мелких лампочек, которые вообще не умеют светить желтым, но дают зеленый и красный свет - ровно также у нас будут возбуждаться те же колбочки - и будет казаться, что смотрим на самый обычный желтый цвет. По той же схеме, любой другой цвет можно представить в виде комбинации красного, зеленого и синего. Что и происходит на наших экранах: Каждый пиксель состоит из лампочек зеленого, красного и синего цветов. Регулируя яркость каждой из них - можно задать пикселю конкретный цвет.

В частности в CSS, это выглядит так:

<style>.bubu {background-color: rgb(255, 0, 0); color: rgb(255, 255, 255);}</style>

<span class="bubu">Фон будет красным, а текст - белым</span>


RGB — от слов red (красный), green (зеленый), blue (синий), соответственно и числа внутри скобок указывают, насколько сильно будет "присутствовать" данный цвет. Значения могут быть от 0 до 255. Если везде нули - это черный, везде 255 - белый. А если все три числа примерно равны - это какой-то оттенок серого.

В примере выше зеленого 0, синего 0, а красного 255 — это самый яркий красный.
Не трудно догадаться, что rgb(0, 120, 0) будет зеленым (255-й зеленый ломает глаза), а rgb(0, 0, 255) — синий, тоже не особо приятный. С опытом можно начать примерно различать и все остальные цвета, просто посмотрев на код.

А здесь можно поиграться с ползунками, чтобы представить, как это работает:

Background-color
: RGB(255,0,0);
Color
: RGB(0,0,0);
Убрать текст

R
G
B
Lorem Ipsum Dolor Ame...
HEX → #ff0000


Помимо упомянутых RGB цветов, существует более удобный формат записи.
Hex - от Hexadecimal (Шестнадцатеричный).

Мы считаем в Десятичной (decimal) системе... Доходим до '9' и цифры заканчиваются. Обнуляем "ячейку", а следующий "разряд" увеличиваем на единицу:

00, 01, 02, 03, 04, 05, 06, 07, 08, 09
10, 11, 12, 13, 14, 15, 16, 17, 18, 19...

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

00, 01, 02, 03, 04, 05, 06, 07, 08, 09, 0a, 0b, 0c, 0d, 0e, 0f
10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 1a, 1b, 1c, 1d, 1e, 1f
20, 21, 22, 13, 14, 25, 26, 27, 28, 29, 2a, 2b, 2c, 2d, 2e, 2f...

Берем какое-нибудь hex-число, например 27 — это значит, что здесь дважды досчитали до 'f' (считая с нуля - всего 16 цифр), и еще раз до 7 единииц. Для преобразования в 10-чную, соответственно первая цифра умножается на 16, добавляется вторая:

27 = 2*16 + 7 = 39
c8 = 12*16 + 8 = 200
ff = 15*16 + 15 = 255

И наоборот:

255 = 255 / 16 = 15 целых, 15 в остатке = ff
237 = 237 / 16 = 14 целых, 13 в остатке = ed

Из-за непривычки начинать счет с нуля, вначале постоянно путают f и 16... F - это десятичный 15, но всего цифр, включая ноль, получается 16 штук. Как и у нас - последняя цифра 9, но всего цифр 10.


Всё это нужно просто потому что 16-ричная запись иногда бывает сильно короче. Примеры:

rgb(255, 255, 255) ← (белый) → #ffffff или #fff
rgb(255, 125, 0) ← (оранжевый) → #ff7d00

Цвет вида #aabbcc дополнительно можно сократить до #abc

Можно наловчиться и заранее примерно зная, какой оттенок нужен - всего 3-мя цифрами задать нужный цвет.

#800, #c00, #e50, #ea0, #090, #050, #09f, #05c, #249, #404, #909, #f27

P.s. То чувство, когда 2 часа ночи, тебе это нафиг не надо, а сидишь и читаешь про колбочки в глазах и 16-ричную систему!)



Оформление текста, шрифт, рамки, тени


Короткий список рассматриваемых свойств:

font-size: 30px; /* Размер текста */
font-family: 'Monotype Corsiva'; /* Шрифт */
color: #060; /* цвет текста */
text-align: center; /* Центрирует весь текст */
padding: 5px 20px 5px 5px; /* внутренние отступы */
border: 1px solid #123; /* рамка во всех направлениях */
box-shadow: 1px 1px 5px #000; /* размытая тень блока */
text-shadow: 1px 1px #000; /* тень текста */

font-weight: bold; /* делает текст жирным, бывает удобно, вместо тега <b> */
font-style: italic; /* вместо тега <i> */
text-decoration: underline; /* вместо тега <u> */


font-family
— Нужно тупо знать название шрифта (не забыть прописать в 'кавычках'). Примеры:

Monotype Corsiva1234567890Какой-нибудь Текст
Lucida Console1234567890Какой-нибудь Текст
Helvetica1234567890Какой-нибудь Текст
Verdana1234567890Какой-нибудь Текст
Courier New1234567890Какой-нибудь Текст
Comic Sans MS1234567890Какой-нибудь Текст
Tahoma1234567890Какой-нибудь Текст
Calibri1234567890Какой-нибудь Текст
Impact1234567890Какой-нибудь Текст


text-align
— left, center или right, будет позиционировать текст внутри блока: Слева, в центре или справа. У большинства элементов по умолчанию стоит left, поэтому его не нужно указывать. Чаще всего используют center. Причем, внутри какого-нибудь div, он будет центрировать не только текст, но и картинки, другие блоки.

padding
— Выше был рассмотрен margin, задающий свободное пространство снаружи элемента. Padding работает абсолютно по тем же принципам, только задает внутренние отступы.

border
— Рамка: толщина стиль цвет;

В примере выше был border: 1px solid #123; Толщина: 1 пиксель, Стиль: Сплошной, Цвет: Темно-синий. Как margin и padding, border тоже можно по тем же принципам комбинировать или указывать в одном конкретном направлении, border-top, border-right, border-bottom, border-left.

Помимо сплошной линии solid, бывают и dashed (черточками), dotted (точками), double (двойной):

1px dashed #800;
1px dotted red;
3px double green;


Существует еще border-radius, изгибает углы элемента:

border-radius: 8px;

border-radius: 50%;

border-radius: 100500px;

border-top-left-radius: 15px;

border-top-right-radius: 15px;

border-bottom-left-radius: 15px;

border-bottom-right-radius: 15px;


border-radius: 20px; значит, что если подставить окружность к этому углу, его радиус как-раз будет 20 пикселей. А border-radius: 50% используют, когда нужно из квадрата делать круг. Так легче, чем указывать половину стороны строго в пикселях.




box-shadow
— создает тень вокруг любого HTML-элемента. Это может быть span, div, img и всё что угодно.

Имеет 5 параметров: [Толщина тени справа/слева] [снизу/сверху] [размытость] [тень всего элемента] [цвет]
Чтобы легче запомнить, картинка:



3-ю и 4-ю не обязательно указывать. Ну допустим (у блоков дополнительно padding: 5px;):

box-shadow: 1px 1px 5px #000;

Первые 2 числа могут быть и отрицательными - тогда тень упадет на противоположную сторону. Когда положительные - справа и снизу.


box-shadow: 0 0 0 1px #999, inset 0 0 0 1px #aaa9, inset 1px 1px 3px #333; border: 3px solid white;


• Белая рамка, 3 пикселя;
• 0 0 0 1px #999 — снизу и справа по нулям, размытости ноль. 1 пиксель, серый вокруг всего блока.
• inset 0 0 0 1px #aaa — светло-серая тень изнутри
• inset 1px 1px 3px #333 — дополнительная темно-серая размытая тень изнутри,

Разница с border в том, что последний занимает место на странице - сдвигает остальные элементы в стороны, в зависимости от своей толщины. А у тени нет физического размера - он может накрывать другие элементы, но не будет влиять на их положение.

Чтобы лучше их понимать, нужно играться с числами в песочницах. В итоге можно делать всякие объемистые штуки.

Пример адын: JsFiddle
Пример два: JsFiddle


text-shadow
отличается от box-shadow только тем, что у него нет 4-го параметра, и нет настраиваемой толщины (толщна зависит от шрифта). Если хочется обернуть текст в тень по всем сторонам - приходится задротить каждую тень отдельно. Пример:

<style> .bubu { color: #fff1ba; font-family: 'Helvetica'; font-size: 100px; text-shadow: -1px -1px #db9, 1px 1px #000, 1px 2px #753, 2px 3px #753, 2px 4px #753, 3px 5px 5px #000; } </style>

<span class="bubu">Текст</span>

Результат:
Текст



Позиционирование. display, position.


display: inline; /* Встраивается в текст, не умеет менять размеры, отступы (почти) */
display: block; /* Переносит элемент на отдельную строку */
display: inline-block; /* Встраивается в текст, но остается блочным элементом */


Полезная фишка inline-block в том, что он позволяют размещать несколько блоков рядом друг с другом.
+ принимает размеры свего контента... когда display: block; растягивается на всю доступную ширину.

<style> .test {display: inline-block; width: 50px; height: 50px; border: 1px solid red; margin: 5px;} </style>

<div class="test"></div>... ... ...




Для общего развития можете где-нибудь прочитать про display: flex; У него многовато фишек, чтобы всё описать здесь.


position: relative;
position: absolute;
position: fixed;


Получив абсолютную позицию, элемент теряет свою "размерность" и больше не занимает место на странице. Соседние элементы могут занять его место, а он сам - через свойства top, right, bottom, left может быть позиционирован относительно ближайшего родительского блока, у которого есть position (любой). relative никак не влияет на позиционирование элемента, поэтому используют именно его, чтобы внутренние абсолютные элементы позиционировать относительно него.

<style>
.rel { /* Красный квадрат */
  position: relative;
  width: 100px; height: 100px;
  border: 1px solid red;
}
.abs-sq { /* зеленый квадратиик */
  position: absolute;
  top: -25px; left: -25px
  width: 20px; height: 20px;
  background-color: green;
}
.abs { /* число в углу */
  position: absolute;
  bottom: 2px; right: 5px
  color: green;
}
</style>

<div class="rel">
  <div class="abs-sq"></div>
  <div class="abs">15</div>
</div>
15
Рамки ближайшего родителя с position (не обязательно relative, абсолютный может находится внутри абсолютного); считаются нулевой позицией. Если абсолютному элементу дать размеры строго в пикселях и задать margin: auto; top: 0; right: 0; bottom: 0; left: 0; он встанет ровно по центру. Во всех остальных случаях, играясь с положительными или отрицательными числами - можно поставить элемент вообще куда угодно. И как правило хватает только двух свойств, не обязательно точно указывать все 4.


position: fixed работает примерно как absolute, с той разницей, что независимо от скролла, всегда будет висеть в указанном месте страницы, и не зависит от родительских элементов - позиционируется относительно всей страницы.



Таблицы


<table> — Таблица
<tr> — table row, строка таблицы
<td> — table data, данные таблицы (клетки)

Структура простейшей таблицы с 3-мя строками по 3 клетки:

<table>
  <tr>
    <td>Строка: 1, Клетка: 1</td>
    <td>Строка: 1, Клетка: 2</td>
    <td>Строка: 1, Клетка: 3</td>
  </tr>
  <tr>
    <td>Строка: 2, Клетка: 1</td>
    <td>Строка: 2, Клетка: 2</td>
    <td>Строка: 2, Клетка: 3</td>
  </tr>
  <tr>
    <td>Строка: 3, Клетка: 1</td>
    <td>Строка: 3, Клетка: 2</td>
    <td>Строка: 3, Клетка: 3</td>
  </tr>
</table>


Но у такой таблицы нет ни рамок, ни отступов, ни цвета. Будет просто текст. Можно каждой отдельной клетке дать класс и для каждого класса написать свои стили, но чтобы HTML был попроще - можно задать один класс всей таблице, а всё остальное привязать к нему.

.common-table td { border: 1px solid #b89868; padding: 5px; }
.common-table tr:nth-child(2n)   { background-color: #fff1ba; }
.common-table tr:nth-child(2n-1) { background-color: #ffe2aa; }


Первая строчка говорит: Найти все теги td внутри элемента с классом common-table, дать им внутренние отступы по 5 пикселей и рамки. А остальное - чтобы покрасить строки таблицы.
Можно было просто .common-table tr { background-color: ...; } — все строчки бы покрасились в один цвет.
А :nth-child() специальный CSS-псевдокласс.
Предыдущий селектор находит какой-то элемент (здесь - tr), nth-child находит его родителя (тело таблицы), и среди всех его дочерних элементов уже ищет совпадающие с указанным номером. Подводные камни появляются, как только у родителя оказываются разнообразные элементы, но здесь - только tr, поэтому всё правильно работает.
В данном случае 2n - все четные, 2n-1 - все нечетные. Помимо таких коротеньких формул, также можно тыкнуть ровно на нужный элемент, указав его номер - просто число.

Чтобы не заморачиваться с такими селекторами, иногда и правда бывает легче дать разные классы элементам и привязывать стили к классам.

Используя перечисленное, можно один раз собрать себе простенькую таблицу и везде использовать её по шаблону.
Например:

<style>
.common-table td { border: 1px solid #b89868; padding: 5px; }
.common-table tr:nth-child(2n)   { background-color: #fff1ba; }
.common-table tr:nth-child(2n-1) { background-color: #ffe2aa; }
.common-table tr.thead { background-color: #123; }
.common-table tr.thead td { color: white; border: 1px solid black; }
</style>

<table class="common-table">
  <tr class="thead">
    <td style="width: 100px;">Адын</td>
    <td style="width: 200px;">Два</td>
    <td style="width: 300px;">Три</td>
  </tr>
  <tr>
    <td>1-1</td>
    <td>1-2</td>
    <td>1-3</td>
  </tr>
  <tr>
    <td>2-1</td>
    <td>2-2</td>
    <td>2-3</td>
  </tr>
  <tr>
    <td>3-1</td>
    <td>3-2</td>
    <td>3-3</td>
  </tr>
  <tr>
    <td>4-1</td>
    <td>4-2</td>
    <td>4-3</td>
  </tr>
  <tr>
    <td colspan="3">5 - 5</td>
  </tr>
</table>



АдынДваТри
1-11-21-3
2-12-22-3
3-13-23-3
4-14-24-3
5 - 5


* В стилях нашего форума написано table {border-collapse: collapse !important;} — Это значит, что рамки таблиц будут прилипать друг к другу. После значения любого свойства можно добавить пробел и !important, это будет значить, что у значения высший приоритет - и он перебьет любой другой стиль, который будет встречаться где-то в другом месте кода и будет касаться этого же элемента. Перебить important можно только другим important... Если хочется разделить ячейки таблицы, желательно не трогать тег table, чтобы не задеть другие таблицы на странице. А только своему классу добавить:

.common-table { border-collapse: separate !important; border-spacing: 10px; }





CSS-селекторы


Допустим, у меня есть такой элемент:

<a class="bubu" id="someID" href="http://drako.ru" onclick="func();"> ... </a>

Для стилей, разумнее всего будет выделить его через класс .bubu {...}, но бывает, что у элемента нет класса, и очень хочется до него как-то добраться. Все следующие селекторы также будут указывать на него:

#someID {...}
a {...} → Выделит все теги 'a' на странице
a[onclick] {...} → Все теги 'a' у которых есть атрибут "onclick"
[href^="http"] → все элементы, у которых есть href, начинающийся с "http". Символ ^ означает начало строки.
[href*="drako"] → все элементы, у которых где-либо в href встречается слово "drako"
[onclick="func();"] → все элементы, у которых есть onclick, внутри которого "func();" — и это строгое равенство. Скажем, "func()" без точки запятой - уже не подойдет.


Всё это крайне редко бывает нужно. Но будет полезно знать на случай, если захочется что-то делать с элементами форума - когда исходный код нельзя вручную менять.

Про id отдельно стоит отметить... от слова identifier (идентификатор) — он должен быть уникальным на всей странице и больше нигде не повторяться. В этом и его смысл - чтобы уникальными именами точно выделить нужные элементы. Наличие id намекает, что с элементом должен быть связан какой-то функционал. Для стилей желательно использовать только классы.

Можно делать всякие фокусы, используя комбинации селекторов и псевдоклассов:

div.class-1.class-2 {...} — Все теги 'div', у которых есть и 'class-1', и 'class-2'. В такую цепочку можно включить всё что угодно - и классы, и id, и селекторы [атрибутов]

.class-1, .class-2, #id-3 {...} — Все перечисленные через запятую элементы получают одинаковые стили. Чтобы отдельно для каждого не писать одно и то же.

.class-1 .class-2 {...} — Запись через пробел. Только те элементы с 'class-2', которые находятся где-то внутри 'class-1'.

.class-1 > .class-2 {...} — Только те 'class-2', которые находятся непосредственно внутри 'class-1'. Т.е. если внутри class-2 будут еще и другие class-2, их это не будет касаться.

.class-1 + .class-2 {...} — Все 'class-2', которые расположены в коде сразу ПОСЛЕ 'class-1'. Между ними могут присутствовать символы, но не другие теги.

.class-1 ~ .class-2 {...} — Все 'class-2', которые расположены где-то ниже в коде после 'class-1'. Между ними могут присутствовать и другие теги. При этом они оба не должны быть обернуты в дополнительные теги - должны быть одинакового "уровня".


.class:hover {...} — стили элемента при наведении курсора
.class:active {...} — во время клика, когда зажали мышку, но еще не отпустли
.class:focus {...} — когда уже кликнули на элемент, стили будут держаться, пока не кликнут где-нибудь в другом месте. Работает с небольшим количеством тегов (button, textarea, input). Если хочется прикрутить к какому нибудь div, надо добавить последнему атрибут tabindex="-1"

.class:checked {...} — когда чекбокс или радио-кнопка отмечены




Например, можно сделать всплывающее описание (или картинку) при
наведении курсора
Бубу! Здесь могла быть ваша реклама или любая картинка
.
Код:

<style>
.item {
  display: inline-block;
  position: relative;
  color: #045acf;
  border-bottom: 1px solid red;
  cursor: pointer;
}
.hint {
  display: none;
  position: absolute;
  top: 30px;
  left: -30px;
  width: 200px;
  padding: 5px;
  background-color: white;
  box-shadow: 1px 1px 5px #000;
}
.item:hover .hint { display: block; }
</style>

<div class="item">Основной<div class="hint">Скрытый</div></div>


Дословно: При наведении на '.item', отыскать элемент с классом 'hint' внутри него и сделать видимым.

А с помощью :checked и радио-кнопок, можно делать такие переключаемые вкладки на CSS:

1111
2222
3333

Код на JsFiddle



JS переключаемые табы


CSS-селекторы ограничены. Всегда есть "старший" элемент, от которого можно исходить дальше - вниз по коду, или смотреть внутри элемента. Поэтому приходится извращаться и усложнять разметку, чтобы подгонять её под селекторы. А JS умеет взять вообще любой элемент, откуда угодно и сделать с ним всё что угодно. Поэтому бывает легче один раз написать универсальный скрипт и везде использовать его, чем задротить код на CSS.

Скрипты нужно размещать внутри тега <script></script>, который обязательно (вру, так проще) должен находится ниже в коде от элементов, которые могут быть запрошены в процессе выполнения. Браузер "читает" код сверху вниз. И если получается так, что скрипт ищет на странице элемент, который еще не загружен - выполняется неправильно.

JS-аналог указанного выше примера на CSS, будет работать для любого количества элементов. HTML-блоков можно добавить сколько угодно, а скрипт будет нужен только один (он специально старенький, чтобы поддерживать любой браузер).
Код под копирку тут, а для детального просмотра, здесь → Fiddle

<style>.link { display: inline-block; padding: 5px 15px; margin: 5px 10px 3px 0; background-color: #126; box-shadow: 1px 1px 5px #123; color: #ddd; cursor: pointer; transition: 0.2s;}.link.active { background-color: #045acf; transform: translateY(4px); box-shadow: none;}.tab { display: none; min-height: 100px; border: 1px solid #126; padding: 5px;}.tab.show { display: block; }</style>

<div class="js-tabs">
  <div class="link active">111</div>
  <div class="link">222</div>
  <div class="link">333</div>

  <div class="tab show"> Заполнив контентом, </div>
  <div class="tab"> Тоже убрать </div>
  <div class="tab"> Переносы строк </div>
</div>

<script>(function(){ var tabs = document.querySelectorAll('.js-tabs'); for( var i = 0; i < tabs.length; i++ ){ var link = tabs[i].querySelectorAll('.link'); var tab = tabs[i].querySelectorAll('.tab'); for( var j = 0; j < link.length; j++ ){ initSwitches(j, link, tab); } } function initSwitches(j, links, tabs){ links[j].addEventListener('click', function(){ removeClass(links, 'active'); removeClass(tabs, 'show'); links[j].className += " active"; tabs[j].className += " show"; }); } function removeClass(elems, className){ var reg = new RegExp( "(^|\\s)" + className , "ig"); for( var i = 0; i < elems.length; i++ ){ elems[i].className = elems[i].className.replace( reg ,""); } }})();</script>


Не буду пытаться детально обяъснять JS. Если ничего не понятно и хочется разобраться, ссылаюсь на learn.javascript.ru. Всё разложено по пунктам. Начало первой и второй главы, можно читать вперемешку.

Комментарии
Опта
иди на админа єтого проекта,я думаю у тебя гораздо лучше будет получатся и быстрее)
хоть что-то в этой игре делаться будет
слишком сложна что там с метой?)
етить колотить не лениво тебе)
Nеurоmаncеrслишком сложна что там с метой?)
Твою бы энергию да в мирное русло - в админы

Я - питекантропка, но постараюсь стать австралопитечкой.
А нету дыры в безопасности с скриптами?
Ashot1993, _Солнышко_, Будь у меня игрушка, которая приносит копеечку, я бы не дал непонятному чуваку из интернета копаться в её коде)) Вот и мне не дадут.

Nеurоmаncеrслишком сложна что там с метой?)
«Здравствуйте! Мне нужно немного времени на рассмотрение вопроса. Я напишу вам чуть позже.»


King MiRoNА нету дыры в безопасности с скриптами?
Даже в теории невозможно как-то повлиять на саму игру, через скрипты на форуме. Они отдельно живут.
оно вообще уже никому и ничего не надо
я вот только собрался подразобраться с математикой в двенадцатимерном пространстве..а ту на те в борщ..Оптя подкинул))
OPTlMUS PRIME, Раньше можно было "через скрипты на форуме" перса взломать. Но эту дыру оперативно прикрыли.
Для того чтобы оставить комментарий, зарегистрируйтесь или войдите под своей учетной записью.