A00-211 exam cram CCBA course CPCM vce and pdf 300-209 vce download

Как создать контактную форму, используя псевдо CSS селекторы? - Nazabore
Site Loader
Get a Quote
Rock Street, San Francisco
Rock Street, San Francisco
Как создать контактную форму, используя псевдо CSS селекторы?

Мы можем создавать контактные формы разными способами. Поскольку они являются очень популярным элементом веб-сайтов в Интернете, мы можем найти множество руководств и готовых решений, которые сделают их необычными. Однако нам не всегда нужно искать обширные решения, которые часто требуют использования JavaScript или подключения готовых библиотек или сред. Благодаря нескольким основным псевдо-селекторам в CSS, мы можем сами создать красивую и удобную форму.

Ниже мы представляем готовый пример такой формы и несколько пояснений.

Что такое CSS?

CSS — Язык, используемый для описания формы представления (отображения) страниц Web. CSS был разработан W3C в 1996 году как потомок языка DSSSL для использования вместе с SGML. Первый проект CSS был предложен в 1994 году Хокон Вьюм Ли [1] .

Таблица стилей CSS представляет собой список директив (так называемых правил), которые определяют, каким образом содержимое выбранного ( X ) HTML или XML- элемента (или элементов) должно отображаться веб-браузером . Таким образом, вы можете описать все концепции, отвечающие за представление элементов интернет-документов, таких как семейство шрифтов, цвет текста, поля , межстрочный интервал или даже положение элемента относительно других элементов или окна браузера. Использование таблиц стилей дает гораздо больше возможностей позиционирования на странице, чем предлагает (X) только HTML.

CSS был создан для того, чтобы отделить структуру документа от формы его представления. Такое разделение повышает доступность сайта, уменьшает сложность документа, облегчает внесение изменений в структуру документа. CSS также облегчает изменения в отображении страницы в зависимости от поддерживаемого носителя (экран, карманный компьютер, печатный документ, программа чтения с экрана). Использование внешнего CSS дает вам возможность изменять внешний вид многих страниц одновременно, не влияя на сам код (X) HTML, поскольку листы могут совместно использоваться многими документами.

История CSS

Первоначально HTML был языком только для описания структуры документа. Однако со временем возникла необходимость возродить внешний вид таких документов. Новые теги были добавлены медленно, чтобы контролировать HTML, типографику, добавлять новые медиа (например, изображения). Эти пользовательские расширения были реализованы самыми популярными производителями браузеров без консультации с другими. Это привело к внедрению новых тегов, работающих в определенной группе браузеров и не работающих в других браузерах. Дизайнеры были вынуждены отправлять клиенту разные версии одного и того же сайта в зависимости от используемого браузера, получить идентичный внешний вид в разных браузерах было практически невозможно. Håkon Wium Lie первым предложил CHSS ( каскадные таблицы стилей HTML) в октябре 1994 г. Позже Ли и Берт Бос работали вместе над стандартом CSS (буква H была удалена из-за возможности применения стилей к другим HTML-подобным языкам).

В то время был создан Консорциум World Wide Web , который вместе с Lie и Bos взял на себя работу над CSS. В конце 1996 года была выпущена официальная документация CSS, каскадные таблицы стилей, уровень 1.

W3C утвердил два официальных стандарта CSS: CSS 1 и CSS 2, а 7 июня 2011 года — стандарт CSS 2.1.

Также ведется работа над CSS3. Эта версия по сравнению со своими предшественниками будет обогащена множеством селекторов и свойств, модульная природа языка также является новой — это будет уже не единая рекомендация, а несколько десятков отдельных документов, которые позволят включать или отключать соответствующие модули в браузерах в зависимости от текущих потребностей.

Цели CSS

До появления CSS вся информация о внешнем виде документов HTML (включая тип и цвет шрифта, расположение, поля) содержалась в тегах HTML . CSS позволяет перенести эту информацию в отдельный файл. Это приводит к упрощению и повышению прозрачности самого HTML-документа. Без использования CSS при определении стиля для заголовка (h1) или подзаголовка (h2) его определение придется повторять везде, где появляется структура. Результатом этого будет снижение читабельности документа, его устойчивости к ошибкам и трудностей в обслуживании. Кроме того, изменения стиля в одном из мест могут повлечь за собой необходимость вносить изменения в каждом месте происшествия. CSS позволяет разграничить уровень представления от структуры. Этот язык позволяет определять цвета, шрифты, макет, размеры, поля и многие другие функции, связанные с уровнем представления.

Форма в CSS

CodePen - CSS Pseudo Selectors Form
Formularz kontaktowy

Наша форма представляет информацию о том, что должно быть введено в данное поле, немного более интересным способом, чем классический «заполнитель». Этого можно достичь, добавив элемент «label» в каждое поле и заключив их в элемент «div», которому мы даем относительное позиционирование. Затем мы устанавливаем абсолютное позиционирование для элементов «label» и объявляем их поведение после активации выбранного поля. Мы можем сделать это с помощью псевдо-селектора » : focus «. В приведенном выше примере «label» перемещается по выбранному полю, уменьшая размер шрифта. Кроме того, после активации поля мы добавляем к нему рамку. #wiemyjak

Второй псевдоселектор, используемый в нашем примере, это « : valid ». Однако этот селектор будет работать только для полей, которые мы помечаем как обязательные, добавляя к ним « обязательные » обозначения и в зависимости от типа поля. Например, в поле ввода типа «текст» он будет работать после ввода любой строки символов, а для типа «электронная почта» — только после ввода адреса в правильном формате. В нашем примере мы информируем пользователя о правильном заполнении поля, добавляя к нему изображение и рамку. Кроме того, после ввода правильных данных в поле мы устанавливаем те же стили для его элемента метки, что и в случае его активации, благодаря чему он не будет переопределять введенный контент.

Представленный пример — лишь малая часть возможностей, предлагаемых псевдо-CSS-селекторами. Мы рекомендуем вам изменить его и поэкспериментировать самостоятельно.

Получите промокод на 900₴!


1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (54 оценок, среднее: 5,00 из 5)
Загрузка...
Поделиться статьёй

Post Author: Евгений Сидоров

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Call Now Button