Как обратиться ко всем элементам в css

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

Комбинатор > разделяет 2 селектора, находит элементы заданные вторым селектором, являющие прямыми потомками для элементов отобранных первым селектором. Напротив, два селектора в селекторе потомков находят элементы не обязательно являющиеся прямыми потомками, т.е. несмотря на количество «прыжков» до них в DOM.

Синтаксис

selector1 > selector2

Пример

span  background-color: white; > div > span  background-color: DodgerBlue; > 

div> span >Span 1 в div span>Span 2 в span, который в divspan> span> div> span>Span 3. Не в div вообщеspan> 

Спецификации

Specification
Selectors Level 4 # child-combinators

Поддержка браузерами

BCD tables only load in the browser

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

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

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

*, *:before, *:after < /* Эти стили должны примениться только к дочерним элементам main_block */ box-sizing: border-box; margin: 0; padding: 0; background: gray; >

 
 
Текст
 
Картинка
 
Контент
 

Как выбрать все дочерни элементы родительского блока?

Отслеживать

7,722 13 13 золотых знаков 25 25 серебряных знаков 54 54 бронзовых знака

задан 8 фев 2022 в 13:07

Black_Viper Black_Viper

1,259 6 6 серебряных знаков 19 19 бронзовых знаков

Селектор потомков

Комбинатор » » (пробел) представляет собой 2 или более селекторов, найдёт элементы соответствующие обоим селекторам. Селекторы по потомкам похожи на селекторы дочерних элементов, но они не учитывают вложенность элементов и применяют свои свойства ко всем элементам данного типа, находящимся внутри родительского элемента, независимо от глубины вложенности.

Синтаксис

selector1 selector2

Пример

span  background-color: white; > div span  background-color: DodgerBlue; > 

div> span >Span 1 span>Span 2span> span> div> span>Span 3span> 

Спецификации

Specification
Selectors Level 4 # descendant-combinators

Поддержка браузерами

BCD tables only load in the browser

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Оформление Web-страниц

В современной версии стандарта HTML5 практически все оформление страницы делается при помощи каскадных листов стилей, CSS. Команда CSS состоит из селектора и соответствующих ему свойств:

• Все относящиеся к селектору свойства записываются в фигурных скобках
• Описания свойств разделяются точкой с запятой. Не поставил «;» между свойствами – получил ошибку
• Свойства и их значения разделяются двоеточием
• Вокруг селекторов, свойств, их значений можно ставить любое количество пробелов, знаков табуляции и переносов строки

Способы использования CSS в HTML

1. внешние стили, подключаются тегом в голове документа, т.е. внутри тега :

Наследование

У элементов есть связи внутри объектной модели DOM.

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

Свойства предков могут наследоваться потомками.

Виды селекторов

Селектор – от to select: выбирать, отбирать. Чаще всего используются первые шесть.

1. универсальный (*): Выбирает все элементы (теги) на странице;
2. элемент: выбирает все элементы (теги) с указанным именем;
3. класс (class): выбирает все элементы (теги) с указанным классом (в атрибуте class);
4. идентификатор (id): выбирает элемент (тег) с указанным уникальным идентификатором (атрибут id);
5. вложенные селекторы, запись через пробел;
6. дочерний селектор, должен располагаться непосредственно внутри родительского элемента. Записывается через >. Также используются дочерние псевдоклассы :first-child, :last-child, :only-child, :nth-child (odd), :nth-child (even) и др.
7. Соседние селекторы: i + b. Стиль применяется к тегу b, соседнему по оотношению к i.
8. Родственные селекторы: i ~ b. Стили применяются ко всем близлежащим элементам.
9. Селекторы атрибутов: стили приименяются, если задан атрибут тега. Например: q[title]
10. [атрибут=»значение»] устанавливает стиль для элемента в том случае, если задано определённое значение указанного атрибута. Пример: a[target=»_blank»]
11. [атрибут~=»значение»] Стиль применяется в том случае, если у атрибута имеется указанное значение или оно входит в список значений, разделяемых пробелом. Пример: [class~=»block»]
12. [атрибут|=»значение»] Стиль применяется к элементам, у которых атрибут начинается с указанного значения или с фрагмента значения, после которого идет дефис. Пример: div[class|=»block»] применится к
13. [атрибут^=»значение»] стиль применяются ко всем элементам, у которых значение атрибута начинается с указанного текста. Пример: a[href^=»http://»]
14. [атрибут$=»значение»] стиль применяются ко всем элементам, у которых значение атрибута оканчивается указанным текстом. Пример: a[href$=».ru»]
15. [атрибут*=»значение»] определяет, что значение атрибута содержит указанный текст. Пример: [href*=»000webhost»]

Свойства селектора будут применены ко всем выбранным элементам (тегам) на странице.

Ниже для удобства свойства разбиты на несколько категорий.

Стили по умолчанию

У Web-страницы без стилевого файла есть оформление: элементы имеют отступы, используются шрифты с определенными параметрами и так далее. Например, ссылки – синие и подчеркнуты. Это браузерные стили по умолчанию, они определены в стандарте CSS консорциумом W3C.

Все свойства CSS

Фон – background

• background-color: red; или функция rgba(255, 0, 0, 0.5) задает цвет фона. Фон с указанием альфа-канала будет полупрозрачным.
• background: white url(«image.jpg») no-repeat 50% 0; Общее свойство, описывающее фон страницы.

Размеры, ширина, высота – width, height

• ширина, width: 100px;
• минимальная ширина, min-width: 100px;
• максимальная ширина, max-width: 100px;
• высота, height: 100px;
• минимальная высота, min-height: 100px;
• касимальная высота, max-height: 100px;

Цвет – color

• color: green;

Шрифт – font

• font-family: arial sans-serif;
  Гротеск: sans – без + serif – засечек. Антиква, serif – с засечками:
• font-size: 16pt;

Текст – text

• text-align: justify; (left, right, center)
• text-decoration: underline;
• line-height: 20pt;

Блочная модель

Любой блочный элемент состоит из четырех составляющих:

• Основой блока выступает его контент: текст, изображения и т.д. Контент имеет 2 размера: ширина (задается свойством width) и высота (height);
• вокруг контента идет внутреннее поле (padding), создающее пустое пространство от контента до внутреннего края границ;
• затем идут границы (border).
• Завершают блок внешние отступы (margin, от «маргиналии»), пустое пространство от внешнего края границ.

Похоже на матрешки: поменять местами контент, padding, border и margin невозможно!

Каждая составляющая, кроме контента, может иметь различные размеры с каждой из четырех сторон.
Часто задаются по часовой стрелке: top, right, bottom, left.
Таким образом, блочный макет страницы с контентом описывается максимум 14 размерами. Если толщина рамки со всех сторон одинаковая, параметров 11.

Схлопывание отступов

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

Зачем? Для корректного отображения текста: расстояние между абзацами (тег

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

box-sizing

Свойство box-sizing применяется для изменения алгоритма расчета ширины и высоты элемента; чтобы свойства width и height задавали размеры не контента, а размеры блока.

• box-sizing: content-box; свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ.
• box-sizing: border-box; Свойства width и height включают в себя значения полей и границ, но не отступов (margin).
• box-sizing: padding-box; Свойства width и height включают в себя значения полей, но не отступов (margin) и границ (border).
• box-sizing: inherit; Наследует значение родителя.

Рамка – border

У рамки есть дополнительные свойства: тип линии, скругление и т.д. Примеры:

• обобщенное правило. border: 2px dashed blue;
• радиус скругления рамки. border-radius: 5px;
• Скруглить квадрат до круга – border-radius: 50%; пример.
• border-collapse: collapse (separate, inherit); Устанавливает, как отображать границы вокруг ячеек таблицы. Это свойство играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины. При значении collapse линия между ячейками отображается только одна.

Поля – margin и padding

Поля страницы можно инспектировать в браузере по нажатию F12, вкладка Elements

• margin: 0 auto; (внешнее поле) Так заданное поле центрирует блок
• padding: 20px; (внутреннее поле)

Положение и видимость

• display: block; (inline, inline-block, none). display: none используется для скрытия элемента со страницы.
• position: relative; (absolute)
• float: right; (left)
• object-fit: cover; (contain, scale-down. Для тегов img и video)
• object-position: 50% 50%;
• overflow-y: scroll;

Горизонтальное и вертикальное выравнивание

• Центрирование блочного элемента:
• Центрирование строчного элемента: text-align: center;
• Центрировать горизонтально и вертикально: #mysection

Flexbox

Остальное

• list-style: none; (применяется для скрытия буллетов у ненумерованных списков)

Геометрия в CSS

• Прямоугольник
• Треугольники
• Круги
• The Shapes of CSS
• CSS3 drawing unconventional shapes

Альтернативы CSS?

Сравнение стилевых языков. Существует XSL (eXtensible Stylesheet Language) – семейство рекомендаций консорциума W3C, описывающее языки преобразования и визуализации XML-документов. Состоит из трех частей:

• XSL Transformations (XSLT) – язык преобразования XML-документов.
• XSL Formatting Objects (XSL-FO) – язык разметки типографских макетов и иных предпечатных материалов.
• XPath – язык путей и выражений, используемый в том числе и в XSLT для доступа к отдельным частям XML-документа.

Языком, лежащим в основе XSL, является XML, а это означает, что XSL более гибок, универсален. Почти не используется в вебе, потому что более сложен и требует более строгого подхода. Дизайнеры и верстальщики всего мира сделали все, чтобы технологии, основанные на XML, не стали рабочими стандартами веба. Что, конечно, не избавило от недостатков HTML и CSS. В итоге имеем постоянно и стихийно меняющиеся технологии разных версий, по-разному поддерживаемые разными браузерами. Хороший дизайнер должен учитывать особенности поддержки технологий разными версиями разных браузеров. С прекращением поддержки старых версий операционной системы Windows и ростом популярности мобильных технологий ситуация улучшилась, но пока еще далека от идеала.

Применение свойств классов к простому html-коду:

Ссылки:

• Основы CSS
• Руководство по CSS
• Блоковая модель (box model)
• CSS box model
• Наглядно о CSS селекторах
• CSS-цвета: основные ключевые слова, числовые значения цвета
  Если цвет – это слово, но не ключевое: Почему chucknorris — это красный цвет, а chucknorr — желтый?Проверить.
• css-tricks,
• CSS Default Values Reference,
• горизонтальное меню,
• position (Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице).
• Calc of max, or max of calc in CSS