CSS для самых маленьких

MSE-Script

Developer
Команда форума
Сообщения
762
Реакции
277
Баллы
63
В прошлой статье мы рассмотрели логику построения страниц и основы работы с HTML-тегами. В этой статье мы рассмотрим базовую информацию о работе CSS, а так же некоторые “подводные камни”.


Введение

Фактически, первые сайты строились только на HTML-тегах:



На этом скриншоте изображен первый в мире сайт, написанный 6 августа 1991 года. Создание сайтов стало крупным технологическим прорывом, за которым последовало бурное развитие технологий веба. Со временем, обычных HTML-тегов стало мало и 17 декабря 1996 была выпущена первая версия CSS (Cascading Style Sheets - каскадные таблицы стилей). Это специальный язык, для описания “внешности” страницы, который предоставляет большую гибкость настройки внешнего вида и уменьшение сложности кода.

Синтаксис CSS
Синтаксис CSS достаточно прост:

CSS:
свойство: значение;
свойство_2: значение;
Вы пишите название свойства и через двоеточие его значение. Свойства разделяются точкой с запятой. CSS часто называют более кратко и лаконично - стили. Стили можно указывать прямо в HTML-тегах внутри атрибута style:


Код:
<div style="padding: 10px;"></div>
              |        |
              |        |_____ значение свойства
              |__________ название свойства

У каждого элемента может быть множество свойств:

<p style="font-size: 18px; color: red;">MSE-Script</p>

Такая запись стилей называется инлайном (in line). Такие стили действую только на тот элемент, которому прописаны. Вроде все легко и просто, но что, если таких элементов на странице десяток?

Для этого стили записываются в виде селектора и блока объявлений:

CSS:
h1 {font-size: 18px; color: red;}
 |   |
 |   |_____________ блок объявлений
 |_________________________ селектор
Селектором называется некий отличительный признак элемента. Это может быть название тега, название класса, атрибут и т.д.. После селектора указывается блок объявлений, который представляет собой фигурные скобки, внутри которых перечисляются нужные свойства и значения. Внутри этого блока можно писать сколько угодно пар "свойство: значение", но обязательно завершать пару точкой с запятой. Хорошим тоном является построчная запись свойств c добавлением символа табуляции или нескольких пробелов:


CSS:
h1 {
    font-size: 18px;
    color: red;
}
Запись стилей инлайном является плохой практикой, так как серьезно уменьшает читабельность и качество вода. Поэтому HTML и CSS код нужно разделять. Код можно записывать в отдельный файл или записывать в специальный тег <style>, который должен находится внутри тега <head>.

HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
     h1 {
        font-size: 24px;
        color: red;
     }
  </style>
</head>
<body>
  <h1>Новинки музыки 2020</h1>
</body>
</html>
Если код внутри тега <style> становится большой, его потребуется подключить в отдельном файле с помощью тега link:

<link rel="stylesheet" href="/css/main.css" type="text/css" />

Файл со стилями должен иметь расширение .css.
Стили внутри тега <style> еще называют внутренними, а подключенными в отдельном css-файле - внешними.
Внутренние стили имеют больший приоритет над внешними, а инлайновые над внутренними. То есть, если на сайте используется запись стилями несколькими видами (для одного элемента), то к нему применится инлайновый стиль. Использование инлайнового стиля является плохой практикой. Он может использоваться в специфических случаях, например, для JS-анимаций. В остальном лучше писать стили в отдельном файле.
 

MSE-Script

Developer
Команда форума
Сообщения
762
Реакции
277
Баллы
63
Типография

С синтаксисом и подключением стилей мы разобрались. Теперь можно перейти к самим свойствам.
Первым делом, создадим базовую разметку:

HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./main.css">
</head>
<body>
  <h1>Новинки музыки 2020</h1>
  <p>Нравится разножанровая музыка, и вы пока еще не определились со своими предпочтениями? Попробуйте скачать сборники музыкальных композиций бесплатно — вы обязательно найдете мелодию, соответствующую вашему вкусу и настроению. На нашем сайте вы найдете самые разнообразные сборники хитовых композиций. </p>
  <div>
     <img src="https://avatars.yandex.net/get-music-content/163479/b3e3efc4.a.7019257-3/200x200" alt="">
     <h2>Король и шут</h2>
     <h3>Акустический альбом</h3>
  </div>
</body>
</html>


Выглядит не очень презентабельно. Добавим немного стилей в файл main.css:
CSS:
h1 {
  font-size: 22px;
  font-family: 'Tahoma';
}



Как Вы можете заметить, на странице изменился шрифт заголовка. Мы переписали стандартные стили браузера, задав заголовку шрифт "Tahoma". За нужный шрифт отвечает свойство font-family, а за размер шрифта font-size.

Кроме заголовка h1, на странице имеется описание (тег <p>), название исполнителя и альбома (теги <h2>, <h3>). Конечно, можно каждому тегу указать нужный шрифт, но лучше воспользоваться механизмом наследования.

Наследование - это некий механизм, который передает свойства от родительского элемента к дочерним.
Добавим в начало файла main.css селектор body и укажем ему шрифт “Tahoma”:


Теперь, все текстовые элементы наследовали нужный шрифт от тега <body>. Это самый главный родитель на странице, поэтому, добавлять ему стили нужно аккуратно и хорошо обдумав.

Доработаем блок с названием альбома и исполнителя.
Укажем тегу h2 размер шрифта 18px, а тегу h3 - 16px; Так же, у обоих тегов уберем жирное начертание, а заголовок h2 сделаем заглавными буквами. За толщину (насыщенность) шрифта отвечает свойство font-weight, c цифровым значением от 100 до 900, с шагом 100 единиц. 100 - самое “тонкое” начертание, а 900 - самое жирное. Обычно, нормальным значением является 400, жирное - 700.

Допустимые значения "жирности" могут отличатся в разных шрифтах, причем, если шрифт поддерживает максимальную жирность 700, то значение 900 ничего не изменит, браузер его проигнорирует.
За преобразование текста в заглавные символы, отвечает свойство text-transform, со значением uppercase.
Теперь наша страница имеет вид:

 

MSE-Script

Developer
Команда форума
Сообщения
762
Реакции
277
Баллы
63
Отступы
Обратите внимание, между заголовками h2 и h3 имеется странный отступ. Этот отступ автоматически указывается браузером, его нужно переопределить.

За отступы в CSS отвечают свойство margin (внешний отступ) и padding (внутренний отступ):



Свойство margin дословно означает “поле”. Оно создает пустое пространство между указанным элементом и его “соседями”. Отступ можно задать для конкретной стороны, добавляя свойству направление: margin-left, margin-right, margin-top, margin-bottom.

CSS:
div {
    margin-top: 10px;
    margin-left: 10px;
}
Свойство padding работает аналогично, но создает пустоту внутри самого элемента. Собственно, это свойство дословно переводится как “набивка”. Отступы можно записывать краткой записью:

CSS:
div {
/* Порядок направлений: top, right, bottom, left */
margin: 10px 15px 10px 15px;
}
Еще, свойство margin поддерживает отрицательные значения, сдвигая элемент на нужную величину. Элемент с отрицательным значением margin, может “заехать” на соседний элемент. padding поддерживает только положительные значения.

Обратите внимание, что свойства margin имеют свойство “схлопываться”.
Пример: Дано 2 блока. Первый блок имеет margin-bottom: -100px, второй блок margin-top: -50px:



На первый взгляд может показаться, что отступы должны сложиться (верхний блок притягивает нижний на 100px, а нижний на 50px “заезжает” на верхний). Но браузер считает иначе: он выберет наибольшее по модулю значение. То есть, второй блок “заедет” на верхний только на 100px. Это же правило истинно и для положительных отступов. Запомните этот момент, встретитесь с ним на практике неоднократно.

Еще одна ловушка, в которую попадаются даже опытные верстальщики, это перенос браузером отступа родительскому элементу от дочернего. Пример:

HTML:
<div>
    <div style=”height: 145px; margin-top: 100px;”></div>
</div>
В теории, верхний отступ у вложенного div должен растянуть родительский. Правильно? Нет!



На практике, родительский элемент отберет себе отступ от дочернего! Если Вам нужно “растянуть” родительский блок, используйте свойство padding.
 

MSE-Script

Developer
Команда форума
Сообщения
762
Реакции
277
Баллы
63
Размеры в CSS

В приведенных выше свойствах, мы рассмотрели единицы измерения размера пиксели (px). Это основная единица измерений в CSS, с ней вы будете работать чаще всего. Пикселем называется наименьший неделимый элемент на экране, которому можно задать цвет и свечение.

Однако, пиксели не единственная единица измерений. Представьте себе блок размером 200 пикселей. На экране телефона он будет смотреться нормально, но на мониторе, размером 27 дюймов он будет едва заметен. Это правило работает и в обратном направлении - огромный блок просто не уместится на мобильном экране.

В таких случаях, лучше будет определять размер элемента относительно того, в кого они вложены. Для этого используется запись в процентах:

CSS:
div {
    width: 70%;
}
Дословно, это значит “Установить ширину, равной 70% от ширины родителя”. У всех элементов на странице существует свойство display, которое потребует отдельной темы. Мы поговорим о нем немного позже.

Некоторые элементы имеют значение display: block, которое по-умолчанию устанавливает им width: 100%. К таким элементам можно отнести заголовки h1-h6, div, section, header и т.д.. При появлении на странице, они заполняют 100% ширины родителя. Это важно запомнить.

Кроме пикселей и процентов, размеры можно указывать в виде viewport width (vw) для ширины и viewport height (vh). 100% ширина окна равняется 100vw, а 100% высоты, соответственно 100vh.

CSS:
/* div заполнит 100% области просмотра */
div {
    100vw;
    100vh
}
Резюмируем сказанное:
100px - 100 пикселей
100% - 100% от ширины родительского блока
100vw - 100% от ширины экрана

Вернемся к нашей странице. Обнулим все внешние отступы у заголовка h3 и нижний отступ у заголовка h2. Верхний отступ заголовку h2 зададим 10px:


Уже лучше. Теперь зададим тегу div фоновую заливку. За фоновый цвет отвечает свойство background-color. В качестве значения, оно принимает название или код цвета.
 

MSE-Script

Developer
Команда форума
Сообщения
762
Реакции
277
Баллы
63
Цвета в CSS

Цвета в css можно задавать по названию: black, white, red и т.д.. Всего их 147. Запоминать их все не нужно, так как используются они редко. Чаще, вместо точного названия используется код цвета в шестнадцатеричной системе или в формате RGB. Такой подход позволяет точно указывать нужный цвет с оттенком, а при работе с RGB даже прозрачность.

Поговорим о них подробнее.

Как Вы знаете, существуют 3 основных цвета - красный (Red), зеленый (Green) и синий (Blue). Остальные цвета образуются в результате смешивания этих цветов. Формат RGB является некой “формулой смешивания цвета”. Она представляет собой запись из трех наборов цифр, разделенных запятой. Чтобы указать браузеру на используемый формат, требуется написать ключевое слово rgb и перечислить в скобках “пропорции” трех цветов:

CSS:
rgb(255, 0, 0) - чистый красный
rgb(0, 255, 0) - чистый зеленый
rgb(242, 147, 13) - оранжевый
Стандарт цвета в шестнадцатеричной системе называют HEX (от слова hexadecimal). Принцип работы такой же, как у rgb, только “пропорция” цвета указывается в виде двух символов шестнадцатеричной системы. Оранжевый цвет из примера выше, в формате hex будет иметь вид #f2930d. Для указания этого стандарта браузеру, перед “формулой” указывается символ #.

Вернемся к нашему фону. Я люблю лес, поэтому в качестве примера буду использовать цвет forestgreen:


Немного доработаем страницу, добавив внутренний отступ тегу div. Заголовки h2 и h3 сделаем белыми. За цвет текста отвечает свойство color, работает оно аналогично свойству background-color. Вы можете указать color: white; или color: #fff; - разницы нет.

Обратите внимание на размер зеленой заливки. Блок растянулся на 100% от родительского. Добавьте еще пару аналогичных блоков и увидите, что они не поместятся в одном ряду и “упадут” вниз:


Зададим этим блокам фиксированную ширину в 220px и добавим им свойство float: left.

float - свойство, которая определяет, как элемент будет выравниваться на странице и как его будут обтекать другие соседи. В нашем случае, это свойство будет значить “выстроиться в ряд и прижаться к левому краю страницы”.


Ммм… КАЕФ….

Обложки альбомов куда шире, чем родительский блок. Воспользуемся полученными знаниями и зададим изображениям ширину в 100%, тегу div зададим правый внешний отступ в 10px:

Отлично. Еще немного и в продакшен.

Теперь поработаем с фоном. Зададим тегу body фоновый цвет #1a1a20, цвет текста #fff. Фоновый цвет div заменим на #1d1e23:



Настало время поработать с заголовком и текстом. Зададим им персональную заливку, внешний отступ и фиксированную ширину. Первым делом, их нужно обернуть в отдельный блок:

HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./main.css">
</head>
<body>
  <div>
     <h1>Новинки музыки 2020</h1>
     <p>Нравится разножанровая музыка, и вы пока еще не определились со своими предпочтениями? Попробуйте скачать сборники музыкальных композиций бесплатно — вы обязательно найдете мелодию, соответствующую вашему вкусу и настроению. На нашем сайте вы найдете самые разнообразные сборники хитовых композиций. </p>
  </div>

  <div>
     <img src="https://avatars.yandex.net/get-music-content/163479/b3e3efc4.a.7019257-3/200x200" alt="">
     <h2>Король и шут</h2>
     <h3>Акустический альбом</h3>
  </div>

  <div>
     <img src="https://cdn61.zvooq.com/pic?type=release&id=7027824&size=256x256&ext=jpg" alt="">
     <h2>Led Zeppelin</h2>
     <h3>The Song Remains</h3>
  </div>

  <div>
     <img src="https://cdn62.zvooq.com/pic?type=release&id=2531935&size=256x256&ext=jpg" alt="">
     <h2>Ария</h2>
     <h3>Герой асфальта</h3>
  </div>

</body>
</html>

Что-то пошло не так…

После добавление нового блока, вся верстка ”слетела”. Это произошло потому, что мы прописали стили для блока div:

CSS:
div {
   width: 220px;
   float: left;
   margin-right: 10px;
   padding: 10px;
   background-color: #1d1e23;
}
Следовательно, прописанные свойства применятся ко всем div'ам на странице. Чтобы избежать таких проблем, стили нужно прописывать через классы. Это атрибуты HTML (Вы же не забыли, что такое атрибуты?), которые являются своеобразным ярлыком элемента. Один и тот же класс можно присвоить множеству элементов.

Блоку, в который вложены заголовок и текст присвоим атрибут class="header", к каждому блоку с обложкой альбома - class="album-item". В CSS-файле переименуем селектор div в .album-item. После этих действий, страница вернется в нормальное состояние.
 

MSE-Script

Developer
Команда форума
Сообщения
762
Реакции
277
Баллы
63
Селекторы в CSS

Кроме селекторов классов, существуют и другие виды селекторов.
Универсальный селектор. Обозначается символом *. Используется для обозначения всех элементов на странице.

CSS:
* {
    /* Удалит внешние отступы у всех элементов */
    margin: 0;
}
Селектор элемента. Обозначает все соответствующие теги на странице. С ним мы уже работали ранее. Может использоваться для обнуления стандартных стилей у всех тегов или же для определения важного свойства.

CSS:
body {
    /* Удалит внутренний отступ у тега body */
    padding: 0;
}

a {
    /* Установит белый цвет всем ссылкам */
    color: #fff;
}
Селектор класса. Самый используемый и универсальный селектор, с ним Вы будете работать чаще всего. Использование других селекторов нужно свести к минимуму.

CSS:
.album-item {
    /* Установит фоновый цвет всем элементам с  атрибутом class=”album-item” */
    background-color: #1d1e23;
}
Селектор идентификатора. Этот селектор очень похож на селектор класса, за исключением того, что соответствующий элемент должен встречаться 1 раз на странице. В основном, идентификаторы используются при работе с JS, использование их в CSS является плохой практикой. Например, у вас существует элемент id="section", которому присвоены некоторые стили. Со временем сайт расширился и появилась задача сделать аналогичный блок с этими же стилями. Помните, что такой элемент может быть только один? У Вас остается 2 выхода: создавать новый элемент и полностью копировать стили или же переписывать правила с id="section" на class="section". В обоих случаях, это может стать серьезной проблемой.

CSS:
#section {
    width: 300px;
}
Селектор атрибута. Используется для всех элементов с указанным атрибутом. Как и в случае с селектором элемента, нужно использовать аккуратно, четко осознавая поведение.

CSS:
[type=”text”] {
    /* Удалит обводку у всех элементов с атрибутом type и значением ”text” */
    border: 0;
}
Селекторы могут быть вложенным:

CSS:
#section .album {
    /* Установит свойство float элементу .album, если он находится внутри  элемента #section*/
    float: left;
}
Такую запись называют каскадом. Старайтесь минимизировать использование каскада, так как он может привести к проблемам.

CSS:
#section div {
    /* Вы будете очень раздражены, если в будущем потребуется добавить div с другой шириной */
    width: 100px;
}

#section ul li {
    /* Как и в случае с div, все вложенные элементы li наследуют этот стиль*/
    padding-left: 10px;
}
Это основные селекторы, которые Вам нужно знать и понимать.


Задайте классу header ширину 710px, внутренний отступ 15px: внешний нижний отступ 20px и свойство background-image: url('http://365psd.ru/images/backgrounds/bg-dark-4830.png').



Кстати, возможно, вы уже заметили странный отступ слева. Это все те же “заводские” стили браузера. Опытные верстальщики сбрасывают перед началом работы. Существуют готовые наборы правил (например Normalize.css), которые позволяют сразу переопределить стандартные стили браузеров. Чтобы убрать этот отступ, задайте тегу body свойства:

CSS:
body {
    margin: 0;
    padding: 0;
}
 

MSE-Script

Developer
Команда форума
Сообщения
762
Реакции
277
Баллы
63
Фон в CSS

Для настройки фона используется универсальное свойство background. Его можно разделить на мелкие свойства из общей группы:

background-color - задает цвет фона
background-image - фоновое изображение, в качестве значения передается конструкция url(‘img_link.png’).
background-image - нужно ли повторять изображение
background-size - размер фонового изображения

Поэкспериментируйте с фоновым изображением блока header и попробуйте самостоятельно переделать вывод обложки с тега img на background-image.
 

MSE-Script

Developer
Команда форума
Сообщения
762
Реакции
277
Баллы
63
Обводка, границы и тени

Граница элемента находится между внутренним и внешним отступом элемента. Видимую обводку можно создать с помощью свойства border. В качестве значения, это свойство принимает 3 основных параметра: толщина обводки, стиль и цвет.

Добавим элементу .album-item свойство border: 1px solid #fff; Блоки примут вид:



Основные стили обводки: solid (строгая линия), dotted (точки), dashed (пунктирные линии). В работе, Вы будете сталкиваться в основном со стилем solid. Пунктирные линии и точки используются редко и в основном для ссылок. Так же, существуют другие стили обводки, например double. Эти стили использовались во времена IE6, вероятность встретится с ними сегодня мала. Обводку можно задать для конкретной стороны:

CSS:
.item {
    border-bottom: 1px solid #000;
}
Еще у свойства border есть коллега - свойство outline. От border оно отличается тем, что применимо только ко всем сторонам целиком, оно не влияет на размер элемента (border уменьшает элемент) и окружает его подобно тени. outline не заменяет border, а работает от него независимо. Соответственно, это поведение можно использовать для создания сложных разноцветных рамок.

Еще одним важнейшим элементом в оформлении сайта, являются тени. Тень задается свойством box-shadow. Удалим свойство border и добавим вместо него box-shadow: 6px 6px 15px 1px #4b4b4b;

1584265230022.png

CSS:
box-shadow: 6px 6px 15px 1px #4b4b4b;
              |  |   |    |    |
              |  |   |    |    |____ Цвет тени
              |  |   |    |___________  Растяжение тени
              |  |   |_______________ Размытие тени (чем больше значение, тем шире и бледнее тень)
              |  |__________________ Сдвиг по оси Y
              |______________________ Сдвиг по оси X
Кроме элементов, тень можно задавать тексту и ссылкам свойством text-shadow, имеющим аналогичный синтаксис (кроме растяжения). Не злоупотребляйте этим свойством, оно может вызвать избыточное жжение у посетителей Вашего сайта.

Повторим рассмотренные свойства:

font-family - Шрифт
font-size - Размер шрифта
font-weight - Жирность (толщина) шрифта
color - цвет текста
text-transform - преобразование регистра текста
text-shadow - тень текста
margin - внешний отступ
padding - внутренний отступ
background-color - задает цвет фона
background-image - фоновое изображение
background-image - нужно ли повторять изображение
background-size - размер фонового изображения
border - обводка элемента
outline - внешняя обводка
box-shadow - тень элемента

На сегодня все. Эта статья содержит базовую информацию о работе с CSS и некоторые важные подводные камни. После ее прочтения и повторения практической части, Вы сможете вносить правки в стили своего сайта и дорабатывать их без помощи сторонних специалистов.
 
Последнее редактирование:
Сверху