Стилизация ссылок.
Ссылка это интерактивный элемент, поэтому ее внешний вид зависит от действий пользователя.
Для стилизации состояний используют псевдоклассы:
Псевдокласс :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 со свойствами поможет вам понять какие значения валидны для того или иного свойства. В этом уроке мы рассмотрим некоторые наиболее…
Стилизация изображений, видео и форм.
Если добавить изображение в блок, размер которого меньше размера изображения оно вылезет за границы блока.
Чтобы этого не происходило задавайте изображениям и другим встраиваемым объектам свойство max-width: 100%.
Чтобы изображение заполнило весь блок можно задать ему свойство object-fit: cover. Тогда части, которые не влезли в блок обрезаются.
Если изображение или видео находятся в grid или flex блоке оно не растягивается на весь родительский блок в отличие от других элементов.
Чтобы их растянуть нужно задать width: 100% и height: 100%.
Элементы форм самая сложная для стилизации часть страниц.
С простыми формами, состоящими только из полей <input type=”text”> и кнопки проблем не возникает, но другие типы полей ввода определяются операционной системой и не доступны для стилизации.
Еще одна проблема в том, что браузеры не имеют стандарта относительно стилей форм, а базовые стили страниц не применяются к ним по умолчанию. Поэтому стили для форм лучше задать отдельно.
Перед тем как добавить свои стили элементам форм, рекомендуется сделать сброс браузерных стилей как указано ниже.
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
box-sizing: border-box;
padding: 0; margin: 0;
}
textarea {
overflow: auto;
}
Примеры стилизации изображений, видео и форм.
Подробная статья о стилизации форм на английском. Думаю перевести ее в свободное время)
#фронтенд_css_урок10
Если добавить изображение в блок, размер которого меньше размера изображения оно вылезет за границы блока.
Чтобы этого не происходило задавайте изображениям и другим встраиваемым объектам свойство max-width: 100%.
Чтобы изображение заполнило весь блок можно задать ему свойство object-fit: cover. Тогда части, которые не влезли в блок обрезаются.
Если изображение или видео находятся в grid или flex блоке оно не растягивается на весь родительский блок в отличие от других элементов.
Чтобы их растянуть нужно задать width: 100% и height: 100%.
Элементы форм самая сложная для стилизации часть страниц.
С простыми формами, состоящими только из полей <input type=”text”> и кнопки проблем не возникает, но другие типы полей ввода определяются операционной системой и не доступны для стилизации.
Еще одна проблема в том, что браузеры не имеют стандарта относительно стилей форм, а базовые стили страниц не применяются к ним по умолчанию. Поэтому стили для форм лучше задать отдельно.
Перед тем как добавить свои стили элементам форм, рекомендуется сделать сброс браузерных стилей как указано ниже.
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
box-sizing: border-box;
padding: 0; margin: 0;
}
textarea {
overflow: auto;
}
Примеры стилизации изображений, видео и форм.
Подробная статья о стилизации форм на английском. Думаю перевести ее в свободное время)
#фронтенд_css_урок10
MDN Web Docs
Элементы изображений, медиа и форм - Изучение веб-разработки | MDN
В этом уроке мы рассмотрим, как обрабатываются определённые специальные элементы в CSS. Элементы изображений, других медиа и форм ведут себя иначе при их стилизации в CSS чем обычные блоки. Понимание того, что возможно, а что нет спасут вас от лишних разочарований…
Всем привет! Новые материалы на канале будут после 20 сентября. Нам осталось разобрать несколько важных моментов по CSS и я сделаю большое тестирование.
Нужна запись трансляции? Рассказывала про верстку лендинга и сверстала 1 блок.
Запись эфира с разбором верстки лендинга, один блок верстаю онлайн https://youtu.be/f0hxFQTCFNY
YouTube
- YouTube
Всем привет! Я ушла в работу и не выложила ссылки на самые интересные темы по CSS. Исправляюсь.
Большая статья по CSS свойствам display и position.
В статье разбирают все возможные варианты отображения блоков, в том числе display: flex и display: grid и различия между ними.
А также удаление элементов из нормального потока (normal flow) и их произвольное отображение при помощи свойства position.
Подробная статья по Flexbox.
Подробная статья по Grid Layout.
Большая статья по CSS свойствам display и position.
В статье разбирают все возможные варианты отображения блоков, в том числе display: flex и display: grid и различия между ними.
А также удаление элементов из нормального потока (normal flow) и их произвольное отображение при помощи свойства position.
Подробная статья по Flexbox.
Подробная статья по Grid Layout.
MDN Web Docs
Введение в CSS вёрстку - Изучение веб-разработки | MDN
В этой статье мы рассмотрим некоторые функции макета CSS, которые мы затрагивали в предыдущих статьях, например различные значения свойства display, и разберём некоторые концепции, которые будут рассмотрены в этой статье.
А еще я нашла анимированные тренажеры, которые помогут вам научиться работать с Flexbox и Grid Layout.
Тренажер по Flexbox.
Тренажер по Grid Layout.
Тренажер по Flexbox.
Тренажер по Grid Layout.
Codepip
Flexbox Froggy - A game for learning CSS flexbox
Help Froggy and friends by writing CSS code! In this game, you must bring the frogs home to their lilypads by mastering CSS flexbox, a powerful new module that makes layout a breeze. With it you can control alignment, spacing, and wrapping of elements on…
Ребята всем привет! Я наконец-то выложила первое видео на Ютуб😱 Скро будет много годного контента, приходите смотреть😉https://youtu.be/_Ji4TsuOeIc
YouTube
Как я стала программистом и нашла первую работу в ИТ, где учиться на программиста, курсы или универ.
Сегодня я расскажу как нашла первую работу в ИТ и как курсы помогли мне продвинуться по карьерной лестнице.
Тайм-коды:
0:00 как я выбрала где буду учиться на программиста
01:50 2 плюса универа для программистов
03:15 как я нашла первую работу в веб-студии…
Тайм-коды:
0:00 как я выбрала где буду учиться на программиста
01:50 2 плюса универа для программистов
03:15 как я нашла первую работу в веб-студии…
Ребята, всех с наступающим Новым Годом! Желаю вам профессиональных успехов😉
Новый видосик на канале😉 Буду рада получить фидбек) https://youtu.be/JRXEkmLBKuQ
YouTube
Где будут нужны веб-разработчики в 2021. Зарплаты айтишников в вебе. Как не бояться конкуренции
Сегодня поговорим с вами об актуальности профессии веб-разработчик в ближайшие 5-10 лет. Расскажу почему не стоит бояться конкуренции и какой навык поможет новичкам выделиться среди разработчиков своего уровня. Вы узнаете в каких сферах вырастет спрос на…
Всем привет! По Инету ходят новости, что AppStore может удалить ТГ. Если у вас Айфон, проверьте чтоб было отключено автоудаление.