Основы верстки
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 — высота и ширина элемента.
Base html css text
By Sergey Andreev
Base html css text
- 3,203