CSS: Селекторы и свойства
Алёна Батицкая
Алёна Батицкая
Алёна Батицкая
Выглядит не очень-то привлекательно, правда? Если бы не придумали, как управлять оформлением — таким был бы весь интернет по сей день.
Сначала были попытки оформлять страницы с помощью особых тегов — например, font, b, i.
Но разработчики вовремя поняли, что это путь в никуда, и решили отделить все оформление от структуры — так появился CSS.
CSS (Cascading Style Sheets) — каскадные таблицы стилей — это язык, содержащий набор информации, отвечающий за то, как именно будет отображаться страница сайта визуально.
Для подключения CSS используются два специальных тега meta и style.
Но так как мы будем работать с Codepen, то эти теги использовать не будем. Стили пишем в окошко «CSS», и Codepen сам подключит их.
strong {
color: red;
}
Составные части CSS-правила:
strong) — указание, к каким тегам применяются указанные в правиле стили;свойство: значение; разделенные двоеточием и обязательно заканчивающиеся точкой с запятой. Обязательно заключаются в фигурные скобки.Название тега, например: div, p, a, h1, h2 и так далее.
Например, стили оформления текста:
font-sizeСвойство font-size задает размер шрифта:
strong {
font-size: 120%;
}
h2 {
font-size: 40px;
}
Один пиксель равен одной точке на экране.
Live DemoВ этом примере размер шрифта заголовка «КОТИКИ» равен 40px, а слова «Котики» в начале каждого абзаца — 120%.
Котики — это не только ценный мех, но и достаточно разочарований.
Котики — это не только встроенный мурчальник, но и немало человеческого счастья.
Котики — это не только испорченная мебель, но и много килограммов пушистого пузика.
font-weightСвойство font-weight задает жирность начертания.
Значением может быть ключевое слово:
h2 {
font-weight: bold;
}
font-weight в цифрахЗначением свойства font-weight может быть число от 100 до 900.
h2 {
font-weight: 300;
}
В этом примере мы изменили начертание всего текста в предложениях при помощи значения bold:
Котики — это не только ценный мех, но и достаточно разочарований.
Котики — это не только встроенный мурчальник, но и немало человеческого счастья.
Котики — это не только испорченная мебель, но и много килограммов пушистого пузика.
Свойство font-weight: normal; соответствует стандартному начертанию. Результат будет таким же, если мы укажем в значении 400.
Ключевое слово bold равно числовому значению 700.
Обратите внимание, что число должно быть кратно 100. Недопустимо промежуточное значение, например, 150 или 425:
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
font-styleЗадает стиль начертания шрифта.
В примере ниже мы задаем курсивное начертание для текста:
p {
font-style: italic;
}
В примере ниже к первому и второму предложениям применено свойство font-style: italic;:
Котики — это не только ценный мех, но и достаточно разочарований.
Котики — это не только встроенный мурчальник, но и немало человеческого счастья.
Котики — это не только испорченная мебель, но и много килограммов пушистого пузика.
colorЗадает цвет текста.
В примере ниже мы изменяем цвет текста у заголовка со стандартного черного на красный. Следующее правило изменяет цвет абзаца на зеленый:
h2 {
color: red;
}
p {
color: green;
}
Live Demo
Вы можете увидеть результат работы кода с предыдущего слайда:
Котики — это не только ценный мех, но и достаточно разочарований.
Котики — это не только встроенный мурчальник, но и немало человеческого счастья.
Котики — это не только испорченная мебель, но и много килограммов пушистого пузика.
Обратим внимание, что все эти свойства поступают по цепочке от родителя к потомкам: если внутри нашего заголовка будет другой тег (например, ссылка a), то заданные нами свойства автоматически будут работать и для внутреннего тега тоже.
Такой механизм называется наследованием.
Почему так происходит? Это определяется стандартами, и на самом деле это очень удобно — если бы не было этого механизма, нам бы пришлось следить за всеми тегами, которые вложены, и повторять все стили.
В примере ниже первое слово в предложении «Котики» находится внутри тега strong. Мы задаем зеленый цвет текста для всего абзаца и за счет наследования это правило распространяется и на вложенные теги:
Котики — это не только ценный мех, но и достаточно разочарований.
Котики — это не только встроенный мурчальник, но и немало человеческого счастья.
Котики — это не только испорченная мебель, но и много килограммов пушистого пузика.
В качестве селектора не обязательно может выступать одиночное название тега — чаще всего это комбинации тегов.
Потомками называют все вложенные теги вне зависимости от степени вложенности.
Селектор div strong выберет все теги strong, которые расположены внутри div.
В тексте ниже «котики», окрашенные в синий цвет, находятся внутри тегов strong. Использовав селектор div strong, мы выбрали все strong, находящиеся внутри div. Вне зависимости от того, находятся они внутри абзацев, или внутри списков.
Котики — это не только ценный мех, но и достаточно разочарований.
Котики — это не только испорченная мебель, но и много килограммов пушистого пузика.
Котики — это прекрасно!
Дочерними называются селекторы, находящиеся на первом уровне вложенности в какой-то определенный тег.
div > p — выберет все теги p, которые расположены внутри div на первом уровне. То есть не находятся внутри других тегов.
Использовав селектор div > p, мы выбрали все абзацы, которые вложены в div, но не находятся внутри каких-то других тегов.
Котики — это не только ценный мех, но и достаточно разочарований.
Котики — это не только испорченная мебель, но и много килограммов пушистого пузика.
Все любят котиков.
Очень любят!
Стоматологическая клиника хочет стильный яркий сайт. У них уже есть готовая разметка и нужно позаботиться о стилях для нее.
<div>
<h1>Я рад приветствовать вас в нашей стоматологической клинике!</h1>
<p>Вся моя жизнь связана со стоматологией. 11 лет назад я открыл в Москве <span>детскую стоматологию</span>
— мы первыми начали лечить детей по мировым западным протоколам: качественно и надежно, как взрослых.
И стали лидерами среди детских стоматологий в России!</p>
<p>Родители наших маленьких пациентов просили нас лечить и их самих — так же нежно и терпеливо, как детей.
И мы открыли <span>взрослые стоматологические отделения</span>. Мы предлагаем нашим пациентам все самое лучшее,
что есть в стоматологии на сегодня.</p>
<h2>Мы предлагаем:</h2>
<ul>
<li>Лечение зубов по мировым стандартам</li>
<li>Безопасное оборудование для диагностики</li>
<li>Протезирование любой сложности:
<ul>
<li>микропротезирование <span>вкладками</span></li>
<li>все виды <span>коронок</span></li>
<li>любые съемные и несъемные <span>протезы</span></li>
<li><span>виниры</span> и <span>люмиры</span></li>
</ul>
</li>
</ul>
</div>
Разметка в Codepen
Сделать заголовок h1 зеленым и курсивным.
Сделать заголовок h1 зеленым и курсивным.
h1color: green;
font-style: italic;Увеличить элементы списка «мы предлагаем», являющиеся детьми тега ul, до размера 20px, при этом «внуков» (протезирование) уменьшить до 14px и сделать жирными.
Увеличить элементы списка «мы предлагаем», являющимися детьми тега ul, до размера 20px, при этом «внуков» (протезирование) уменьшить до 14px и сделать жирными.
ul lifont-size: 20pxУвеличить элементы списка «мы предлагаем», являющимися детьми тега ul, до размера 20px, при этом «внуков» (протезирование) уменьшить до 14px и сделать жирными.
Увеличить элементы списка «мы предлагаем», являющимися детьми тега ul, до размера 20px, при этом «внуков» (протезирование) уменьшить до 14px и сделать жирными.
ul ul lifont-size: 14px;
font-weight: bold;
Сделать текст «детскую стоматологию» и «взрослые стоматологические отделения» красного цвета и курсивными:
Сделать текст «детскую стоматологию» и «взрослые стоматологические отделения» красного цвета и курсивными:
p > span или p spancolor: red;
font-style: italic;Программист-фрилансер написал стили для разметки стоматологической клиники. Наша задача — понять, для каких тегов сработают его правила:
div > ul > li?div li?div span?div > span?Программист-фрилансер написал стили для разметки стоматологической клиники. Наша задача — понять, для каких тегов сработают его правила:
div > ul > li? Только элементы списка «мы предлагаем»div li? Все элементы спискаdiv span? Все span в нашей разметкеdiv > span? Ни один элемент, так как в нашей разметке нет span, являющихся детьми divМы знаем:
Мы умеем:
Задавайте вопросы и напишите отзыв о лекции!
Алёна Батицкая