HTML и CSS. Таблицы [Урок первый by PDA™]

[PDA™]

Приветствую тебя читатель, сегодня мы поговорим об CSS. Я решил, что на данный момент лучше будет поговорить о CSS, чем о HTML. Уроков по HTML и так много.

Первый урок по HTML и CSS от PDA™​

Вступление

При работе с CSS необходимо быть предельно внимательным. При написании кода следует соблюдать предельную концентрацию.

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

Шаг первый. Разметка и использование тегов.

Разметка HTML всегда идет перед стилями. Нет смысла приступать к CSS без полностью готового HTML.

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

При строительстве разметки мы используем "теги", которые окружены угловыми скобками. Теги используются для определения чего-либо на странице. CSS применяется позже для определения места (в браузере) вывода содержания того или иного тега.

Самыми простыми тегами на странице являются:

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Следует сразу обратить внимание на то, что тег <html> является открывающим тегом, а тег </html> является закрывающим. И так аналогично со всеми тегами. Каждый открытый тег должен быть закрыт.

Больше всего тегов и контента используется внутри тега <body>.

Очень важный тег для разделения и определения структуры - тег <div>. Используя данный тег, можно разделить содержание на ячейки. Внутри данного тега Вы можете использовать и прочие теги для определения контента (например, ссылки, текст, изображения), которые потом можно красиво оформить с помощью CSS.

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

Код для данного шаблона должен выглядеть так:

<html>
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="navigation">
</div>
<div id="menu">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>

Как Вы видите, у тегов <div> есть ID. Это понадобится нам для оформления каждой ячейки. ID используется для маркировки тега и придания ему уникального стиля. В то время как “class” используется для повторяющихся элементов дизайна.

Также, в примере используется еще один div “wrapper”, которые как бы "обертывает" все остальные теги. Это нам пригодится позже для позиционирования нашей странички.

Шаг второй. Прикрепляем таблицу стилей.

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

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

Добавьте следующий код между <head></head>:

<link rel="stylesheet" type="text/css" href="style.css" />

Шаг третий. Создание CSS.

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

Селектор, кроме тега body, записывается в CSS начиная с “#” или “.”. “#” определяет ID, а "." (точка) определяет class селектора. Внутри селектора может находиться множество свойств и все они должны быть обрамлены { }.

#selector {
 property:value;
      property:value;
      property:value;
 }
Нам необходимо оформить следующие теги с помощью 
      CSS:
 * body
      * wrapper
      * header
      * navigation
      * menu
      * content
      * footer

Свойства и возможные значение в CSS:

Свойство "background" (фоновое изображение) может задавать изображение или цвет, или и то и другое. Для показа изображения, значение должно состоять из пути к изображению. Для определения цвета используется шестнадцатеричный код.

Свойство "color" используется для определения цвета селектора. Значения записываются в виде шестнадцатеричного кода (пример: #FFFFFF для белого).

Свойство "font-family" позволяет определить шрифт, который будет использоваться. Нормой является включение как минимум 3-х типов шрифтов. Это делается на случай, если браузер не может отобразить первый шрифт, будет использоваться второй и т.д. (пример: Trebuchet MS, Arial, Times New Roman)

Свойство "font-size" определяет размер шрифта и имеет значение в пикселях.

Свойство "margin" используется для определения позиции селектора. Значения задают расстояние сторон селектора до края окна браузера в следующем порядке: top, left, bottom, right. Если нам необходимо разместить страницу по центру, мы пишем "0px auto 0px". Указание всех четырех сторон не является обязательным.

Свойство "width" задает желаемую ширину в пикселях любого селектора.

Свойство "height" - высота в пикселях.

Свойство "float" позволяет нам позиционировать элементы внутри селекторов, в большинстве случаев справа или слева.

Для создания CSS файла откройте свой любимый текстовый редактор и сохраните новый документ как style.css в папке с страницами сайта. Добавьте следующий код:

body {
background: #f3f2f3;
color: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
font-size: 12px;

}
#wrapper {
      background: #FFFFFF;
      margin: 60px auto;
      width: 900px;
      height: 1024px;
      }
#header {
      background: #838283;
      height: 200px;

      width: 900px;
      }
#navigation {
      background: #a2a2a2;
      width: 900px;
      height: 20px;
      }
#menu {
      background: #333333;
      float: left;
      width: 200px;
      height: 624px;
      }
#content {
      background: #d2d0d2;
      width: 900px;
      height: 624px;
      }
#footer {
      background: #838283;
      height: 180px;
      width: 900px;
      }

Заключение

Вы прошли школу молодого бойца CSS и оформили все селекторы с помощью вышеуказанных свойств.

Надеюсь, урок Вам понравился! Жду отзывов и пожеланий.

---------- Post added at 21:26 ---------- Previous post was at 21:19 ----------

Обновил