Основы верстки

HTML

HTML расшифровывается как HyperText Markup Language (язык разметки гипертекста):

  • язык означает, что он может быть прочитан как человеком, так и компьютером;
  • разметка означает, что написанный вами код помечается с помощью ключевых слов;

Тэги

<p>
    Текст
</p>

Обычные

<p> </p>

<a> </a>
<strong> </strong>
<em> </em>

Само закрывающиеся

<input>
<br>
<img>

Атрибуты

<a 
  href="http://www.mozilla.com">
    Firefox
</a>
<img 
  src="#"
  alt="Описание изображения">

<div class="header"></div>

Блочные

  • абзацы <р>;
  • заголовки: от первого уровня <h1> до шестого уровня <h6>;
  • статьи <article>;
  • разделы <section>;
  • длинные цитаты <blockquote>.

Строчные

  • ссылки <a>;
  • выделенные слова <em>;
  • важные слова <strong>;
  • короткие цитаты <q>;
  • аббревиатуры <abbr>.

Целью тегов HTML является передача смысла документу.

Текстовые элементы: определение контента

  • <p> для абзацев;
  • <ul> для (неупорядоченных) списков;
  • <ol> для (упорядоченных) списков;
  • <li> для отдельных пунктов списка;
  • <blockquote> для цитат.

Строчные элементы: различный текст

  • <strong> для важных слов;
  • <em> для выделенных слов;
  • <a> для ссылок;
  • <small> для менее важных слов;
<article>
  <h1>Основной заголовок страницы</h1>
  <h2>Подзаголовок</h2>
  <p>
    Какие-то всякие разные штуки и некоторые <em>выделенные</em> и 
    даже <strong>важные</strong> слова.
  </p>
  <p>
    Другой абзац.
  </p>
  <ul>
    <li>Один</li>
    <li>Два</li>
    <li>Три</li>
  </ul>
  <blockquote>
    Однажды сказано
  </blockquote>
</article>
<aside>
  <h3>Мои последние сообщения</h3>
  <ul>
    <li><a href="#">Один</a></li>
    <li><a href="#">Два</a></li>
    <li><a href="#">Три</a></li>
  </ul>
</aside>

Общие элементы

  • <div> для блочных элементов;
  • <span> для строчных элементов.

CSS

CSS выбирает элемент HTML (например, абзац), задаёт свойство для изменения (такое как цвет) и применяет определённое значение (например, красный):

p {
   color: red;
}

Синтаксис

Целью CSS является определение макета и стиля элементов HTML. Синтаксис очень прост:

/* Правила CSS */
селектор { свойство: значение; }
кто { что: как; }

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

  • селектор определяет, на какой элемент или элементы нацелиться;
  • свойство определяет характеристики для изменения;
  • значение определяет, как изменить эту характеристику.

селекторы тегов

a { /* Ссылки */ }
p { /* Абзацы */ }
ul { /* Неупорядоченные списки */ }
li { /* Пункты списка */ }

Классы

.date {
  color: red;
}
<p class="date">
  21 февраля, суббота
</p>
<span class="date">
  21 февраля, суббота
</span>

Иерархия 

header a {
  color: red;
}

Псевдоклассы

a {
  color: blue;
}
  
a:hover {
  color: red;
}

Наследуемые свойства

Только несколько свойств CSS могут быть унаследованы от предков. Это в основном текстовые свойства:

  • цвет текста;
  • шрифт (семейство, размер, стиль, насыщенность);
  • межстрочное расстояние.

Стили

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

CSS Text

font-family: Arial;
  • Arial
  • Arial Black
  • Comic Sans MS
  • Courier New
  • Georgia
  • Impact
  • Times New Roman
  • Trebuchet MS
  • Verdana

font-family

  • serif — на конце каждого символа прикреплены небольшие линии;
  • sans-serif;
  • monospace;

Свойства шрифта в CSS

font-size: 16px; 
font-style: italic;
font-weight: bold;
text-align: left;
text-decoration: underline;

text-indent: 30px;

line-height

Свойство line-height, когда применяется к блочному элементу, определяет высоту каждой строки. Не следует путать с межстрочным расстоянием, которое определяет пространство между строками в абзаце. Несмотря на то, что они оба выполняют одну и ту же задачу (интервал между строк текста), делают они это по-разному.

Позиционирование в CSS

  • width: 100%
    Блок будет занимать всю доступную ширину.
  • Перенос слов
    Если встроенное содержимое в блоке не помещается на одной строке, оно будет продолжено на новой строке.
  • height: auto
    Высота блока изменяется автоматически, чтобы она соответствовала размеру его содержимого.

Блочная модель

  • padding — внутренний отступ;
  • border и outline — граница и внешняя граница; (второе свойство не участвует в формировании размеров блока)
  • margin — внешний отступ;
  • height и width — высота и ширина элемента.
Made with Slides.com