Css styles form: Styling web forms — Learn web development

 ч2{
    вес шрифта: 700;
    цвет: лесной;
}
 

 

<голова>
    <мета-кодировка="UTF-8">
    
    
    

<тело>
    <дел>
         
Тестовый документ для проверки 
CSS 
        
Lorem ipsum dolor sit amet consectetur adipisicing elit.
  Accusantium officia similique illum magni explicabo,
            tempore neque nulla Laborum voluptas sint molestias libero et corporis omnis asperiores инцидент,
            perferendis
            сед авт!

         
Список элементов
 
        <ул>
            
Элемент 1
            
Элемент 2
            
Элемент 3
            
Элемент 4
            
Элемент 5
        
    

Таблица стилей CSS

 тело {
    цвет фона: голубой;
    семейство шрифтов: «Segoe UI», Tahoma, Geneva, Verdana, без засечек;
}
.content-обертка {
    отступ: 10px 30px;
}
п{
    выравнивание текста: по ширине;
}
h2{
    выравнивание текста: по центру;
}
.выделять{
    вес шрифта: 700;
    цвет: лесной;
}
ч2, ч3{
    вес шрифта: 400;
}
уль ли {
    тип стиля списка: квадратный;
    нижняя граница: 10px;
    поле слева: 50px;
}
 

Сравнение вывода

В левой части изображения отображается HTML-документ без примененных стилей, а в правой части — HTML-документ с примененными стилями.

Ссылки

• CSS — Википедия

Стилизация WPForms с помощью пользовательского CSS (Руководство для начинающих)

Хотели бы вы иметь возможность добавлять пользовательские стили к своим формам? CSS – это мощный инструмент, который позволяет придать вашим формам уникальный индивидуальный стиль.

В этом руководстве мы покажем вам, как создать пользовательский CSS для оформления ваших форм, с большим количеством примеров.

• Что такое CSS?
• Чтение CSS
• Выбор селектора CSS
• Использование свойств и значений CSS
• Оформление индивидуальной формы

Что такое CSS?

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

Примечание . Если вы предпочитаете стилизовать форму, но пропустить код, ознакомьтесь с нашим руководством по стилю формы.

Чтение CSS

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

• Селекторы : «цель», к которой вы хотите применить стили
• Свойства : конкретный стиль, который вы хотите изменить, например размер шрифта или цвет
• Значения : определенный эффект стиля, который вы хотите применить

В качестве примера, посмотрите этот фрагмент CSS, который устанавливает размер заголовка вашей формы:

 .wpforms-form .wpforms-title {
    размер шрифта: 26px !важно;
}
 

Селектор в этом примере — .wpforms-form .wpforms-title , и он применит ваш CSS к заголовку всех WPForms на вашем сайте.

Затем в фигурных скобках есть одно свойство CSS в этом примере: размер шрифта . Это свойство имеет значение из 26 пикселей.

Примечание . При добавлении CSS на ваш сайт может потребоваться указать !important перед точкой с запятой, чтобы обеспечить успешное применение ваших пользовательских стилей. Ознакомьтесь с нашим руководством по устранению неполадок CSS для получения более подробной информации.

Если мы решим, что хотим, чтобы текст заголовка нашей формы был больше (скажем, 35 ​​пикселей), нам просто нужно изменить это значение в CSS:

 .wpforms-form .wpforms-title {
    размер шрифта: 35px !важно;
}
 

Выбор селектора CSS

Первым шагом в написании CSS является определение правильного селектора для нацеливания на определенную часть вашей формы. Существует два способа выбора селектора:

1) Копирование селектора из нашего списка

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

2) Использование инструментов разработчика в браузере

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

Инструменты разработчика позволяют проверить любую часть веб-страницы, чтобы увидеть, какой CSS применяется. Вы также можете протестировать изменения в CSS «на лету» и увидеть, как они применяются прямо в вашем браузере. У WPBeginner есть отличное руководство по использованию инструментов разработчика, которое должно помочь вам начать работу, включая пошаговое видео об использовании инструментов разработчика Chrome.

Использование свойств и значений CSS

Теперь, когда вы знаете, как выбрать селектор CSS, мы можем обсудить, как изменить определенные стили с помощью свойств и значений CSS.

Ниже вы найдете некоторые основные свойства CSS, которые могут оказаться полезными для ваших форм. Кроме того, вы найдете примеры изменений стиля, которые можно внести, комбинируя селекторы, свойства и значения, чтобы получить полный фрагмент кода CSS.

Просто нажмите на ссылку в этом списке, чтобы перейти к нужному разделу:

• цвет
• размер шрифта
• цвет фона
• прокладка
• граница
• радиус границы

Примечание: Ищете другую недвижимость? Полный список см. в этом справочнике по CSS.

• • Определение: Цвет шрифта
  • Пример: Чтобы сделать заголовок на всех формах вашего сайта синим, вы можете использовать:

 .wpforms-форма .wpforms-название {
    цвет: #007acc !важно;
}
 

• • Определение: Размер шрифта (единицы измерения могут быть px, em или rem)
  • Пример: Чтобы сделать заголовок на всех формах вашего сайта размером 35 пикселей, вы должны использовать:

 . wpforms-форма .wpforms-название {
    размер шрифта: 35px !важно;
}
 

• • Определение: Цвет, который заполнит фон области выбора
  • Пример: Чтобы сделать весь фон формы светло-серым, вы можете использовать следующий CSS:

 .wpforms-форма {
    background-color: #eee !важно;
}
 

• • Определение: Расстояние между элементом селектора и его границей
  • Пример: Вы заметили, что в приведенном выше примере нет никакого расстояния между текстом и краями цветного блока? В дополнение к фоновому цвету добавим отступы по 20 пикселей вверху и внизу формы, а также по 15 пикселей отступов справа и слева. Мы сделаем это, добавив отступ: 20px 15px; в CSS из предыдущего примера:

 . wpforms-форма {
    background-color: #eee !важно;
    отступ: 20px 15px !важно;
}
 

• • Определение: Определяет стиль и толщину края элемента
  • Пример: Давайте добавим границу толщиной 3 пикселя, сплошную линию и темно-серый цвет к нашему примеру выше. Мы сделаем это, добавив граница: 3 пикселя сплошная #666; в существующий CSS для .wpforms-form :

 .wpforms-форма {
    background-color: #eee !важно;
    отступ: 20px 15px !важно;
    граница: 3px сплошная #666 !важно;
}
 

• • Определение: Насколько изогнутыми будут углы элемента (0 пикселей — это квадратный край, более высокие числа означают более изогнутые)
  • Пример: Мы продолжим строить из приведенного выше примера, добавив радиус границы 20 пикселей, чтобы скруглить края формы. Мы можем сделать это, добавив border-radius: 20px; на CSS, который мы уже сделали:

 .wpforms-форма {
    background-color: #eee !важно;
    отступ: 20px 15px !важно;
    граница: 3px сплошная #666 !важно;
    радиус границы: 20px !важно;
}
 

Оформление индивидуальной формы

С помощью селекторов CSS, описанных выше, вы можете легко применить одни и те же стили ко всем WPForms на вашем сайте. Однако если вы хотите применить некоторые стили только к одной форме, вам необходимо добавить идентификатор формы в селектор.

Чтобы легко найти идентификатор формы, вы можете посмотреть ее шорткод. Это можно увидеть в редакторе страниц/сообщений или перейти к WPForms »All Forms и просмотреть столбец Shortcode .

В этом примере наша форма имеет идентификатор 4. Чтобы применить наши предыдущие стили только к этой единственной форме, нам нужно добавить