Разное

Css функции: Функции | CSS справочник

Содержание

Свойства по группам | справочник CSS
















Свойство Описание Chrome Firefox Opera Safari IExplorer Edge
background Позволяет установить все свойства фона в одном объявлении (универсальное свойство). 1.0 1.0 3.5 1.0 4.0 12.0
background-attachment Устанавливает, поведение фонового изображения во время прокрутки (фиксированное или прокручивается с остальной частью страницы). 1.0 1.0 3.5 1.0 4.0 12.0
background-blend-mode Определяет режим смешивания слоя каждого фонового цвета ( и / или изображения). 35.0 30.0 22.0 7.1* Нет Нет
background-color Определяет цвет фона элемента. 1.0 1.0 3.5 1.0 4.0 12.0
background-image Задает одно или несколько фоновых изображений для элемента. 1.0 1.0 3.5 1.0 4.0 12.0
background-position Задает положение (позицию) фонового изображения. 1.0 1.0 3.5 1.0 4.0 12.0
background-repeat Устанавливает, как будет повторяться фоновое изображение. 1.0 1.0 3.5 1.0 4.0 12.0
background-clip Определяет область элемента для которой будет задан задний фон. 4.0 4.0 10.5 3.0 9.0 12.0
background-origin Определяет как позиционируется фоновое изображение/-я относительно элемента. 4.0 4.0 10.5 3.0 9.0 12.0
background-size Определяет размер фонового изображения/-ий. 4.0
1.0
-webkit-
4.0
3.6
-moz-
10.5
10.0
-o-
4.1
3.0
-webkit-
9.0 12.0
border Позволяет установить все свойства границ в одном объявлении. 1.0 1.0 3.5 1.0 4.0 12.0
border-bottom Устанавливает все свойства нижней границы в одном объявлении. 1.0 1.0 3.5 1.0 4.0 12.0
border-bottom-color Устанавливает цвет нижней границы. 1.0 1.0 3.5 1.0 4.0 12.0
border-bottom-left-radius Определяет форму границы нижнего левого угла. 5.0
4.0
-webkit-
4.0
3.0
-moz-
10.5 5.0
3.1
-webkit-
9.0 12.0
border-bottom-right-radius Определяет форму границы нижнего правого угла. 5.0
4.0
-webkit-
4.0
3.0
-moz-
10.5 5.0
3.1

CSS свойства

CSS позволяет тегам HTML назначать любые визуальные стили, формируя таким образом уникальный внешний вид сайта. Делается это при помощи свойств CSS. В данном справочнике приводится информация по всем свойствам CSS с описанием, допустимыми значениями и примерами.

hanging-punctuation Устанавливает, может ли знак пунктуации располагаться вне контейнера с текстом вначале или в конце строки текста
hyphens Сообщает браузеру, как расставлять переносы слов в блоке текста
letter-spacing Устанавливает расстояние между символами в пределах элемента
line-height Устанавливает межстрочный интервал текста
tab-size Устанавливает размер отсупа, заданного при помощи символа табуляции
text-align Устанавливает горизонтальное выравнивание текста элемента
text-align-last Устанавливает выравнивание последней строки текста
text-decoration Добавляет оформление текста в виде подчеркивания, перечеркивания, линии над текстом
text-decoration-color Устанавливает цвет линии, которая добавляется через свойство text-decoration
text-decoration-line Устанавливает тип оформления текста — подчеркивание, перечеркивание, линия над текстом
text-decoration-style Устанавливает стиль декоративной линии оформления текста
text-indent Устанавливает величину отступа первой строки текстового блока
text-justify Определяет метод выравнивания текста по ширине
text-overflow Определяет параметры видимости текста в блоке, если текст целиком не помещается в заданную область
text-transform Управляет преобразованием текста элемента в заглавные или прописные символы
vertical-align Выравнивает элемент по вертикали относительно

Улучшите свой CSS с помощью этих 5 принципов / Хабр

Написание CSS — процесс достаточно простой и понятный, тогда почему для этого требуются еще какие-то принципы и best-practices?

По мере увеличения масштабов проекта и количества людей, работающего над ним, всё более и более явно начинают проявляться новые сложности, которые могут вызвать серьезные проблемы в будущем. Дублирование кода, сложные цепочки переопределения свойств, использование !important, оставшиеся и неиспользуемые CSS-свойства от удаленных HTML-элементов и так далее. Такой код сложнее читать и исправлять.

Написание CSS на профессиональном уровне сделает код более поддерживаемым, расширяемым, понятным и чистым. Давайте рассмотрим 5 простых и очень эффективным принципов, которые выведут ваш CSS на новый уровень


Принцип именования

«В компьютерных науках существует только две сложные вещи: инвалидация кеша и именование» – Фил Карлтон

Правильное именование и структурирование ваших CSS-селекторов является первым шагом к тому, чтобы сделать ваш CSS более удобочитаемым, структурированным и чистым. Определение правил и ограничений в соглашении об именовании делает ваш код стандартизированным, надежным и простым для понимания.

Именно поэтому такие концепции как BEM (Block-Element-Modifier), SMACSS (Scalable and Modular Architecture for CSS) и OOCSS (Object Oriented CSS) популярны среди многих frontend-разработчиков.

Принцип низкой специфичности

Переопределение CSS-свойств является очень полезным, но в более сложных проектах всё может достаточно быстро выйти из-под контроля. Цепочки переопределения могут стать очень длинными и сложными, что вынудит вас использовать !important для решения проблем специфичности, в которых можно легко потеряться при отладке кода или добавлении новых функций

/* Селектор с низкой специфичностью */
.card {}
 
/* Селекторы с высокой специфичностью */
.card .title {}
 
.blog-list .card img {}
 
.blog-list .card.featured .title {}
 
#js-blog-list .blog-list .card img {}

Браузер и специфичность

Одно из преимуществ следования принципу низкой специфичности — это производительность. Браузеры парсят CSS справа налево.

Давайте взглянем на следующий пример:

.blog-list .card img {}

Браузеры «прочитают» селектор следующим образом:

  1. Найти все теги <img> на странице
  2. Из них выбрать элементы, которые являются потомками класса .card
  3. Из них выбрать элементы, которые являются потомками класса .blog-list

Вы можете видеть, как селекторы с высокой специфичностью влияют на производительность, особенно когда нам нужно глобально выбрать общий элемент типа div, img, li, и т.п.

Использование одинакового уровня специфичности

Используя селекторы CSS-классов с низкой специфичностью в сочетании с методологией BEM или одним из других принципов именования, упомянутых в предыдущем разделе, мы можем создать производительный, гибкий и легкий для понимания код.

Зачем использовать CSS-классы? Мы хотим придерживаться одинакового уровня специфичности, оставаясь гибкими и способными выбирать несколько элементов. Селекторы элементов и селекторы по id не обеспечивают нужной нам гибкости.

Давайте перепишем предыдущий пример используя BEM и придерживаясь низкой специфичности.

/* Селектор с низкой специфичностью */
.card {}
 
/* Замена селекторам с высокой специфичностью  */
.card__title {}
 
.blogList__image {}
 
.blogList__title--featured {}
 
.blogList__img--special {}

Вы можете видеть, насколько эти селекторы проще, понятнее и могут быть легко переопределены и расширены, если потребуется. И сохраняя их специфичность на низком уровне (единственный класс), мы гарантируем оптимальную производительность и гибкость.

Принцип DRY

Принцип DRY (Don`t repeat yourself, рус. не повторяйся) также может быть применён к CSS. Дублирование в CSS может привести к раздутию кода, ненужными переопределениям, ухудшению поддерживаемости и т.п. Эта проблема может быть исправлена с помощью надлежащего структурирования кода и наличия качественной документации.

Storybook — это отличный бесплатный инструмент, позволяющий вам создавать обзор доступных компонентов веб-интерфейса и писать качественную документацию.

/* Без использования принципа DRY */
.warningStatus {
  padding: 0.5rem;
  font-weight: bold;
  color: #eba834;
}
 
.errorStatus {
  padding: 0.5rem;
  font-weight: bold;
  color: #eb3d34;
}
 
.form-errorStatus {
  padding: 0.5rem 0 0 0;
  font-weight: bold;
  color: #eb3d34;
}

Давайте проведём рефакторинг кода, следуя принципу DRY

/* С использованием принципа DRY */
.status {
  padding: 0.5rem;
  font-weight: bold;
}
 
.status--warning {
  color: #eba834;
}
 
.status--error {
  color: #eb3d34;
}
 
.form__status {
  padding: 0.5rem 0 0 0;
}

Принцип единственной ответственности

Используя принцип единственной ответственности в CSS, можно быть уверенным, что CSS-классы являются легко расширяемыми и переопределяемыми. Давайте рассмотрим следующий пример

.button {
  padding: 1rem 2rem;
  font-size: 2rem;
  border-radius: 0.2rem;
  background-color: #eb4934;
  color: #fff;
  font-weight: bold;
}
 
.button--secondary {
  border-radius: 0;
  font-size: 1rem;
  background-color: #888;
}

Видно, что если потребуется расширить класс .button с помощью модификатора .button—secondary, придётся выполнить много переопределений, хотя мы хотим всего лишь поменять цвет фона, сохранив стили по умолчанию.

Проблема в том, что наш класс .button имеет несколько ролей:

  • Определяет блочную модель (padding)
  • Определяет типографику (font-size, font-weight)
  • Определяет внешний вид (color, background-color, border-radius)

Это усложняет расширение CSS-класса и его объединение с другими классами. Учитывая это, давайте улучшим наш CSS с помощью BEM и OOCSS.

/* Общие стили */
.button {
  padding: 1rem 2rem;
  font-weight: bold;
  color: #fff;
}
 
/* Расширения стиля */
.button--radialBorder {
  border-radius: 0.2rem;
}
 
.button--large {
  font-size: 2rem;
}
 
.button--primary {
  background-color: #eb4934;
}
 
.button--secondary {
  background-color: #888;
}

Мы разбили стили нашего button на несколько классов, которые могут использоваться для расширения базового класса. При необходимости мы можем применить модификаторы и добавить новые по мере изменения дизайна или добавления новых элементов

Принцип открытости/закрытости

Программные сущности (классы, модули, функции и т. п.) должны быть открыты для расширения, но закрыты для изменения»

Мы уже использовали принцип открытости/закрытости в предыдущих примерах. Все новые функции и опции должны добавляться путём расширения. Давайте рассмотрим этот пример.

.card {
  padding: 1rem;
}
 
.blog-list .card {
  padding: 0.5em 1rem;
}

Селектор .blog-list .card имеет несколько потенциальных проблем:

  • Некоторые стили могут быть применены только если элемент .card является дочерним по отношению к элементу .blog-list
  • Стили принудительно применяются к элементу .card, если он помещен в элемент .blog-list, что может привести к неожиданным результатам и ненужным переопределениям

Давайте перепишем предыдущий пример:


.card {
  padding: 1rem;
}
 
.blogList__card {
  padding: 0.5em 1rem;
}

Мы исправляем проблему, если используем одиночный селектор класса. С этим селектором мы можем избежать непредвиденных эффектов и не используем условно вложенные стили.

В заключение

Мы рассмотрели примеры, как применяя эти несколько простых принципом можно существенно улучшить подход к написанию CSS:

  • Стандартизированное именование и структура, лучшая удобочитаемость с использованием BEM, OCSS, и т.д.
  • Улучшенная производительность и структура с использованием селекторов с низкой специфичностью
  • Снижение раздутия и улучшенное качество кода с использованием принципа DRY
  • Гибкость и поддерживаемость с использованием принципа открытости/закрытости

Благодарю, что нашли время, чтобы прочитать эту статью. Если она показалась вам полезной, можете поделиться ею или оставить комментарий.

CSS Справочник свойств

align-content Задает выравнивание между линиями внутри гибкого контейнера, если элементы не используют все доступное пространство
align-items Задает выравнивание для элементов внутри гибкого контейнера
align-self Задает выравнивание для выбранных элементов внутри гибкого контейнера
all Сбрасывает все свойства (кроме unicode-bidi и direction)
animation Сокращенное свойство для всех свойств animation-*
animation-delay Задает задержку запуска анимации
animation-direction Указывает, должна ли анимация воспроизводиться вперед, назад или
в других циклах
animation-duration Определяет, сколько времени анимация должна занять для завершения одного цикла
animation-fill-mode Задает стиль элемента, если анимация не воспроизводится (до
он начнется, после его окончания, или как)
animation-iteration-count Указывает, сколько раз анимация должна воспроизводиться
animation-name Задает имя анимации @keyframes
animation-play-state Указывает, запущена или приостановлена анимация
animation-timing-function Задает кривую скорости анимации
backface-visibility Определяет, должна ли задняя грань элемента быть видимой при обращении к пользователю
background Сокращенное свойство для всех свойств background-*
background-attachment Задает, будет ли фоновое изображение прокручиваться вместе с остальной частью страницы или будет фиксироваться
background-blend-mode Задает режим наложения каждого фонового слоя (цвет/изображение)
background-clip Определяет, как далеко фон (цвет или картинка) должна распространяться в
элемент
background-color Задает цвет фона элемента
background-image Задает одно или несколько фоновых изображений для элемента
background-origin Указывает исходное положение фонового изображения
background-position Определяет положение фонового изображения
background-repeat Устанавливается, если/как, фоновое изображение будет повторяться
background-size Определяет размер фоновых изображений
border Сокращенное свойство для свойств border-width, border-style и border-color
border-bottom Сокращенное свойство для свойств border-bottom-width, border-bottom-style
и border-bottom-color
border-bottom-color Задает цвет нижней границы
border-bottom-left-radius Определяет радиус границы нижнего левого угла
border-bottom-right-radius Определяет радиус границы нижнего правого угла
border-bottom-style Задает стиль нижней границы
border-bottom-width Задает ширину нижней границы
border-collapse Задает, должны ли границы таблицы сворачиваться в одну границу или разделяться
border-color Задает цвет четырех границ
border-image Сокращенное свойство для всех свойств border-image-*
border-image-outset Задает величину, на которую область изображения границы выходит за пределы границы бокса
border-image-repeat Указывает, следует ли повторять, округлять или растягивать изображение границы
border-image-slice Определяет, как разрезать изображение границы
border-image-source Указывает путь к изображению, которое будет использоваться в качестве границы
border-image-width Определяет ширину изображения границы
border-left Сокращенное свойство для всех свойств border-left-*
border-left-color Задает цвет левой границы
border-left-style Задает стиль левой границы
border-left-width Задает ширину левой границы
border-radius Сокращенное свойство для всех свойств border-*-radius
border-right Сокращенное свойство для всех свойств border-right-*
border-right-color Задает цвет правой границы
border-right-style Задает стиль правой границы
border-right-width Задает ширину правой границы
border-spacing Задает расстояние между границами соседних ячеек
border-style Задает стиль четырех границ
border-top Сокращенное свойство для свойств border-top-width, border-top-style and
border-top-color
border-top-color Задает цвет верхней границы
border-top-left-radius Определяет радиус границы верхнего левого угла
border-top-right-radius Определяет радиус границы верхнего правого угла
border-top-style Задает стиль верхней границы
border-top-width Устанавливает ширину верхней границы
border-width Задает ширину четырех границ
bottom Задает положение элементов в нижней части родительского элемента
box-decoration-break Задает поведение фон и границы к элементу page-break, или для элеметов in-line, в line-break.
box-shadow Присоединяет одну или несколько теней к элементу
box-sizing Определяет, как вычисляются ширина и высота элемента:
они включают в себя отступы и границы, или нет
break-after Задает поведение разрыва страницы, столбца или области после созданного бокса
break-before Указывает поведение разрыва страницы, столбца или области перед созданным бокса
break-inside Указывает поведение разрыва страницы, столбца или области внутри созданного бокса
caption-side Задает размещение заголовка таблицы
caret-color Задает цвет курсора (символ) во входных данных, текстовых областях или
редактируемом элементе
@charset Указывает кодировку символов, используемую в таблице стилей
clear Определяет, на каких сторонах элемента плавающие элементы не могут плавать
clip Клипы абсолютно расположенный элемент
color Задает цвет текста
column-count Указывает количество столбцов, на которые должен быть разделен элемент
column-fill Указывает, как заполнять столбцы, сбалансированные или нет
column-gap Определяет зазор между столбцами
column-rule Сокращенное свойство для всех свойств column-rule-*
column-rule-color Задает цвет правила между столбцами
column-rule-style Задает стиль правила между столбцами
column-rule-width Задает ширину правила между столбцами
column-span Указывает, сколько столбцов должен занимать элемент
column-width Задает ширину столбца
columns Сокращенное свойство для свойств column-width и column-count
content Используется с псевдо-элементами: before и: after для вставки генерированного содержимого
counter-increment Увеличивает или уменьшает значение одного или нескольких счетчиков CSS
counter-reset Создает или сбрасывает один или несколько счетчиков CSS
cursor Указывает курсор мыши будет отображаться при наведении на элемент
direction Задает направление текста направление/записи
display Указывает, как должен отображаться определенный элемент HTML
empty-cells Указывает, следует ли отображать границы и фон пустых ячеек в таблице
filter Определяет эффекты (например, размытие или смещение цвета) для элемента перед его отображением
flex Сокращенное свойство для свойств flex-grow, flex-shrink, и
flex-basis
flex-basis Задает начальную длину гибкого элемента
flex-direction Указывает направление гибких элементов
flex-flow Сокращенное свойство для свойств flex-direction и flex-wrap
flex-grow Указывает, насколько элемент будет расти относительно остальных
flex-shrink Указывает, как элемент будет сжиматься относительно остальных
flex-wrap Указывает, следует ли оборачивать гибкие элементы
float Указывает, должен ли бокс быть плавающим
font Сокращенное свойство для свойств font-style, font-variant, font-weight,
font-size/line-height
, и font-family
@font-face Правило, которое позволяет веб-сайтам загружать и использовать шрифты, отличные от шрифтов «web-safe»
font-family Задает шрифт для текста
font-feature-settings Позволяет управлять расширенными типографскими возможностями шрифтов OpenType
@font-feature-values Позволяет авторам использовать общее имя в font-variant-alternate для функции, активированной по-разному в OpenType
font-kerning Управляет использованием информации Кернинга (как расставляются буквы)
font-language-override Контролирует использование языковых символов в шрифте
font-size Задает размер шрифта текста
font-size-adjust Сохраняет читаемость текста при резервном копировании шрифта
font-stretch Выбор нормальной, сжатой или развернутой грани из семейства шрифтов
font-style Задает стиль шрифта для текста
font-synthesis Элементы управления, отсутствующие шрифты (полужирный или курсив) могут быть синтезированы браузером
font-variant Указывает, должен ли текст отображаться шрифтом с маленькими прописными буквами
font-variant-alternates Управляет использованием альтернативных глифов, связанных с альтернативными именами, определенными в @font-feature-values
font-variant-caps Управляет использованием альтернативных символов для заглавных букв
font-variant-east-asian Управляет использованием альтернативных глифов для восточноазиатских скриптов (e.g японский и китайский языки)
font-variant-ligatures Управляет тем, какие лигатуры и контекстные формы используются в текстовом содержимом элементов, к которым они применяются
font-variant-numeric Управляет использованием альтернативных глифов для чисел, дробей и порядковых маркеров
font-variant-position Управляет использованием альтернативных глифов меньшего размера, расположенных в виде верхнего или нижнего индекса относительно базовой линии шрифта
font-weight Задает вес шрифта
grid Сокращенное свойство для свойств grid-template-rows,
grid-template-columns, grid-template-areas, grid-auto-rows,
grid-auto-columns
, и grid-auto-flow
grid-area Либо задает имя элемента сетки, и это свойство является свойством, характеристикой свойств
grid-row-start, grid-column-start, grid-row-end, и grid-column-end
grid-auto-columns Задает индекс размера столбца
grid-auto-flow Указывает, как автоматически размещаемые элементы вставляются в сетку
grid-auto-rows Задает индекс размера строки
grid-column Сокращенное свойство для свойств grid-column-start и grid-column-end
grid-column-end Указывает, где заканчивается элемент сетки
grid-column-gap Определяет размер зазора между столбцами
grid-column-start Указывает, с чего начать элемент сетки
grid-gap Сокращенное свойство для свойств grid-row-gap и grid-column-gap
grid-row Сокращенное свойство для свойств grid-row-start и grid-row-end
grid-row-end Указывает, где заканчивается элемент сетки
grid-row-gap Определяет размер зазора между строками
grid-row-start Указывает, с чего начать элемент сетки
grid-template Сокращенное свойство для свойств grid-template-rows, grid-template-columns
и grid-areas properties
grid-template-areas Указывает, как отображать столбцы и строки, используя именованные элементы сетки
grid-template-columns Задает размер столбцов и количество столбцов в макете сетки
grid-template-rows Задает размер строк в макете сетки
hanging-punctuation Указывает, может ли знак пунктуации располагаться за пределами строки
height Задает высоту элемента
hyphens Задает способ разделения слов для улучшения расположения абзацев
image-rendering Подсказывает браузеру, какие аспекты изображения наиболее важны для сохранения при масштабировании
@import Позволяет импортировать таблицу стилей в другую таблицу стилей
isolation Определяет, должен ли элемент создавать новое содержимое стека
justify-content Задает выравнивание между элементами внутри гибкого контейнера, если не использовать все доступное пространство
left Определяет левое положение расположенного элемента
letter-spacing Увеличивает или уменьшает расстояние между символами в тексте
line-break Определяет как/если ломать линии
line-height Устанавливает высоту линии
list-style Задает все свойства списка в одном объявлении
list-style-image Задает изображение в качестве маркера элемента списка
list-style-position Указывает положение маркеров элементов списка (жирные точки)
list-style-type Указывает тип маркера элемента списка
margin Устанавливает все свойства полей в одном объявлении
margin-bottom Устанавливает нижнее поле элемента
margin-left Задает левое поле элемента
margin-right Задает правое поле элемента
margin-top Задает верхнее поле элемента
max-height Задает максимальную высоту элемента
max-width Задает максимальную ширину элемента
@media Устанавливает правила стиля для различных типов/устройств/размеров носителей
min-height Задает минимальную высоту элемента
min-width Задает минимальную ширину элемента
mix-blend-mode Указывает, как содержимое элемента должно сочетаться с его прямым родительским фоном
object-fit Определяет как содержание замененного элемента должно быть приспособлено к боксу установленной своими используемыми высотой и шириной
object-position Задает выравнивание заменяемого элемента внутри его бокса
opacity Задает уровень непрозрачности для элемента
order Устанавливает порядок гибкого элемента относительно остальных
orphans Задает минимальное количество строк, которое должно оставаться в нижней части страницы при разрыве страницы внутри элемента
outline Сокращенное свойство для свойств outline-width, outline-style, и
outline-color
outline-color Задает цвет контура
outline-offset Смещает контур и рисует его за границей
outline-style Задает стиль контура
outline-width Задает ширину контура
overflow Указывает, что происходит, если содержимое переполняет бокс элемента
overflow-wrap Указывает, может ли браузер прерывать строки в словах, чтобы предотвратить переполнение (если строка слишком длинная, чтобы соответствовать содержащему ее блоку)
overflow-x Указывает, следует ли обрезать левый/правый края содержимого, если оно переполняет область содержимого элемента
overflow-y Указывает, следует ли обрезать верхний/нижний края содержимого, если оно переполняет область содержимого элемента
padding Сокращенное свойство для свойств padding-*
padding-bottom Устанавливает нижней отступ элемента
padding-left Задает отступ слева для элемента
padding-right Задает правый отступ элемента
padding-top Задает отступ сверху элемента
page-break-after Задает поведение разрыва страницы после элемента
page-break-before Задает поведение разрыва страницы перед элементом
page-break-inside Задает поведение разрыва страницы внутри элемента
perspective Дает 3D-позиционированному элементу некоторую перспективу
perspective-origin Определяет, в какой позиции пользователь смотрит на 3D-позиционированный элемент
pointer-events Определяет, реагирует ли элемент на события указателя
position Указывает тип метода позиционирования, используемого для элемента (статический, относительный, абсолютный или фиксированный)
quotes Задает тип кавычек для внедренных предложений
resize Определяет, если (и как) элемент изменяется пользователем
right Определяет правое положение расположенного элемента
tab-size Задает ширину символа табуляции
table-layout Определяет алгоритм, используемый для компоновки ячеек, строк и столбцов таблицы
text-align Задает выравнивание текста по горизонтали
text-align-last Описывает выравнивание последней строки блока или строки непосредственно перед принудительным разрывом строки при выравнивании текста «justify»
text-combine-upright Указывает сочетание нескольких символов в один символ
text-decoration Задает украшение, добавляемое к тексту
text-decoration-color Задает цвет оформления текста
text-decoration-line Определяет тип линии в тексте украшений
text-decoration-style Задает стиль линии в оформлении текста
text-indent Задает отступ первой строки в текстовом блоке
text-justify Указывает метод выравнивания, используемый при выравнивании текста «justify»
text-orientation Определяет ориентацию текста в строке
text-overflow Указывает, что должно произойти, когда текст переполняет содержащий элемент
text-shadow Добавляет тень к тексту
text-transform Управляет капитализацией текста
text-underline-position Задает положение подчеркивания, заданного с помощью свойства text-decoration
top Определяет верхнее положение расположенного элемента
transform Применяется 2D-или 3D-преобразования к элементу
transform-origin Позволяет изменять положение преобразованных элементов
transform-style Задает способ отображения вложенных элементов в 3D-пространстве
transition Сокращенное свойство для всех свойств transition-*
transition-delay Указывает, когда начнется эффект перехода
transition-duration Указывает, сколько секунд или миллисекунд требуется для завершения эффекта перехода
transition-property Задает имя свойства CSS эффект перехода для
transition-timing-function Определяет кривую скорости эффекта перехода
unicode-bidi Используется вместе с свойством direction
для установки или возврата переопределения текста для поддержки нескольких языков в одном документе
user-select Указывает, можно ли выбрать текст элемента
vertical-align Задает вертикальное выравнивание элемента
visibility Указывает, является ли элемент видимым
white-space Задает способ обработки пробелов внутри элемента
widows Задает минимальное количество строк, которое должно оставаться в верхней части страницы при разрыве страницы внутри элемента
width Задает ширину элемента
word-break Указывает, как слова должны ломаться при достижении конца строки
word-spacing Увеличивает или уменьшает расстояние между словами в тексте
word-wrap Позволяет длинные, нерушимые слова, которые будут разбиты и перенесены на следующую строку
writing-mode Указывает, должны ли строки текста уложены горизонтально или вертикально
z-index Задает порядок расположения элементов в стеке

Что такое CSS: объясняем простыми словами | GeekBrains

Почему нельзя обойтись одним HTML и при чём тут какие-то каскады

https://d2xzmw6cctk25h.cloudfront.net/post/2270/og_image/9969a3f6341d09d7adb07e4042d1c690.png

Встречая аббревиатуру CSS впервые, новички уже догадываются, что это как-то связано с сайтами. Разберёмся: CSS — Cascading Style Sheets — это каскадные таблицы стилей. По сути — язык, который отвечает за описание внешнего вида HTML-документа. Подавляющее большинство современных веб-сайтов работают на основе связки HTML+CSS.

Теперь ответим на вопрос о том, что делает CSS. Всё просто: если HTML структурирует контент на странице, то CSS позволяет отформатировать его, сделать более привлекательным для читателя. Изначально веб-разработчики использовали исключительно HTML — так было на заре развития интернет-технологий. С помощью разметки можно было выделить параграф, заголовок, изменить начертание текста. А большего и не требовалось.

Со временем этих возможностей стало мало — и появилась технология форматирования без изменения самого содержимого и структуры документа. CSS решил проблему «зоопарка» тегов форматирования, когда разные браузеры поддерживали разные теги. Их унификация и единая база упростили работу с веб-документами и облегчили жизнь веб-мастерам.

CSS и стили

CSS используется для определения стилей (правил) оформления документов — включая дизайн, вёрстку и вариации макета для различных устройств и размеров экрана. У такого способа форматирования несколько достоинств:

  • теги не дублируются;
  • документ проще обслуживать;
  • внешний вид всего сайта можно изменить централизованно, а не корректировать форматирование каждой странички.

Стили можно разметить внутри тега <HEAD> или использовать отдельный CSS-файл.

Вот так можно прописать CSS в качестве атрибута непосредственно в HTML:

А так CSS прописывается при помощи тега <style> и в теге <head> документа HTML.

Теперь разберёмся, что такое CSS-файл. Всё просто — это файл с расширением .css, где прописываются правила оформления документа. Чтобы привязать файл к оформлению страницы, нужно использовать тег <link>:

Современный способ оформления веб-документов вошёл в практику в 2011 году. Это свойство CSS grid — теперь оно поддерживается практически всеми браузерами. И если раньше приходилось верстать документы с использованием элементов вроде <div>, то сейчас всё это выполняется средствами CSS.

После того как этот способ стал стандартом, проблема разделения содержания (HTML) и оформления (CSS) решилась раз и навсегда. 

Синтаксис CSS

У языка CSS относительно простой синтаксис. Сначала прописывается селектор — он выбирает конкретный элемент на странице. Потом, после фигурных скобок, указываются свойства со значениями — между ними ставится двоеточие. Сами свойства отделяются друг от друга точкой с запятой.

Что такое селектор в CSS? Это конструкция, которая позволяет выбрать отдельные или однотипные элементы на странице, чтобы их стилизовать. С селектора начинается каждый блок объявлений в CSS:


.my-class {
  background-color: #999;
}

В качестве селектора в примере используется my-class. Все элементы с этим классом получают единое оформление — серый фон цвета #999.

Каскады в CSS

И всё-таки почему CSS — это именно Cascading Style Sheets? Дело в том, что в единую схему стили организуются при помощи каскада. Вот простой пример, который также поможет понять, что такое CSS-код и как он выглядит:


p {
  color: green;
  font-size: 20px;
}
 
p {
  color: red;
}

При помощи каскадов мы присвоили элементу p красный цвет. Зелёный цвет, указанный выше красного, учитываться не будет. Используется то значение параметра, которое указано ниже, и это помогает избежать конфликтов. При этом размер шрифта — 20 пикселей — не меняется. Если упростить написанное выше, то получится:


p {
  color: red;
  font-size: 20px;
}

Кроме того, один элемент можно сделать зависимым от нескольких селекторов разного типа. Пример:


p {
  color: red;
}
 
p.important {
  font-size: 20px;
}
 
#intro {
  font-style: italic;
}

Чтобы использовать все параметры, в HTML указываем:


<p>
  CSS упрощает форматирование документов.
</p>

Здесь мы присвоили элементу следующие свойства: он красный, размером 20 пикселей и написан курсивом. Важно, что в данном случае у разных селекторов — разный приоритет. Их порядок:

  1. Селектор типа элемента (p).
  2. Селектор класса (.important).
  3. Селектор id (#intro).

1 — низкий приоритет, 3 — высокий.

Приоритеты в CSS

Обговорим подробнее вопрос приоритетов. Их иерархия работает следующим образом:

  1. Самый высокий приоритет у свойств, в конце объявления которых указано !important.
  2. Затем идут инлайновые стили, которые прописываются в теге через атрибут style.
  3. Ещё ниже приоритет стилей, заданных в теге style в самом документе.
  4. Далее следуют стили, подключённые к документу как внешний CSS-файл с использованием тега <link>

Методологии CSS

Начинающему веб-мастеру для работы с CSS достаточно просто знать, что такое стили и как их использовать, изучить основные свойства и способы их задавать. А вот при работе с большими проектами уже необходимо использовать специализированные инструменты, а также чёткие стандарты написания CSS. Иначе другие разработчики просто не смогут нормально обслуживать код.

Единой методологии CSS нет. Существует несколько вариантов, и задача разработчика — выбрать ту методологию, которая оптимально ему подходит. Но сначала стоит разобраться с основами, научиться работать с CSS. Кстати, новые варианты появляются не так уж редко, так что за новинками стоит следить.

Наиболее популярные современные методологии CSS — это Atomic CSS (Functional CSS) и CSS в JavaScript. В основе первого варианта лежит использование максимального количества базовых классов, чтобы как можно чаще применять их повторно. Сторонники второго варианта считают, что стили CSS стоит определять не в отдельной таблице, а внутри каждого компонента.

Будущее CSS

CSS постоянно развивается — сейчас активно разрабатывается уже третье поколение этого стандарта. В нём спецификация разделяется на модули, причём разработка и развитие каждого из них идут независимо. Разработчики современных браузеров постепенно расширяют поддержку стандарта CSS3.

Несколько лет назад начало формироваться и четвёртое поколение стандарта CSS, но пока спецификации находятся на уровне драфтов.

Все премудрости CSS, HTML и их совместного использования вы можете освоить на отдельном интерактивном курсе GeekBrains. В течение месяца вы научитесь верстать статические сайты, освоите блочную вёрстку, препроцессор Less, Bootstrap и другие полезные инструменты.

Учебник CSS 3. Статья «Селекторы. Часть 1»

Ближайшие статьи этого учебника будут посвящены глубокому изучению селекторов, благодаря которым вы научитесь выбирать совершенно любой элемент, размещенный в HTML документе.


Основная функция селекторов заключается в том, чтобы контролировать дизайн веб страниц, выбирая элемент, или элементы по определенным критериям и стилизуя их с помощью CSS свойств, которые вы указываете в блоке объявлений (описаний).


Селектор типа

Рис. 3а Селектор типа в CSS.

В предыдущих примерах, да и в практическом задании предыдущей статьи «Создание первой таблицы стилей» мы с Вами использовали селекторы типа, которые определяют HTML элемент, к которому будет применен стиль. Если вы хорошо знакомы с HTML тегами, то вам будет легко определять в стилях селекторы типа, так как они имеют одноимённые наименования с форматируемыми элементами, например:

  • p — сообщает браузеру, что необходимо отформатировать все HTML теги <p> (параграф).
  • table — сообщает браузеру, что необходимо отформатировать все HTML теги <table> (таблица).
  • li — сообщает браузеру, что необходимо отформатировать все HTML теги <li> (элемент списка).

Давайте рассмотрим пример, в котором с использованием селектора типа мы стилизуем все заголовки второго уровня (<h3>):

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Селектор типа</title>
<style>
h3 {
font-family: Arial; /* задаем тип шрифта Arial */
color: green; /* задаем цвет текста*/
margin-top: 50px; /* добавляем отступ от верхнего края элемента */
}
</style> 
</head>
<body>
	<h3>Обычный заголовок второго уровня</h3>
	<h3>Обычный заголовок второго уровня</h3>
	<h3>Обычный заголовок второго уровня</h3>
</body>
</html> 

Результат нашего примера:

Рис. 3б Пример использования селектора типа.

Как вы могли заметить, селектор типа позволяет стилизовать сразу все элементы подобного типа, но что делать если нам необходимо стилизовать какой-то однотипный элемет отлично от других? В этом случае селектор типа нам уже не подойдет и нам придется использовать селектор класса.

Селектор класса

Рис. 4 Селектор класса в CSS.


Прошу от Вас максимального внимания, так как селектор класса является одним из самых распространенных и востребованных селекторов CSS, который мы будем постоянно использовать в дальнейшем изучении CSS.


И так, мы хотим, чтобы один из элементов выглядел не так, как другие. Для этого нам необходимо создать селектор, назначив ему имя, которое нам необходимо придумать самостоятельно:

.test { /* имя класса в таблице стилей задается через точку */
text-align: center; /* горизонтальное выравнивание текста по центру */
font-family: Courier; /* задаем тип шрифта Courier */
color: green; /* задаем цвет текста*/
margin-top: 50px; /* добавляем отступ от верхнего края элемента */
}

После того как мы создали наш класс в таблице стилей, нам необходимо применить его к интересующему нас элементу, или элементам, которые мы хотим стилизовать. Чтобы указать класс для определенного элемента, необходимо добавить к этому элементу глобальный HTML атрибут class со значением нашего класса, но без точки:

<h3 class = "test">Заголовок второго уровня</h3> /* задаем класс для элемента*/

Обратите внимание на следующие правила, которые необходимо соблюдать при работе с селекторами класса:

  • в отличии от селекторов типа все названия селекторов класса должны начинаться с точки (благодаря ей браузеры находят эти селекторы в таблице стилей). Точка требуется только в названии селектора таблицы стилей (в значении глобального HTML атрибута class она не ставится, будьте внимательны из-за этого возникает много ошибок).
  • используйте только буквы алфавита (A-Z, a-z), числа, дефисы, знаки подчеркивания.
  • название после точки всегда должно начинаться с символа (неправильно: .50cent, .-vottakvot).
  • Учитывайте регистр при наименовании стилевых классов, т.к. они к этому чувствительны и очень ранимы (.vottakvot и .VotTakVot разные классы).

Теперь соберем это в одном примере и посмотрим результат:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title> Селекторы класса</title>
<style>
.test {
text-align: center; /* горизонтальное выравнивание текста по центру */
font-family: Courier; /* задаем тип шрифта Courier */
color: green; /* задаем цвет текста*/
margin-top: 50px; /* добавляем отступ от верхнего края элемента */
}
</style>
</head>
<body>
	<h3>Обычный заголовок второго уровня</h3>
	<h3 class = "test">Заголовок с заданным классом</h3>
</body>
</html> 

Результат нашего примера:

Рис. 5 Использование селектора класса.

Селекторы класса очень гибкий инструмент, который позволяет указать конкретный стиль даже к одному слову предложения. Для этого мы поместим это слово внутри элемента <span> и назначим этому элементу определённый класс, который опишем во внутренней таблице стилей:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример выделения одного слова</title>
<style>
.test { 
color: #0F0; /* задаём цвет текста в hex формате */
font-size: 30px; /* задаем размер шрифта*/
}
</style>
</head>
<body>
	<h3>Обычный заголовок <span class = "test">второго</span> уровня</h3>
</body> 
</html>

Результат нашего примера:

Рис. 6 Пример выделения одного слова с использованием селектора класса.

Обращаю Ваше внимание, что вы можете использовать селекторы класса напрямую к HTML элементам, используя следующий синтаксис:

a.test { /* выбирает все элементы <a> с классом test */
блок объявлений;
}
p.intro { /* выбирает все элементы <p> с классом intro */
блок объявлений;
}

ID селекторы

Рис. 7 Селектор id в CSS.

Основная задача селектора id заключается в том, чтобы выбрать элемент с определённым идентификатором.
Для начала необходимо создать идентификатор, назначив ему имя, которое нам необходимо придумать самостоятельно:

#test { /* имя идентификатора в таблице стилей задается через решетку */
background-color: #00FF00; /*Задаём цвет заднего фона*/
color: white; /*Задаём цвет шрифта белый*/
font-size: 30px; /*Указываем размер шрифта*/
width: 600px; /*Указываем ширину элемента*/
height: 40px; /*Указываем высоту элемента*/
text-align: center; /*Выравниваем текст по центру внутри элемента*/
}

После того как мы создали наш идентификатор в таблице стилей, нам необходимо применить его к интересующему нас элементу, который мы хотим стилизовать. Чтобы указать идентификатор для элемента, необходимо добавить к этому элементу глобальный HTML атрибут id со значением нашего идентификатора, но уже без решетки:

<h3 id = "test">Обычный заголовок второго уровня</h3> <!-- задаем идентификатор для элемента --> 

Обратите внимание на следующие правила, которые необходимо соблюдать при работе с id селекторами:

  • значение идентификатора должно быть уникально на странице, размещение нескольких одноименных идентификаторов на странице считается ошибкой (выборка остановится на первом идентифакторе).
  • все названия id селекторов должны начинаться с решётки (благодаря ей браузеры находят эти селекторы в таблице стилей). Решетка требуется только в названии селектора таблицы стилей (в значении глобального HTML атрибута id она не ставится, будьте внимательны из-за этого возникает много ошибок).
  • используйте только буквы алфавита (A-Z, a-z), числа, дефисы, знаки подчеркивания.
  • название после решётки всегда должно начинаться с символа (неправильно: #50cent, #-vottakvot).
  • Учитывайте регистр при наименовании id селекторов, т.к. они к этому чувствительны (#vottakvot и #VotTakVot разные идентификаторы).

Теперь соберем это в одном примере и посмотрим результат:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>ID селекторы</title>
<style>
#test {
background-color: #0F0; /* задаём цвет заднего фона */
color: white; /* задаём цвет текста */
font-size: 30px; /* указываем размер шрифта */
height: 100px; /* указываем высоту элемента */
text-align: center; /* горизонтальное выравнивание текста по центру */
}
</style>
</head>
<body>
	<h3 id = "test">Обычный заголовок второго уровня</h3> 
</body>
</html> 

Результат нашего примера:

Рис. 7а Пример использования id селектора.


В настоящее время id селекторы в основном применяются на веб страницах с целью динамического управления элементами с использованием языка программирования JavaScript.


Групповые селекторы

В CSS допускается задать единый стиль не только одному селектору, но и группе селекторов. В группу могут входить как селекторы типа, селекторы класса, так и рассмотренные нами id селекторы. При перечислении любых селекторов (даже, которые мы будем рассматривать далее в учебнике) необходимо обязательно разделять их запятой, позднее вы поймете почему.

Например:

<style>
h2, h3,.test,#test { /* выбираем заголовки первого и второго уровня, элементы с классом test и элемент с идентификатором test */
background-color: green;  /* задаем цвет заднего фона */ 
}
.test, #test { /* выбираем элементы с классом test и элемент с идентификатором test */
color: blue; /* задаем цвет текста */ 
}
</style> 

Первым групповым селектором мы указываем, что заголовки <h2> и <h3>, элементы с классом test и элемент с идентификатором test получат цвет заднего фона зеленый.

Вторым групповым селектором мы указываем, что кроме заднего фона элементы с классами test и элемент с идентификатором test получат синий цвет текста.

Рассмотрим следующий пример:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Групповые селекторы</title>
<style>
h2, h3,.test,#test { /* выбираем заголовки первого и второго уровня, элементы с классом test и элемент с идентификатором test */
color: red;  /* задаем цвет текста */ 
}
h4,h5 { /* выбираем заголовки третьего и четвертого уровня */
color: blue; /* задаем цвет текста */ 
}
h2,h3,h4,h5 { /* выбираем заголовки от первого до четвертого уровня */
font-style: italic;  /* задаем стиль шрифта - курсивное начертание */ 
}
</style>
</head>
<body>
	<h2>Заголовок первого уровня</h2>
	<h3>Заголовок второго уровня</h3>
	<p class = "test">Абзац с классом test</p>
	<h4>Заголовок третьего уровня</h4>
	<p id = "test">Абзац с идентификатором test</p>
	<h5>Заголовок четвертого уровня</h5>
	</body>
</html> 

В этом примере мы использовали три групповых селектора:

  • Первым групповым селектором мы указываем, что заголовки <h2> и <h3>, элементы с классом test и элемент с идентификатором test получат цвет текста красный.
  • Вторым групповым селектором мы указываем, что заголовки <h4> и <h5> получат цвет текста синий.
  • Третьим групповым селектором мы указываем, что все заголовки (от <h2> до <h5>) будут иметь курсивное начертание шрифта.

Результат нашего примера:

Рис. 7б Пример использования групповых селекторов.

Универсальный селектор

Селектор * позволяет выбрать все элементы внутри документа (универсальный селектор).

Давайте рассмотрим пример использования:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Универсальный селектор</title>
<style>
* { /* выбираем все элементы внутри документа */
color: rgb(50,100,150); /* задаем цвет текста в формате rgb */ 
font-style: italic;  /* задаем стиль шрифта - курсивное начертание */ 
}
</style>
</head>
<body>
	<h2>Заголовок первого уровня</h2>
	<h3>Заголовок второго уровня</h3>
	<p>Абзац, который не несет никакой смысловой нагрузки</p>
</body>
</html> 

В этом примере с использованием универсального селектора мы указали, что все элементы на странице получат определенный цвет текста и будут иметь курсивное начертание шрифта.

Результат нашего примера:

Рис. 7в Пример использования универсального селектора.

Кроме того универсальный селектор может использоваться в качестве селектора потомков и выбирать все элементы, которые находятся внутри другого элемента.

.test * { /* выбирает все элементы внутри элемента c назначенным классом test */
объявление; 
} 
#test * { /* выбирает все элементы внутри элемента c назначенным идентификатором test */
объявление; 
} 
div * {  /* выбирает все элементы внутри элемента <div> */
объявление; 
} 

Селекторы потомков будут подробно рассмотрены в следующей статье «Селекторы. Часть 2.».


Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:
  • Составьте следующую HTML страницу, в которой заголовки имеют шрифт Arial, а абзацы, которые относятся к статье Verdana:

Практическое задание № 2.

Подсказка: при выполнении практических заданий вы можете располагать стилевую информацию как внутри самой веб страницы, так и в отдельном файле.
В практических заданиях для определения цвета элементов вы можете использовать графические редакторы — инструмент палитра (пипетка), либо установите плагин для вашего браузера (например, CollorZilla), либо использовать свои цвета, так как копирование цветов не является целью практического занятия.

После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.

Учебник CSS 3. Статья «Селекторы. Часть 3»



В этой объемной статье учебника мы с Вами продолжим изучение селекторов, рассмотрим с Вами примеры работы селекторов, предназначенных для выбора элементов с определёнными HTML атрибутами, познакомимся с псевдоклассом отрицания и рассмотрим некоторые новые для Вас, и очень полезные псевдоклассы, которые позволят нам выбирать элементы в зависимости от их расположения в документе.

Селекторы атрибутов

Исходя из названия заголовка, вы можете догадаться, что благодаря использованию селекторов атрибутов вы можете выбрать те элементы страницы, которые имеют определённые HTML атрибуты.

Давайте рассмотрим следующий селектор и попробуем разобраться, что он значит:


img[title] { /* выбирает все элементы <img> с атрибутом title */
блок объявлений;
}

img в данной случае аналогичен селектору типа, т.е выбирает все элементы <img>, а в квадратных скобках мы задаем имя атрибута этого элемента. То есть происходит выборка всех элементов данного типа с определённым атрибутом, в нашем примере это глобальный атрибут title, определяющий текстовую подсказку о содержимом элемента.

Вы можете использовать селекторы атрибутов не только напрямую к элементам, но и использовать их с прочими селекторами, например с селекторами класса или id селекторами:


.main[title] { /* выбирает все элементы с классом main и атрибутом title */
блок объявлений;
} 
#main[title] { /* выбирает элемент с идентификатором main и атрибутом title */
блок объявлений;
} 

В данном случае первый селектор выбирает все элементы, которые имеют значение глобального атрибута class равным main и глобальным атрибутом title. Второй селектор выбирает элемент, который имеют значение глобального атрибута id равным main и глобальным атрибутом title.

Рассмотрим следующий пример в котором, мы выберем все элементы <img>, у которых присутствует атрибут alt, который задает альтернативный текст для изображения.


<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример использования селектора атрибутов</title>
<style>
img { /* выбираем все изображения */
width: 100px;  /* задаем ширину элемента */
height: 100px;  /* задаем высоту элемента */
}
img[alt] { /* выбираем все изображения с атрибутом alt */
border: 1px solid green; /* устанавливаем сплошную границу размером 1 пиксель зеленого цвета */
} 
</style>
</head>
	<body>
		<img src = "nich.jpg" alt = "nich">
		<img src = "nich.jpg"> <!-- элемент не будет стилизован (отсутствует атрибут alt) -->
		<img src = "nich.jpg" alt = "nich">
	</body>
</html>

Результат нашего примера:



Рис. 17г Пример использования селектора атрибутов.

С помощью селектора атрибутов мы можем выбрать элементы не только с определённым атрибутом, но и указать с каким значением должен быть этот атрибут.


Давайте рассмотрим пример в котором нам необходимо по особенному стилизовать поле, предназначенное для ввода пароля.


<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Селектор атрибута с указанным значением</title>
<style>
input[type=password] { /* выбираем все элементы <input>, атрибут type которых имеет значение password */
border: 1px dotted red; /* устанавливаем точечную границу размером 1 пиксель красного цвета */
} 
input[type=password]:focus { /* выбираем элемент <input>, атрибут type которого имеет значение password и который находится в фокусе */
border: 1px solid green; /* устанавливаем сплошную границу размером 1 пиксель зеленого цвета */
} 
</style>
</head>
	<body>
		<form>
			Login: <input type = "text" name = "login" placeholder = "Введите ваш логин"><br><br>
			Password: <input type = "password" name = "password" placeholder = "Введите ваш пароль"><br><br>
			<input type = "submit" name = "submit" value = "Далее">
		</form>
	</body>
</html>

В этом примере мы использовали два селектора атрибутов с указанным значением, которые позволили нам выбрать поле, предназаченное для ввода пароля, а во втором случае с использованием псевдокласса :focus мы создали стили для того состояния, когда это поле находится в фокусе (пользователь кликнул на него, или выбрал с помощью клавиатуры).
Псевдокласс :focus мы уже с Вами рассматривали в конце предыдущей статьи учебника «Псевдоклассы и псевдоэлементы».

Результат нашего примера:



Рис. 17д Пример использования селектора атрибута с указанным значением.

В предыдущем примере для выборки мы указали конкретное значение атрибута, но в некоторых случаях
нам необходимо выбрать элементы, значение атрибута которых, начинается с определённых символов. В CSS 3 для этих целей введен специальный селектор атрибута, который выбирает элементы у которых определённый атрибут имеет значение, начинающееся с определённых символов. Этот селектор атрибута имеет следующий синтаксис:


[attribute ^ = value] {
блок объявлений;
}

Давайте рассмотрим пример в котором выберем на странице все абсолютные адреса внешних гиперссылок, которые начинаются с http://, либо https://:


<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Селектор атрибута со значением, начинающимся с определённых символов</title>
<style> 
a[href ^ = "http://"], a[href ^ = "https://"] { /* групповой селектор атрибутов */
color: orange; /* устанавливаем цвет текста */
}
</style>
</head>
	<body>
		<p>Сайт компании доступен как по протоколу http, так и по протоколу https:</p>
			<ul>
				<li><a href = "http://сайткомпании.ссср">Адрес с http</a></li>
				<li><a href = "https://сайткомпании.ссср">Адрес с https</a></li>
			</ul>
		<p>Может вы настроите перенаправление?</p>
	</body>
</html>


Обратите внимание, что значение атрибута в этом случае мы указываем в кавычках, чтобы браузер не интерпретировал это как начало гиперссылки.


Результат нашего примера:



Рис. 17е Пример использования селектора атрибута со значением, начинающимся с определённых символов.

В CSS 3 был введен не только селектор атрибутов, который позволяет выбирать элементы, чьи атрибуты начинаются с определённых символов, но и элементы, чьи атрибуты заканчиваются определёнными символами.

Давайте рассмотрим пример в котором мы выберем гиперссылки, которые заканчиваются определённым разрешением файла.


<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Селектор атрибута со значением, заканчивающимся определёнными символами</title>
<style> 
a[href$=".doc"] { /* выбираем все элементы с атрибутом href, значение которого закачивается на .doc */
color: green; /* устанавливаем цвет текста */
background-color: lightblue; /* устанавливаем цвет заднего фона */
}
a[href$=".mp3"] { /* выбираем все элементы с атрибутом href, значение которого закачивается на .mp3 */
background-color: khaki; /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<a href ="http:/path.to/test.doc">Инструкция</a><br>
		<a href ="http:/path.to/test.mp3">Песня про зайцев</a>
	</body>
</html>


Обратите внимание, что значение атрибута в этом случае мы указываем в кавычках, чтобы браузер не интерпретировал это как разрешение файла.


Результат нашего примера:



Рис. 18 Пример использования селектора атрибутов со значением, заканчивающимся определёнными символами.

Давайте рассмотрим с Вами какие еще выборки можно сделать с использованием селектора атрибутов и перейдем к изучению такого полезного инструмента как псевдокласс отрицания.

Следующий селектор позволит нам, к примеру, выбрать изображения, которые содержат в названии IMG_ (как правило такое наименование файлов использует компания Canon):


img [src*="IMG_"] { /* выбирает все элементы img, атрибут src, которых содержит символы "IMG_" */
блок объявлений;
}  
/* селектор выбирает элементы с такими значениями как "xxxIMG_", "IMG_xxxx" и "xxxIMG_xxxx" */

Браузер интерпретирует это как необходимость выбора всех изображений, атрибут src которых содержит IMG_ (в любом месте). Зачастую такой способ позволяет быстрее отформатировать необходимые элементы, по сравнению с созданием и присвоением стилевого класса для каждого элемента.

Следущий селектор позволяет выбрать элемент, значение атрибута которого содержит определённое слово (не зависимо от позиции):


p[title ~="home"] { /* выбирает элементы <p>, которые содержат определенное слово */
блок объявлений;
}  

<p title = "go home">Абзац title="go home"</p> <!-- абзац будет стилизован (содержит home) -->
<p title = "home home" >Абзац title="home home"</p> <!-- абзац будет стилизован (содержит home) -->
<p title = "home-1" >Абзац title="home1"</p> <!-- абзац не будет стилизован -->
<p title = "homes" >Абзац title="homes"</p> <!-- абзац не будет стилизован -->
<p title = "shome">Абзац title="shome"</p> <!-- абзац не будет стилизован -->

Ну и заключительный селектор атрибута, который имеется в современном стандарте, позволяет выбрать элемент значение атрибута которого начинается с определенного слова:


[title | = home] { /* выбирает все элементы с атрибутом, значение которого начинается с определённого слова (после него не должно быть никаких символов, либо допускается продолжать значение через дефис, иначе выборка не будет произведена) */
блок объявлений;
}  

<p title = "home">Абзац title="home"</p> <!-- абзац будет стилизован (начинается с home) -->
<p title = "home-1" >Абзац title="home-1"</p> <!-- абзац будет стилизован (начинается с home после которого следует дефис) -->
<p title = "home home">Абзац title="home home"</p> <!-- абзац не будет стилизован -->
<p title = "not home">Абзац title="not home"</p> <!-- абзац не будет стилизован -->
<p title = "homes" >Абзац title="homes"</p> <!-- абзац не будет стилизован -->
<p title = "shome">Абзац title="shome"</p> <!-- абзац не будет стилизован -->


Обратите внимание, что условие выборки будет соблюдено если атрибут содержит значение, которое содержит только указанное слово, или если после указанного слова сразу следует дефис (значение продолжается через дефис).

Псевдокласс отрицания :not()

Селектор :not() или псевдокласс отрицания, позволяет выбрать элементы, или селекторы отличные от указанных.


Что нельзя использовать с псевдоклассом :not():

  • Использовать в одном селекторе несколько псевдоклассов :not().
  • Использовать с псевдоэлементами (::first-letter, ::first-line и так далее).
  • Нельзя использовать с селекторами потомков (например, div ul a).
  • Использовать в групповых селекторах (комбинации из селекторов).

Давайте рассмотрим пример в котором по разному стилизуем изображения. Допустим у нас есть изображения фиксированного размера со следующими значениями:


img { /* выбираем все изображения */
width: 100px; /* ширина элемента в пикселях */
height: 100px; /* высота элемента в пикселях */
}

Создадим селектор класса .photo и применим его к необходимым изображениям, чтобы они получили оранжевую границу.


.photo { /* выбираем все элементы с классом photo */
border: 2px solid orange; /* сплошная граница размером 2 пикселя оранжевого цвета */
}

Перед Вами стоит задача изменить стиль для всех изображений (предположим, что их сотни), но при этом у Вас ограниченное количество времени и необходимо сделать так, чтобы эти изменения затронули изображения с классом .photo. Для этого Вам необходимо создать селектор совместно с псевдоклассом отрицания:


img:not(.photo)  { /* выбираем все изображения, которые не имеют класса photo */
border: 2px dashed green; /* пунктирная граница размером 2 пикселя зеленого цвета */
}

Всё вместе и результат:


<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдокласс отрицания :not()</title>
<style>
img { /* выбираем все изображения */
width: 100px; /* ширина элемента в пикселях */
height: 100px; /* высота элемента в пикселях */
}
.photo { /* выбираем все элементы с классом photo */
border: 2px solid orange; /* сплошная граница размером 2 пикселя оранжевого цвета */
}
img:not(.photo)  { /* выбираем все изображения, которые не имеют класса photo */
border: 2px dashed green; /* пунктирная граница размером 2 пикселя зеленого цвета */
}
</style>
</head>
	<body>
		<img src = "nich.jpg" alt = "nich" class = "photo">
		<img src = "nich.jpg" alt = "nich" class = "photo"><br>
		<img src = "nich.jpg" alt = "nich"> 
		<img src = "nich.jpg" alt = "nich"> 
		<img src = "nich.jpg" alt = "nich">
	</body>
</html>

Как вы можете заметить на изображении ниже, мы справились с поставленной задачей и стилизовали с использованием псевдокласса отрицания :not() все изображения, отлично от изображений с классом photo:



Рис. 19 Пример использования псевдокласса отрицания :not() в CSS.

Селекторы дочерних элементов

Селектор дочерних элементов позволяет форматировать элементы, вложенные внутрь других элементов (выбирает все дочерние элементы внутри элемента родителя).

Элемент, подчиненный другому элементу более высокого уровня, является дочерним. На изображении ниже оба элемента <h3> и <p> являются дочерними по отношению к <body>, но элемент <i> при этом не является дочерним для элемента <body>, так как он расположен внутри тега <p>, и является дочерним именно для него.



Рис. 20 Дочерние элементы в HTML документе.

Перед нами стоит задача стилизовать гиперссылку (элемент <a>), который выделен оранжевым цветом на изображении:



Рис. 20а Задача выбора элемента на странице.

При использовании селектора потомков body a приведет к выбору всех элементов <a>, так как они являются вложенными по отношению к элементу <body>, если мы используем селектор потомков p a, то это приведет к выбору двух элементов <a>, которые вложены внутри элементов <p>, так как они оба являются его потомками. Селекторы потомков мы с Вами рассматривали в статье «Селекторы. Часть 2».

В нашем случае, как никогда лучше подойдет селектор дочерних элементов, благодаря которому мы можем добраться до необходимого нам элемента <a> самым простым способом.


p > a { /* выбирает любой элемент <a> дочерний по отношению к <p> */
блок объявлений;
}

Рассмотрим пример:


<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Селектор дочерних элементов</title>
<style>
p>a { /* селектор дочерних элементов (выбираем дочерние <а>, вложенные в <p>) */
color: orange; /* устанавливаме цвет текста */
font-size: /* устанавливаме размер текста текста */
}
p a { /* селектор потомков (выбираем все потомки <a>, вложенные в <p>) */
text-decoration: none; /* убираем декорирование текста (нижнее подчеркивание) */
}
</style>
</head>
	<body>
		<p><a href = "https://ru.wikipedia.org/">Ссылка</a> внутри &amplt;p&ampgt;.</p>
		<a href = "https://ru.wikipedia.org/">Ссылка</a> внутри &amplt;body&ampgt;.
		<p><span><a href = "https://ru.wikipedia.org/">Ссылка</a></span> внутри элемента &amplt;p&ampgt;, вложенного в элемент &amplt;p&ampgt;.</p>
	</body>
</html>

В этом примере с использованием селектора дочерних элементов мы выбрали все дочерние <a>, вложенные в <p> (один элемент), а с помощью селектора потомков стилизовали все потомки <a>, вложенные в <p> (убрали декорирование текста у двух элементов).

Результат нашего примера:



Рис. 20б Пример использования селектора дочерних элементов.

Псевдоклассы дочерних элементов

Псевдокласс :first-child

Псевдокласс :first-child применяет стиль к элементу в том случае, если элемент является первым дочерним элементом своего родителя.



Рис. 21 Выборка с использованием псевдокласса дочерних элементов.

Давайте рассмотрим пример, в котором перед Вами стоит задача изменить стиль для всех элементов, которые выделены оранжевым цветом на изображении:



Рис. 21а Пример выбора селектора дочерних элементов.

Что общего у элементов, выделенных на изображении? А общее у них то, что выделенные элементы <h3> и <li> являются первыми дочерними элементами своих родителей, и чтобы нам их стилизовать необходимо использовать псевдокласс :first-child.

Перейдем к примеру:


<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдокласс :first-child</title>
<style>
h3:first-child { /* выбираем каждый элемент <h3>, который является первым дочерним элементом своего родителя */
color: blue; /* устанавливаем цвет текста */
}
li:first-child{ /* выбираем каждый элемент <li>, который является первым дочерним элементом своего родителя */
color: red; /* устанавливаем цвет текста */
font-size: 24px; /* устанавливаем размер шрифта */
}
</style>
</head>
	<body>
		<h3>Первый заголовок h3 тега body</h3>
		<ul>
			<li>один</li>
			<li>два</li>
			<li>три</li>
		</ul>
		<h3>Второй заголовок h3 тега body</h3>
		<article>
			<h3>Первый заголовок h3 тега article</h3>
			<ul>
				<li>один</li>
				<li>два</li>
				<li>три</li>
			</ul>
		</article>
	</body>
</html> 

В этом примере с использованием псевдокласса :first-child мы стилизовали элементы <h3> и <li>, которые являются первыми дочерними элементами своих родителей.

Результат нашего примера:



Рис. 22 Пример использования псевдокласса :first-child.

Псевдокласс :last-child

Псевдокласс :last-child применяет стиль к элементу в том случае, если элемент является последним дочерним элементом своего родителя.

Этот псевдокласс в отличие от псевдокласса :first-child выбирает последний дочерний элемент своего родителя, а не первый.

Давайте рассмотрим пример, в котором перед Вами стоит задача изменить стиль для всех элементов, которые выделены оранжевым цветом на изображении:



Рис. 23 Пример выбора селектора дочерних элементов.

Что общего у элементов, выделенных на изображении? А общее у них то, что выделенные элементы <article> и <li> являются последними дочерними элементами своих родителей, и чтобы нам их стилизовать необходимо использовать псевдокласс :last-child.

Если вы сходу сможете ответить почему ни один элемент <h3> на изображении выше нельзя стилизовать с использованием псевдокласса :last-child, то можете сразу перейти к примеру, если нет, то внимательно изучите следующее изображение, оно поможет Вам до конца понять как работает псевдокласс :last-child:



Рис. 23а Схема работы псевдокласса :last-child.

Еще раз поясню, если вы создадите селектор h3:last-child, то браузер не найдет этот элемент по той причине, что нет элементов <h3>, которые являются последними дочерними элементами своего родителя, важно это понять, так как подобные вещи иногда ставят людей в ступор.

Перейдем к примеру:


<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдокласс :last-child</title>
<style>
article:last-child { /* выбираем каждый элемент <article>, который является последним дочерним элементом своего родителя */
background-color: orange; /* устанавливаем цвет фона */
}
li:last-child{ /* выбираем каждый элемент <li>, который является последним дочерним элементом своего родителя */
color: red; /* устанавливаем цвет текста */
font-size: 24px; /* устанавливаем размер шрифта */
}
</style>
</head>
	<body>
		<h3>Первый заголовок h3 тега body</h3>
		<ul>
			<li>один</li>
			<li>два</li>
			<li>три</li>
		</ul>
		<h3>Второй заголовок h3 тега body</h3>
		<article>
			<h3>Первый заголовок h3 тега article</h3>
			<ul>
				<li>один</li>
				<li>два</li>
				<li>три</li>
			</ul>
		</article>
	</body>
</html> 

В этом примере с использованием псевдокласса :last-child мы стилизовали элементы <article> и <li>, которые являются последними дочерними элементами своих родителей.

Результат нашего примера:



Рис. 23б Пример использования псевдокласса :last-child.

Псевдокласс :nth-child

Стилизация по порядковому номеру

Ну что сказать, у нас остались неоконченные дела, которые касаются стилизации того самого неуловимого элемента <h3>, а на помощь в этом нам придет псевдокласс :nth-child.

Псевдокласс :nth-child позволяет выбрать дочерние элементы внутри родительского элемента в зависимости от их размещения (порядкового номера).
Применение данного псевдокласса широко распространено, он позволяет чередовать стили строк в таблицах, списках, придать стиль сочетанию дочерних элементов и так далее.

Давайте рассмотрим пример, в котором перед Вами стоит задача изменить стиль для всех элементов, которые выделены оранжевым цветом на изображении:



Рис. 24 Пример выбора селектора дочерних элементов.

Что общего у элементов, выделенных на изображении? А общее у них то, что они выделены оранжевым цветом. Смешно? Не думаю.
Общее у них все же есть, элементы <li> являются вторыми дочерними элементами своих родителей, а элемент <h3> тоже можно посчитать, и его порядковый номер будет третьим (третий дочерний элемент своего родителя <body>). Чтобы стилизовать эти элементы, нам необходимо использовать псевдокласс :nth-child.

Перейдем к примеру:


<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдокласс :first-child</title>
<style>
/* групповой селектор, который выбирает каждый третий дочерний элемент <h3> своего родителя
и каждый второй элемент <li> своего родителя  */
h3:nth-child(3), li:nth-child(2) { 
background-color: orange; /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<h3>Первый заголовок h3 тега body</h3>
		<ul>
			<li>один</li>
			<li>два</li>
			<li>три</li>
		</ul>
		<h3>Второй заголовок h3 тега body</h3>
		<article>
			<h3>Первый заголовок h3 тега article</h3>
			<ul>
				<li>один</li>
				<li>два</li>
				<li>три</li>
			</ul>
		</article>
	</body>
</html> 

В этом примере с использованием псевдокласса :nth-child мы стилизовали элементы <h3> и <li>, которые имеют определённый порядковый номер дочернего элемента внутри своих родительских элементов.

Результат нашего примера:



Рис. 24а Пример использования псевдоэлемента :last-child.

Продвинутое использование псевдокласса :nth-child

Стилизация по ключевому слову

В качестве значения псевдокласса :nth-child может выступать не только порядковый номер дочерних элементов, которые необходимо стилизовать, но и ключевые слова,
которые могут определять целую группу элементов. В качестве ключевого слова можно использовать два значения:

  • even (четные элементы)
  • odd (нечетные элементы)

Стилизация элементов с использованием ключевых слов имеет очень широкое применение, так как вы с легкостью можете выбрать и стилизовать четные, либо нечетные дочерние элементы в документе.

Давайте для примера создадим две простые таблицы с разными стилевыми классами и рассмотрим наглядно разницу в применении значений ключевых слов псевдокласса :nth-child для HTML элемента <tr>, который определяет строку таблицы:


<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Стилизация четных и нечетных дочерних элементов</title>
<style>
.primer1 tr:nth-child(even)  { /* стилизация четных дочерних элементов */
background-color: #AAA; /* устанавливаем цвет заднего фона */
}
.primer2 tr:nth-child(odd)  { /* стилизация нечетных дочерних элементов */
background-color: #AAA; /* устанавливаем цвет заднего фона */
}
caption {/* селектор типа (выбираем HTML элемент <caption>) */
color: red; /* устанавливаем цвет текста */
}
</style>
</head>
	<body>
		<table class = "primer1">
			<caption>Значение even (четные)</caption>
			<tr>
				<th>1 строка</th><th>Позиция</th><th>Количество</th>
			</tr>
			<tr>
				<td>2 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>3 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>4 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>5 строка</td><td></td><td></td>
			</tr>
		</table>
		<table class = "primer2">
			<caption>Значение odd (нечетные)</caption>
			<tr>
				<th>1 строка</th><th>Позиция</th><th>Количество</th>
			</tr>
			<tr>
				<td>2 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>3 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>4 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>5 строка</td><td></td><td></td>
			</tr>
		</table>
	</body>
</html>

В этом примере с использованием псевдокласса :nth-child мы стилизовали четные строки первой таблицы (элементы <tr>) и нечетные во второй таблице.



Рис. 24б Пример стилизации четных и нечетных дочерних элементов.

Стилизация по простой математической формуле


Псевдокласс :nth-child позволяет выбрать не только чётные, нечетные, или дочерние элементы с определённым порядковым номером, но и дочерние элементы, заданные по элементарной математической формуле.
Давайте рассмотрим следующий селектор и разберем, что значит эта запись:


td:nth-child(4n+2)  {
background-color: lightblue; /* устанавливаем цвет заднего фона */
}

Этот селектор означает, что каждая четвёртая ячейка таблицы (<td>) внутри строки, начиная со второй ячейки таблицы, будет стилизована:

  • 4n – каждый четвертый элемент.
  • 2 – с какого элемента начинать.

В формулах допускается использование значений со знаком вычитания, но в этом как правило нет необходимости:


td:nth-child(4n-1)  {
background-color: lightblue; /* устанавливаем цвет заднего фона */
}

Этот селектор означает, что каждая четвёртая ячейка таблицы (<td>) внутри строки, начиная с третьей ячейки таблицы (-1 ячейки нет по объективным причинам, поэтому происходит сдвиг влево), будет стилизована:

  • 4n – каждый четвертый элемент.
  • -1 – с какого элемента начинать.

Давайте рассмотрим пример использования:


<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Стилизация дочерних элементов по математической формуле</title>
<style>
td, th{ /* групповым селектором выбираем заголовочные ячейки и ячейки данных */
border: 1px solid green; /* задаём сплошную границу размером 1 пиксель зеленого цвета */
width: 50px;  /* устанавливаем ширину заголовочным ячейкам и ячейкам данных */
}
td:nth-child(4n+2) {
background-color: lightblue; /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<table>
			<tr>
				<th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th><th>10</th><th>11</th><th>12</th><th>13</th><th>14</th>
			</tr>
			<tr>
				<td>2</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
			</tr>
			<tr>
				<td>3</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
			</tr>
			<tr>
				<td>4</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
			</tr>
		</table>
	</body>
</html>


В этом примере с использованием псевдокласса :nth-child мы выбрали и стилизовали каждую четвёртую ячейку таблицы (<td>) внутри строки, начиная со второй ячейки таблицы.
Результат нашего примера:



Рис. 25 Пример cтилизации дочерних элементов по математической формуле.


Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практические задания:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файлы и изображения) в любую папку на вашем жестком диске:


  • Составьте следующие HTML страницы:
    1. Составьте селектор, который позволит Вам стилизовать все изображения, которые имеют глобальный атрибут title:

      Практическое задание № 5.
    2. Продвинутое задание: составьте селектор, который позволит Вам стилизовать все изображения, но не изображение, которое имеет значение атрибута alt равным «medved»:

      Практическое задание № 6.
    3. С использованием изученных псевдоклассов составьте селекторы, которые позволят Вам стилизовать абзацы (элементы <p>) в соответствии с изображением:

      Практическое задание № 7.

После того как вы выполните упражнения проинспектируйте коды страниц, открыв примеры в отдельном окне, чтобы убедиться, что вы все выполнили правильно.


Учебник CSS

CSS — это язык, который мы используем для стилизации HTML-документа.

CSS описывает, как должны отображаться элементы HTML.

Это руководство научит вас CSS от начального до продвинутого.

Начните изучать CSS прямо сейчас »


Примеры в каждой главе

Это руководство по CSS содержит сотни примеров CSS.

С помощью нашего онлайн-редактора вы можете редактировать CSS и нажимать кнопку, чтобы просмотреть результат.

Пример CSS

тело
{
цвет фона: голубой;
}

h2
{
цвет белый;
выравнивание текста: центр;
}

п.
{

семейство шрифтов: вердана;
размер шрифта: 20 пикселей;
}

Попробуй сам »

Щелкните кнопку «Попробуйте сами», чтобы увидеть, как это работает.


Примеры CSS

Учитесь на более чем 300 примерах! С помощью нашего редактора вы можете редактировать CSS и нажимать на
кнопку, чтобы просмотреть результат.

Перейти к примерам CSS!


Использование меню

Мы рекомендуем читать это руководство в последовательности, указанной в меню.

Если у вас большой экран, меню всегда будет слева.

Если у вас маленький экран, откройте меню, щелкнув значок верхнего меню ☰.


Шаблоны CSS

Мы создали для вас несколько адаптивных шаблонов W3.CSS.

Вы можете изменять, сохранять, публиковать и использовать их во всех своих проектах.

бесплатных шаблонов CSS!



CSS-упражнения и викторина

Проверьте свои навыки CSS в W3Schools!

Начните упражнения по CSS!

Начать викторину по CSS!


Ссылки CSS

В W3Schools вы найдете полные ссылки CSS всех свойств и селекторов с синтаксисом, примерами, поддержкой браузера и многим другим.


Экзамен CSS — Получите свой диплом!

Интернет-сертификация W3Schools

Идеальное решение для профессионалов, которым необходимо совмещать работу, семью и карьеру.

Уже выдано более 25 000 сертификатов!

Получите сертификат »

Сертификат HTML документирует ваши знания HTML.

Сертификат CSS документирует ваши знания в области CSS.

Сертификат JavaScript документирует ваши знания JavaScript и HTML DOM.

Сертификат Python документирует ваши знания Python.

Сертификат jQuery подтверждает ваши знания о jQuery.

Сертификат SQL документирует ваши знания SQL.

Сертификат PHP подтверждает ваши знания PHP и MySQL.

Сертификат XML документирует ваши знания XML, XML DOM и XSLT.

Сертификат Bootstrap документирует ваши знания о среде Bootstrap.

.

CSS Введение


Что такое CSS?

  • CSS обозначает C ascading S tyle S heets
  • CSS описывает , как элементы HTML должны отображаться на экране,
    бумага или другие носители
  • CSS экономит много работы . Он может контролировать макет
    несколько веб-страниц одновременно
  • Внешние таблицы стилей хранятся в файлах CSS

Демонстрация CSS — одна HTML-страница — несколько стилей!

Здесь мы покажем одну HTML-страницу с четырьмя разными таблицами стилей.Щелкните «Таблица стилей 1», «Таблица стилей 2», «Таблица стилей 3», «Таблица стилей 4».
ссылки ниже, чтобы увидеть различные стили:



Зачем нужен CSS?

CSS используется для определения стилей для ваших веб-страниц, включая дизайн, макет
и варианты отображения для разных устройств и размеров экрана.

Пример CSS

тело
{
цвет фона: голубой;
}

h2
{
цвет белый;
выравнивание текста: центр;
}

п.
{

семейство шрифтов: вердана;
размер шрифта: 20 пикселей;
}

Попробуй сам »


CSS решил большую проблему

HTML НИКОГДА не предназначался для содержания тегов для форматирования веб-страницы!

HTML был
created to описывает содержимое веб-страницы, например:

Это заголовок

Это абзац.

Когда в HTML 3.2 были добавлены такие теги, как и атрибуты цвета
спецификации, это стало кошмаром для веб-разработчиков. Развитие больших
веб-сайты, где шрифты и информация о цвете были добавлены к каждому
страницы, стало долгим и дорогим процессом.

Чтобы решить эту проблему, Консорциум World Wide Web (W3C) создал CSS.

CSS удалил форматирование стилей со страницы HTML!

Если вы не знаете, что такое HTML, мы предлагаем вам прочитать наше руководство по HTML.


CSS экономит много работы!

Определения стилей обычно сохраняются во внешних файлах .css.

С помощью внешнего файла таблицы стилей вы можете изменить внешний вид всего веб-сайта, изменив только один файл!

.

Ссылка CSS

align-content Задает выравнивание между линиями внутри гибкого контейнера, когда элементы не используют все доступное пространство
align-items Задает выравнивание элементов внутри гибкого контейнера
выровнять сам Задает выравнивание для выбранных элементов внутри гибкого контейнера
все Сбрасывает все свойства (кроме unicode-bidi и direction)
анимация Сокращенное свойство для всех свойств анимации — *
задержка анимации Определяет задержку начала анимации
анимация-направление Определяет, должна ли анимация воспроизводиться вперед, назад или
поочередно
продолжительность анимации Определяет, сколько времени должно занять анимация для завершения одного цикла
режим заливки анимации Задает стиль элемента, когда анимация не воспроизводится (ранее
начинается, после окончания или и то, и другое)
количество итераций анимации Указывает, сколько раз должна воспроизводиться анимация
имя-анимации Задает имя для анимации @keyframes
состояние воспроизведения анимации Указывает, запущена ли анимация или приостановлена ​​
функция синхронизации анимации Определяет кривую скорости анимации
задняя видимость Определяет, должна ли быть видна задняя грань элемента, когда он смотрит на пользователя.
фон Сокращенное свойство для всех свойств фона — *
фон-приставка Устанавливает, будет ли фоновое изображение прокручиваться вместе с остальной частью страницы или будет фиксированным.
фоновый режим наложения Задает режим наложения каждого фонового слоя (цвет / изображение)
фоновая клипса Определяет, насколько далеко должен распространяться фон (цвет или изображение) в пределах
элемент
цвет фона Определяет цвет фона элемента
фоновое изображение Задает одно или несколько фоновых изображений для элемента
фон-происхождение Определяет исходную позицию фонового изображения
фон-позиция Определяет положение фонового изображения
фон-повтор Устанавливает, будет ли / как будет повторяться фоновое изображение
размер фона Определяет размер фоновых изображений
граница Сокращенное свойство для border-width, border-style и border-color
граница нижняя Сокращенное свойство для border-bottom-width, border-bottom-style
и нижний цвет границы
цвет нижней границы Устанавливает цвет нижней границы
граница-нижний левый-радиус Определяет радиус границы нижнего левого угла
граница-нижний-правый-радиус Определяет радиус границы нижнего правого угла
граница снизу Устанавливает стиль нижней границы
ширина по нижнему краю Устанавливает ширину нижней границы
граница-развал Устанавливает, должны ли границы таблицы сворачиваться в единую границу или разделяться
цвет рамки Устанавливает цвет четырех границ
бордюр Сокращенное свойство для всех свойств border-image- *
граница-изображение-исход Определяет величину, на которую область изображения границы выходит за пределы рамки
повтор изображения границы Указывает, должно ли изображение границы повторяться, округляться или растягиваться.
граница-изображение-фрагмент Указывает, как нарезать изображение границы
border-image-source Указывает путь к изображению, которое будет использоваться в качестве границы
ширина границы изображения Определяет ширину изображения границы
граница левая Сокращенное свойство для всех свойств border-left- *
цвет рамки слева Задает цвет левой границы
рамка-левая Устанавливает стиль левой границы
ширина рамки слева Устанавливает ширину левой границы
граница-радиус Сокращенное свойство для четырех границ — * — радиус свойств
граница правая Сокращенное свойство для всех свойств border-right- *
рамка-правая Задает цвет правой границы
рамка-правая Устанавливает стиль правой границы
ширина рамки справа Устанавливает ширину правой границы
расстояние между границами Устанавливает расстояние между границами соседних ячеек
с бордюром Устанавливает стиль четырех границ
бордюрный верх Сокращенное свойство для border-top-width, border-top-style и
цвет верхней границы
цвет верхней границы Устанавливает цвет верхней границы
граница, верхний левый радиус Определяет радиус границы верхнего левого угла
граница, верхний правый радиус Определяет радиус границы верхнего правого угла
с бордюром Устанавливает стиль верхней границы
ширина до верхней границы Устанавливает ширину верхней границы
ширина рамки Устанавливает ширину четырех границ
нижняя Устанавливает позицию элемента от нижней части родительского элемента
коробка-украшение-перерыв Задает поведение фона и границы элемента при разрыве страницы или, для встроенных элементов, при разрыве строки.
тень Добавляет одну или несколько теней к элементу
размер коробки Определяет, как рассчитываются ширина и высота элемента: следует
они включают отступы и границы, или нет
обрыв после Указывает, должен ли происходить разрыв страницы, столбца или области.
после указанного элемента
перерыв до Указывает, должен ли происходить разрыв страницы, столбца или области.
перед указанным элементом
взлом внутри Указывает, должен ли происходить разрыв страницы, столбца или области.
внутри указанного элемента
сторона подписи Задает размещение заголовка таблицы
каре Определяет цвет курсора (курсора) во входах, текстовых полях или любых других
редактируемый элемент
@charset Задает кодировку символов, используемую в таблице стилей.
прозрачный Определяет, с каких сторон элемента плавающие элементы не могут плавать
зажим Зажимает абсолютно позиционированный элемент
цвет Устанавливает цвет текста
количество столбцов Задает количество столбцов, на которые должен быть разделен элемент.
колонка-заполнитель Определяет способ заполнения столбцов, сбалансированный или несбалансированный.
колонна-зазор Определяет зазор между столбцами
правило столбца Сокращенное свойство для всех свойств column-rule- *
столбец-правило-цвет Определяет цвет правила между столбцами
стиль правила столбца Задает стиль правила между столбцами
ширина правила столбца Определяет ширину правила между столбцами
колонно-пролетная Определяет, сколько столбцов должен занимать элемент в
ширина столбца Задает ширину столбца
столбца Сокращенное свойство для ширины столбца и количества столбцов
содержание Используется с псевдоэлементами: before и: after для вставки сгенерированного содержимого
счетчик Увеличивает или уменьшает значение одного или нескольких счетчиков CSS
сброс счетчика Создает или сбрасывает один или несколько счетчиков CSS
курсор Определяет курсор мыши, который будет отображаться при наведении указателя на элемент
направление Указывает направление текста / направление письма
дисплей Определяет, как должен отображаться определенный элемент HTML.
фильтр Определяет эффекты (например,г. размытие или изменение цвета) на элементе перед отображением элемента
гибкий Сокращенное свойство для flex-grow, flex-shrink и
гибкая основа
недвижимость
гибкая основа Задает начальную длину гибкого элемента
гибкое направление Задает направление гибких элементов
гибкий поток Сокращенное свойство для свойств flex-direction и flex-wrap
гибкий рост Указывает, насколько элемент будет расти относительно остальных
гибкая термоусадочная Определяет, как элемент будет уменьшаться по сравнению с остальными
гибкая пленка Указывает, должны ли гибкие элементы оборачиваться или нет.
с плавающей запятой Указывает, должен ли блок плавать
шрифт Сокращенное свойство для font-style, font-variant, font-weight,
font-size / line-height
и свойство font-family
@ font-face Правило, разрешающее веб-сайтам загружать и использовать шрифты, отличные от «веб-безопасных» шрифтов
семейство шрифтов Задает семейство шрифтов для текста
font-feature-settings Позволяет управлять расширенными типографскими функциями в шрифтах OpenType
@ font-feature-values ​​ Позволяет авторам использовать общее имя в font-option-alternate для функции, по-разному активированной в OpenType
font-kerning Управляет использованием информации кернинга (расположение букв)
переопределение языка шрифта Управляет использованием специфичных для языка глифов в гарнитуре
размер шрифта Определяет размер шрифта текста
регулировка размера шрифта Сохраняет читаемость текста при восстановлении шрифта
растяжка шрифта Выбирает обычное, сжатое или расширенное начертание из семейства шрифтов
шрифт Задает стиль шрифта для текста
шрифт-синтез Элементы управления, отсутствующие шрифты которых (полужирный или курсив) могут быть синтезированы браузером
вариант шрифта Указывает, должен ли текст отображаться мелким шрифтом
альтернативные варианты шрифтов Управляет использованием альтернативных глифов, связанных с альтернативными именами, определенными в @ font-feature-values ​​
варианты шрифтов Управляет использованием альтернативных глифов для заглавных букв
вариант шрифта восточноазиатский Управляет использованием альтернативных глифов для восточноазиатских шрифтов (например,г японский и китайский)
лигатуры вариантов шрифта Управляет тем, какие лигатуры и контекстные формы используются в текстовом содержимом элементов, к которым применяется
вариант шрифта числовой Управляет использованием альтернативных глифов для чисел, дробей и порядковых маркеров
шрифт-вариант-позиция Управляет использованием альтернативных глифов меньшего размера, расположенных как надстрочный или подстрочный индекс относительно базовой линии шрифта
font-weight Задает толщину шрифта
сетка Сокращенное свойство для строк шаблона сетки,
столбцы-шаблон-сетки, области-шаблона-сетки, автоматические строки сетки,
grid-auto-columns
и grid-auto-flow properties
сетка Указывает имя для элемента сетки, или это свойство является сокращенным свойством для grid-row-start , grid-column-start , grid-row-end и grid-column-end недвижимость
сетка-автоматические столбцы Задает размер столбца по умолчанию
сетка-автопоток Определяет, как автоматически размещенные элементы вставляются в сетку
сетка автоматических рядов Задает размер строки по умолчанию
сетка-столбец Сокращенное свойство для свойств grid-column-start и grid-column-end
конец столбца сетки Указывает, где закончить элемент сетки
сетка-столбец-зазор Определяет размер промежутка между столбцами
сетка-столбец-начало Указывает, где начать элемент сетки
сетка-зазор Сокращенное свойство grid-row-gap и grid-column-gap properties
сетка-рядка Сокращенное свойство для свойств grid-row-start и grid-row-end
конец ряда сетки Указывает, где закончить элемент сетки
сетка-рядок-зазор Определяет размер зазора между рядами
сетка-ряд-начало Указывает, где начать элемент сетки
сетка-шаблон Сокращенное свойство для grid-template-rows , grid-template-columns
и сетка объекта
области шаблона сетки Указывает, как отображать столбцы и строки с использованием именованных элементов сетки
столбцы шаблона сетки Задает размер столбцов и количество столбцов в макете сетки.
сетка-шаблон строк Определяет размер строк в макете сетки
Знаки пунктуации Указывает, можно ли помещать знак препинания за пределы строки.
высота Устанавливает высоту элемента
дефиса Устанавливает способ разбиения слов для улучшения компоновки абзацев
рендеринг изображений Подсказывает браузеру, какие аспекты изображения наиболее важно сохранить при масштабировании изображения
@ импорт Позволяет импортировать таблицу стилей в другую таблицу стилей
изоляция Определяет, должен ли элемент создавать новое содержимое стека.
justify-content Задает выравнивание между элементами внутри гибкого контейнера, когда элементы не используют все доступное пространство
осталось Задает левую позицию позиционируемого элемента
межбуквенный интервал Увеличивает или уменьшает расстояние между символами в тексте
разрыв строки Указывает, как / если разрывать строки
высота строки Устанавливает высоту строки
в виде списка Устанавливает все свойства списка в одном объявлении
изображение в стиле списка Задает изображение в качестве маркера элемента списка
позиция стиля списка Определяет положение маркеров пунктов списка (пунктов списка)
тип списка Определяет тип маркера элемента списка
маржа Устанавливает все свойства полей в одном объявлении
нижнее поле Устанавливает нижнее поле элемента
поле слева Устанавливает левое поле элемента
поле справа Устанавливает правое поле элемента
верхняя граница Устанавливает верхнее поле элемента
макс. Высота Устанавливает максимальную высоту элемента
макс. Ширина Устанавливает максимальную ширину элемента
@media Устанавливает правила стиля для различных типов / устройств / размеров носителей
мин. Высота Устанавливает минимальную высоту элемента
Мин. Ширина Устанавливает минимальную ширину элемента
режим смешивания Определяет, как содержимое элемента должно сливаться с его прямым родительским фоном
объект Определяет, как содержимое заменяемого элемента должно быть размещено в блоке, установленном его используемой высотой и шириной
объект-позиция Задает выравнивание заменяемого элемента внутри его поля
непрозрачность Устанавливает уровень непрозрачности для элемента
заказать Устанавливает порядок гибкого элемента относительно остальных
дети-сироты Устанавливает минимальное количество строк, которое должно оставаться внизу страницы, когда разрыв страницы происходит внутри элемента.
контур Сокращенное свойство для outline-width, контурного стиля и
контур-цвет свойства
контурный цвет Устанавливает цвет контура
контур-офсет Смещает контур и выводит его за пределы границы
контурный Устанавливает стиль контура
ширина контура Устанавливает ширину контура
перелив Указывает, что происходит, если содержимое выходит за пределы поля элемента
перелив-обертка Указывает, может ли браузер разбивать строки в словах, чтобы предотвратить переполнение (когда строка слишком длинна, чтобы уместиться в содержащем ее поле).
переполнение-x Указывает, следует ли обрезать левый / правый края содержимого, если оно выходит за пределы области содержимого элемента.
переполнение Указывает, следует ли обрезать верхний / нижний края содержимого, если оно выходит за пределы области содержимого элемента.
изменить размер Определяет, можно ли (и как) изменять размер элемента пользователем
правый Задает правое положение позиционируемого элемента
поведение прокрутки Указывает, следует ли плавно анимировать позицию прокрутки в прокручиваемом поле вместо прямого перехода.
размер табулятора Определяет ширину символа табуляции
стол-макет Определяет алгоритм, используемый для компоновки ячеек, строк и столбцов таблицы
выравнивание текста Задает горизонтальное выравнивание текста
text-align-last Описывает, как выравнивается последняя строка блока или строка прямо перед принудительным разрывом строки, когда выравнивание текста имеет значение «выравнивание».
текстовый комбайн вертикальный Определяет комбинацию нескольких символов в пространстве одного символа
текст-оформление Указывает украшение, добавленное к тексту
текст-украшение-цвет Задает цвет оформления текста
текст-украшение-строка Определяет тип линии в текстовом оформлении
стиль оформления текста Задает стиль линии в текстовом оформлении
текстовый отступ Задает отступ первой строки в текстовом блоке
с выравниванием текста по ширине Определяет метод выравнивания, используемый при выравнивании текста по ширине.
ориентация текста Определяет ориентацию текста в строке
переполнение текста Определяет, что должно произойти, когда текст переполняет содержащий элемент
тень текста Добавляет тень к тексту
преобразование текста Управляет использованием заглавных букв в тексте
текст, подчеркивание Определяет положение подчеркивания, которое задается с помощью свойства text-decoration
верх Определяет верхнюю позицию позиционируемого элемента
преобразование Применяет 2D или 3D преобразование к элементу
преобразование происхождения Позволяет изменять положение трансформируемых элементов
стиль преобразования Определяет, как вложенные элементы отображаются в трехмерном пространстве.
переход Сокращенное свойство для всех свойств перехода — *
задержка перехода Указывает, когда начнется эффект перехода.
продолжительность перехода Указывает, сколько секунд или миллисекунд требуется для выполнения эффекта перехода.
переходная собственность Задает имя свойства CSS, для которого применяется эффект перехода
функция времени перехода Определяет кривую скорости эффекта перехода
юникод-биди Используется вместе со свойством direction для установки или возврата, следует ли переопределить текст для поддержки нескольких языков в одном документе.
по выбору пользователя Указывает, можно ли выделить текст элемента.
белое пространство Определяет, как обрабатываются пробелы внутри элемента
вдов Задает минимальное количество строк, которые должны оставаться в верхней части страницы, когда разрыв страницы происходит внутри элемента.
ширина Устанавливает ширину элемента
разрыв слова Определяет, как слова должны разрываться при достижении конца строки
межсловный интервал Увеличивает или уменьшает расстояние между словами в тексте
перенос слов Позволяет разбивать длинные неразрывные слова и переносить их на следующую строку
режим записи Задает расположение строк текста: горизонтально или вертикально.

.

Существуют ли функции CSS? — Переполнение стека

Переполнение стека

  1. Около
  2. Продукты

  3. Для команд
  1. Переполнение стека
    Общественные вопросы и ответы

  2. Переполнение стека для команд
    Где разработчики и технологи делятся частными знаниями с коллегами

  3. Вакансии
    Программирование и связанные с ним технические возможности карьерного роста

  4. Талант
    Нанимайте технических специалистов и создавайте свой бренд работодателя

  5. Реклама
    Обратитесь к разработчикам и технологам со всего мира

  6. О компании

.

Добавить комментарий

Ваш адрес email не будет опубликован.

2022 © Все права защищены. Карта сайта