Векторная графика.
В вебе используют 2 типа изображений, растровые - .jpeg, .png и векторные .noscript.
Качество растровых изображений ухудшается при изменении размера картинки, а векторных остается неизменным, но векторные весят больше и сильнее грузят браузер.
Поэтому рекомендуется использовать растровые картинки для фотографий и сложных изображений, а векторные для иконок.
SVG это язык для создания изображений похожий на HTML, поэтому картинки в .noscript формате можно стилизовать при помощи CSS.
Добавить noscript-изображение на страницу можно через атрибут src тега <img>, <img src=”my-noscript.noscript”>, но тогда не получится стилизовать его в CSS.
Второй способ это открыть .noscript в редакторе, скопировать код и добавить его в html-разметку. Тогда вы сможете стилизовать изображение.
Подробнее о SVG читайте в статье.
В продуктовой разработке программисты не вставляют каждую иконку вручную, а используют для этого технологию noscript-спрайты.
Подробнее о работе со спрайтами читайте в статье.
В вебе используют 2 типа изображений, растровые - .jpeg, .png и векторные .noscript.
Качество растровых изображений ухудшается при изменении размера картинки, а векторных остается неизменным, но векторные весят больше и сильнее грузят браузер.
Поэтому рекомендуется использовать растровые картинки для фотографий и сложных изображений, а векторные для иконок.
SVG это язык для создания изображений похожий на HTML, поэтому картинки в .noscript формате можно стилизовать при помощи CSS.
Добавить noscript-изображение на страницу можно через атрибут src тега <img>, <img src=”my-noscript.noscript”>, но тогда не получится стилизовать его в CSS.
Второй способ это открыть .noscript в редакторе, скопировать код и добавить его в html-разметку. Тогда вы сможете стилизовать изображение.
Подробнее о SVG читайте в статье.
В продуктовой разработке программисты не вставляют каждую иконку вручную, а используют для этого технологию noscript-спрайты.
Подробнее о работе со спрайтами читайте в статье.
Отзывчивые (responsive) изображения - изображения, которые хорошо отображаются на любых устройствах, компьютер, планшет, мобильный.
Думаю каждый сталкивался с ситуацией, когда сайт хорошо выглядит и быстро открывается на компьютере, но плохо грузится и выглядит ужасно на мобильном.
Чтобы предотвратить такие ситуации в HTML добавили атрибуты srcset и sizes для тега <img>, которые позволяют загружать картинки с меньшим разрешением для небольших экранов.
И атрибут <picture>, который позволяет загружать разные картинки для разных устройств, например панорамное фото на компьютере и детализированное на мобильном.
Статья о том как работать с отзывчивыми изображениями в HTML.
Думаю каждый сталкивался с ситуацией, когда сайт хорошо выглядит и быстро открывается на компьютере, но плохо грузится и выглядит ужасно на мобильном.
Чтобы предотвратить такие ситуации в HTML добавили атрибуты srcset и sizes для тега <img>, которые позволяют загружать картинки с меньшим разрешением для небольших экранов.
И атрибут <picture>, который позволяет загружать разные картинки для разных устройств, например панорамное фото на компьютере и детализированное на мобильном.
Статья о том как работать с отзывчивыми изображениями в HTML.
Знакомство с CSS.
CSS - каскадные таблицы стилей. С их помощью веб-разработчики задают внешний вид страницы.
Файл таблицы стилей имеет разрешение .css и состоит из набора правил, описывающих как будут выглядеть части страницы. Давайте рассмотрим простое правило на картинке в начале поста.
Для того, чтобы задать css-правило укажите селектор - тег или идентификатор тега (class или id).
В нашем случае в качестве селектора указан тег заголовка h1.
Дальше в фигурных скобках указывают “свойство тега: значение тега;”
Для одного тега можно указать сколько угодно свойств, в нашем случае 2, цвет шрифта - красный и размер шрифта 5em.
Разработкой правил CSS занимается Рабочая группа CSS в соответствие стандартам W3C.
Разработчики браузеров стараются поддерживать корректную работу всех CSS правил, но на это нужно время. Проверить какие браузеры поддерживают нужное правило можно в Руководстве по CSS.
#фронтенд_css_урок1
CSS - каскадные таблицы стилей. С их помощью веб-разработчики задают внешний вид страницы.
Файл таблицы стилей имеет разрешение .css и состоит из набора правил, описывающих как будут выглядеть части страницы. Давайте рассмотрим простое правило на картинке в начале поста.
Для того, чтобы задать css-правило укажите селектор - тег или идентификатор тега (class или id).
В нашем случае в качестве селектора указан тег заголовка h1.
Дальше в фигурных скобках указывают “свойство тега: значение тега;”
Для одного тега можно указать сколько угодно свойств, в нашем случае 2, цвет шрифта - красный и размер шрифта 5em.
Разработкой правил CSS занимается Рабочая группа CSS в соответствие стандартам W3C.
Разработчики браузеров стараются поддерживать корректную работу всех CSS правил, но на это нужно время. Проверить какие браузеры поддерживают нужное правило можно в Руководстве по CSS.
#фронтенд_css_урок1
Чтоб добавить файл стилей на страницу, укажите ссылку на него в теге <head>
Вы можете задать одинаковое правило нескольким элементам страницы, для этого перечислите их через запятую, а дальше укажите правило в фигурных скобках. Например, правило ниже задает размер шрифта 14 пикселей для параграфов и списков.
p, ul {
font-size: 14px;
}
Если вы хотите стилизовать конкретный элемент, задайте ему атрибут class в html, тогда стили будут выглядеть как показано в примере ниже. Здесь задаем элементу с классом section верхний и нижний внутренние отступы 100 пикселей и боковые отступы 0.
.section {
padding: 100px 0;
}
Подробнее о стилизации элементов.
Браузеры по-умолчанию задают базовые стили для страницы. Если они вам не подходят, замените своими. С этой проблемой разработчики сталкиваются давно и придумали универсальные методы сброса браузерных стилей. #фронтенд_css_урок1
Вы можете задать одинаковое правило нескольким элементам страницы, для этого перечислите их через запятую, а дальше укажите правило в фигурных скобках. Например, правило ниже задает размер шрифта 14 пикселей для параграфов и списков.
p, ul {
font-size: 14px;
}
Если вы хотите стилизовать конкретный элемент, задайте ему атрибут class в html, тогда стили будут выглядеть как показано в примере ниже. Здесь задаем элементу с классом section верхний и нижний внутренние отступы 100 пикселей и боковые отступы 0.
.section {
padding: 100px 0;
}
Подробнее о стилизации элементов.
Браузеры по-умолчанию задают базовые стили для страницы. Если они вам не подходят, замените своими. С этой проблемой разработчики сталкиваются давно и придумали универсальные методы сброса браузерных стилей. #фронтенд_css_урок1
Структура CSS.
Стили, которые вы задаете в файле .css имеют приоритет, который зависит от места расположения и типа селектора.
Например, в примере ниже, содержимое параграфа <p class=”blue”> будет красного цвета. Так как правило, которое задает красный цвет расположено ниже.
p {
color: blue;
}
p {
color: red;
}
В следующем примере содержимое параграфа <p class=”blue”> будет синим, так как приоритет стиля, с селектором-классом выше чем стиля с селектором-тегом.
.blue {
color: blue;
}
p {
color: red;
}
Все css-правила состоят из набора пар “свойство: значение;”. Свойства и значения всегда пишутся с маленькой буквы. Значения чаще всего бывают в форме числа или слова, но CSS также позволяет задавать простые математические выражения в качестве значений, как в примере ниже.
.box {
width: calc(90% - 30px);
}
Помимо стилей, которые мы задаем селекторам в CSS есть @правила. Например, ниже задано медиа-выражение, которое делает синий цвет фона для страниц с минимальной шириной окна 30em.
@media (min-width: 30em) {
body { background-color: blue; }
}
Подробнее о том, как правильно оформлять файлы стилей.
Прежде чем применить CSS-стили к HTML-разметке браузер преобразует разметку в DOM-дерево, объектную модель документа.
Подробнее о том, как браузер применяет стили.
В прошлом посте я упоминала о том, что новые css-свойства поддерживают не все браузеры. Поэтому некоторым свойствам нужно добавлять браузерные префиксы:
-webkit-: браузеры Chrome, Safari, Opera;
-moz-: браузер Mozilla Firefox;
-ms-: браузер Internet Explorer, Microsoft Edge.
Ниже пример использования.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Современные редакторы, например VSCode поддерживают автоматическую установку префиксов.
#фронтенд_css_урок2
Стили, которые вы задаете в файле .css имеют приоритет, который зависит от места расположения и типа селектора.
Например, в примере ниже, содержимое параграфа <p class=”blue”> будет красного цвета. Так как правило, которое задает красный цвет расположено ниже.
p {
color: blue;
}
p {
color: red;
}
В следующем примере содержимое параграфа <p class=”blue”> будет синим, так как приоритет стиля, с селектором-классом выше чем стиля с селектором-тегом.
.blue {
color: blue;
}
p {
color: red;
}
Все css-правила состоят из набора пар “свойство: значение;”. Свойства и значения всегда пишутся с маленькой буквы. Значения чаще всего бывают в форме числа или слова, но CSS также позволяет задавать простые математические выражения в качестве значений, как в примере ниже.
.box {
width: calc(90% - 30px);
}
Помимо стилей, которые мы задаем селекторам в CSS есть @правила. Например, ниже задано медиа-выражение, которое делает синий цвет фона для страниц с минимальной шириной окна 30em.
@media (min-width: 30em) {
body { background-color: blue; }
}
Подробнее о том, как правильно оформлять файлы стилей.
Прежде чем применить CSS-стили к HTML-разметке браузер преобразует разметку в DOM-дерево, объектную модель документа.
Подробнее о том, как браузер применяет стили.
В прошлом посте я упоминала о том, что новые css-свойства поддерживают не все браузеры. Поэтому некоторым свойствам нужно добавлять браузерные префиксы:
-webkit-: браузеры Chrome, Safari, Opera;
-moz-: браузер Mozilla Firefox;
-ms-: браузер Internet Explorer, Microsoft Edge.
Ниже пример использования.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Современные редакторы, например VSCode поддерживают автоматическую установку префиксов.
#фронтенд_css_урок2
И на десерт видео о том, что один сайт может выглядеть по разному в разных браузерах и это нормально.
После изучения этого и предыдущего поста, потренируйтесь стилизовать страницы на практике.
После изучения этого и предыдущего поста, потренируйтесь стилизовать страницы на практике.
В предыдущем посте я рассказывала о том, что все стили записывают в формате:
селектор {свойство: значение;}
В качестве селекторов выступают теги, классы и идентификаторы.
Эти селекторы можно сочетать друг с другом, чтобы задать специфические правила.
Такие сочетания делятся на:
Контекстные селекторы используют для того чтобы задать стиль тегу, который находится внутри другого тега.
Тег1 Тег2 { ... }
Соседние селекторы используют для задания стилей тегам, которые идут друг за другом.
Селектор 1 + Селектор 2 { Описание правил стиля }
Дочерние селекторы используют для задания стилей тегу, который находится на первом уровне вложенности у родителя.
<div><p><b></b></p></div> - <p> дочерний для <div>, <b> дочерний для <p>.
Селектор 1 > Селектор 2 { Описание правил стиля }
Селекторы атрибутов используют для задания стилей тегу с определенным атрибутом.
[атрибут] { Описание правил стиля }
Селектор[атрибут] { Описание правил стиля }
#фронтенд_css_урок3
селектор {свойство: значение;}
В качестве селекторов выступают теги, классы и идентификаторы.
Эти селекторы можно сочетать друг с другом, чтобы задать специфические правила.
Такие сочетания делятся на:
Контекстные селекторы используют для того чтобы задать стиль тегу, который находится внутри другого тега.
Тег1 Тег2 { ... }
Соседние селекторы используют для задания стилей тегам, которые идут друг за другом.
Селектор 1 + Селектор 2 { Описание правил стиля }
Дочерние селекторы используют для задания стилей тегу, который находится на первом уровне вложенности у родителя.
<div><p><b></b></p></div> - <p> дочерний для <div>, <b> дочерний для <p>.
Селектор 1 > Селектор 2 { Описание правил стиля }
Селекторы атрибутов используют для задания стилей тегу с определенным атрибутом.
[атрибут] { Описание правил стиля }
Селектор[атрибут] { Описание правил стиля }
#фронтенд_css_урок3
Сделаю один большой тест по CSS, если наберется больше 10 голосов за)
Если вам нужно задать один стиль для всех элементов страницы, используйте селектор *
* { Описание правил стиля }
Кроме селекторов для задания стилей используют псевдоклассы.
Псевдоклассы определяют внешний вид элемента в зависимости от действий пользователя или расположения элемента в DOM.
Например псевдокласс :hover обозначает элемент, на который навели мышью. В примере ниже указано, что при наведении на ссылку ее текст становится красным.
a:hover {
color: red;
}
При помощи CSS можно добавить к тегам элементы, которых нет в html-разметке. Такие элементы называются псевдоэлементами. Их удобно использовать для задания маркеров списка. В примере ниже в качестве маркера элементов списка задан символ ₪ с Юникодом "\20aa ".
li:before {
content: "\20aa "; /* Добавляем перед элементом списка символ в юникоде */
}
Если один html-элемент вложен в другой и ему не заданы стили, то для него действуют стили родительского элемента. Это правило называется наследованием.
Как видите способов задания селекторов немало, чтобы не запутаться в них разработчики браузеров придумали правила, по которым браузер определяет приоритет стиля.
Пройдите по ссылкам, в конце каждой статьи есть вопросы для самопроверки😉
#фронтенд_css_урок3
* { Описание правил стиля }
Кроме селекторов для задания стилей используют псевдоклассы.
Псевдоклассы определяют внешний вид элемента в зависимости от действий пользователя или расположения элемента в DOM.
Например псевдокласс :hover обозначает элемент, на который навели мышью. В примере ниже указано, что при наведении на ссылку ее текст становится красным.
a:hover {
color: red;
}
При помощи CSS можно добавить к тегам элементы, которых нет в html-разметке. Такие элементы называются псевдоэлементами. Их удобно использовать для задания маркеров списка. В примере ниже в качестве маркера элементов списка задан символ ₪ с Юникодом "\20aa ".
li:before {
content: "\20aa "; /* Добавляем перед элементом списка символ в юникоде */
}
Если один html-элемент вложен в другой и ему не заданы стили, то для него действуют стили родительского элемента. Это правило называется наследованием.
Как видите способов задания селекторов немало, чтобы не запутаться в них разработчики браузеров придумали правила, по которым браузер определяет приоритет стиля.
Пройдите по ссылкам, в конце каждой статьи есть вопросы для самопроверки😉
#фронтенд_css_урок3
БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке.
Как вы поняли из предыдущего урока, существует большое разнообразие селекторов.
Чтобы упростить разработчикам жизнь в Яндексе придумали компонентный подход к веб-разработке. В его основе лежит идея разделения интерфейса на независимые блоки.
Каждый из блоков верстается отдельно и его стили не зависят от общих стилей и стилей других блоков.
Для этого каждому блоку и элементам, которые он содержит, задают специальные классы. Эти классы служат селекторами, которые используют для задания стилей в CSS.
БЭМ используют в большинстве современных проектов, поэтому мы будем разбираться с этой методологией на марафоне по верстке.
Рекомендую заранее ознакомиться с теорией БЭМ и разобраться с примерами.
Понятное видео о том зачем нужен БЭМ.
#фронтенд_css_урок4
Как вы поняли из предыдущего урока, существует большое разнообразие селекторов.
Чтобы упростить разработчикам жизнь в Яндексе придумали компонентный подход к веб-разработке. В его основе лежит идея разделения интерфейса на независимые блоки.
Каждый из блоков верстается отдельно и его стили не зависят от общих стилей и стилей других блоков.
Для этого каждому блоку и элементам, которые он содержит, задают специальные классы. Эти классы служат селекторами, которые используют для задания стилей в CSS.
БЭМ используют в большинстве современных проектов, поэтому мы будем разбираться с этой методологией на марафоне по верстке.
Рекомендую заранее ознакомиться с теорией БЭМ и разобраться с примерами.
Понятное видео о том зачем нужен БЭМ.
#фронтенд_css_урок4
Верстка текста и работа со шрифтами в CSS.
Текст один из самых важных источников информации на сайте. От того насколько правильно выбраны шрифты и сверстана типографика будет зависеть сколько времени проведет пользователь на странице.
CSS свойства, которые стилизуют шрифты, делятся на 2 типа:
Font styles - свойства, которые влияют на внешний вид шрифта. Например, размер и жирность, курсив.
Text layout styles - свойства, которые влияют на выравнивание шрифта в блоке, в котором расположен текст. Например, межстрочный интервал, пространство между буквами, выравнивание по левому краю.
Часто используемые font styles:
color - задает цвет текста.
font-family - задает тип шрифта и семейство шрифтов.
В примере ниже параграфу задан красный цвет и шрифт Helvetica. В случае если Helvetica будет недоступен у пользователя, отобразится шрифт Arial, елси и он будет недоступен, отобразится доступный шрифт из семейства sans-serif.
p {
color: red;
font-family: Helvetica, Arial, sans-serif;
}
font-size - задает размер шрифта в px - пикселях, em - единица измерения равная размеру шрифта родительского элемента.
font-style - задает начертание шрифта, обычный или курсив.
font-weight - жирность, может быть обозначена словом или числом от 100 до 900
text-transform - используют если нужно написать весь текст большими или маленькими буквами.
text-decoration - используют если нужно подчеркнуть или зачеркнуть текст или убрать подчеркивание у ссылки.
text-shadow - задает тень для текста.
Часто используемые layout styles:
text-align - выравнивание текста внутри контейнера.
line-height - интерлиньяж, высота одной строки текста.
letter-spacing - расстояние между буквами.
word-spacing - расстояние между словами.
Примеры работы и полный перечень свойств для стилизации шрифтов.
Веб-безопасные шрифты можно использовать сразу, так как они поддерживаются всеми ОС и браузерами. Остальные нужно подключать на страницу самостоятельно.
Чтобы подключить шрифты используют @правило - @font-face. В примере ниже указано, что наш шрифт будет называться myFont, а символы шрифта будем брать из файла myFont.woff
@font-face {
font-family: "myFont";
src: url("myFont.woff");
}
Пошаговое руководство по подключению шрифтов. #фронтенд_css_урок5
Текст один из самых важных источников информации на сайте. От того насколько правильно выбраны шрифты и сверстана типографика будет зависеть сколько времени проведет пользователь на странице.
CSS свойства, которые стилизуют шрифты, делятся на 2 типа:
Font styles - свойства, которые влияют на внешний вид шрифта. Например, размер и жирность, курсив.
Text layout styles - свойства, которые влияют на выравнивание шрифта в блоке, в котором расположен текст. Например, межстрочный интервал, пространство между буквами, выравнивание по левому краю.
Часто используемые font styles:
color - задает цвет текста.
font-family - задает тип шрифта и семейство шрифтов.
В примере ниже параграфу задан красный цвет и шрифт Helvetica. В случае если Helvetica будет недоступен у пользователя, отобразится шрифт Arial, елси и он будет недоступен, отобразится доступный шрифт из семейства sans-serif.
p {
color: red;
font-family: Helvetica, Arial, sans-serif;
}
font-size - задает размер шрифта в px - пикселях, em - единица измерения равная размеру шрифта родительского элемента.
font-style - задает начертание шрифта, обычный или курсив.
font-weight - жирность, может быть обозначена словом или числом от 100 до 900
text-transform - используют если нужно написать весь текст большими или маленькими буквами.
text-decoration - используют если нужно подчеркнуть или зачеркнуть текст или убрать подчеркивание у ссылки.
text-shadow - задает тень для текста.
Часто используемые layout styles:
text-align - выравнивание текста внутри контейнера.
line-height - интерлиньяж, высота одной строки текста.
letter-spacing - расстояние между буквами.
word-spacing - расстояние между словами.
Примеры работы и полный перечень свойств для стилизации шрифтов.
Веб-безопасные шрифты можно использовать сразу, так как они поддерживаются всеми ОС и браузерами. Остальные нужно подключать на страницу самостоятельно.
Чтобы подключить шрифты используют @правило - @font-face. В примере ниже указано, что наш шрифт будет называться myFont, а символы шрифта будем брать из файла myFont.woff
@font-face {
font-family: "myFont";
src: url("myFont.woff");
}
Пошаговое руководство по подключению шрифтов. #фронтенд_css_урок5
Стилизация ссылок.
Ссылка это интерактивный элемент, поэтому ее внешний вид зависит от действий пользователя.
Для стилизации состояний используют псевдоклассы:
Псевдокласс :link - состояние по умолчанию.
: visited - посещенная ссылка.
:hover - ссылка, на которую навели курсор мыши.
:focus - ссылка в фокусе, например когда пользователь перешел на ссылку клавишей Tab.
:active - активная ссылка, на которую нажимает пользователь.
По умолчанию все ссылки на сайте подчеркнуты. Непосещенные ссылки синего цвета, посещенные фиолетового и активные красные.
Не обязательно оставлять такие стили на сайте, но рекомендуется делать ссылки подчеркнутыми и стилизовать состояния при помощи псевдоклассов.
Чтобы изменить стили, заданные по умолчанию, используйте свойства color, cursor, outline.
Иногда к ссылкам добавляют иконки. Это можно сделать при помощи псевдоэлемента :before или свойства background.
Иногда ссылки стилизуют, чтоб они выглядели как кнопки, например в меню.
Подробнее о стилизации ссылок с примерами и задачами.
#фронтенд_css_урок6
Ссылка это интерактивный элемент, поэтому ее внешний вид зависит от действий пользователя.
Для стилизации состояний используют псевдоклассы:
Псевдокласс :link - состояние по умолчанию.
: visited - посещенная ссылка.
:hover - ссылка, на которую навели курсор мыши.
:focus - ссылка в фокусе, например когда пользователь перешел на ссылку клавишей Tab.
:active - активная ссылка, на которую нажимает пользователь.
По умолчанию все ссылки на сайте подчеркнуты. Непосещенные ссылки синего цвета, посещенные фиолетового и активные красные.
Не обязательно оставлять такие стили на сайте, но рекомендуется делать ссылки подчеркнутыми и стилизовать состояния при помощи псевдоклассов.
Чтобы изменить стили, заданные по умолчанию, используйте свойства color, cursor, outline.
Иногда к ссылкам добавляют иконки. Это можно сделать при помощи псевдоэлемента :before или свойства background.
Иногда ссылки стилизуют, чтоб они выглядели как кнопки, например в меню.
Подробнее о стилизации ссылок с примерами и задачами.
#фронтенд_css_урок6
👍1
Всем привет!
Сегодня открывается регистрация на марафон по верстке для начинающих веб-разработчиков.
В ходе марафона разберем верстку учебного лендинга и вы сверстаете свой проект для портфолио.
Я буду давать обратную связь и проверять работы.
Мест мало, чтобы все получили максимум пользы.
Программа и варианты участия на сайте http://webinsidepro.tilda.ws/
Сегодня открывается регистрация на марафон по верстке для начинающих веб-разработчиков.
В ходе марафона разберем верстку учебного лендинга и вы сверстаете свой проект для портфолио.
Я буду давать обратную связь и проверять работы.
Мест мало, чтобы все получили максимум пользы.
Программа и варианты участия на сайте http://webinsidepro.tilda.ws/
Если есть вопросы пишите в личные сообщения😉
Всем привет! Сегодня поняла, что сейчас конец месяца и возможно не всем удобно оплачивать участие в марафоне. Если хотите забронировать место, пишите в личку.
Ну а сегодня вечером выложу сюда новый материал по CSS)
Каскад, специфичность и наследование в CSS.
Каскад - расположение правил в файле стилей, которое влияет на то какое правило будет применено к элементу. Для правил с одинаковой специфичностью применится то, которое расположено ниже в файле стилей. В примере ниже, заголовок будет красного цвета.
h1 {
color: blue;
}
h1 {
color: red;
}
Специфичность - количество элементов страницы, которые охватывает селектор. Например, специфичность селектора h2 меньше чем h2.blue.
Правило h2 {} применится ко всем заголовкам h2 на странице, а h2.blue только к заголовкам h2 с классом blue.
Более специфичные правила перекрывают менее специфичные даже если они расположены выше в файле стилей. В примере ниже h1 будет синего цвета.
h1.blue {
color: blue;
}
h1 {
color: red;
}
Наследование - когда дочерний элемент наследует стили родительского. Не все CSS-правила наследуются.
Изучите эти понятия подробнее на примерах.
#фронтенд_css_урок7
Каскад - расположение правил в файле стилей, которое влияет на то какое правило будет применено к элементу. Для правил с одинаковой специфичностью применится то, которое расположено ниже в файле стилей. В примере ниже, заголовок будет красного цвета.
h1 {
color: blue;
}
h1 {
color: red;
}
Специфичность - количество элементов страницы, которые охватывает селектор. Например, специфичность селектора h2 меньше чем h2.blue.
Правило h2 {} применится ко всем заголовкам h2 на странице, а h2.blue только к заголовкам h2 с классом blue.
Более специфичные правила перекрывают менее специфичные даже если они расположены выше в файле стилей. В примере ниже h1 будет синего цвета.
h1.blue {
color: blue;
}
h1 {
color: red;
}
Наследование - когда дочерний элемент наследует стили родительского. Не все CSS-правила наследуются.
Изучите эти понятия подробнее на примерах.
#фронтенд_css_урок7
MDN Web Docs
Каскад и наследование - Изучение веб-разработки | MDN
Цель этого урока — углубить ваше понимание некоторых основополагающих концепций CSS — каскадов, спецификаций и наследования, — которые контролируют то, как CSS применяется к HTML и как разрешаются конфликты.
Раз уж у нас был перерыв давайте сразу 2 поста) Тем более, что следующая тема очень важная.
Блоки в CSS.
Элементы в CSS заключены в блоки. Понимание того как блоки располагаются и ведут себя на странице ключ к созданию качественной верстки.
По умолчанию элементы страницы ведут себя как блочные либо как строчные. Такое поведение называется обычным порядком или normal flow.
Блочные элементы, например div и p:
Заполняют всю ширину родительского контейнера.
Располагаются один под другим.
К ним применяются свойства width и height.
Отступы блоков margin и padding отодвигают соседние блоки.
Строчные элементы, например a, strong:
Имеют ширину равную ширине содержимого.
Располагаются друг за другом.
К ним не применяются свойства width и height.
Отступы не отодвигают соседние блоки.
Обычный порядок порядок можно изменить, если изменить свойство display элемента, например на flex или grid.
Сетка страницы строится на блочных элементах. Ниже свойства, которые влияют на расположение блочного элемента:
width, height - ширина и высота;
border - рамка;
padding - внутренние отступы, расстояние между границей блока и его содержимым;
margin - внешние отступы, расстояние между блоками;
В стандартной блочной модели итоговая ширина блока равна width + border + padding.
Разработчикам удобно задать итоговую ширину, а не высчитывать сумму, поэтому существует альтернативная блочная модель. В ней ширина блока постоянна, а ширина содержимого равна width - border - padding.
Чтобы использовать альтернативную блочную модель задайте блоку свойство box-sizing: border-box.
Если вы хотите использовать альтернативную блочную модель для всех элементов добавьте правило:
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
Подробнее о блочной модели на примерах.
#фронтенд_css_урок8
Элементы в CSS заключены в блоки. Понимание того как блоки располагаются и ведут себя на странице ключ к созданию качественной верстки.
По умолчанию элементы страницы ведут себя как блочные либо как строчные. Такое поведение называется обычным порядком или normal flow.
Блочные элементы, например div и p:
Заполняют всю ширину родительского контейнера.
Располагаются один под другим.
К ним применяются свойства width и height.
Отступы блоков margin и padding отодвигают соседние блоки.
Строчные элементы, например a, strong:
Имеют ширину равную ширине содержимого.
Располагаются друг за другом.
К ним не применяются свойства width и height.
Отступы не отодвигают соседние блоки.
Обычный порядок порядок можно изменить, если изменить свойство display элемента, например на flex или grid.
Сетка страницы строится на блочных элементах. Ниже свойства, которые влияют на расположение блочного элемента:
width, height - ширина и высота;
border - рамка;
padding - внутренние отступы, расстояние между границей блока и его содержимым;
margin - внешние отступы, расстояние между блоками;
В стандартной блочной модели итоговая ширина блока равна width + border + padding.
Разработчикам удобно задать итоговую ширину, а не высчитывать сумму, поэтому существует альтернативная блочная модель. В ней ширина блока постоянна, а ширина содержимого равна width - border - padding.
Чтобы использовать альтернативную блочную модель задайте блоку свойство box-sizing: border-box.
Если вы хотите использовать альтернативную блочную модель для всех элементов добавьте правило:
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
Подробнее о блочной модели на примерах.
#фронтенд_css_урок8
MDN Web Docs
Блочная модель - Изучение веб-разработки | MDN
В CSS мы, говоря упрощённо, имеем два типа элементов — блочные и строчные. Эти характеристики относятся к поведению блоков в контексте потока страницы и относительно других блоков на странице.
Работа с фоном и границами.
Свойства, которые задают фон начинаются со слова background, они включают:
background-color - цвет фона.
background-image - фоновое изображение.
Если добавлены оба эти свойства, то фоновое изображение всегда будет над цветом.
background-repeat - задает повторение фона. Если фоновое изображение меньше своего блока, то по-умолчанию оно будет повторяться пока не заполнит весь блок.
background-size - размер фонового изображения. Может быть в процентах, пикселях, значение cover - заполняет блок с сохранением пропорций изображения, contain - заполняет блок без сохранения пропорций.
background-position - расположение фонового изображения. Может быть в процентах, пикселях или обозначено словом, top, center, left, right, bottom.
В качестве фона можно задать линейный или радиальный градиент, указав свойство background-image: linear-gradient() или background-image: radial-gradient().
Чтобы задать элементу границу (рамку) используют свойство border.
border-width - толщина границы.
border-style - тип линии, например solid - сплошная.
border-radius - радиус скругления углов блока.
Примеры работы с фоновыми изображениями и границами.
#фронтенд_css_урок9
Свойства, которые задают фон начинаются со слова background, они включают:
background-color - цвет фона.
background-image - фоновое изображение.
Если добавлены оба эти свойства, то фоновое изображение всегда будет над цветом.
background-repeat - задает повторение фона. Если фоновое изображение меньше своего блока, то по-умолчанию оно будет повторяться пока не заполнит весь блок.
background-size - размер фонового изображения. Может быть в процентах, пикселях, значение cover - заполняет блок с сохранением пропорций изображения, contain - заполняет блок без сохранения пропорций.
background-position - расположение фонового изображения. Может быть в процентах, пикселях или обозначено словом, top, center, left, right, bottom.
В качестве фона можно задать линейный или радиальный градиент, указав свойство background-image: linear-gradient() или background-image: radial-gradient().
Чтобы задать элементу границу (рамку) используют свойство border.
border-width - толщина границы.
border-style - тип линии, например solid - сплошная.
border-radius - радиус скругления углов блока.
Примеры работы с фоновыми изображениями и границами.
#фронтенд_css_урок9
Чтобы лучше понимать какие значения бывают у разных свойств читайте статью https://developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Values_and_units
MDN Web Docs
Значения свойств CSS - Изучение веб-разработки | MDN
Каждое свойство используемое в CSS имеет значение или набор значений которые допустимы для этого свойства, и изучение страниц MDN со свойствами поможет вам понять какие значения валидны для того или иного свойства. В этом уроке мы рассмотрим некоторые наиболее…