Для создания динамических меню для наших веб-страниц в настоящее время очень распространено программировать на HTML5, а затем придавать ему индивидуальный вид и стиль с помощью CSS3, который является языком, основанным на таблицах стилей, то есть кодом, который дает Форма, цвет и структура нашей страницы находятся в отдельном файле, закодированном вне самой страницы, которую мы пишем.
Прежде всего, мы увидим, как составлять списки, поскольку в конце концов меню - это список, в который помещается стиль, чтобы он был заметно более элегантным. Таким образом, мы структурированы в HTML как список ссылок, а затем мы добавили пользовательский вид уже с CSS3 .
Существует два типа списков: упорядоченные и неупорядоченные. Если мы собираемся использовать список и затем настраивать меню, мы, скорее всего, будем использовать грязный список, однако мы увидим варианты.
Они созданы точно так же, единственное отличие заключается в слове зарезервировано, которое для ординат будет
- и для грязного
- Первый предмет
- Второй элемент
- Третий элемент
- Первый предмет
- Второй элемент
- Третий элемент
- Первый предмет
- Второй элемент
- Третий элемент
- подчеркните : если мы хотим, чтобы все было подчеркнуто
- overline : точно так же, как подчеркивание вставляет строку во весь текст, но на этот раз вместо приведенного выше.
- мигать : создать текст, который светит, который мигает, как свет с перерывами.
- line-through : мы напишем эту опцию, если хотим, чтобы наш текст был вычеркнут.
- none : это избыточность, так как по умолчанию текст идет с этим значением, без какой-либо декорации. Однако иногда будет полезно, если мы захотим вернуться к исходной опции после использования какого-либо эффекта, используя ресурс hover, который мы увидим далее.
Text-Align
Это адрес, по которому будет опубликовано содержимое элементов нашего блока eye, а не самого текста, что мы увидим позже со свойством direction. Варианты очень просты: слева, если мы хотим, чтобы он шел слева, справа, если мы хотим, чтобы он шел справа налево, по центру, если мы хотим, чтобы текст центрировался, и выравниваем, если мы хотим, чтобы текст был выровнен.
направление
С помощью этой опции мы собираемся определить направление текста, который мы пишем, в этом случае есть только две опции:
- ltr : это тот, который отображается по умолчанию в браузерах, поскольку, за исключением некоторых языков, на которых он написан справа налево, обычно пишется слева направо, что определяет эту опцию.
- RTL : это другая возможная направленность текста, справа налево, которую мы будем использовать, если мы хотим, например, писать арабские тексты.$config[ads_text5] not found
Текст-отступов
То, что исходит из отступа или табуляции, является свойством, которое отвечает за установление этого критерия в первой строке элементов нашего блока, а также в таблицах. Есть три варианта:
- измерение
- процент
- унаследовать
В них, если мы будем использовать процент, мы будем ссылаться на ширину элемента, в котором он находится.
...
Также во всех из них мы можем использовать положительные или отрицательные числа любых единиц измерения, которые существуют для css3, пикселей, emsТекст-преобразования
Последнее свойство, относящееся к тексту, которое мы увидим, касается верхнего и нижнего регистра:
- с заглавной буквы : с этой опцией только первая буква каждого слова будет заглавной.
- верхний регистр : показывает весь текст заглавными буквами.
- нижний регистр : показывает весь текст в нижнем регистре.
- нет : оставить текст как написано. Это тот, который поставляется по умолчанию.
Word-разнос
Хотя он не имеет дело с текстом напрямую, он делает это в промежутке, который мы оставляем между словами. Их значения могут быть «нормальными» или действительными. Если мы поместим меру, ее значение будет добавлено к обычной мере, которая используется по умолчанию.
Теперь перейдем к свойствам источника.
Свойства источника
шрифтЭто свойство является наиболее полным из всех, связанных с источником, и имеет несколько вариантов при использовании. Вы можете начать с одного, двух, трех или ни одного из значений "font-style", "font-option" и "Font-weight" в первую очередь.
Затем мы должны обязательно указать размер шрифта с помощью «font-size», за которым следует интервал между строками, который происходит с «line-height» и всегда заканчивается типом семейства шрифтов «font-family». Наконец, должно быть установлено одно из следующих значений:
- заголовок : для кнопок или раскрывающихся списков, то есть для элементов управления и полей формы.
- меню : если мы собираемся настроить раскрывающиеся меню или другие типы меню.
- значок : для текстов, показанных под значками.
- message-box : для диалоговых окон, будь то всплывающие окна с ошибками, информационные окна и т.д.
- status-ba r: для строк состояния окна.
- small caption n: для полей и элементов управления малых форм.
В свойстве font мы использовали некоторые другие параметры, которые мы еще не видели, и которые мы объясним ниже:
Шрифт в стиле
С его помощью мы определим стиль шрифта . Возможные значения: «нормальный», то есть по умолчанию, «курсив», если мы хотим, чтобы наше письмо было курсивом, то есть курсивом; или «наклонный», если мы хотим получить наклонную букву, которая является своего рода курсивом, где наклонены только символы, а не все, как курсивом.
Шрифт-вариант
Мы будем использовать его для установки вариантов гарнитур, и у нас есть только два варианта: «обычный», который является вариантом по умолчанию, и вариант «маленьких заглавных букв», также называемый маленькой версией, которая генерирует заглавные буквы, которые будут видны в том же самом шрифте. размер, чем в нижнем регистре.
Шрифт вес
Это одно из наиболее часто используемых свойств, поскольку с его помощью мы можем контролировать толщину букв (глаз, который не совпадает с размером каждой буквы, которую мы увидим позже). Говоря языком, у него есть 9 вариантов, которые составляют сотни от 100 до 900, то есть 100, 200, 300, 400, 500, 600, 700, 800 и 900. Существуют также письменные значения, «нормальное», которое соответствует 400, «жирный», что соответствует 700, и это то, что мы бы назвали жирным, и что любопытно, не в шрифтовом стиле, но здесь. Существуют также значения «жирнее» или «светлее», а иногда и другие, такие как «средний» или «тяжелый», которые присваиваются числовым значениям в зависимости от количества толщин, которыми обладает указанный источник.
$config[ads_text5] not foundРазмер шрифта
С помощью этого свойства мы будем контролировать размер шрифта . Доступны четыре значения: «абсолютный размер», «относительный размер», «процентная единица» и «единица измерения». Существует довольно много абсолютных и относительных единиц измерения, определенных в css как em, который наиболее часто используется в этом свойстве, например, ex, px, %, in, cm, mm, pt или pc. В дополнение к этим мерам есть некоторые слова, которые работают и могут использоваться как xx-small для самых маленьких, x-small, small, medium, large, x-large или xx-large для самых больших. Эти шесть слов соответствуют размерам различных тегов заголовка HTML
в
и это абсолютные размеры измерений, поэтому они всегда будут выглядеть одинаково независимо от разрешения браузера или экрана. Слова «меньше» и «больше» также могут использоваться в качестве относительных мер, которые будут зависеть от размера шрифта элемента, который его содержит.$config[ads_text5] not found
Высота линии
Это уже было определено в свойствах текста.
Шрифт семьиОчень используемое свойство, которое позволяет нам выбрать шрифт или шрифт . Сначала мы указываем имя шрифта или шрифт, и, при желании, за ним могут следовать другие имена шрифтов, если наш браузер или система не имеют первого или не поддерживают его. Тип шрифта по умолчанию отсутствует, поскольку он зависит от нашего браузера, хотя очень распространенным является Times New Roman. Некоторые общие значения типов источников могут быть «засечками», включая некоторые типы, такие как Times New Roman, Garamond, Georgia или Cambria; «Sans-Serif» и его виды Verdana, Arial, Tahoma, Helvetica или Futura. «Моноспейс» и его примеры Courier New или Monaco среди других. И «фэнтези» с комиксами или без воздействия типов. Конечно, есть еще много типов букв, которые мы можем выбрать.
Буква-разнос
При этом мы можем контролировать пространство между буквами, и оно работает точно так же, как и его межсловный аналог свойств текста, со значениями «нормальное» и допустимое измерение.
цвет
Наконец, мы увидим свойство цвета, который мы хотим добавить к нашему тексту . По умолчанию черный. Есть несколько способов выбрать цвет, один из них через 17 различных слов цвета: аква, черный, красный, желтый, синий, фуксия, зеленый, салатовый, оранжевый, серый, бордовый, оливковый, темно-синий, фиолетовый, серебристый, чирок и белый.
Другим вариантом является установка процентного цвета RGB, для этого достаточно указать три процента, соответствующие цветам Красный ®, Зеленый (G) и Синий (B):
цвет: rgb (22%, 76%, 14%); (3 процента не должны давать 100%)
Другой способ заключается в использовании десятичного RGB, который работает точно так же, как процентное RGB, но вместо того, чтобы ставить три значения в процентах, они помещаются как десятичные значения:цвет: rgb (114, 29, 54);
Таким же образом мы можем выбрать, что наш RGB является шестнадцатеричным :цвет: rgb (# 23A556);
С этими опциями мы можем хорошо провести время, изменяя и тестируя различные стили, цвета и шрифты.
- 0
HTML-код выглядит следующим образом:
1. Первый элемент
2. Второй элемент
3. Третий элемент
Или точно так же без порядкового первого:
Первый предмет
Второй элемент
Третий элемент
В HTML есть определенные предварительные форматы, когда мы создаем список, то есть есть определенные поля, цвет шрифта, маркировка, заливка и т. Д. который появляется по умолчанию при создании нашего списка. Плохо то, что визуально это выглядит не очень хорошо, хорошо то, что изменить его по своему вкусу очень просто благодаря CSS.
Давайте начнем с рассмотрения различных типов пуль, которые мы можем разместить в нашем меню. По умолчанию каждому элементу в списке предшествует черный круг. Однако мы можем поставить квадраты, пустые кружки или изображение нашего файла.
Код для изменения маркера в CSS3 выглядит следующим образом:
#menu {list-style-type: square;} Там мы можем поместить зарезервированные слова в квадрат, чтобы они выглядели как квадрат, круг для пустых кругов или URL, например, url (misimagenes / midubujo.webp). Тем не менее, я думаю, что наиболее распространенным является то, что мы не ставим маркеры, если наше меню динамическое. В этом случае слово, которое будет использоваться, не будет ни одним.Чтобы изменить поля, используя пример меню, так же просто, как использовать этот код в CSS3 :
#menu {margin: 0px;} Там на полях мы можем поместить желаемое значение и выбрать меру в процентах, в пикселях и т. Д. И важно сказать, что в некоторых браузерах или их версиях могут быть проблемы, поэтому рекомендуется писать в дополнение к написанию поля для написания заливки. Это сделано с отступом: #menu {margin: 0px; обивка: 2px; } Чтобы выбрать край нашего меню и каждого из элементов, мы рассмотрим следующий код CSS3 : #menu {border: 2px;} С помощью границы слова мы можем указать, какой размер или толщину мы хотим. Границу можно применить к границе в целом, но мы также можем указать, хотим ли мы, чтобы она была только боковым краем или нижним или верхним краем. Это достигается путем добавления границы снизу, сверху, справа или слева.В дополнение к толщине границы есть поле, которое имеет много возможностей, мы можем выбрать стиль, цвет, градиент
и посмотрим некоторые варианты.
Border-Style
Начиная со стиля границы, стиля границы, наиболее часто используемые возможности:
никто
Что он делает, так это удаляет сам край. Это опция по умолчанию, поэтому обычно, когда мы создаем списки для наших меню, границы не появляются, если мы не укажем это.
твердый
Это край, который можно использовать больше. Это сплошная черная граница.
скрытый
Или скрытый - это еще один вариант, в котором мы не визуализируем ребра, поскольку они скрыты. Однако для целей программирования он существует. Он используется для разделения границ с другими смежными ячейками или таблицами, даже если мы не хотим видеть толстую границу.
гряда
Мы поставим это преимущество, если хотим, чтобы оно выделялось на фоне остальных. Делает край, кажется, помещенным на один уровень выше остальных на экране.
боковик
Как и предыдущий, это выступающий край, но он не кажется уровнем над поверхностью экрана того, что находится внутри.
желобок
В отличие от гребня с этим стилем границы, кажется, что элемент погружен ниже остальных.
вставка
Точно так же, как в Groove, этот край не кажется утопленным, но на самом деле он на один уровень ниже остальных.
пунктирный
С помощью этого стиля мы генерируем ребро, образованное линией точек, черных по умолчанию и пробелов.
двойной
Как говорит само слово, это двойная граница, образованная двумя черными непрерывными линиями, разделенными пробелом.
$config[ads_text6] not foundпунктирная
Это особый тип пунктирного края, только точки становятся более крупными полосами, то есть это своего рода прерывистые линии.
Как и в случае с бордюром, в стиле бордюра мы можем определить край одной стороны, две, верхний предел, нижний предел или все. Если мы записываем только одно значение, оно размещается на всех ребрах, и если мы пишем вместо одного из двух вариантов, первый предназначен для верхнего и нижнего ребер, а второй - для сторон.
Теперь мы определили границу, размер и стиль, однако меню все еще очень простое и визуально красивое. Мы можем захотеть вертикальные меню, так как они создаются по умолчанию, но если мы хотим, чтобы они были горизонтальными, мы должны добавить зарезервированное слово с плавающей точкой, чтобы каждый элемент в списке располагался рядом со следующим.
Я объясню это немного подробнее, каждый элемент списка, который мы закодировали с помощью «li», по умолчанию имеет поведение элемента блока, то есть после размещения он создает разрыв строки и предотвращает размещение другого элемента в ваша сторона Если мы хотим разместить каждый элемент нашего списка рядом с предыдущим, мы должны устранить это поведение блока.
Для этого код будет следующим:
#menu {list-style: none; поле: 0px; отступы: 0; } #menu li {margin: 2px; обивка: 2px; граница: 2px solid; плавать: слева; } При этом мы генерируем меню и устанавливаем базовые характеристики поля и отступа в 0 и без рамки, а затем к каждому элементу, заключенному в li в нашем меню, добавляем другие функции, 2 пикселя поля и отступа, 2 пикселя сплошного края и что он плавает влево, то есть справа от него может быть помещен следующий элемент. Таким образом, у нас уже есть наше горизонтальное меню .
Теперь, если мы хотим, чтобы наш список действовал как меню и перенаправлял нас туда, куда мы хотим, мы должны добавить ссылку на наши элементы. Это очень просто. В нашем коде в HTML мы добавляем следующее:
Наконец, мы увидим некоторые варианты внешнего вида.
Свойства текста
ширина
Если мы хотим поставить фиксированную ширину. Например ширина: 100 пикселей;
Текстовое оформление
Если мы хотим, чтобы текст нашего элемента был каким-то образом оформлен. Есть много возможностей, но некоторые из наиболее распространенных:
СТАТЬИ