CSS (Cascading Style Sheets — каскадные таблицы стилей) используются для задания внешнего вида страниц. CSS работает как бы над HTML, то есть вначале задается html-разметка, а после пределяется её оформление.
CSS очень большой язык, который состоит из структурных модулей, описывающих каждое своё свойство и поведение. На сегодняшний день мы верстаем по стандарту CSS Level 3.
Здесь необходимо сделать небольшую ремарку. Дело в том, что поддержка браузерами CSS несколько различается. Несколько лет назад ситуация была настолько печальна, что верстальщикам приходилось исхитряться так, чтобы обеспечить поддержку старых и новых браузеров одновременно. Главная проблема — это браузер Internet Explorer, который имел самую большую аудиторию, но и самую слабую поддержку CSS. На сегодняшний день верстальщики осуществляют поддержку только последних двух версий браузеров. Поскольку они выходят достаточно часто, то «отставание» в поддержке CSS совсем незаметное. Исключение — IE 11 версии, который больше не поддерживается. Если необходима его поддержка, то следует учитывать его ограниченные способности. Иначе мы предполагаем, что поддержка этого браузера не нужна. У пользователя есть возможность использовать любой современный браузер (FireFox, Chrome, Vivaldi).
Есть специальный сайт, где можно проверить поддержку CSS-свойства по браузерам: caniuse.com. Сейчас вам он не нужен, но сохраните его в закладки. В будущем пригодится. Также обратите внимание на справочник CSS.
В CSS-коде указывается селектор (например тэг) и его свойства. Существуют два способа использовать CSS на странице.
Первый в виде html-атрибута style вот так:
<p style="color: red;">текст текст текст</p>
В данном примере color — это css-свойство, а red его значение. Таким образом в этом тэге P текст окажется красным.
Можно указывать несколько свойств через точку с запятой:
<p style="font-weight: bold; margin-top: 20px;">текст текст текст</p>
Свойства через style очень часто применяется при верстке, но, когда стилей много, возникает проблема с его поддержкой. Представьте себе текст из 10 абзацев, где потребуется сменить текст с красного на синий. А если абзацев 100? Придется каждый менять.
Для таких случаев используется атрибут class, который указывает на класс стилей.
Классы стилей могут быть во внешнем css-файле или быть прямо встроенными в HEAD-секции страницы.
CSS-стили всегда должны быть так или иначе располагаться в секции HEAD. Данное правило является обязательным, поскольку размещение css-стилей в секции BODY делает html-код невалидным. Однако следует особо отметить, что в новом стандарте HTML 5.2 (рекомендация от 14/12/2017 г.) css-стили теперь могут встраиваться в секцию BODY. Пока браузеры ещё не в полной мере поддерживают эту рекомендацию, мы будем придерживаться «традиционного» размещения стилей: только в секции HEAD.
Для подключения внешнего css-файла используют такой вариант:
<!DOCTYPE HTML> <html> <head> ... <link rel="stylesheet" href="http://сайт/style.css"> ... </head> ...
CSS-файл должен быть доступен по адресу http://сайт/style.css, только в этом случае он будет подключен.
Стили для HEAD указываются немного проще:
<!DOCTYPE HTML> <html> <head> ... <style> тут будет css-код </style> ... </head> ...
CSS-стили задаются селекторами и их свойствами вот по такой схеме:
селектор {
свойство1: значение1;
свойство2: значение2;
}Селектор — это то, к чему будет применены указанные свойства, например html-тэг. Например пусть все абзацы на странице будут красными:
p {
color: red;
}Браузер найдет все тэги P на странице и сделает их красным текстом. Если нужно будет поменять цвет на другой (синий) и добавить жирность, то нужно будет только исправить стили класса:
p {
color: blue;
font-weight: bold;
}Чаще всего вы будете сталкиваться с ситуацией, когда поменять нужно будет только какой-то один блок или тэг. Скажем только один абзац должен быть синим, другой красным, а все остальные — по умолчанию как определены в браузере — черным. В этом случае используется селектор класса, который указывается через точку.
p.red {
color: red;
}
p.blue {
color: blue;
}В данном случае браузер применит стили к тэгу P, у которого указан класс red или blue:
<p>обычный текст</p> <p class="red">красный текст</p> <p>обычный текст</p> <p class="blue">синий текст</p> <p>обычный текст</p>
Если нам нужен класс, который будет применён к любому тэгу, то используется универсальный селектор, который обозначается символом звездочки «*»:
*.red {
color: red;
}
*.blue {
color: blue;
}
*.bold {
font-weight: bold;
}В CSS в подобных случаях допускается не указывать «*» и код можно сократить:
.red {
color: red;
}
.blue {
color: blue;
}
.bold {
font-weight: bold;
}Это полностью идентичные записи. Теперь эти классы можно применять к любым html-тэгам:
<p>обычный текст</p> <div class="red">красный текст</div> <p>обычный текст <span class="blue">синий текст</span> обычный текст</p> <p class="blue">синий текст</p>
Если к тэгу необходимо применить два и более класса, то они указываются через пробел:
<p class="blue bold">синий и жирный текст</p>
Существуют и другие более сложные селекторы, которые вам нужно будет постепенно изучать. Но при верстке основные это всё-таки селекторы тэгов и классов. На них в основном и базируется вся верстка.
Более подробно изучать css-селекторы (и другие теоретические основы верстки) мы будем во второй части курса.
1. Прочитайте в справочнике как задаётся цвет. Сделайте класс для 16-ричного представления цвета.
2. Узнайте какие css-свойства используются для задания жирного текста, курсива, подчеркивания и зачеркивания. Создайте классы для этих свойств.
3. Найдите в википедии новую статью на астрономическую тему и разметьте её с помощью созданных css-классов.