Как вы думаете, почему одежда разных людей выглядит по-разному, даже если они используют похожие вещи?
Что делает их стиль уникальным?
Как вы представляете себе красивую веб-страницу?
Что на ней привлекает внимание: цвет, расположение текста, шрифты?
Как сайты становятся такими яркими, цветными и привлекательными?
Какая технология это делает возможным?
Какой термин мы используем, чтобы описать оформление и внешний вид вещей — как в моде, так и в веб-дизайне?
C S S
Ожидаемые результаты:
Создание внешнего CSS файла:
- создаёт отдельный файл с правильным расширением .css и сохраняет его в соответствующей директории.
Подключение CSS в HTML файл внешним способом:
- правильно использует тег <link> с корректными атрибутами href, rel, type.
Подключение CSS внутри тега <style>:
- использует тег <style> в секции <head> и применяет правила CSS к элементам.
Подключение CSS внутри атрибута style:
- применяет стили к HTML-элементу через встроенный атрибут style.
Использование блочной верстки:
- применяет элементы блочной верстки, такие как <div>, с CSS-свойствами (например, display, margin, padding).
CSS (Cascading Style Sheets) – каскадные таблицы стилей, предназначенные для установки индивидуальных цветов, фона, окантовки и прочих свойств.
1) Внешний (External CSS). Стили, используемые в дизайне веб-страницы, хранятся в отдельном файле формата
CSS и при необходимости подключаются в HTML-код с помощью тега <link>, который не будет отображаться на
странице и, следовательно, находиться между парным тегом <head> … </head>.
Этот способ удобен для установки одинаковых стилей нескольких веб-страниц, содержащихся на одном веб-сайте, или
же для нескольких веб-страниц, имеющих схожую тематику или направление.
Преимуществом использования каскадных таблиц стилей является автоматическое изменение стилей при их редактировании в CSS-файле.
1.html | 1.css | result |
<html> <head> <meta charset="UTF-8"> <title>External CSS Example</title> <link rel="stylesheet" href="1.css"> </head> <body> <header> <h1>Добро пожаловать на мою вэб-страницу</h1> <p>Учимся использовать внешний CSS для стилизации!</p> </header> <section> <p>Это простой пример, демонстрирующий использование внешнего CSS..</p> </section> <footer> <p>© 2024 Мой вэб-сайт</p> </footer> </body> </html> | /* Стили для header */ header { background-color: #4CAF50; color: white; padding: 20px; text-align: center; } /* Стили для текста внутри section */ section p { font-size: 18px; color: #333; text-align: justify; margin: 20px; } /* Стили для footer */ footer { background-color: #f1f1f1; color: #333; text-align: center; padding: 10px; margin-top: 20px; border-top: 2px solid #ccc; } | |
External CSS
CSS-селекторы используются для идентификации и применения стилей к конкретным элементам на веб-странице. Они помогают указать, какие элементы HTML должны быть стилизованы
/* Стили для header */
header {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center; }
/* Стили для текста внутри section */
section p {
font-size: 18px;
color: #333;
text-align: justify;
margin: 20px; }
/* Стили для footer */
footer {
background-color: #f1f1f1;
color: #333;
text-align: center;
padding: 10px;
margin-top: 20px;
border-top: 2px solid #ccc; }
В данном коде CSS селекторами являются следующие элементы:
header — это селектор, который применяется ко всем элементам <header>.
section p — это комбинированный селектор, который применяется ко всем элементам <p>, находящимся внутри элемента <section>. Здесь используется вложенность: селектор выбирает абзацы внутри раздела.
footer — это селектор, который применяется ко всем элементам <footer>.
Внутренний (Internal CSS) — это когда стили для страницы пишутся прямо в самом HTML-файле, внутри тега <style>.
Этот способ удобен, если нужно применить стили только к одной странице, и не хочется создавать отдельный CSS файл.
Стили прописываются внутри тега <style>, который размещается в разделе <head> HTML-документа.
<html>
<head>
<meta charset="UTF-8">
<title>Пример внутреннего CSS</title>
<!-- Внутренний CSS -->
<style>
body
{
font-family: Arial, sans-serif; /* Шрифт для всего текста на странице */
}
H1
{
color: #4CAF50; /* Зеленый цвет для заголовков */
text-align: center; /* Выравнивание заголовка по центру */
}
P
{ color: #333; /* Темно-серый цвет для текста */
font-size: 16px; /* Размер шрифта для абзацев */
}
</style>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это пример внутреннего CSS.</p>
</body>
</html>
Внутренний CSS находится между тегами <style> и </style>, которые размещаются в разделе <head>. С помощью этого CSS мы изменяем стиль заголовков (h1), абзацев (p) и всего тела страницы (body).
Этот метод хорош, если мы работаем с одной страницей и не хотим создавать отдельный CSS-файл.
Internal CSS
Внутренний (Internal CSS) - класс в CSS. Внутри тега <style> класс .st1 определяет стиль для текста
В данном примере .st1 — это класс в CSS.
1) .st1 — это селектор класса в CSS. Точка перед названием класса (.st1) означает, что это класс, который применяется к HTML-элементам.
2) Класс в CSS используется для назначения стилей конкретным элементам на странице. В данном примере .st1 применяет стиль color:green;, который делает текст зеленым.
3) В CSS классы всегда начинаются с точки (.), и они могут быть использованы для стилизации нескольких элементов на странице.
<html>
<head>
<meta charset="UTF-8">
<title>Пример использования класса</title>
<!-- Внутренний CSS -->
<style> /* Определение класса st1 */
.st1
{
color: green; /* Текст будет зеленым */
font-size: 20px; /* Размер шрифта 20px */
font-weight: bold; /* Жирное начертание текста */
}
</style>
</head>
<body>
<!-- Применение класса st1 к параграфу -->
<p class="st1"> Этот текст будет зеленым, жирным и размером 20px. </p>
<p>Этот текст не имеет класса, поэтому стиль по умолчанию.</p>
</body>
</html>
Internal CSS
Внутренний (Internal CSS) идентификатор (ID) в CSS.
<html>
<head>
<meta charset="UTF-8">
<title>Пример использования ID</title>
<!-- Внутренний CSS -->
<style> /* Определение стилей для элемента с id="st2" */
#st2
{
color: green; /* Текст будет зеленым */
font-size: 20px; /* Размер шрифта 20px */
font-weight: bold; /* Жирное начертание текста */
}
</style>
</head>
<body>
<!-- Применение стиля к элементу с id="st2" -->
<p id="st2">Этот текст будет зеленым, жирным и размером 20px. </p>
<!-- Другой параграф, который не имеет id -->
<p>Этот текст не имеет стилей ID, он будет по умолчанию.</p>
</body>
</html>
Internal CSS
InLine CSS
3) Встроенный (InLineCSS). Также стили можно указывать через атрибут style для каждого тега отдельно. Этот способ используется при необходимости подавления ранее указанных стилей, либо при их однократном использовании. Сстиль задается непосредственно для одного конкретного элемента на странице.
<p style="color:green;">
Текст
</p>
Этот способ удобен, если нужно применить стиль только к одному элементу, без создания внешнего CSS файла или добавления стилей в <head>.
| | |
Учебник для 10 класса НИШ (79-88 стр) | ||
| | |
|
Cоздание HTML-страницы с применением CSS.
Применяет свойства CSS для изменения цвета текста, фона и шрифтов.
* Использовать свойство font-family для шрифтов.
** Применить font-size для изменения размера текста.
***Использовать свойства border, padding, margin для улучшения дизайна.
Создайте сайт, на котором будет представлена информация о книге или фильме. Описание должно быть разбито на несколько секций, таких как аннотация, информация о персонажах/персонаже, отзывы, трейлер и т.д.
Требования:
Дескрипторы:
- использует CSS стили для различных элементов страницы, включая текст, изображения, и фон.
- основные стили вынесены в внешний CSS файл, подключенный через тег <link>;
- используется и внутренний CSS (внутри тега <style>) стили;
- использует встроенные CSS стили (через атрибут style для отдельных элементов);
- использует семантические теги, такие как <header>, <footer>, <section>, <article>, которые помогают структурировать контент страниц;
Для выделения фрагмента веб-страницы и изменения его внешнего вида предназначен тег блочной верстки <div>. Обычно на странице располагают несколько блоков разных стилей, поэтому параметры целесообразно указывать с помощью CSS стиля. Для указания соответствующего стиля в теге <div> используют атрибуты «class» или «id».
Box-sizing – свойства «width» и «height» задают размеры не содержания, а блока. | Position устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице | Margin задает внешние отступы элемента от других объектов. | Display – способ размещения блоков по горизонтали. |
Вorder-width – толщина рамки. Задается в пикселях (px) или указываются thin, medium, thick. Ширина блока может задаваться конкретными числовыми значениями в px или %, а также width: calc(значение1 –/+ значение2) – вычисляемая ширина блока.
Что такое блочная верстка в веб-дизайне?
Какие HTML-теги чаще всего используются для создания блоков на странице?
Чем отличаются блочные элементы от строчных элементов?
Какие CSS-свойства можно применять к блокам, чтобы изменить их внешний вид или расположение?
Помоги Айбару создать веб-страницу для рисунка задания 1, используя блочную верстку.
Что такое блочная верстка в веб-дизайне?
Какие HTML-теги чаще всего используются для создания блоков на странице?
Чем отличаются блочные элементы от строчных элементов?
Какие CSS-свойства можно применять к блокам, чтобы изменить их внешний вид или расположение?
Критерий оценивание:
Создает веб-страницы с использованием блочной верстки.
Дескрипторы:
- использует блочную верстку для размещения элементов;
- применяет css-стили для форматирования блоков (цвет фона, рамки, отступы);
- корректно использует html-теги для создания структуры страницы;
- располагает элементы на странице в соответствии с предоставленным макетом;
- все элементы верстки отображаются корректно в веб-браузере.
Теория (обязательно):
Прочитайте раздел учебника о блочной верстке. Подготовьте краткий конспект, включающий:
- определение блочной верстки.
- основные теги, используемые для создания блоков.
Практическое задание
* Задание 1. Создайте простую веб-страницу с использованием блочной верстки. На странице должно быть:
- заголовок (блок с использованием <header>);
- основной раздел с текстом (используйте <section>).
- подвал с контактной информацией (блок с использованием <footer>).
Добавьте стили через CSS: измените цвет фона, текст и выравнивание для каждого блока.
**Задание 2. Разработайте страницу, описывающую ваш любимый фильм или книгу, с применением блочной верстки.
Используйте как минимум 3-4 блока.
ключите изображение, заголовок, текст описания и дополнительные стили (например, рамки, отступы, выравнивание).