html, css .2
3.Базовые CSS-свойства: размер, текст, шрифт
4.CSS: классы и поведение блоков
1.Классы, блочная модель, типы элементов: как работает HTML-блок
2.Проектная работа
3.Классы
4.Блочная модель документа
5.Внешние отступы
6.Внутренние отступы
7.Короткая запись свойств
8.Оформление типовых компонентов
9.Добавление нескольких классов
10.Внешний и внутренний фокус элемента
11.Элементы блочные и строчные
12.Создаём зону контента
13.Селекторы вложенности
14.Всё, готово!
15.Заключение
3. Базовые CSS-свойства: размер, текст, шрифт
1.Базовый CSS: азы контроля за визуальным поведением
2.Проектная работа: постановка задачи
3.Размеры и величины в CSS. Пиксели
4.Размеры в %, vw, vh
5.Сброс браузерных стилей
6.Вложенность: обёртка div
7.Наследование
8.Определение цвета элемента веб-страницы
9.Фон элемента
10.Позиция, размер, повтор фона
11.Типографика
12.Заключение
Размеры и величины в CSS. Пиксели
Дизайн начинается со стиля, а стиль — с размеров, потому что они управляют формой.
Размеры чаще всего даются в пикселях. Так называют самые малые точки экрана, для которых можно установить цвет и силу свечения, сочетание этих точек создает итоговое изображение. Слово «пиксель» (англ. pixel) возникло в 1965 году, когда межпланетные станции начали передавать по одной точке фотографии поверхности Марса и Луны. Самый маленький неделимый элемент изображения надо было как-то назвать. Остановились на комбинации "pix" (на сленге фотографов «картинка») и "el" (от англ. element, «элемент»).
Пиксель обозначается буквами px без отрыва от числа: 100px значит «сто пикселей».
Вот CSS-код, который превращает элемент div в чёрный квадрат размерами 300 на 300 пикселей:
Скопировать код
CSS
div {
width: 300px;
height: 300px;
background-color: black;
}
Здесь определены базовые свойства любого блока веб-страницы: ширина width, высота height и цвет фона background-color. Если не задать фоновый цвет, квадрат всё равно получится, но с прозрачным фоном. Такой квадрат никто не увидит.
Перейти к заданию
Размеры в %, vw, vh
Размер элемента на экране зависит от разрешения дисплея, то есть количества пикселей в нём. Чем больше пикселей на дисплее, тем меньше на нём будет выглядеть элемент. Квадрат со стороной 300px на мобильном телефоне покажется огромным, а на мониторе в аэропорту потеряется.
Поэтому размеры элементов часто определяют относительно родителей или окна браузера.
1. Сравнение с родительским элементом — в процентах
В нашем примере для элемента div родительским был body, который по умолчанию занимает всё окно. Чтобы div стал вполовину меньше своего родителя, его ширина указывается так:width: 50%;
2. Сравнение с окном просмотра — в долях
По-английски окно просмотра документа в браузере называется “viewport”. Само окно становится единицей измерения — ширины vw(сокращение от viewport width) и высоты vh(сокращение от viewport height).
Например, если определить элементу свойство height: 50vh;, его высота станет равна половине высоты окна просмотра; 100vh — всей высоте, 40vh — 40% высоты.
Так устанавливают и ширину окна, оперируя свойством width и единицей vw.
Перейти к заданию
Сброс стилей
Внимание! Браузер преподнёс нам пару сюрпризов:
- по сторонам цветного блока появились странные отступы, которых мы не собирались делать и не указывали в коде;
- заголовкам уже назначены определённые шрифты, размеры, начертания, хотя никаких инструкций об этом у нас не спрашивали.
Любым элементам браузер назначает собственные стили — «дефолтные» или «стили по умолчанию».
Чтобы контролировать вёрстку, разработчики сбрасывают дефолтные стили, а потом начинают прописывать свои. На практике это делается подключением специального файла, который принято называть reset.css. В нем отменяются все стили, предписанные браузеру по умолчанию. Связь между нашим HTML-файлом и reset.cssустанавливается тегом link:
<link rel="stylesheet" href="reset.css">
Получается «пустой холст». Теперь всё готово для творческой работы.
Важно:
Браузер читает код веб-страницы сверху вниз. Тег <link> со ссылкой на reset.css должен располагаться выше таблицы ваших стилей, иначе они тоже будут сброшены.
Интересно:
Подключить файл reset.css, который разработал Eric A. Meyer — лишь один из возможных вариантов работы со стилями, полученными от браузера. В среде разработчиков не угасает дискуссия о том, как правильно.
Альтернативный способ — вместо reset.cssподключать файл normalize.css, который создал Nicolas Gallagher. Отличие normalize.css в том, что стили браузера не сбрасываются целиком, но приводятся к единообразию отображения.
В Яндексе популярен подход, отвергающий применение каких-либо специальных файлов для работы со стилями браузера. Программист переопределяет все стили для каждого компонента вручную. Это обеспечивает независимость отдельных частей страницы от окружения.
Вначале мы будем использовать reset.css, так как концепцию полного сброса стилей проще понять, а результат работы вашего кода будет нагляднее.
Перейти к заданию
Вложенность
Пока что мы верстали самым простым способом: сначала создавали элемент, потом определяли его стиль. На реальных современных сайтах элементы объединены в блоки по смыслу. Так, пост в социальной сети состоит из описания, картинки, комментариев. Эти компоненты вложены друг в друга.
Нередко блоки создаются только для того, чтобы определить разным элементам общий стиль. В таких случаях чаще всего используется уже знакомый нам тег <div></div>. Он создаёт абстрактный элемент (блок, коробку, обёртку), куда можно вложить любые другие элементы.
Перейти к заданию
Наследование
Стиль родительских элементов оказывает влияние на стиль дочерних.
Например, вот здесь для абзаца p элемент div — родительский:
Скопировать код
HTML
<div>
<p>Задача веб-дизайна — сделать не только красиво. Задача веб-дизайна — сделать как можно проще и удобнее для пользователя. Это важно знать не только дизайнеру, но и разработчику.</p>
</div>
Когда абзацу p не задан конкретный размер шрифта, цвет текста или выравнивание, он будет «прислушиваться» к своему родителю, т.е. элементу div. И если для div определить свойство font-size: 40px;, высота символов абзаца тоже станет 40 пикселей. Установите для divвыравнивание по центру text-align: center; — текст абзаца p выровняется по центру.
Так можно форматировать всю страницу разом: назначить элементу body свойство text-align: center;, и текстовые элементы попытаются встать по центру. Этого не произойдет только с отдельными элементами, насчёт которых уже есть иные указания, например, text-align: right;
Такая схема называется наследование. Работает с большинством простых CSS-свойств (но не со всеми).
Перейти к заданию
Цвета
В CSS четыре главных стандарта определения цвета:
- HTML-colors. Список английских названий цветов, которые понимает браузер. Самый простой, но и самый непопулярный в реальной разработке способ.
- RGB-палитра. Описание цвета комбинацией красного (R), зеленого (G) и синего (B). Наше зрение устроено так, что любой оттенок складывается из этих трёх. Подбирая яркость каждого, можно получить какой угодно цвет. Диапазон яркости — от 0 до 255.
Например, чистый синий задаётся так: color: rgb(0, 0, 255); Здесь яркость синего цвета максимальна, а красного и зеленого — равна 0.
Черный цвет — rgb(0, 0, 0).
Белый цвет — rgb(255, 255, 255).
Небесно-голубой цвет — rgb(0, 150, 200).
- HEX-colors (от слова hexadecimal, шестнадцатеричный). Принцип тот же, что в стандарте rgb, только числа от 0 до 255заменяют на соответствующую им в шестнадцатеричной системе счисления комбинацию двух символов из ряда 0 1 2 3 4 5 6 7 8 9 A B C D E F. Чтобы задать цвет, хватает шести символов.
Браузер узнает стандарт HEX-colors по символу хеш — “решётке” #. Так, жёлтый цвет вместо rgb(255, 255, 0) обозначается #FFFF00. Буквы можно писать как строчными, так и заглавными. Например, #F001G3 или #a22c33. В разработке вы чаще увидите написание #ffffff вместо white или #000000 вместо black.
- RGBA. Буква "A" означает альфа-канал, отвечающий за прозрачность.
В CSS у цвета две составляющие: оттенок (определённое соотношение красного, зелёного и синего) и прозрачность. По умолчанию прозрачность минимальна. Если нужно сделать серый фон rgb(211, 211, 211) бледнее, т.е. прозрачнее в 5 раз, в стандарте RGBA это выглядит так:
rgba(211, 211, 211, 0.2)
Значение 0.2 означает инструкцию для браузера: сделать элемент на 20% непрозрачным (или на 80% прозрачным). Величина прозрачности меняется от 1 (самый яркий цвет, устанавливается по умолчанию) до 0 (самый бледный, полное выцветание).
Интересно:
Десятичную дробь в CSS и многих других языках можно писать без нуля: 0.5 превращается в .5 и, например, полупрозрачный зеленый цвет задаётся так:
rgba(0, 255, 0, .5);
Перейти к заданию
Фон элемента
Когда название свойства пишется не в одно слово (например, color), а через дефис (background-color), это значит, что мы имеем дело со свойством из определённой группы.
Так, для стиля фона (background) определяют массу дополнительных параметров: цвет, изображение, размер изображения и т.д. Параметр указывается после дефиса.
Например, цвет фона:
Скопировать код
CSS
div {
background-color: red;
}
или фоновое изображение:
Скопировать код
CSS
div {
background-image: url(https://yastatic.net/s3/auth2/_/msoffice.d1ada09f.svg);
}
Обратите внимание на значение в формате url() — внутри скобок нужно писать путь до изображения в интернете или относительно CSS-файла. Об относительных путях поговорим в отдельном уроке.
Перейти к заданию
Позиция, размер, повтор фона
Из управляющих поведением фона свойств в 95% случаев нужны три:
background-size, background-repeat и background-position.
- background-size, задает размеры фонового изображения (англ. size, «размер»).
Скопировать код
CSS
div {
background-size: 200px 300px;
}
Первое значение — ширина, второе — высота. Для этого свойства доступны также специальные значения, которые указывают вместо размеров:
- background-size: cover; — значение cover(«накрыть») адаптирует (если нужно, увеличит и повторит) фоновое изображение так, чтобы оно занимало всю площадь блока;
- background-size: contain; — значение contain(«содержать») подгонит фоновое изображение так, чтобы оно умещалось в блок.
- background-repeat, может принимать значение no-repeat («не повторять»), отменяя существующий по умолчанию повтор фонового изображения.
Скопировать код
CSS
div {
background-repeat: no-repeat;
}
Альтернативные значения этого свойства: repeat-x— повторять фон только по горизонтали; и repeat-y— повторять фон только по вертикали.
- background-position, задаёт положение фона, сдвигая его по горизонтали (первое значение) и по вертикали (второе значение).
Скопировать код
CSS
div {
background-position: 200px 100px;
}
Для этого свойства также доступны специальные значения — left, right и center для горизонтального выравнивания, и top, bottom и center — для вертикального.
Если фон центрируют и по горизонтали, и по вертикали, принято писать одно значение:
Скопировать код
CSS
div {
background-position: center;
}
Перейти к заданию
Типографика
Среди прочих групп свойств самые востребованные — две:
font (отвечает за шрифт) и text (отвечает за поведение текстовых элементов).
Из группы font мы ранее использовали:
font-size— отвечает за размер шрифта,font-weight— отвечает за вес шрифта (толщину, т.е. отношение ширины штриха к высоте буквы),font-family— отвечает за семейcтво шрифтов,font-style— отвечает за начертание (italic — курсивный шрифт, oblique — наклонный шрифт, normal — состояние шрифта по умолчанию).
Из группы text нам уже знакомо свойство text-align — выравнивание.
Очень часто нужно также
text-decoration: underline; — может сделать текст подчеркнутым;
или text-decoration: none; (убирает подчёркивание, в том числе то, которое в браузерах по умолчанию задано для гиперссылок).
Для работы с текстовыми элементами востребовано ещё одно свойство:
text-transform: uppercase; — изменяет регистр букв на заглавные или
text-transform: lowercase; — на строчные.
Мы также устанавливали интерлиньяж свойством line-height, которое определяет высоту строки.
Добавим ещё один полезный инструмент: letter-spacing — определяет расстояние между символами в тексте. Может измеряться в пикселях и относительных величинах.
Перейти к заданию
4. CSS: классы и поведение блоков
1.Классы, блочная модель, типы элементов: как работает HTML-блок
2.Проектная работа
3.Классы
4.Блочная модель документа
5.Внешние отступы
6.Внутренние отступы
7.Короткая запись свойств
8.Оформление типовых компонентов
9.Добавление нескольких классов
10.Внешний и внутренний фокус элемента
11.Элементы блочные и строчные
12.Создаём зону контента
13.Селекторы вложенности
14.Всё, готово!
15.Заключение
Классы
Элементам, которым нужно придать общий стиль, даётся общее имя. Оно называется «класс». В HTML-тегах классы указываются атрибутом class.
Например, нужно сделать красными один заголовок h2 и пару заголовков h3. Им присваивается класс “red-text”:
В таблице стилей селектор класса начинается с точки:
Скопировать код
CSS
.red-text {
color: #f00;
}
Это правило значит, что шрифт всех элементов с классом "red-text" — красный. Все прочие заголовки останутся чёрными.
Такой способ определения стилей считается самым точным и надёжным в CSS. Поэтому в дальнейшем мы будем задавать стили именно для классов и постепенно откажемся от использования тегов в качестве селекторов.
Важно:
Имена классов пишут латиницей, начиная с букв, а не цифр или спецсимволов.
Перейти к заданию
Блочная модель документа
Вы уже заметили, что элементы на странице следуют друг за другом. Такая организация контента задана браузеру по умолчанию и называется «поток». Элементы в потоке, которые занимают всю ширину родителя, и отображаются с новой строки — это «блоки» (блочные элементы).
Из таких нам уже знакомы заголовки, абзацы и блоки div. Что непременно есть у любого блока?
- размеры (высота и ширина);
- границы;
- внешние отступы (поля);
- внутренние отступы (иногда их называют просто словом «отступы»).
Поговорим подробнее о границах. Для определения границ существует группа свойств border:
- border-color — цвет границы,
- border-width— толщина границы,
- border-style — начертание границы. Самые популярные значения этого свойства: solid(сплошная линия), dashed (пунктирная линия), dotted (линия точек), double (двойная линия).
Перейти к заданию
Внешние отступы
Внешний отступ — это поле с внешней стороны границы блока. Устанавливается свойствами группы margin:
- margin-top — отступ сверху,
- margin-right — отступ справа,
- margin-bottom — отступ снизу,
- margin-left — отступ слева.
Внешние отступы создают пустое пространство между границей своего блока и окружающими снаружи элементами.
У внешнего отступа есть особое значение auto, которое автоматически устанавливает максимально возможный отступ по горизонтали. Если задать свойствам margin-left и margin-rightзначение auto, то получатся максимальные отступы с обеих сторон, и элемент встанет по центру своего родителя. К примеру, так элемент располагают точно посередине страницы.
Перейти к заданию
Внутренние отступы
В отличие от внешних отступов, внутренние («паддинги») смотрят от границы внутрь блока и там ищут контент или дочерние элементы. При обнаружении — создают свободное пространство между границей блока и границей дочерних элементов.
Внутренние отступы задаются группой свойств padding. Это слово взято у портных и означает подплечник, подушечку между тканью пиджака и плечом. По аналогии: человек в пиджаке — это блок, сам пиджак — видимая внешняя граница блока, тело под пиджаком — это контент. Чем больше padding, тем крупнее силуэт при том же объёме контента.
Направления, по которым установлен внутренний отступ, задаются уточняющими свойствами:
- padding-top — верхний внутренний отступ;
- padding-right — правый внутренний отступ;
- padding-bottom — нижний внутренний отступ;
- padding-left — левый внутренний отступ.
Важно:
Для padding не существует специального значения auto.
Перейти к заданию
Короткая запись свойств
Чаще всего нужно установить для блока отступы с разных сторон. В таких случаях лучше записывать свойство в одну строку, словом margin или padding, без уточнений.
4 значения. Разные отступы со всех сторон
Скопировать код CSS padding: 20px 15px 10px 5px;
Внутренний отступ сверху 20 пикселей, справа 15, снизу 10 и слева 5. Перечисление ведётся через пробел, начиная сверху и далее вокруг блока по часовой стрелке.
3 значения. Справа и слева отступы одинаковы
Скопировать код CSS margin: 10px 20px 30px;
Отступы применяются к верхней, правой, нижней границам блока. В данном случае размер поля слева будет 20 пикселей — как и справа.
2 значения. Верхний отступ равен нижнему, правый левому
Скопировать код CSS padding: 20px 10px;
Верхний и нижний внутренние отступы установлены в 20 пикселей, а правый и левый — в 10.
1 значение. Отступы со всех сторон одинаковы
Скопировать код CSS margin: 20px;
Со всех сторон блока — поля шириной/высотой 20 пикселей.
Перейти к заданию
Оформление типовых компонентов
Настал момент, когда подходы к вёрстке веб-страниц и бумажных книг начинают радикально отличаться. Разница между книжным текстом и контентом веб-страницы в том, что текст на сайте может измениться — стать короче либо длиннее.
Макет нашей страницы строится на сетке из блочных элементов, родителей и потомков. Например, внутри карточек с правилами нужно разместить картинки, заголовки и абзацы.
Чтобы блоки с изменившимся текстом не выпали из сетки, высоту блоков одного класса рекомендуется задавать свойством min-height, минимальная высота. Допустим, она установлена в 300 пикселей:
Скопировать код CSS min-height: 300px;
При любой длине текста блок с таким свойством окажется не меньше 300 пикселей. Если потом в один из текстов неожиданно допишут «много букв», контент не обрежется и не будет торчать наружу — весь блок растянется, чтобы вместить новый текст целиком.
Перейти к заданию
Добавление нескольких классов
Часто элементу нужно задать несколько классов. Дополнительные классы пишут внутри значения атрибута через пробел:
Подобная запись означает, что у элемента div есть и класс first-class, и класс second-class.
Общие свойства можно задать правилом для первого класса first-class, а уникальные — индивидуальными классами, имена которых указываются на месте second-class.
HTML
Скопировать код HTML <div class="column left"></div> <div class="column right"></div>
CSS
Скопировать код
CSS
.column {
width: 50%;
color: grey;
}
.left {
font-size: 16px;
}
.right {
font-size: 24px;
}
Подобная запись означает, что ширина и цвет шрифта у двух блоков с классом column одинаковы, а размеры шрифта разные и заданы при помощи дополнительных классов left и right.
Перейти к заданию
Внешний и внутренний фокус элемента
Сейчас размеры изображений всех карточек одинаковы, но ко второму добавлена граница по 5 пикселей с каждой стороны. От этого блок выглядит крупнее остальных.
Такую проблему решает свойство box-sizing. Оно определяет, будут ли границы и внутренние отступы увеличивать размеры блока. По умолчанию это свойство имеет значение content-box: все границы будут отрисованы с внешней стороны элемента, а внутренний отступ расширит сам элемент, создавая простор для контента.
Установив для box-sizing значение border-box, мы изменим фокус блока: границы отрисовываются внутрь, и внутренний отступ не растягивает элемент.
Перейти к заданию
Элементы блочные и строчные
Кроме блочных элементов, в HTML есть ещё строчные. Например, ссылки.
Блочный элемент занимает по умолчанию всю ширину родительского элемента и располагается на отдельной строке.
Строчные элементы занимают ровно столько места, сколько контента в них содержится. Если они идут подряд, то по умолчанию все расположены на одной строке. Им невозможно задать ширину или высоту.
Вёрстка часто требует, чтобы элемент вёл себя одновременно как блок с определёнными размерами, и как слово в предложении. Между такими словами существуют пробелы, а сами они расположены на одной строке.
Для таких случаев элементу задают комбинированный тип — блочно-строчный. Переопределяется тип свойством display:
- display: block; — сделает элемент блочным;
- display: inline; — сделает элемент строчным;
- display: inline-block; — сделает элемент блочно-строчным.
Благодаря этому свойству можно построить сетку элементов, располагая блоки в ряд.
ВАЖНО:
Когда вы делаете элемент блочно-строчным, он становится чувствительным к вертикальному выравниванию. Иногда происходит так, что не все элементы прижаты к верхнему краю. На помощь здесь приходит специальное свойство vertical-align со значением top. Оно работает с любыми элементами, кроме блочных.vertical-align может быть определен в пикселях или специальными значениями. Из них самые популярные — top, bottom, middle, baseline
Перейти к заданию
Создаём зону контента
Наш макет позволяет хорошо закрепить тему отступов. Чтобы расположить карточки в две колонки, квадратом 2 x 2, сформируем зону контента.
Подберём ей такую ширину, что в строке уместятся только два правила. Отступами добавим пространство вокруг зоны и между колонками.
Перейти к заданию
Селекторы вложенности
Теперь нужно задать одинаковые стили всем заголовкам внутри блока с классом "card", не трогая остальные заголовки. Такую же задачу надо решить для абзацев.
Мы должны уметь сказать браузеру: «найди все абзацы, которые будут дочерними по отношению к элементам div». На языке CSS подобное высказывание выглядит как селектор наследования:
Скопировать код
CSS
div p { }
Ставя p через пробел следом за div, мы указываем, что p для div — элемент дочерний, наследник.
Так можно работать не только с тегами, но и с классами:
Скопировать код
CSS
.my-class div { }
Здесь выбирается любой div, оказавшийся дочерним по отношению к элементу с классом "my-class".
Перейти к заданию
Всё, готово!
Мы на финишной прямой. Для завершения макета недостает только footer’а или «подвала» сайта. Так разработчики называют нижний колонтитул страницы.
Обычно там содержится информация об авторах проекта, контакты, адреса, логотипы.
Наши новые навыки позволяют реализовать footerбезо всяких затруднений.
Это пример блока, элементы которого объединены по смыслу общей темой.
Перейти к заданию