CSS «Cascading Style Sheets» (в переводе «Каскадные таблицы стилей») – это язык таблиц стилей. Его назначение – описание внешнего вида HTML-страницы.
Верстая какую-то страницу (сайт), большую часть времени, вы будете проводить именно за написанием CSS-правил.
В этой статье разберем основы CSS, т.е. то, что должен знать любой веб-разработчик, независимо от того плотно он занимается версткой, или его специализация программирование на javascript или серверное программирование.
Исходный пример.
Вот разметка простейшей HTML-страницы:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Основы CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Основы CSS</h1>
<p>CSS — формальный язык описания внешнего вида документа (веб-страницы), написанного с использованием языка разметки
(чаще всего HTML или XHTML). Также может применяться к любым XML-документам, например, к SVG или XUL.</p>
<img src="https://progtips.ru/wp-content/uploads/2020/10/img-1-1.jpg" />
<h2>Способы подключения CSS к документу</h2>
<p>Стили CSS могут быть подключены или внедрены в описываемый ими веб-документ четырьмя способами:</p>
<ul>
<li>Когда описание стилей находится в отдельном файле, оно может быть подключено к документу посредством элемента
<link>, включённого в элемент <head>.</li>
<li>Когда файл стилей размещается отдельно от родительского документа, он может быть подключён к документу
инструкцией @import в элементе<style>.</li>
<li>Когда стили описаны внутри документа, они могут быть включены в элемент <style>, который, включается в
элемент <head>.</li>
<li>Когда стили описаны в теле документа, они могут располагаться в атрибутах отдельного элемента.</li>
</ul>
<footer>(c) <a href="https://ru.wikipedia.org/wiki/CSS" target="_blank">Википедия</a></footer>
</body>
</html>
Вот как такая страница выглядит в браузере:
В разных браузерах, страница может отображаться немного по-разному, но в целом она будет такой, как на картинке выше.
Как-то изменить внешний вид страницы, средствами HTML мы не можем, а ведь хочется? Согласитесь, обычно сайты выглядят более презентабельно. И вот тут в дело вступает CSS.
Подключение CSS-стилей
Таблицы стилей делятся на внешние и внутренние.
Внешние таблицы располагаются в отдельных файлах с расширением .css (например style.css)
1. CSS-файл может быть подключен на страницу при помощи тега <link> , который должен находиться в секции <head> HTML-страницы – это самый часто используемый способ подключения CSS:
2. Другой путь, это использование правила @import . Чтобы это правило работало оно должно находиться в таблице стилей (внутренней или внешней), в самом начале, перед остальными правилами.
Обычно @import используется внутри CSS-файлов. Также эта директива используется для подключения шрифтов.
3. Внутренние таблицы стилей встраиваются в HTML-страницу, в секцию <head> , и находятся они внутри тегов <style>
4. И последний способ подключения CSS – это встроенные стили. Они пишутся непосредственно внутри HTML-тегов в атрибуте style. Такие стили, действуют только на тот тег, в котором написаны.
Начинаем писать CSS
Давайте напишем несколько CSS-правил для нашей HTML-страницы (разметка страницы находится вначале статьи).
— отступы текста от границ блока 30 пикселей».Я, как бы, говорю себе: «хочу чтобы:
— на серо-голубом фоне страницы, посередине, располагался блок с содержимым страницы,
— ширина этого блока должна быть не более 1000 пикселей,
— фон блока белый,
— размер шрифта 16 пикселей,
— шрифт Open Sans,
Далее я решаю, что основной заголовок <h1> : «должен располагаться по центру и иметь размер шрифта в 3 раза больший, чем размер текста».
Ну и еще: «картинка должна находиться справа и обтекаться текстом по левой стороне»
Вот CSS-правила, которые выполняют то, что я задумал (поместите их в файл style.css, который разместите в той же папке, что и html страницу):
/* подключаем шрифт Open sans */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400&display=swap');
html {
background-color: lightsteelblue /* фон всей страницы светло-серый-голубой */
}
body {
width: 100%; /* ширина блока с контентом 100% от ширины страницы*/
max-width: 1000px; /* но не более 1000 пикселей */
margin: 30px auto; /* внешние отступы сверху и снизу по 30 пикселей, по бокам auto - для выравнивания по центру */
background-color: white; /* фон белый */
padding: 30px; /* внутненние отступы по 30 пикселей со всех сторон */
font-size: 16px; /* размер шрифта 16 пикселей */
font-family: 'Open Sans', sans-serif; /* Шрифт Open sans */
}
h1 {
text-align: center; /* текст заголовка выровнен по центру */
font-size: 3em; /* размер шрифта в 3 раза больше размера текста на странице */
}
img {
float: right; /* картинка располагается справа */
margin-left: 15px; /* оступ слева от картинки 15 пикселей, чтобы текст не был вплотную к картинке */
}
Теперь страница выглядит вот так, согласитесь уже лучше:
Синтаксис CSS-правил
Давайте разберем основу основ CSS, а именно, синтаксис написания CSS-правил. Сделаем это на примере правила для тега <h1> , которое мы написали выше.
Посмотрите на картинку:
Объявление стиля (или CSS-правило) состоит из 2-х частей:
- Селектор, в нашем случает h1 (о селекторах позже поговорим подробнее)
- Блок объявлений (находится после селектора в фигурных скобках)
В блоке объявлений, может находится множество объявлений. Каждое объявление состоит из:
- Свойства, которое определяет что будет сделано (в примере text-align – т.е. текст будет выровнен);
- Двоеточия «:» – разделяет свойство и значение;
- Значение, которое описывает как браузер должен обработать свойство (в примере center – т.е. текст будет выровнен по центру)
В CSS определено множество свойств и для каждого свойства имеются допустимые значения. Все их не помнит, наверно, никто. На практике лишь часть из них используется часто, и они быстро запоминаются.
Исходя из того, что все свойства и значения запомнить нереально, вытекает что нужно пользоваться справочниками.
Вот справочный указатель на портале mdn: https://developer.mozilla.org/ru/docs/Web/CSS/Reference
Также мне нравится справочник: https://webref.ru/css
Для CSS в этом справочнике, кроме собственно списка, есть разбивка по категориям, тоже иногда бывает удобно:
Практический алгоритм действий.
Предположим, стоит задача сделать красный текст на желтом фоне.
Мы понимаем, что надо:
- Сделать цвет шрифта красным
- Сделать желтый фон
Ищем подходящие свойства – это color и background-color. В итоге:
{
color: red;
background-color: yellow;
}
Пример сложнее. Скажем, вам требуется, в каком-то блоке, фоном которого является картинка, написать текст. Вы пишите его и понимаете, что фоновая картинка слишком пестрая и текст на ней не читается.
Выход из ситуации: наложить сверху какой-то полупрозрачный слой и уже на нем написать текст, тогда он будет читаться.
Но! Вот проблема: вы в принципе не понимаете, как это сделать, какие свойства искать, как к этому подступиться.
Выход простой – в большинстве случаев это кто-то уже делал, идете в поисковик и ищите. Главное правильно сформулировать запрос. Если с первого раза не нашли, переформулируйте запрос.
В нашем примере, введите в яндексе: css сделать полупрозрачный фон.
Посмотрите поисковую выдачи, вы найдете ответ на свой запрос, и даже, с примерами.
Если вам не совсем понятны примеры, то смотрите из каких свойств состоят правила, ищите эти свойства в справочнике и читайте описания.
Селекторы в CSS
Теперь, когда мы разобрались с блоком объявлений стилей, нужно разобраться с тем, что находится вначале любого CSS-правила – с селектором.
Селектор указывает, к каким элементам применять объявления стилей.
В нашем примере селектор h1 – это тип элемента, говоря по-простому тег.
Такой селектор означает что стили будут применены ко всем тегам h1 на странице.
В качестве селектора могут выступать:
- элементы (имена тегов), например h2
- класс, перед ним ставится точка, например .my-class
- идентификатор, перед ним ставится решетка, например #main
- псевдоклассы и псевдоэлементы
Универсальный селектор
Существует селектор *.
Он выбирает все элементы на странице. Например правило:
* {
margin: 0;
}
установит для всех элементов нулевые внешние отступы.
Элементы
Селекторы элементов дают возможность выбрать, для применения стилей, все элементы одного типа на странице (проще говоря все одинаковые теги). Например:
h2 {
color: blue;
}
Это правило устанавливает для всех заголовков <h2> голубой цвет текста.
Классы
Селекторы классов позволяют выбрать для задания стилей один или более элементов с одинаковыми именами классов.
В элементах классы задаются при помощи атрибута class, например:
<h3 class="big">Текст заголовка</h3>
<p class="big">Текст абзаца</p>
.big {
font-size: 1.4em;
}
В этом примере шрифт будет увеличен и для заголовка h3, и для параграфа.
Идентификаторы
Селекторы идентификаторов предназначены для выбора одного конкретного элемента на странице.
В элементах идентификаторы задаются при помощи атрибута id, например:
<div id="main">...</div>
Атрибуты
Селектор по атрибуту позволяет выбрать элементы, имеющие определенный атрибут или атрибут с определенным значением.
Проще всего этот вид селектора показывать на примерах:
[title] – выберет все элементы, у которых есть атрибут title , независимо от его значения.
span[contenteditable="true"] – выберет все элементы span , у которых атрибут contenteditable имеет значение true
Селектор a[href*="yandex.ru"] – выберет все ссылки, у которых в атрибуте href содержится yandex.ru
Полный список вариантов использования этого селектора вы можете посмотреть в документации.
Псевдоклассы
Псевдоклассы в CSS – это определенный набор ключевых слов, которые добавляются к селекторам через двоеточие.
Их предназначение дать возможность применить стили к элементу, когда происходит определенное событие, например когда указатель мыши находится над элементом.
a:hover {
color: red;
}
Правило выше означает, что, когда указатель мыши находится над ссылкой, цвет её текст становится красным.
hover – это, наверно, самый часто используемый псевдокласс. Список стандартных псевдоклассов вы можете посмотреть в документации.
Псевдоэлементы
Псевдоэлементы в CSS – это определенный набор ключевых слов, которые добавляются к селекторам через двойное двоеточие.
С их помощью можно выбрать какую-то часть элемента, и задать для нее свойства.
Например, можно сделать первые буквы заголовков h2 красного цвета:
h2::first-letter {
color: red;
}
Список стандартных псевдоэлементов вы можете посмотреть в документации.