- •1. Табличная вёрстка
- •2. Блочная вёрстка (на div и css)
- •3. Flexbox-вёрстка
- •4. Grid-вёрстка (css Grid)
- •5. Адаптивная вёрстка (Responsive Web Design, rwd)
- •6. Резиновая вёрстка (Fluid Layout)
- •7. Фиксированная вёрстка (Static Layout)
- •8. Вёрстка с использованием css-фреймворков (Bootstrap, Tailwind, Foundation)
- •Адаптивный дизайн (Responsive Web Design, rwd)
- •Учёт особенностей устройства
- •Оптимизация пользовательского опыта
- •2. Синтаксис и структура
- •3. Комбинирование условий
- •3. Примеры работы
- •5. Важные особенности
- •3. Открытие ссылки в новом окне
- •1. Создание внешнего css-файла
- •2. Подключение css к html-страницам
- •3. Преимущества внешнего css
- •4. Альтернативные способы (не рекомендуются)
- •5. Дополнительные возможности
- •1. Текстовые поля
- •2. Числа и диапазоны
- •3. Даты и время
- •4. Выбор вариантов
- •5. Файлы и специальные поля
- •6. Кнопки
- •7. Особые типы
- •1. Управление галереей проектов (карусель)
- •2. Валидация формы обратной связи
- •3. Мобильное меню (бургер)
1. Создание внешнего css-файла
Сначала создайте файл со стилями, например, styles.css, и сохраните его в папке проекта (чаще всего в /css/). Пример содержимого файла styles.css:
css
Copy
Download
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.header {
background-color: #333;
color: white;
padding: 10px;
}
.button {
background: blue;
color: white;
padding: 8px 16px;
}
2. Подключение css к html-страницам
Добавьте в <head> каждой HTML-страницы тег <link>, который ссылается на ваш CSS-файл.
Пример для index.html:
html
Copy
Download
Run
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Главная страница</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="header">Шапка сайта</div>
<button class="button">Кнопка</button>
</body>
</html>
Пример для about.html:
html
Copy
Download
Run
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>О нас</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="header">О компании</div>
<button class="button">Написать нам</button>
</body>
</html>
Ключевые моменты:
Атрибут href указывает путь к CSS-файлу (относительный или абсолютный).
Если файл лежит в той же папке, что и HTML, используйте href="styles.css".
Если в подпапке css/, укажите href="css/styles.css".
3. Преимущества внешнего css
✅ Единообразие дизайна – все страницы выглядят одинаково. ✅ Удобство поддержки – изменение стилей в одном файле применяется ко всем страницам. ✅ Кэширование браузером – CSS загружается один раз и используется для всех страниц, ускоряя загрузку. ✅ Разделение кода – HTML отвечает за структуру, CSS – за оформление.
4. Альтернативные способы (не рекомендуются)
A. Внутренние стили (в <style>)
Не подходит для нескольких страниц, так как требует дублирования кода.
html
Copy
Download
Run
<style>
body { background: #f5f5f5; }
</style>
B. Инлайн-стили (атрибут style)
Подходит только для единичных элементов, но нарушает принцип разделения кода.
html
Copy
Download
Run
<p style="color: red;">Текст</p>
5. Дополнительные возможности
Импорт CSS внутри другого CSS
Если стилей много, можно разбить их на несколько файлов и импортировать в основной styles.css:
css
Copy
Download
/* styles.css */
@import url('fonts.css');
@import url('buttons.css');
Но этот метод менее производителен, чем <link>.
Итог
Создайте файл styles.css с общими стилями.
Подключите его через <link rel="stylesheet" href="путь/к/styles.css"> в <head> каждой HTML-страницы.
Избегайте дублирования кода – используйте классы и идентификаторы для переиспользуемых стилей.
Пример структуры проекта:
Copy
Download
/project
├── index.html
├── about.html
└── /css
└── styles.css
Таким образом, вы сможете легко управлять дизайном всего сайта через один CSS-файл! 🚀
Какие поля можно использовать в форме (значения type тэга input) и в чем их специфика?
Типы полей <input> в HTML-формах и их специфика
Элемент <input> в HTML поддерживает множество значений атрибута type, каждое из которых определяет поведение и внешний вид поля. Разберём все основные типы, их особенности и применение.