ИнтернетПохожие презентации:
Основы web-технологий. Каскадные таблицы стилей (CSS)
1. Основы web-технологий Каскадные таблицы стилей (CSS)
2.
CSS (Cascading Style Sheets) — это язык стилей,используемый для оформления веб-страниц.
Он состоит из селекторов и объявлений, где селектор
указывает элемент HTML, а объявление содержит свойство и
его значение. Основные свойства CSS включают цвет, фон,
шрифты и отступы.
CSS стили появились в 1994 году, когда Хокон Виум Ли
предложил использовать каскадные таблицы стилей для
стилистического оформления веб-страниц.
3.
Способы подключенияCSS к HTML:
Внутренний CSS – это
стиль,
который
подключается к HTMLстранице с помощью
тега
<style>
внутри
секции <head>.
4.
Способы подключения CSS к HTML:Внешний CSS – это стиль во внешнем файле с расширением
.css, который подключается к HTML-странице с помощью тега
<link> внутри секции <head>.
5.
Способы подключения CSS к HTML:Инлайновый стиль – это стиль, который добавляется
непосредственно в тег HTML-элемента через атрибут style.
6.
Селектор – это шаблон, позволяющий обратиться к элементу илигруппе элементов веб-страницы и применить к ним стили CSS.
Виды селекторов:
Универсальный селектор
Селектор по тегу
Селектор по идентификатору
Селектор по классу
Групповые селекторы
Псевдоклассы
7.
Универсальный селектор обозначается символом * иприменяется для выбора всех элементов на веб-странице.
Применяемый стиль задается для всех элементов html без
исключения.
Пример:
*{
font-size: 16px;
}
Установка размера шрифта для всех элементов на странице в
16px.
8.
Селектор по тегу выбирает все элементы с определенномтегом.
Пример:
p{
color: blue;
}
Установка цвета всех абзацев на странице на значение blue.
9.
Селектор по идентификатору обозначается символом # иприменяется
для
выбора
элемента
с
определенным
идентификатором.
Пример:
#intro {
color: red;
font-weight: bold;
}
Установка цвета и стиля текста элемента с идентификатором
intro.
10.
Селектор по классу выбирает элементы с определеннымклассом и обозначается символом .
Пример:
.plain_text {
font-size: 20px;
}
.article {
font-family: "Montserrat";
}
Установка шрифта и семейства шрифта для элементов класса
plain_text и article.
11.
Групповые селекторы позволяют применять одно и то жеправило к нескольким элементам.
Синтаксис:
селектор1, селектор2, ..., селекторN {
свойство: значение;
свойство: значение;
}
Пример:
h1, h2, h3 {
font-family: Arial, sans-serif;
}
12.
Псевдоклассы используются для описания динамическогосостояния элементов на веб-странице. Они не отображаются в
исходном документе и не принадлежат дереву документа DOM.
Основные псевдоклассы:
:hover — стиль применяется при наведении курсора мыши на
элемент
:active — стиль применяется при активации элемента (клик)
:visited — стиль применяется для посещённых ссылок
:link — стиль применяется для непосещённых ссылок
:first-child — стиль применяется для первого дочернего элемента
своего родителя
:last-child — стиль применяется для последнего дочернего
элемента своего родителя
13.
Свойства и значения CSS:font-family, font-size, font-weight, font-style — свойства шрифта;
color, background-color, border-color — свойства цвета;
text-align, text-decoration, text-transform — свойства текста;
display, float, position, margin, padding — свойства макета;
background-image, background-repeat, background-position —
свойства фона.
Каждое свойство может содержать в себе отдельные значения,
числа, цветовые коды, ключевые слова или более сложные
выражения.
14.
Блочная модель CSS:Каждый элемент представляет собой прямоугольный блок,
состоящий из контента, отступа, границы и поля.
Контент – это содержимое внутри элемента, отступы создают
пространство вокруг контента, границы окружают отступы, поля –
пространство вокруг границ.
По умолчанию ширина и высота элемента применяются только к
области контента.
15.
Блочная модель CSS:Для изменения ширины и высоты в зависимости от контента или
самого элемента используется свойство box-sizing, который
может принимать одно из двух значений:
border-box – ширина и высота элемента включают в себя отступы
и границы
content-box – ширина и высота элемента учитывают только
внутреннюю область без учета отступов и границ
16.
Блочная модель CSS:Позиционирование элементов на странице осуществляется с
помощью свойства display:
block – элемент отображается как блок и занимает всю
доступную ширину
inline – элемент отображается как строчный элемент и не создаёт
новый блок
inline-block – элемент отображается как строчный элемент с
возможностью задать ширину и высоту
none – элемент не отображается на веб-странице
17.
Свойство displayblock – элемент
отображается как
блок и занимает
всю
доступную
ширину, создавая
новую строку
18.
Свойство displayinline
–
элемент
отображается
как
строчный элемент и не
создаёт новый блок,
занимая
столько
места, сколько ему
нужно
для
отображения
содержимого
19.
Свойство displayinline-block – элемент отображается как строчный элемент, но его
содержимое может быть отформатировано как блок
20.
Свойство displaynone — элемент
не отображается
на веб-странице и
его содержимое не
занимает
места,
что может быть
полезно
для
скрытия
элементов
или
создания
анимаций
21.
Самостоятельная работаНеобходимо расписать следующие пункты:
1. Табличное представление свойства display
2. Значение run-in свойства display
3. Значение flex свойства display
4. Значение list-item свойства display