Продолжаем создавать свой мини-кликер с помощью HTML, CSS и JS.
В этой части подробнее поговорим о
CSS.
Предыдущая (вторая) часть
.
Основы CSS.
Что такое CSS?
CSS — язык стилей. Проще говоря, с помощью CSS мы можем менять стили, цвета, шрифты и вообще внешний вид любых объектов. Мы можем менять стили у классов, id или у тегов.
Файлы CSS имеют расширение
.css . Мы можем подключить к странице сколько угодно разных файлов стилей. CSS подключается с помощью тега <link>:
<link rel="stylesheet" type="text/css" href="style.css">
...где вместо style.css может использоваться любое другое имя файла CSS. Подключение CSS должно происходить внутри тега <head>.
Также мы можем не создавать отдельный файл CSS, а прописать стили в самой странице. Для этого существует тег <style>, в котором и нужно прописывать стили. Тег <style> тоже должен находиться в теге <head>.
Также мы можем прописать стили для какого либо конкретного элемента страницы. Стили прописываются с помощью атрибута style:
<span style="color: black">Привет!</span>
.
Селектор — то, для чего применяется определенный "стиль". Селектором может быть класс, тег или id. Селекторов у одного "стиля" может быть сразу несколько.
Строение "стиля" выглядит так:
селектор {
свойство: значение свойства;
свойство: значение свойства;
}Классы, id и теги в виде селектора прописываются по разному. Теги прописываются просто по названию (например,
test), классы записываются с точкой перед ними (
.test), а id записываются с решеткой
#test.
Свойства для селектора определяются в фигурных скобках. У селектора может быть сразу несколько свойств.
Существует огромное количество различных свойств. Например, color меняет цвет текста, а font-size размер шрифта.
Пример построения стиля:
.test {
color: red;
font-size: 20px;
}В этом стиле написано, что класс
.test будет иметь цвет (color) красный (red), а размер шрифта (font-size) 20 пикселей (20px).
Читать следующую часть.
