Краткий курс верстальщика. Часть 1. Введение в HTML/CSS

1. Краткое введение в HTML

Данный раздел бесполезен для тех, кто уже "в теме", можете пропустить, я это пишу для тех, кого обучаю веб-разработке и это им будет кратким введением

Теги
Это такие контейнеры, в которые вставляется содержимое страницы (не всегда текст), для каждого контейнера есть атрибуты, каждый тег должен закрываться (не всегда обязательно, но рекомендуется). В современном мире принято делать основную разметку страницы блоками, а остальные теги использовать только их прямого назначения. Табличные данные нужно размещать в теге <table>, заголовки в <h1> <h2> ..., абзацы в <p>.
Контейнер открывается например так <p> и закрывается точно таким же тегом, только с наклонной чертой </p>, то что находится между открывающим и закрывающим тегом является его содержимым, например

<h1>Содержимое заголовка</h1>
<p> Содержимое абзаца </p>

Но, как я и говорил, существуют такие теги, которые не имеют закрывающего тега, например: <img> - изображение
<br> - перенос строки

По правилу хорошего тона эти теги нужно закрывать вот так
<img />
<br />

Атрибуты
<тег атрибут="значение" атрибут2="значение2">

Например
<img src="image.png" border="0" />

2. Краткое введение  в CSS

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

селектор {атрибут: значение}

можно перечислить сразу несколько атрибутов:

селектор {атрибут1:значение; атрибут2: значение}

можно делать переносы и отступы:
селектор {атрибут1:значение;
атрибут2:значение}

можно одну группу правил применить для нескольких селекторов

селектор1, селектор2 {атрибут1:значение ......}

Теперь поговорим о селекторах
тег - название тега
#id - символ "решетка" и название id блока (или тега)
.class - "точка" и название класса

id и class это специальные атрибуты тегов, благодаря которым можно привязаться к конкретным контейнерам, в тегах это прописывается так:

<p class="vasya">.....</p>
<p id="petya">.....</p>

в CSS делается так

p {font-weight:bold;} /*для всех абзацев текст жирный*/
.vasya {color:red} /*для первого абзаца текст красный*/
#petya{color:green} /*для второго абзаца текст зеленый*/

Если вы привязали например класс к нескольким тегам
<h1 class="dima">Заголовок</h1>
<p class="dima">Текст</p>

и желаете сузить селектор, то можно делать так
h1.dima {} /*стиль действует только для заголовка с классом dima*/
p.dima {} /*стиль действует только для абзацев с классом dima*/

Сужение выборки в селекторе можно делать следующим образом (прописывая более полный CSS путь)
p.dima a {}

действует только дл тега <a>, который находится внутри тега <p> с классом dima

<p class="dima">
<h1>Это тот самый текст</h1>
</p>

В чем разница атрибутов class и id?
В атрибуте class можно перечислить несколько классов, в id только один идентификатор, для любого контейнера можно одновременно прописать несколько классов и один id.

.bold {font-weight:bold;}
.red {color:red;}
.underline {text-decoration:underline;}
<p class="bold red underline"></p>

Классы переопределяются в порядке перечисления, если в классе bold указать один цвет, а в underline другой, то цвет у тега будет такой, который прописан в последнем, т.е. в underline.


Так же стили переопределяются в самих CSS, в порядке их перечисления внутри файла и в порядке подключения CSS файлов в документ HTML.

Далее изучаем самостоятельно
HTML http://htmlbook.ru/html
CSS http://htmlbook.ru/css

Продолжение следует...