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
Продолжение следует...
