Как сделать стиль в html

HTML: Атрибут style

Атрибут style

Атрибут style используется для стилизации элементов непосредственно в HTML коде. Цель атрибута style заключается в предоставлении простого способа изменения внешнего вида практически любого HTML элемента.

Примечание: тут мы рассматриваем атрибут style для формирования общего представления об использовании CSS стилей для оформления веб-страниц. Подробнее о возможностях CSS вы можете почитать в CSS самоучителе.

Код примера познакомит вас с новым способом форматирования документа:

Внимательно посмотрите на пример, с помощью атрибута style мы задаем CSS стиль внутри HTML-элементов, такой способ задания стилей называется встроенным стилем. Встроенный стиль применяется только к элементу, в котором он был определён, и к его дочерним элементам (если применённые CSS свойства наследуются).

Примечание: посмотреть наследуется ли значение применённого свойства дочерними элементами или нет, можно в CSS справочнике на странице с данным свойством.

Задний фон

Цвет текста

Цвет текста элемента задается с помощью CSS свойства color. Благодаря этому свойству можно задать любой цвет для текстового содержимого. В качестве значения свойство color может принимать имена цветов, RGB значения или шестнадцатеричные коды.

Установка цвета по имени

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

Установка цвета с помощью RGB

Система RGB использует три числа, которые описывают относительное количество красного, зеленого и синего цветов, которые смешаны вместе для получения любого оттенка. Числа могут варьироваться от 0 до 255 для числовых значений или от 0% до 100%

Можно установить цвет, указав сочетание красного, зеленого и синего в определенной пропорции. Допустим, вам нужно задать оранжевый цвет, который состоит из 80% красного, 40% зеленого и 0% синего. Вот как это можно сделать:

Можно также задавать значение красного, зеленого и синего числами от 0 до 255. Например, вместо 80% красного, 40% зеленого и 0% синего можно написать 204 красного, 102 зеленого и 0 синего:

Шестнадцатеричные коды

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

Шрифт

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

Свойство font-family дает возможность задать список предпочтительных шрифтов, которые указываются через запятую. Если имя шрифта состоит из нескольких слов, то такое название следует заключить в двойные кавычки, например: » Courier New «.

Размер

Размер шрифта очень сильно влияет на дизайн веб-страницы и читабельность ее текста. В CSS есть несколько единиц измерения, с помощью которых можно задавать размер для текста, все они подробно описаны в разделе Единицы измерения CSS. Также имеется возможность задавать размер с помощью ключевых слов:

Все доступные ключевые слова, задающие размер, вы можете посмотреть в нашем справочнике по CSS в описании свойства font-size.

Выравнивание текста

Выравнивание текста в HTML документе задаётся с помощью свойства text-align, которое позволяет выравнять текст по правой или левой строне, а так же задать выравнивание текста по ширине. Свойство text-align работает только с блочными элементами, выравнивая все строчные элементы внутри блочного:

Источник

Как сделать стиль в html

Рассмотрим практичный пример с

Преобразуется на странице в следующее:

Выше разобранный пример можно сделать по-другому (не используя class):

Результат будет таким же как и предыдущий пример.

В чем же тогда разница? Давайте проведем сравнение. Допустим, у Вас есть на сайте 50 страниц (это считается маленьким сайтом). На всех 50 страницах у Вас для какого-то текста в тегах прописано style =» color: blue; font-size:12px; font-family:Arial «. Теперь представим такую ситуацию, что синий цвет Вам больше не по душе и Вы захотели сменить его на черный. В этом случае Вам нужно будет редактировать 50 страниц. Но 50 страниц это ещё не так уж и много. Тем не менее это все равно лишняя работа, которую можно было не делать. Поэтому я советую пользоваться классами ( class =» какой-то класс «). В этом случае Вам бы пришлось поменять всего лишь в одном месте цвет и на всех страницах бы все поменялось.

Задание стилей для вложенных тегов
Если мы используем вложенные конструкции (иерархию тегов), то стиль нужно задавать напрямую. Например:

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

Чтобы упростить работу со стилями, создают специальную «таблицу стилей CSS«, которая представляет из себя просто сборник стилей. Подключается она с помощью тега link в теге head

В данном случае таблица стилей (назовем её style.css ) должна содержать следующее:

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

Плюсы при использовании таблицы стилей

Использование стилей html через ID

Для использования ID, код html страницы должен содержать примерно следующее:

Вместо параметра class нужно написать id, в остальном все также. Также можно использовать и вложенные конструкции. Как правило, id не используют для описание стилей.

Теперь расскажу о том, какие аргументы можно задавать в стилях. Их довольно много.

Аргументы и свойства в style

1. Свойство background: цвет — задает цвет фона. Цвет можно выбрать любым. Цвет может быть задан в виде шестизначного кода (например, #53A32B; ) или конкретное название цвета (например, red ). Выбрать подходящий цвет можно на странице: коды и названия html цветов.

Более подробно про фон читайте в отдельной статье: как сделать фон для сайта.

2. Свойство background-image: url(‘images/bg.png’); — фоном будет картинка. В скобках указывается адрес фона изображения.

3. Свойство background-repeat: repeat — использовать фоновую картинку многократно. Другие возможные параметры:

4. Свойство border: 1px solid red; — вся область объекта будет в красной рамке, ширина которой 1 пиксель. Возможны и другие параметры вместо solid:

Цвет и размер области рамки можно изменять. Цвет можно задавать в формате #XXXXXX или писать название цвета. Выбрать цвет можно на странице коды и названия html цветов

Рамку можно задавать избирательно, т.е. только с тех сторон, где это нужно:

Можно совмещать эти параметры, т.е. сделать линию только слева и снизу. Более подробно про задание границ читайте в специальной статье: свойство css border

5. Свойство color: #fc0ab1; — задает цвет текста. Цвет можно выбрать любым. С этим аргументом Вы уже были знакомы.

6. Свойство font-family: value; — задает шрифт текста. Существует очень много различных шрифтов. Например, самые распространенные шрифты:

Более подробно про шрифты и их выбор читайте в статьях:

8. Свойство font-weight: value; — задает толщину текста (насыщенность). Возможные значения:

Можно толщину задавать цифрами: 100, 200, 300, 400, 500, 600, 700, 800, 900. Более подробно читайте в статье: свойство CSS font-weight

14. Свойство width: 100%; — задает ширину. Можно задавать в %, а можно в пикселях (px).

15. Свойство overflow: value; — область видимости содержания блочного элемента, которое не помещается в нем. Возможные значения параметра:

Более подробно читайте в статье: свойство CSS overflow

16. Свойство text-align: value; — выравнивание текста. Возможные значения параметра:

Более подобно читайте в статье свойство CSS text-align

17. Свойство float: value; — определяет сторону, по которой будет выравниваться какой-то элемент, а остальные элементы будут обтекать его с других сторон. Возможные значения параметра:

18. Свойство line-height: 22px; — устанавливает межстрочный интервал в пикселях. Более подробно про растояние между строками читайте в статье свойство CSS line-height

19. Свойство white-space: value; — задает отображение между пробелами. Возможные значения:

Более подробно читайте в статье: свойство CSS white-space

20. Свойство display: value; — определяет способ показа элемента. Имеет довольно много параметров:

Более подробно читайте в статье: свойство CSS display

21. Свойство text-decoration: value; — опция для редактирования внешнего вида текста. Имеет несколько параметров:

Более подробно читайте в статье: свойство CSS text-decoration

22. Свойство text-transform: capitalize; — преобразование текста в заглавные или прописные буквы.

Более подробно читайте в статье: свойство CSS text-transform

23. Свойство letter-spacing: 2px; — задает расстояние между буквами. Более подробно читайте в статье: свойство CSS letter-spacing

Уважаемый читатель, теперь Вы имеете представление о стилях в html. Вы можете делать Ваши странички более красивыми. Рассмотренные выше возможности стилей являются поверхностными и для профессионального использования Вам понадобятся более глубокие знания. В следующих уроках мы рассмотрим самые важные из этих тегов во всех подробностях. Теперь советую перейти к следующему уроку.

Источник

Создание первой таблицы стилей

В этом учебнике для создания HTML и CSS файлов мы будем использовать редактор Notepad ++, он предназначен для пользователей Microsoft Windows и все примеры будут выполнены именно в нем.

Если же у вас Mac, то вы можете выполнять примеры в редакторе Brackets, он как и Notepad ++ абсолютно бесплатен. Что касается редактора Brackets, то он подходит и для пользователей Microsoft Windows, вы можете впоследствии выбрать, что вам ближе.

Создание внутренней таблицы стилей

Рассмотрим пример в котором вы будете создавать Вашу первую внутреннюю таблицу стилей.

Шаг 1: Откройте текстовый редактор

Перед Вами откроется основное окно программы:

Рис. 2 Текстовый редактор Notepad++.

Шаг 2: Создайте структуру документа

Скопируйте или впишите в редактор следующий HTML код:

Шаг 3: Добавьте встроенные стили

Следующим шагом добавьте к вашей странице встроенные стили: для заголовка первого уровня цвет текста красный ( color : red ), а для абзацев голубой ( color : blue ). Кроме того, для заголовка первого уровня мы сделаем выравнивание текста по центру ( text-align : center ). Проверьте, чтобы каждое CSS свойство и его значение было разделено двоеточием, а в конце каждого объявления стояла точка с запятой.

Шаг 4: Просмотр HTML страницы в браузере

Откройте пример в браузере и убедитесь, что результат нашего примера соответствует изображению:

Рис. 2.1 Пример создания внутренней таблицы стилей в документе.

Подключение внешней таблицы стилей

Сейчас мы с Вами создадим отдельный файл, который будет содержать таблицу стилей и подключим его к нашему HTML документу.

Для элемента мы указали следующие новые для Вас CSS свойства:

Не беспокойтесь, если Вам на этом этапе непонятно как работают какие-либо новые для вас CSS свойства, позднее мы ещё не раз будем прибегать к использованию данных свойств в примерах, и подробно остановимся на каждом из них в отдельных статьях, например:

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Практическое задание № 1.

Подсказка: на странице использованы цвета: dimgray, gray, aliceblue, orange.

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

Источник

Стилизуем формы при помощи CSS: руководство для начинающих

Перевод статьи «How to style forms with CSS: A beginner’s guide».

Приложения получают данные от пользователей, в основном, через формы. Возьмем для примера обычную форму регистрации. Там всегда будет несколько полей, куда пользователь может ввести нужную информацию (свое имя, email и т. д.).

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

И это не мое личное мнение. На иллюстрации ниже вы видите, как выглядит обычная HTML-форма без CSS.

А вот та же форма, в оформлении которой использовали каскадные таблицы стилей.

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

Наше руководство по стилизации форм при помощи CSS будет состоять из шести пунктов.

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

1. Устанавливаем box-sizing

Я обычно устанавливаю * не только для форм, но и для веб-страниц. Благодаря этому ширина (width) всех элементов будет содержать внутренние отступы (padding).

Ниже приведена улучшенная версия нашего первоначального кода. В нее также добавлены псевдоэлементы :before и :after.

Совет: универсальный селектор * выбирает все элементы в документе.

2. Селекторы CSS для элементов ввода

Самый простой способ выбрать элементы ввода — использовать селекторы атрибутов.

Эти селекторы будут выбирать все элементы ввода в документе. Если вам нужно выбрать какие-то специфические селекторы, следует добавить классы:

3. Базовые методы стилизации для однострочных текстовых полей ввода

Чаще всего поля ввода в формах бывают однострочными. Обычно такое поле представляет собой простой блок с границей (его вид зависит от браузера).

Вот HTML-разметка для однострочного текстового поля с плейсхолдером.

Выглядеть это будет так:

Чтобы сделать это текстовое поле более привлекательным, можно использовать следующие свойства CSS:

Давайте пройдемся по каждому из этих свойств.

Padding

Добавление некоторого внутреннего пространства может повысить четкость. Чтобы это сделать, применяем свойство padding.

Margin

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

Border

В большинстве браузеров текстовые поля ввода имеют границы, которые вы можете кастомизировать.

Совет: если убираете границу, обязательно добавьте цвет фона или тень. В противном случае пользователь просто не увидит ваше поле.

Некоторые веб-дизайнеры предпочитают оставлять только нижнюю границу. При таком варианте пользователь как бы будет писать на строчке, как в блокноте.

Box shadow

Свойство CSS box-shadow позволяет добавить тень элемента. Меняя 5 значений этого свойства, вы сможете добиться самых разнообразных эффектов.

Border radius

Свойство border-radius может очень сильно изменить вид ваших форм. Поля для ввода текста, имеющие скругление углов, выглядят совсем иначе.

Комбинируя box-shadow и border-radius, вы можете существенно изменить вид полей.

Width

Используйте свойство width, чтобы установить ширину поля ввода.

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

4. Стилизация прочих типов полей ввода

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

Давайте рассмотрим подробнее каждое из них.

Текстовые области (text areas)

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

Также для текстовых областей применимо и очень полезно свойство resize. В большинстве браузеров текстовые области по умолчанию могут растягиваться как по оси x, так и по оси y (значение: both). Но вы можете установить для этого свойства также значение horizontal или vertical.

Посмотрите на пример:

Здесь я использовал resize:vertical, чтобы разрешить изменение размера исключительно по вертикали. Такая практика применяется в большинстве форм, поскольку позволяет избежать появления горизонтальной полосы прокрутки.

Примечание: если вам нужно создать текстовую область с автоматическим изменением размера, следует использовать JavaScript. Но в нашей статье мы не будем углубляться в эту тему.

Чекбоксы и радиокнопки

Дефолтные чекбоксы и радиокнопки очень сложно стилизовать, для этого требуется более сложный CSS-код (и HTML — тоже).

Для стилизации чекбокса используйте следующий HTML-код.

Несколько вещей, на которые нужно обратить внимание:

Вот пользовательский чекбокс (комментарии в CSS-коде поясняют происходящее более подробно):

See the Pen yLNKQBo by Supun Kavinda (@SupunKavinda) on CodePen.

Вот пользовательская радиокнопка:

See the Pen eYNMQNM by Supun Kavinda (@SupunKavinda) on CodePen.

В обоих примерах мы использовали одну и ту же концепцию (input:checked).

В браузерах чекбоксы отображаются квадратиками, а радиокнопки — кружочками. Это лучше не менять, чтобы не путать пользователя.

Раскрывающийся список

Раскрывающийся список позволяет пользователю выбрать элемент из нескольких предложенных вариантов.

Но вы не можете стилизовать выпадающие элементы, потому что их стили зависят от операционной системы. Единственный способ изменить их вид — использовать JavaScript.

Кнопки

Как и у большинства элементов, у кнопок есть стили, установленные по умолчанию.

Давайте немного украсим нашу кнопку.

5. Псевдоклассы UI

Ниже приведен список псевдоклассов, которые широко используются с элементами форм.

Эти псевдоклассы могут использоваться для показа уведомлений в зависимости от атрибутов элемента:

Эти могут использоваться для создания эффектов для каждого состояния:

Сообщения, генерируемые при помощи :required

Показываем сообщение о том, что заполнение поля является обязательным:

Если вы удалите атрибут required при помощи JavaScript, сообщение «Required» исчезнет автоматически.

Мы можем сделать то же самое с псевдоклассами :valid и :invalid.

:hover и :focus

:hover выбирает элемент, когда на него наводится курсор мыши. :focus выбирает элемент, когда тот в фокусе.

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

Вот несколько эффектов наведения для элементов формы (попробуйте навести курсор на разные поля):

See the Pen yLNKZqg by Supun Kavinda (@SupunKavinda) on CodePen.

Когда пользователь видит небольшие изменения в элементе, происходящие при наведении мыши, он понимает, что с элементом можно что-то делать. Это важно для дизайна элементов форм.

Вы замечали, что в некоторых браузерах вокруг элемента, находящегося в фокусе, появляется синяя внешняя граница? Вы можете использовать псевдокласс :focus, чтобы удалить ее и добавить другие эффекты для элемента в фокусе.

Следующий код удаляет внешнюю границу для всех элементов:

Добавляем внешнюю границу для элементов в фокусе:

6. Элементы ввода, недоступные для кастомизации

Стилизация элементов форм всегда была сложной задачей. Есть некоторые элементы, с которыми не многое можно сделать в плане изменения стиля. Например:

Эти элементы предоставляются браузером и стилизуются в зависимости от вашей ОС. Единственный способ изменить их стиль — использовать кастомные контролы (Custom Controls), созданные при помощи div, span и прочих HTML-элементов, поддающихся стилизации.

Кастомные контролы для элементов форм уже разработаны для основных JavaScript-библиотек. Найти их можно на GitHub.

Заключение

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

В качестве совета напоследок: не забывайте делать все ваши формы отзывчивыми.

Источник