Html — Оформление линий


Содержание

Html — Оформление линий

Из этого урока вы узнаете, как «рисовать» (создавать) горизонтальные линии в html-странице; как задавать цвет, длину, ширину и ориентацию в «HTML пространстве». Саму линию обозначают тегом .

Для того, что бы понять как делать всё выше описанное напишем такой код:

А в этом коде длина линии будет задана в процентах – то есть, если вы сжимаете или увеличиваете окно браузера, то линия будет изменять длину в зависимости от заданного параметра (процентов).

Важно заметить, что длина линии может быть ориентирована относительно какого-то элемента, внутри которого она находится и этими элементами может быть – таблица ( ) и блок (

Горизонтальные и вертикальные линии в HTML

Тег HR,hr,написание горизонтальных и вертикальных линий в HTML,примеры цветных горизонтальных и вертикальных линий на страницах сайта.

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

Кстати можно также использовать свойства стилей блоков и

Вертикальные линии в HTML.

А вертикальные линии формируются фактически в тех же блоках и

Формирование горизонтальных линий:

Тег вставляет на страницу горизонтальную линию и имеет следующие атрибуты:

Атрибуты тега
align Выравнивание линии справа или слева,
по умолчанию — по центру.
size Задает толщину линии в пикселах.
width Задает ширину линии в процентах или пикселах.
color Задает цвет линии.
noshade Сплошная окраска, значений не требует.

Синтаксис тега :

Примеры горизонтальных линий в HTML:

Примеры вертикальных линий в HTML:

Пример цветной вертикальной линии в таблице с применением стиля для окраски левого бордера.

кружок, сформированный при помощи тега

Синтаксис примеров вертикальных и горизоньальных линий в HTML:

обратите внимание на атрибут стиля
border- left(-right): 4px solid #FF0000; :

И если проанализировать данные примеры, то можно сделать довольно простой вывод, что вертикальные линии лучше всего формировать при помощи блоков DIV, а проможуточные варианты линий можно делать с тегом Но все зависит от фантазии и запросов. Так что выбирайте и формируйте.

HTML: Заголовки, линии и комментарии

HTML заголовки

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

(heading),

) до самого незначительного (

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

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

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

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

Горизонтальная линия


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

Цукерберг рекомендует:  Стартапы - Воронеж! Нужен программист мечтатель ;)

Комментарии

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

Есть много причин для использования комментариев в HTML-документах, например пояснение блоков кода, временное выключение кода при отладке и т.д.

Примечание: обратите внимание, что комментарии могут занимать несколько строк. Помните, что все, написанное между символами и , даже HTML-код, будет проигнорировано браузером.

Горизонтальная линия css, как сделать правильнее (красивее)?

Проблема с тегом в том, что линия — это не контент, а дизайн. Соответственно, идеально, если дизайн рисуется при помощи css. А уж как конкретно рисовать линию зависит от разметки и дизайна конкретной страницы. Это может быть банальная граница, может быть box-shadow, могут быть псевдоэлементы с фоновой заливкой. Любой из перечисленных вариантов адекватен и имеет право на существование.

P.S. Что-то не вижу, чтобы тег был объявлен устаревшим. Все атрибуты его порезали, но в спеке HTML5 он есть.

подскажите как лучше сделать такое

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

Оформление линий CSS

Оформление линиями на странице — очень важное мероприятие для общего восприятия посетителями сайта. Оформлять линии можно присвоенному блоку

, , таблице

и её отдельным ячейкам, а также можно оформлять общие линии, которые имеют тэг .

Использование CSS для оформления сайтов можно обсудить в специально созданной теме нашего форума.

Содержание

Оформление объектов линиями CSS

Чтобы обрамить блок, таблицу, рисунок линией в CSS файле пишем:

  • #name — название div, которое было присвоено
  • В фигурных скобках вписываются значения настроек элемента div, в данном случае border — означает «линия», 1px — толщина линии, которую можно увеличивать и линия будет толще, solid — означает непрерывная линия, blue — цвет линии, который можно также менять.
  • Имеем в виду, что при оформлении картинок на странице можно каждой картинку оформить в

В данном случае все картинки на сайте будут обрамлены красной линией. К слову говоря через эту глобальную настройку картинко можно задавать размеры картинок и другие css настройки

Виды линий

Типы линий CSS

В настройках CSS можно менять вид линий, например параметр solid можно поменять на нижеследующие:

  • none — линия отсутствует (по умолчанию).
  • dotted — линия из ряда точек.
  • ridge — линия «гребень»
  • dashed — пунктирная линия.
  • double — двойная линия
  • groove — линия «бороздка»
  • inset — вдавленная линия
  • outset — выдавленная линия
  • solid — сплошная линия

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

    Вот пример, как выглядят «sol >Текст, картинка, ссылка или другие элементы страницы

Закругление линий CSS

Кроме того, есть возможность закруглить углы того или иного объекта (параметры закругления задаются в пикселях — px):


Добавлены внутренние отступы, чтобы было лучше видно свойства закругления.

Цвет линий в CSS

Цвет линий можно менять простыми английскими словами black — чёрный, white — белый, red — красный и так далее, но можно также задавать цвет специальным кодом, который можно взять с программ таких, как Photoshop или в редакторах страниц. И цвет обозначается следующим образом #29809C, вот пример настройки цвета линий в CSS:

Есть возможность менять цвет и толщину всех четырёх линий по отдельности через знак «;«, задаётся это параметрами. В дальнейшем все различные настройки div разделяются этим знаком

  • border-top — верхняя линия
  • border-bottom — нижняя линия
  • border-left — левая линия
  • border-right — правая линия

Например в CSS пишем:

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

В специально созданном онлайн CSS редакторе можно попробовать задать свои настройки к линиям того или иного элемента на странице и посмотреть на результат.

CSS тэги для оформления линий

  • border — задаёт параметры всех линий объекта.
  • border-bottom — задаёт параметры нижней линии объекта.
  • border-bottom-color — задаёт параметры цвета нижней линии объекта.
  • border-bottom-left-radius — задаёт параметры радиуса нижнего, левого угла объекта.
  • border-bottom-right-radius — задаёт параметры радиуса нижнего, правого угла объекта.
  • border-bottom-style
  • border-bottom-width
  • border-collapse— задаёт одну линию в таблицах.
  • border-color — задаёт параметры цвета всех линий объекта.
  • border-image
  • border-image-outset
  • border-image-repeat
  • border-image-slice
  • border-image-source
  • border-image-width
  • border-left
  • border-left-color — задаёт параметры цвета левой линии объекта.
  • border-left-style
  • border-left-width
  • border-radius — задаёт параметры радиуса всех углов объекта.
  • border-right — задаёт параметры правой линии объекта.
  • border-right-color — задаёт параметры цвета правой линии объекта.
  • border-right-style
  • border-right-width
  • border-spacing
  • border-style
  • border-top — задаёт параметры верхней линии объекта.
  • border-top-color — задаёт параметры цвета верхней линии объекта.
  • border-top-left-radius — — задаёт параметры радиуса верхнего, левого угла объекта.
  • border-top-right-radius — — задаёт параметры радиуса верхнего, правого угла объекта.
  • border-top-style
  • border-top-width
  • border-width
Цукерберг рекомендует:  Флэш галерея с возможностью просмотра на весь экран монитора.

Заключение

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

HTML и CSS – как сделать горизонтальные и вертикальные линии.

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

Линии в CSS

Есть несколько способов, сделать линии. Один из таких способов – использование CSS. А точнее при помощи Border. Давайте рассмотрим пример.

И вот что в результате получится.

Линии, в CSS можно нарисовать при помощи оператора Border. Если нужен просто прямоугольник с фиксированной шириной рамки, то можно просто использовать этот оператор, и задать ему значение. Например border:5px solid #000000; будет означать, что границы блока имеют ширину равной 5 пикселям черного цвета.

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

  • border-top – задает значение верхней границы
  • border-bottom – задает значение нижней границы
  • border-left – задает значение левой границы
  • border-right – задает значение правой границы.

Вертикальная и горизонтальная линия в HTML

Создать линии можно и в самом HTML. Для этого, можно воспользоваться тегом hr.

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

Но этому тегу, можно задать и некоторые значения.

  • Width – задает значение ширины линии.
  • Color – задает цвет линии.
  • Align – задает выравнивание по левому краю, по центру, по правому краю
  • Size – задает значение толщины линии в пикселях.


С помощью тега hr, можно задать и вертикальную линию. Но в этом случае, придется опять прибегнуть к стилям.

В этом случае, будет нарисована вертикальная линия высотой в сто пикселей, толщиной в один пиксель и с отступом в пять пикселей.

Заключение.

Ну вот теперь вы знаете, как можно задать вертикальную и горизонтальную линию. Линии можно задать как на обычных сайтах, с использованием HTML, так и задать на сайте, на котором используется CMS, например, WordPress, но в этом случае, нужно будет перейти в режим HTML.

Ну а если у вас есть еще вопросы, задавайте их в комментариях.

Сложный заголовок с линиями по бокам текста на css

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

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

Прямая линия HTML

Прямая линия очень интересный элемент html. .

Несмотря на свою простоту, расположенная в нужном месте, она придаёт контенту неповторимый вид, а так же её саму можно сделать очень красивой

Для создания прямой линии в HTML применяется тег . Он является блочным элементом и, значит, всегда начинается с новой строки.

Это одиночный тег и не имеет закрывающей части, что можно использовать при веб программировании, так как одиночных тегов в html раз-два и обчёлся.

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

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

Чтоб увеличить толщину линии в код вводится свойство height с цифровым значением, которое задаётся в любых доступных в веб размерах.

Цвет линии задаётся свойством background , в значении которого указывается код цвета.

Можно взять линию в рамку. Для этого в код вводится свойство border .

Причём рамка может быть любого вида доступного для рамок html.

Можно убрать боковые грани рамки и сделать линию как-бы трёхцветную.

Для этого в код линии, вместо свойства border , вводятся свойства border-top и border-bottom

Причём все три линии можно сделать разной толщины, цвета и формы.

Можно закруглить и даже заострить торцы линии.

Для этого в код вводится свойство border-radius с цифровым значением, которое задаётся в любых доступных в веб единицах.

Цукерберг рекомендует:  Как использовать VoxImplant в своём проекте на Хакатоне GeekDay#1

Если добавить в код свойство теней box-shadow , то можно сделать прямую линию такого вида

Изменяя третье значение box-shadow , можно размыть края рамки.

А если к комплекту значений box-shadow , через запятую добавить ещё несколько, то можно сделать разноцветную рамку.

Если в код добавить свойство transform , то можно сделать её наклонной, или вертикальной.

Правда свойство transform всё ещё не работает без префиксов, что очень увеличивает код.

Изменяя цифры в значениях, можно всячески изменить внешний вид линии.

Более подробно о свойствах CSS box-shadow и transform , можно узнать в статье Как сделать тень для текста, картинки, блока.

Желаю творческих успехов.


Стоит Ежик на пеньке и хвалит сам себя:
— Я сильный, я сильный, сильный я…
Тут порывом ветра унесло его в кучу дерьма. Ежик вылезает из кучи, отряхивается:
— Но легкий!

3 комментария на «Прямая линия HTML»

В атрибут style добавьте свойства align: left; или align: right;. Если нужно спозиционировать более точно, то вместо них добавьте свойство margin: 0 0 0 0;
Первая цифра — отступ сверху, вторая — отступ справа, третья — отступ снизу, четвёртая — отступ слева. Если нужно задать отступ только с одной стороны, то в свойстве margin указывается эта сторона: margin-left: 0; и т.п. Если значение больше нуля то к нему добавляются единицы измерения: margin-left: 6px;. Только при использовании свойства margin, текст не будет обтекать линию. Если нужно чтоб обтекал, то свойства align: left; и margin применяются вместе.

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

Html — Оформление линий

Урок 16. Как вставить горизонтальную линию на HTML странице.

Автор: Андрей Краснокутский

С помощью тега hr ( Horisontal Rule ) на web-страницу можно вставить горизонтальную разделительную линию. Например вот так:

Вот что мы указали в коде листинга: Линия размером 50 процентов от общей ширины, с выравниванием по центру и толщиной в один пиксель.

Тега hr м ожет иметь следующие атрибуты:

Несколько примеров линий:

Линия размером 50 процентов с выравниванием по левому краю и с нулевой толщиной.

Линия размером 80 процентов, выравнивание по центру и толщиной 3 пикселя:

Линия размером 80 процентов с толщиной 8 пикселей. Кроме этого линия закрашена синим цветом, выравгивание по центру — по умолчанию:

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

Длина и толщина линии одинакова, за счет этого и рисуется квадрат. Он выполнен с выравниванием по центру и имеет красный цвет:

Расположить несколько квадратов в одну строку, к сожалению, нельзя.

Поделитесь этой информацией со своими друзьями!

Комментарии к этой статье (уроку):

Комментарии добавил(а): Калян
Дата: 2010-12-03

А как вертикальную?

Комментарии добавил(а): Ника К.
Дата: 2011-01-10

Спасибо! Все так наглядно и доступно, что чувствуешь себя не очень умным человеком — это даже слишком просто :))

Комментарии добавил(а): пффф
Дата: 2012-12-12

а как вставить картинку? чтобы был не просто горизонтальный разделитель, а картинка в виде гориз.разделит.

Комментарии добавил(а): артьём
Дата: 2014-05-20

спс по инфеи помогло

Комментарии добавил(а): Сергей
Дата: 2015-03-03

Классно! Спасибо автору за простые и понятные примеры!

Комментарии добавил(а): Олег
Дата: 2020-01-23

Пожалуй, можно разместить несколько квадратов в одну линию, но при этом надо применить таблицу. Создаётся строка, а в каждой колонке поместить по квадрату. Это, правда, только предположение. Но попробовать можно.

Текст в линии или как победить дизайнера

Всем привет

Каждому верстальщику хотя бы раз приходилось сталкиваться с задачей размещения текста внутри лини.
Например вот так:

Никогда не возникает проблем, если фон однотонный. Но что делать, если фоном является картинка как в данном примере?
Я предлагаю выношу на Ваш суд следующее решение. Возможно кто-то предложит дополнения или сделает замечания, я только ЗА.

Суть решения в следующем:

— делаем обёртку с фоновым изображением и делаем ей overflow-hidden (чтобы скрыть лишние части линий)
— внутри вставляем обёртку для заголовка в которой центрируем текстовый блок (text-align :center)
— блоку в котором текст делаем относительное позиционирование (position: relative) и display:inline-block
— внутрь блока с текстом кладём две линии, например теги
— каждой из линий делаем positon: absolute, заведомо большую ширину(например 1000% от родительского блока) и top:(X)px (для выравнивания линии по центру текста)
— потом поочерёдно позиционруем линии на 100% влево для правой линии и вправо для левой
— отступы от текста до линий делаем внутренними отступами padding.

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих