Основы web-технологий Каскадные таблицы стилей (CSS)

445.12K

Category:

internet

Основы 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 – элемент не отображается на веб-странице

Основы web-технологий. Каскадные таблицы стилей (CSS)

1. Основы web-технологий Каскадные таблицы стилей (CSS)

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

21.