Знакомство с CSS
CSS (Cascading Style Sheets — каскадные таблицы стилей) используются для создания внешнего вида страниц. То есть вначале задается html-разметка, а после определяется её оформление с помощью CSS.
Объём CSS очень большой, поэтому запомнить все его свойства сложно даже для опытных верстальщиков. Если нужно что-то вспомнить, то не стесняйся обращаться к справочнику CSS, например этому: webref.ru.
Текущий стандарт CSS Level 3, который очень активно развивается и новые возможности появляются достаточно часто.
Существует одна проблема, о которой ты должен знать. Поддержка CSS 3 в разных браузерах реализована не в полной мере, поэтому при вёрстке нужно проверять будет ли работать css-свойство в большинстве браузеров. Для этого используется сервис caniuse.com.
Общий подход примерно такой: браузер IE 11 полностью игнорируется, это старый браузер, который больше не поддерживается. Основные браузеры Firefox и Chrome — нужно чтобы была поддержка последних двух версий (отмечается зелёным цветом). Если же поддержка отмечена красным цветом, то лучше его пока не использовать.
Атрибут style
CSS-код можно указывать в виде атрибута style:
<p style="color: red;">красный текст</p>
В данном примере color — это css-свойство, а red его значение. Таким образом в этом тэге P текст окажется красным.
Можно указывать несколько свойств через точку с запятой:
<p style="font-weight: bold; margin: 20px;">полужирный текст с внешним отступом 20px</p>
Классы стилей
Свойства через style очень часто применяется при верстке, но, когда стилей много, возникает проблема с его поддержкой. Представь себе текст из 10 абзацев, где требуется сменить цвет с красного на синий. А если абзацев 100? Придется каждый менять.
Для таких случаев используется атрибут class, который указывает на некую группу стилей.
<p class="red">красный текст</p>
Классы стилей могут быть во внешнем css-файле или быть прямо встроенными в HEAD-секции страницы.
До HTML 5.2 (рекомендация от 14/12/2017 г.) css-стили всегда должны были располагаться в HEAD-секции страницы. Но сейчас их можно размещать в любой части html-документа.
Для подключения внешнего css-файла используют такой вариант:
<!DOCTYPE HTML> <html> <head> ... <link rel="stylesheet" href="http://сайт/style.css"> ... </head> ...
CSS-файл должен быть доступен по адресу http://сайт/style.css, только в этом случае он будет подключен.
Либо явно в тэге STYLE:
<!DOCTYPE HTML> <html> <head> ... <style> тут будет css-код </style> ... </head> ...
Создаём классы стилей
CSS-стили задаются селекторами и их свойствами вот по такой схеме:
селектор {
свойство1: значение1;
свойство2: значение2;
}
Селектор — это то, к чему будут применены указанные свойства. Например html-тэг. Скажем пусть все абзацы на странице будут красными:
p {
color: red;
}
Браузер найдёт все тэги P на странице и сделает их красным текстом. Если нужно будет поменять цвет на другой (синий) и добавить жирность, то нужно будет только исправить стили класса:
p {
color: blue;
font-weight: bold;
}
Селектор класса
Это самый распространённый селектор, который и создаёт привязку к html-атрибуту class.
Например мы хотим сделать какой-то абзац (это тэг P) красным, а какой-то — синим текстом.
p.red {
color: red;
}
p.blue {
color: blue;
}
А дальше в html-коде используем так:
<p>обычный текст</p> <p class="red">красный текст</p> <p class="blue">синий текст</p> <p class="green">обычный или зеленый текст?</p>
Если указать класс, который не определён в css-коде, то браузер фактически проигнорирует эту команду. В данном примере мы не задали класс green, а значит этот абзац отобразится как обычный тэг P.
Универсальный селектор
В css-коде выше мы задали правило p.red, что означает «применить стили к тэгу P, у которого в атрибуте class указан red». Но у нас же много разных тэгов, поэтому создавать для каждого из них отдельный класс не очень удобно. Например мы хотим оформить ещё какие-то заголовки красным цветом.
В этом случае можно не указывать селектор тэга, а использовать универсальный селектор в виде символа *.
*.red {
color: red;
}
*.blue {
color: blue;
}
*.bold {
font-weight: bold;
}
В CSS разрешается не указывать * в подобных случаях и код можно сократить:
.red {
color: red;
}
.blue {
color: blue;
}
.bold {
font-weight: bold;
}
Это полностью идентичные записи. Теперь эти классы можно применять к любым html-тэгам:
<h1 class="blue">Заголовок</h1> <div class="red">красный текст</div> <p class="red">красный текст <span class="blue">синий текст</span> красный текст</p>
Если к тэгу необходимо применить два и более класса, то они указываются через пробел:
<p class="blue bold">синий полужирный текст</p> <h4 class="bold red">Заголовок</h4>
Можно сказать, что 90% всей вёрстки выполняется подобным образом. Вначале создаётся css-класс, для него прописываются стили, а потом в html-коде эти классы проставляются.
Как задавать цвет
Цвет может быть закодирован несколькими способами. В первую очередь стоит отметить, что в HTML существует таблица безопасных цветов. Она была придумана, когда мониторы были так себе, поэтому использование этих цветов гарантировало их корректное отображение на любом устройстве.
Сейчас эти цвета используют для упрощения, когда проще указать имя цвета, чем его код. Например мы использовали цвета red, green, blue — это все реальные html-цвета.
Посмотреть цвета можно на странице developer.mozilla.org
Но основной способ задания цвета — это в RGB. В этой цветовой модели каждый цвет кодируется тремя числами от 0 до 255, где первый отвечает за красную (red), второй за зелёную (green) и третий за синюю (blue) составляющие.
Таким образом красный цвет можно закодировать как rgb(255, 0, 0):
.red {
color: rgb(255, 0, 0);
}
Но намного чаше RGB-цвет кодируют в 16-ричной системе (HEX), где числа от 0 до 255 указываются как от 0 до FF. Такие числа представляют собой три пары #RRGGBB.
.red {
color: #FF0000;
}
Когда числа в парах совпадают, то каждую запись можно сократить до #RGB.
.red {
color: #F00; /* это тоже самое, что и #FF0000 */
}
Обрати внимание, что в css-коде можно размещать комментарии внутри секции /* комментарий */.Свойство color задаёт цвет текста. Для фона используется свойство background-color, либо просто background (оно на самом деле составное).
.bg-yellow {
background-color: #F6DC4E;
}
Использовать можно так:
<p class="red bg-yellow">Красный текст на желтом фоне</p>
Задания
Попробуй создать классы для всех 7-ми цветов радуги. Цвет можешь взять стандартный или подобрать любым другим способом.
На основе этих классов напиши html-код, который будет выводить блоки один за другим в виде цветов радуги.