Какое свойство управляет символами элемента

Какое свойство управляет символами элемента thumbnail

Какое свойство управляет символами элемента

Спецсимволы HTML, или символы-мнемоники, представляют собой конструкцию SGML (англ. Standard Generalized Markup Language — стандартный обобщённый язык разметки), ссылающуюся на определенные символы из символьного набора документа. В основном они используются для указания символов, которых нет в стандартной компьютерной клавиатуре, либо которые не поддерживает кодировка HTML-страницы (Windows-1251, UTF-8 и т.д.).

Чтобы разместить символ на веб-странице, необходимо указать HTML-код или мнемонику.

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

Для вставки символов внутрь тегов воспользуйтесь HTML-кодом символа, а для использования символов в таблицах стилей, например, в качестве значения свойства content — CSS-код.

Спецсимвол наследует цвет от цвета текста родительского элемента. Чтобы изменить цвет спецсимвола, можно поместить HTML-код внутрь тега <span> или задать нужное значение свойства color (при вставке спецсимволов через свойство content).

Популярные спецсимволы HTML

1. Полезные знаки и символы

ВидHTML-кодCSS-кодОписание
????&#128386;1F582Обратная сторона конверта
&#9731;2603Снеговик
&#9766;2626Православный крест
&#9875;2693Якорь
&#9990;2706Знак телефона
&#9742;260EТелефон
&#9749;2615Горячие напитки
&#9998;270EКарандаш, направленный вправо-вниз
&#9999;270FКарандаш
&#10000;2710Карандаш, направленный вправо-вверх
&#10001;2711Незакрашенное острие пера
&#10002;2712Закрашенное острие пера
&#9884;269CГеральдическая лилия
&#9937;26D1Шлем с белым крестом
&#9885;269DНачерченная белая звезда
&#10052;2744Снежинка
&#10084;2764Закрашенное жирное сердце
&#10053;2745Зажатая трилистниками снежинка
&#10054;2746Жирная остроугольная снежинка
&#9733;2605Закрашенная звезда
&#9734;2606Незакрашенная звезда
&#10026;272AНезакрашенная звезда в закрашенном круге
&#10027;272BЗакрашенная звезда с незакрашенным кругом внутри
&#10031;272FВращающаяся звезда
&#10057;2749Звёздочка с шарообразными окончаниями
&#10059;274BЖирная восьмиконечная каплеобразная звёздочка-пропеллер
&#10034;2732Звёздочка с незакрашенным центром
&#9728;2600Закрашенное солнце с лучами
&#9729;2601Облака
&#9730;2602Зонтик
&#9745;2611Галочка в квадрате
&#9746;2612Крестик в квадрате
&#9785;2639Нахмуренный смайлик
&#9786;263AУлыбающийся смайлик
&#9787;263BЗакрашенный улыбающийся смайлик
&#9773;262DСерп и молот
&#9873;2691Закрашенный флаг
&#9872;2690Незакрашенный флаг
&#9776;2630Триграмма
&#10047;273fЗакрашенный цветок
&#10048;2740Незакрашенный цветок
&#10046;273EЦветок с шестью лепестками
&#10049;2741Закрашенный обведённый цветок
&#10050;2742Цветок из точек
&#9993;2709Конверт
&#10086;2766Сердце в виде цветка
&#10102;2776Номер 1
&#10103;2777Номер 2
&#10104;2778Номер 3
&#10105;2779Номер 4
&#10106;277AНомер 5
&#10107;277BНомер 6
&#10108;277CНомер 7
&#10109;277DНомер 8
&#10130;2792Номер 9
&#10131;2793Номер 10
&#10006;2716Жирный знак умножения
&#10008;2718Жирный крестик
&#10004;2714Жирная отметка галочкой
&#10010;271AЖирный крест
&#9883;269BСимвол атома
&#9850;267AСимвол переработки
&#10065;2751Незакрашенный квадрат с правой нижней тенью
&#10066;2752Незакрашенный квадрат с правой верхней тенью
&#9672;25C8Алмаз в оправе
&#9680;25D0Круг с левой закрашенной половиной
&#9681;25D1Круг с закрашенной правой половиной
&#8258;2042Три звездочки

2. Знаки пунктуации

ВидHTML-кодCSS-кодОписание
 &nbsp;0A0Неразрывный пробел
­&shy;0ADМесто возможного переноса
<&lt;03CЗнак «меньше чем» (начало тега)
>&gt;03EЗнак «больше чем» (конец тега)
«&laquo;0ABЛевая двойная угловая скобка
»&raquo;0BBПравая двойная угловая скобка
&lsaquo;2039Левая угловая одиночная кавычка
&rsaquo;203AПравая угловая одиночная кавычка
«&quot;022Двойная кавычка
&prime;2032Одиночный штрих
&Prime;2033Двойной штрих
&lsquo;2018Левая одиночная кавычка
&rsquo;2019Правая одиночная кавычка
&sbquo;201AНижняя одиночная кавычка
&ldquo;201CЛевая двойная кавычка
&rdquo;201DПравая двойная кавычка
&bdquo;201EНижняя двойная кавычка
&#10076;275CЖирная одинарная верхняя запятая
&#10075;275BЖирная одинарная повёрнутая верхняя запятая
&&amp;026Амперсанд
&apos;027Апостроф (одинарная кавычка)
§&sect;0A7Параграф
©&copy;0A9Знак copyright
¬&not;0ACЗнак отрицания
®&reg;0AEЗнак зарегистрированной торговой марки
¯&macr;0AFЗнак долготы над гласным
°&deg;0B0Градус
±&plusmn;0B1Плюс-минус
¹&sup1;0B9Верхний индекс «1»
²&sup2;0B2Верхний индекс «2»
³&sup3;0B3Верхний индекс «3»
¼&frac14;0BCОдна четверть
½&frac12;0BDОдна вторая
¾&frac34;0BEТри четверти
´&acute;0B4Знак ударения
µ&micro;0B5Микро
&para;0B6Знак абзаца
·&middot;0B7Знак умножения
¿&iquest;0BFПеревернутый вопросительный знак
ƒ&fnof;192Знак флорина
&trade;2122Знак торговой марки
&bull;2022Маркер списка
&hellip;2026Многоточие
&oline;203EНадчеркивание
&ndash;2013Среднее тире
&mdash;2014Длинное тире
&permil;2030Промилле
}&#125;07DПравая фигурная скобка
{&#123;07BЛевая фигурная скобка
=&#61;03DЗнак равенства
&ne;2260Знак неравенства
&cong;2245Конгруэнтность (геометрическое равенство)
&asymp;2248Почти равно
&le;2264Меньше чем или равно
&ge;2265Больше чем или равно
&ang;2220Угол
&perp;22A5Перпендикулярно (кнопка вверх)
&radic;221AКвадратный корень
&sum;2211N-ичное суммирование
&int;222BИнтеграл
&#8251;203BЗнак сноски
÷&divide;0F7Знак деления
&infin;221EЗнак бесконечности
@&#64;040Символ собака
[&#91;05BЛевая квадратная скобка
]&#93;05DПравая квадратная скобка

3. Стрелки

ВидHTML-кодCSS-кодОписание
&larr;2190Стрелка влево
&uarr;2191Стрелка вверх
&rarr;2192Стрелка вправо
&darr;2193Стрелка вниз
&harr;2194Стрелка влево-вправо
&crarr;21B5Стрелка вниз и влево – знак возврата каретки
&lArr;21D0Двойная стрелка налево
&uArr;21D1Двойная стрелка вверх
&rArr;21D2Двойная стрелка направо
&dArr;21D3Двойная стрелка вниз
&hArr;21D4Двойная стрелка влево-вправо
&#10144;27A0Летящая стрела
&#10148;27A4Наконечник стрелы
&#10149;27A5Изогнутая стрела, указывающая вниз и вправо
&#10150;27A6Изогнутая стрела, указывающая вверх и вправо
&#10163;27B3Стрела направо
&#8634;21BAКруглая стрелка с наконечником против часовой стрелки
&#8635;21BBКруглая стрелка с наконечником по часовой стрелке
&#8679;21E7Толстая полая стрелка вверх
&#8617;21A9Стрелка налево с крючком
&#10155;27ABНаклонённая вниз объёмная стрелка
&#11015;2B07Закрашенная стрелка вниз
&#11014;2B06Закрашенная стрелка вверх
Читайте также:  Какой камень подходит девам женщинам и их свойства

4. Карточные масти

ВидHTML-кодCSS-кодОписание
&spades;2660«Пики»
&clubs;2663«Трефы»
&hearts;2665«Червы»
&diams;2666«Бубны»
&#9825;2661Контур «Червы»
&#9826;2662Контур «Бубны»
&#9828;2664Контур «Пики»
&#9831;2667Контур «Трефы»

5. Деньги

ВидHTML-кодCSS-кодОписание
¢&cent;FFE0Цент
£&pound;FFE1Фунт стерлингов
&#8381;20BDРоссийский рубль
¥&yen;0A5Йена или юань
&euro;20ACЕвро
$&#36;024Доллар
&#8372;20B4Знак гривны
&#8377;20B9Индийская рупия
&#22291;5713Китайский юань
&#8376;20B8Казахстанский тенге

6. Знаки зодиака

ВидHTML-кодCSS-кодОписание
&#9800;2648Овен
&#9801;2649Телец
&#9802;264AБлизнецы
&#9803;264BРак
&#9804;264CЛев
&#9805;264DДева
&#9806;264EВесы
&#9807;264FСкорпион
&#9808;2650Стрелец
&#9809;2651Козерог
&#9810;2652Водолей
&#9811;2653Рыбы

Источник

Свойства текста применяются практически ко всем элементам CSS, которые могут включать в себя или описывать текст, правда, с учетом некоторых ограничений в каждом отдельном случае, Свойство text-align запоминает расположение текста относительно границ рабочего окна броузера или ячейки таблицы, иными словами — отвечает за выравнивание текстового блока. Соответственно, оно применяется совместно с так называемыми блоковыми элементами, то есть элементами, поддерживающими отображение текстовых массивов: Р., Н1-Н6, TD, TR и некоторыми другими.Можно использовать одно из четырех значений данного свойства: left — выравнивание по левой границе экрана или ячейки таблицы, right — по правой границе, center — выравнивание по центру и justify — растягивание текста по все ширине экрана или табличной ячейки,
Пример:

Свойства text-decoration. Управляет начертанием символов: с его помощью можно задать эффекты отображения зачеркнутого или подчеркнутого текста Данное свойство может принимать одно из следующих значений, none — отсутствие всяких эффектов, underline — подчеркнутый текст, line-through — перечёркнутый текст,overline — Haд строчечный и blink — мерцающий текст. Обратите внимание на то, что значение ovеrline данного свойства не поддерживается броузером Netscape Navigator а значение blink — наоборот, программе Microsoft Internet Explorer. Пример:
A (text-decoration: none:}
ВНИМАНИЕ Элемент А может быть представлен в тексте файла CSS с использованием определений. link — просто размещенная на web-странице ссылка active описывает состояние ссылки нажимаемой в данный момент времени, hover — состояние ссыпки в момент кагда пользователь навёл на нее курсор мыши и Visited отображает посещённую ссылку. Определения состояний записываются через двоеточие после названия элемента, например A:visited{color:2F4F4F;}
Свойство text-indent, применяемое, как правило, совместно с элементом P, указывает на отступ первой строки текстового блока в пикселах, сантиметрах миллиметрах в процентах от общей длины строки. Например, его используют для организации табулированных абзацных отступов так называемых красных строк. Например:

Свойство line-height устанавливает межстрочный интервал текста web-странице в пикселах, сантиметрах, миллиметрах или процентах от интервала, определённого умолчанию, К этому свойству можно применить значение normal оставляющее определенный в настройках клиентского броузера межстрочный интервал без изменений.
Пример:

Свойство letter-spacing устанавливает расстояние между символами текста в пикселах, сантиметрах или миллиметрах, но распознается оно только броузером Microsoft Internet Explorer. Возможно использование атрибута normal, оставляющего межсимвольный интервал, принятый по умолчанию.
Пример:

Р { letter-spacing: Зрх;}

Свойство vertical-align определяет вертикальное выравнивание текста в ячейках таблиц или графических изображений в текстовом блоке и также не распознается броузером Netscape Navigator. Оно может принимать одно из следующих значении: top — позиционирование пo верхней границе ячейки, middle — но центру ячейки, bottom — по нижней границе ячейки, baseline — по условной базовой линии, top-text — по верхней точке текстовой строки, bottom-text по нижней точке текстовой строки.
Пример:

TD (vertical-align: top:}
IMG (vertical -align: top-text.}

Свойство text-transform задает трансформацию определяемого элементом текстового блока normal- стандартное отображение текста без каких-либо изменений, capitalize-каждое слово абзаца начинается с заглавной буквы, при этом регистр символов, определенный в коде HTML, игнорируется; uppercase все символы текста становятся заглавными и, наконец, lowercase — все символы становится строчными. Это свойство поддерживается только броузером Microsoft Internet Explorer.
Пример:

CAPTION (text-transform- capitalize:}

Источник

CSS-правила

CSS — это язык для оформления структурированных документов, например, HTML- документов. Синтаксис — это плоский список CSS-правил. CSS-правило состоит из селектора и перечня свойств и их значений:

селектор {
свойство: значение;
свойство: значение;
}

Для комментариев в CSS используются символы /* и */.

Селекторы

Селектор находится в начале CSS-правила, до фигурных скобок, и определяет, к каким HTML-элементам применятся свойства и значения из правила.

.feature-kitten {
padding-top: 60px;
}

Простейшие (и самые популярные) селекторы — это селекторы по тегам и по классам. Селекторы по тегам содержат имя тега без символов < и > и применяются ко всем подходящим тегам. Селекторы по классам начинаются с точки, за которой идёт имя класса, и применяются ко всем тегам с подходящим атрибутом class.

h1 { color: red; }
.info { color: blue; }

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

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

Также можно комбинировать любые типы селекторов через пробел. Такие селекторы называются вложенными или контекстными и читаются справа налево. Например:

nav a {…}
.menu ul {…}
.post .title {…}

Свойства и значения

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

.feature-kitten {
padding-top: 60px;
}

Каждый раз, когда мы добавляем новое свойство или изменяем его значение, мы меняем что-то на странице.

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

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

Составные свойства

В CSS есть обычные свойства, управляющие одним параметром отображения, и есть составные свойства, управляющие одновременно несколькими параметрами. Например, свойство font. Оно задаёт сразу шесть параметров: размер и название шрифта, высоту строки и некоторые другие.

font: 16px/26px «Arial», sans-serif;

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

Типы значений: абсолютные и относительные

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

font-size: 1cm;
font-size: 10mm;
font-size: 38px;

Относительные единицы измерения описывают значения, которые зависят от других значений. Например, ширина элемента в процентах зависит от ширины родительского элемента, а ширина элемента в em зависит от размера шрифта самого элемента. К относительным единицам относятся em, rem, vh, vw и некоторые другие, ну и, конечно же, проценты.

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

Некоторым элементам можно не задавать никаких стилей, но у них всё равно будет какое-то оформление. Например, у списка <ul> есть отступы и маркеры. Такие стили называются стилями по умолчанию и задаются внутри браузерных стилей изначально. Их можно переопределить или сбросить, задав другие значения свойств элементу.

Читайте также:  Какие свойствами обладает кислород

Каскадирование

Когда браузер отрисовывает страницу, он должен определить итоговый вид каждого HTML-элемента. Для этого он собирает все CSS-правила, которые относятся к каждому элементу, ведь на элемент могут влиять сразу несколько CSS-правил. Механизм комбинирования стилей из разных источников в итоговый набор свойств и значений для каждого тега называется каскадностью. Например, есть такой элемент в разметке:

<p class=»beloved-color»>Зелёный — мой любимый цвет</p>

Заданные стили:

.beloved-color { color: green; }

Браузерные стили:

margin: 1em 0;

Итоговые стили:

color: green;
margin: 1em 0;

Конфликт свойств

На один элемент могут действовать несколько CSS-правил. Если в этих правилах есть одинаковые свойства с разными значениями, то возникает конфликт. Например:

ul { list-style: disc; }
.blog-navigation ul { list-style: none; }

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

  1. Сравниваются приоритеты стилевых файлов, в которых находятся конфликтующие свойства. Например, авторские (то есть наши) стили приоритетнее браузерных.
  2. Сравнивается специфичность селекторов у CSS-правил с конфликтующими свойствами. Например, селектор по классу более специфичен, чем селектор по тегу.
  3. Побеждает то свойство, которое находится ниже в коде.

Каскад работает и внутри CSS-правил.

Встраивание и подключение внешних стилей

Внешние стили подключаются через тег <link>

<link rel=»stylesheet» href=»style.css»>

Встраивание стилей в тег <style>. Его обычно размещают внутри <head>:

<head>
<style>
CSS-код
</style>
</head>

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

Встраивание в атрибут style:

<div style=»width: 50%;»>&lt/div>

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

Обычно использование этого способа считается плохой практикой. Но иногда в виде исключения бывает удобнее воспользоваться встраиванием стилей в атрибут style, чем писать отдельные CSS-правила. Например, когда нужно управлять стилями именно из разметки, и создавать отдельные классы при этом будет излишне. Так бывает, когда какие-то стилевые параметры устанавливаются с помощью сторонних программ или другими людьми, например, через CMS.

Продолжить

Источник

Не знаете, как работают элементы CSS? Пора освоить все виды селекторов и позиционирование на странице. Разбираем наглядные примеры.

CSS (аббревиатура от Cascading Style Sheets – каскадные таблицы стилей) – язык, который используем для оформления стиля HTML-файла и сообщения браузеру, как отображать элементы на странице.

Речь пойдёт исключительно о стилях документов HTML, хотя CSS применяют и для других XML-документов.

Файл CSS содержит правила CSS.

Каждое правило состоит из 2 частей:

  • селектор
  • блок объявлений

Селектор CSS – строка, которая идентифицирует элементы (один или несколько) на странице в соответствии со специальным синтаксисом, о котором скоро поговорим.

Блок объявлений содержит одно или несколько объявлений, которые состоят из свойства и значения.

Больше в CSS ничего нет.

Как выглядит CSS

Набор правил CSS состоит из cелектора и объявления.

Объявление содержит правила, каждое из которых состоит из свойства и значения.

В этом примере селектор p применяет одно правило, которое устанавливает значение 20px для свойства font-size:

p {
font-size: 20px;
}

Правила следуют одно за другим:

p {
font-size: 20px;
}
a {
color: blue;
}

Селектор распространяется на один или больше элементов:

p, a {
font-size: 20px;
}

и на теги HTML, как указано выше, или элементы HTML, которые содержат конкретный атрибут class – .my-class, или элементы HTML с конкретным атрибутом id – #my-id.

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

Точка с запятой

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

CSS прикрепляется к HTML-странице тремя способами.

1: Использование тега link

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

Для использования этого метода добавляем тег link с атрибутом href, который указывает на нужный файл CSS. Делаем это внутри тега head, а не внутри тега body:

<link rel=»stylesheet» type=»text/css» href=»myfile.css»>

Атрибуты rel и type также обязательные, поскольку они сообщают браузеру, на какой тип файла ссылаться.

2: Использование тега style

Вместо того, чтобы использовать тег link для указания отдельной таблицы стилей, которая содержит наш CSS, добавляем CSS непосредственно внутри тега style. Синтаксис такой:

<style>
…наш CSS…
</style>

Когда используем этот метод, избегаем создания отдельного файла CSS. Это хороший способ поэкспериментировать перед «формализацией» CSS в отдельном файле.

3: Встроенные стили

Встроенные стили – третий способ добавления CSS на страницу. Добавляем атрибут style к любому тегу HTML и включаем в него CSS.

<div style=»»>…</div>

Пример:

<div style=»background-color: yellow»>…</div>

Селектор связывает одно и более объявлений с одним или несколькими элементами на странице.

Базовые селекторы

Предположим, отобразим слова в элементе p на странице жёлтым цветом.

Для указания этого элемента используем селектор p, который охватывает все теги p на странице. С помощью несложного правила CSS достигаем цели:

p {
color: yellow;
}

Каждому тегу HTML соответствует селектор, например: div, span, img.

Если селектор CSS соответствует нескольким элементам, изменение затронет все элементы на странице.

Для привязки стиля к необходимому элементу на странице используются два атрибута HTML-элементов: class и id.

Различие между ними состоит в том, что внутри HTML-документа одно и то же значение class используется для одного или нескольких элементов, а id только один раз. Как следствие, с использованием классов CSS выбираются элементы с двумя и более конкретными именами классов, что невозможно с помощью идентификаторов.

Классы обозначаются с помощью символа ., в то время как для идентификаторов используется символ #.

Пример использования класса:

<p class=»dog-name»>
Роджер
</p>
.dog-name {
color: yellow;
}

Пример использования идентификатора:

<p id=»dog-name»>
Роджер
</p>
#dog-name {
color: yellow;
}

Сочетание селекторов

Выбор элемента с помощью класса CSS или идентификатора

Выберем целевые элементы, к которым прикрепляется класс или идентификатор.

Пример использования класса:

<p class=»dog-name»>
Роджер
</p>
p.dog-name {
color: yellow;
}

Пример использования идентификатора:

<p id=»dog-name»>
Роджер
</p>
p#dog-name {
color: yellow;
}

Ориентация на составные классы

Уже в курсе, как выбрать целевой элемент с помощью конкретного класса с использованием .class-name. Теперь отметим элемент с двумя или более классами: объединим имена классов и разделим точкой, без пробелов.

Пример:

<p class=»dog-name roger»>
Роджер
</p>
.dog-name.roger {
color: yellow;
}

Объединение классов и идентификаторов

Таким же образом объединяем класс и идентификатор.

Пример:

<p class=»dog-name» id=»roger»>
Роджер
</p>
.dog-name#roger {
color: yellow;
}

Группировка селекторов

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

Пример:

Читайте также:  Каким свойством обладает трапеция

<p>
Мою собаку зовут:
</p>
<span class=»dog-name»>
Роджер
</span>
p, .dog-name {
color: yellow;
}

Добавим отступы в этих объявлениях для понятности:

p,
.dog-name {
color: yellow;
}

Следование по дереву документа с помощью селекторов

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

<span>
Здравствуйте!
</span>
<p>
Мою собаку зовут:
<span class=»dog-name»>
Роджер
</span>
</p>
p span {
color: yellow;
}

Посмотрите, как использовали пробел между двумя токенами p и span.

Это работает даже при многоуровневой вложенности элемента справа.

Для определения зависимости первого уровня используем символ > между двумя токенами:

p > span {
color: yellow;
}

В этом случае, если span не первый потомок элемента p, новый цвет не применяется. Стиль будет применяться к прямым потомкам:

<p>
<span>
Это жёлтый
</span>
<strong>
<span>
Это не жёлтый
</span>
</strong>
</p>

Одноуровневые селекторы стилизуют элемент, только если ему предшествует конкретный элемент. Делаем это с помощью оператора +.

Пример:

p + span {
color: yellow;
}

Это назначит жёлтый цвет элементам span, которым предшествует элемент p:

<p>Это абзац</p>
<span>Это жёлтый промежуток</span>

В этом разделе проанализируем селекторы атрибутов. Поговорим о селекторах  псевдоклассов и селекторах псевдоэлементов в следующих двух разделах.

Селектор присутствия атрибута

Первый тип селектора – атрибут присутствия атрибута.

Проверим, содержит ли элемент атрибут, используя синтаксис []. p[id] выберет все теги p на странице, которые имеют атрибут id, независимо от значения:

p[id] {
/* … */
}

Точные селекторы значений атрибутов

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

p[id=»my-id»] {
/* … */
}

Соответствие части значения атрибута

Хотя = проверяет точное значение, существуют другие операторы для проверки:

  • *= содержит ли атрибут часть
  • ^= начинается ли атрибут с части
  • $= заканчивается ли атрибут частью
  • |= начинается ли атрибут с части и после него идёт тире (например, в классах) или просто содержит часть
  • ~= содержится ли часть в атрибуте, но отделена пробелами от остальных

Все упомянутые проверки чувствительны к регистру.

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

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

Начинаются с одного двоеточия :.

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

Рассмотрим рядовой пример. Вы хотите стилизовать ссылку, поэтому создаёте правило CSS для элемента a:

a {
color: yellow;
}

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

Почему это происходит?

Потому что ссылка при нажатии изменяет состояние: переходит в состояние :active. И когда ссылку посетили, она становится :visited. Навсегда, пока пользователь не очистит историю просмотров.

Итак, чтобы правильно сделать ссылку жёлтой во всех состояниях, напишем

a,
a:visited,
a:active {
color: yellow;
}

:nth-child() заслуживает отдельного упоминания. Применяется для обозначения нечётных или чётных потомков: :nth-child(odd) и :nth-child(even).

Часто это используется в списках для отличия нечётных линий от чётных:

ul:nth-child(odd) {
color: white;
background-color: black;
}

Псевдоэлементы используются для стилизации определённой части элемента.

Начинаются с двойного двоеточия ::.

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

::before и ::after, вероятно, самые используемые псевдоэлементы.

Применяются для добавления содержимого до или после элемента, например, иконки.

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

p::first-line {
font-size: 2rem;
}

Или, может быть, хотим, чтобы первая буква была жирнее:

p::first-letter {
font-weight: bolder;
}

::after и ::before менее интуитивны. Указываем свойство content для вставки содержимого любого типа после или перед элементом:

p::before {
content: url(/myimage.png);
}
.myElement::before {
content: «Эй, эй!»;
}

Позиционирование – это то, с помощью чего в CSS мы определяем, где элементы появляются на экране и как они появляются.

Статическое позиционирование

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

Относительное позиционирование

Если установите position: relative для элемента, то сможете изменить его расположение со смещением, используя свойства

  • top
  • right
  • bottom
  • left

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

Смотрите пример на Codepen. Создали родительский контейнер, дочерний контейнер и внутреннее поле с текстом:

<div class=»parent»>
<div class=»child»>
<div class=»box»>
<p>Test</p>
</div>
</div>
</div>

и CSS, который добавляет цвета и поля, но не затрагивает позиционирование:

.parent {
background-color: #af47ff;
padding: 30px;
width: 300px;
}
.child {
background-color: #ff4797;
padding: 30px;
}
.box {
background-color: #f3ff47;
padding: 30px;
border: 2px solid #333;
border-style: dotted;
font-family: courier;
text-align: center;
font-size: 2rem;
}

вот результат:

элементы css

Попробуйте добавить любое из свойств, которые упоминали раньше (top, right, bottom, left), в .box, и ничего не произойдёт. Положение static.

Теперь, если установим position: relative в блок, сначала кажется, что ничего не изменилось. Но теперь элемент перемещается с использованием свойств top, right, bottom, left. И теперь положение изменяется относительно элемента, содержащего его.

Например:

.box {
/* … */
position: relative;
top: -60px;
}

элементы css

Отрицательное значение для top заставит блок двигаться вверх относительно контейнера.

Или же

.box {
/* … */
position: relative;
top: -60px;
left: 180px;
}

элементы css

Обратите внимание, как пространство, которое занимает блок, сохраняется в контейнере, как будто ещё на месте.

Ещё одно свойство, которое теперь работает, это z-index, и изменяет размещение по оси z.

Абсолютное позиционирование

Установка position: absolute для элемента удалит его из потока документа.

Помните наблюдение при относительном позиционировании, что пространство, первоначально занимаемое элементом, сохраняется даже при перемещении элемента?

При абсолютном позиционировании как только устанавливаем position: absolute в .box, его исходное пространство теперь разрушено, и только исходная точка (координаты x, y) остаётся прежней.

.box {
/* … */
position: absolute;
}

элементы css

Теперь перемещаем блок по своему усмотрению, используя свойства top, right, bottom, left:

.box {
/* … */
position: absolute;
top: 0px;
left: 0px;
}

элементы css

или

.box {
/* … */
position: absolute;
top: 140px;
left: 50px;
}

элементы css

Координаты указаны относительно ближайшего контейнера, который не static.

Это означает, что если добавим position: relative для элемента .child и установим top и left в 0, блок появится не в верхней левой границе окна, а на координатах 0, 0 элемента .child:

.child {
/* … */
position: relative;
}
.box {
/* … */
position: absolute;
top: 0px;
left: 0px;
}

элементы css

Как уже видели, .child статический по умолчанию:

.child {
/* … */
position: static;