Сегодня поговорим о важной составляющей сайтов, изображениях и работе с ними.
Чтобы добавить изображение на страницу используйте тег <img> с обязательным атрибутом src — путь к файлу изображения.
<img src=”my-first-imsge.img”>
Не используйте изображения, если не уверены что они есть в открытом доступе или пока не оплатили его.
Не добавляйте в src ссылки на изображения, лежащие на других сайтах. Если такое изображение будет удалено владельцем сайта, то перестанет отображаться и у вас.
У изображений есть атрибут alt, текст который появится на месте картинки, если ее не удалось загрузить по каким-то причинам. Также alt помогает пользователям со слабым зрением понимать, что показано на картинке.
Для создания фона лучше использовать свойство CSS background-image, будем говорить о нем в блоке уроков по CSS.
Атрибуты width и height придуманы для задания размеров изображения, но лучше делать это в CSS или сразу загружать картинки нужного размера.
Если вам нужно добавить на страницу изображение с подписью, семантически верно будет завернуть его в тег <figure>. А подпись в тег <figcaption>.
Подробнее об изображениях читайте в статье. #фронтенд_html_урок6
Чтобы добавить изображение на страницу используйте тег <img> с обязательным атрибутом src — путь к файлу изображения.
<img src=”my-first-imsge.img”>
Не используйте изображения, если не уверены что они есть в открытом доступе или пока не оплатили его.
Не добавляйте в src ссылки на изображения, лежащие на других сайтах. Если такое изображение будет удалено владельцем сайта, то перестанет отображаться и у вас.
У изображений есть атрибут alt, текст который появится на месте картинки, если ее не удалось загрузить по каким-то причинам. Также alt помогает пользователям со слабым зрением понимать, что показано на картинке.
Для создания фона лучше использовать свойство CSS background-image, будем говорить о нем в блоке уроков по CSS.
Атрибуты width и height придуманы для задания размеров изображения, но лучше делать это в CSS или сразу загружать картинки нужного размера.
Если вам нужно добавить на страницу изображение с подписью, семантически верно будет завернуть его в тег <figure>. А подпись в тег <figcaption>.
Подробнее об изображениях читайте в статье. #фронтенд_html_урок6
Сегодня поговорим о самом важном элементе взаимодействия пользователя с сайтом, HTML-формах.
Формы используют для отправки данных на сервер, например почты и телефона пользователя, или для изменения интерфейса, например пользователь добавляет пункт в список дел.
Веб-формы состоят из элементов управления, полей ввода и переключателей, которые чаще всего представлены тегом <input> и кнопки, которая отправляет данные <button>.
Чтоб задать форму используйте тег <form>. Атрибут action указывает на скрипт на сервере, который будет обрабатывать данные формы. Атрибут method обозначает метод отправки.
Тег <label> обозначает заголовок поля ввода. У тега <label> есть атрибут for, он равен id поля ввода, к которому относится.
Выше пример простой формы.
#фронтенд_html_урок7
Формы используют для отправки данных на сервер, например почты и телефона пользователя, или для изменения интерфейса, например пользователь добавляет пункт в список дел.
Веб-формы состоят из элементов управления, полей ввода и переключателей, которые чаще всего представлены тегом <input> и кнопки, которая отправляет данные <button>.
Чтоб задать форму используйте тег <form>. Атрибут action указывает на скрипт на сервере, который будет обрабатывать данные формы. Атрибут method обозначает метод отправки.
Тег <label> обозначает заголовок поля ввода. У тега <label> есть атрибут for, он равен id поля ввода, к которому относится.
Выше пример простой формы.
#фронтенд_html_урок7
В зависимости от того какой тип вы зададите в атрибуте type тега <input> элемент управления будет выглядеть по разному. В примере выше type=”text” обозначает поле для ввода текста.
Для удобство пользователя проектируйте веб-формы так, чтобы в них было как можно меньше полей.
Подробнее о проектировании и создании форм.
#фронтенд_html_урок7
Для удобство пользователя проектируйте веб-формы так, чтобы в них было как можно меньше полей.
Подробнее о проектировании и создании форм.
#фронтенд_html_урок7
Сегодня готовлю первый пост по CSS. А пока ловите дополнительный полезный материал по работе с изображениями👇
Векторная графика.
В вебе используют 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)