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

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

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

• Горизонтальная HTML линия определяется непарным тегом
  

  ---

  .

• HTML линия может быть не только горизонтальной, но и вертикальной.
• Вертикальная линия в HTML может являться стороной блока или ячейки таблицы.
• Линия в HTML бывает любого размера и цвета, имеет или не имеет объемность.

HTML горизонтальная линия и пример ее построения:

• align=»» – выравнивает линию справа или слева.
• width=»50%» – ширина в пикселях или процентах.
• size=»» – задает толщину горизонтальной линии.
• color=»#00ff00″ – устанавливает цвет линии.

HTML линия может быть разной:

Вертикальная HTML линия и способы ее построения

Вертикальная линия в HTML отображается как сторона блока или таблицы.

Пример построения вертикальной линии:

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

В данном случае вертикальная HTML линия является стороной отформатированного блока.

Обычный блок с помощью стилевых описаний видоизменен до неузнаваемости. Хотите научиться так манипулировать элементами страницы – учите CSS, а что касается конкретно этого кода, то следует обратить внимание на стилевой атрибут border-left и его значения.

Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

HTML блоки и параграфы HTML линии Фон HTML страницы

© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | HTML, линия? – Не вопрос!

Источник

СSS стили для горизонтальных линий

Сборник горизонтальных линий с тегом

---

разных видов и стилей.

Сплошные линии

Двойная линия

Многострочная линия

Двухцветная линия

Трехцветная линия

Горизонтальный градиент

Вертикальный градиент

Линия с тенью

Замыленная линия

Линия «Полка»

Пунктирные линии

Пунктирная линия с фоном

Пунктирная линия с градиентом

Точечные линии

Линия из крупных точек

 
') 0 0 100% repeat; background-position: 50%; box-sizing: border-box; color: orange; > 

Разное

Вертикальные линии

Линии под углом

Наклонные линии

Комментарии 2

Авторизуйтесь, чтобы добавить комментарий.

Другие публикации

Подчеркивание текста можно сделать с помощью нескольких свойств CSS — background-image, background-size и.

Градиент в цвет шрифта можно добавить с помощью CSS свойства background-clip: text, которое окрашивает текст в цвет или изображение указанного в background-image.

Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет.

Источник

Html div line color

The enumerated value type represents keyword values that define the style of a line, or the lack of a line. The keyword values are used in the following longhand and shorthand border and column properties:

• border , border-style
• border-block , border-block-style
• border-block-end , border-block-end-style
• border-block-start , border-block-start-style
• border-bottom , border-bottom-style
• border-inline , border-inline-style
• border-inline-end , border-inline-end-style
• border-inline-start , border-inline-start-style
• border-left , border-left-style
• border-right , border-right-style
• border-top , border-top-style
• column-rule , column-rule-style

Syntax

Values
The enumerated type is specified using one of the values listed below:
 
none
 
Displays no line. The computed value of the line width is 0 even if a width value is specified. In the case of table cell and border collapsing, the none value has the lowest priority. If any other conflicting border is set, it will be displayed. The none value is similar to hidden.
 
 
hidden
 
Displays no line. The computed width of the line is 0 even if a width value is specified. In the case of table cell and border collapsing, the hidden value has the highest priority. If any other conflicting border is set, it won't be displayed. The hidden value is similar to none, but hidden is not a valid value for outline styles.
 
 
dotted
 
Displays a series of round dots. The radius of the dots is half the computed value of the line's width. The spacing of the dots is not defined by the specification and is implementation-specific.
 
 
dashed
 
Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.
 
 
solid
 
Displays a single, straight solid line.
 
 
double
 
Displays two straight lines with some space between them. The length of the lines adds up to the pixel size defined by the line's width.
 
 
groove
 
Displays a border with a carved appearance. This value is the opposite of ridge.
 
 
ridge
 
Displays a border with an extruded appearance. This value is the opposite of groove.
 
 
inset
 
Displays a border that makes the element appear embedded. This value is the opposite of outset. When applied to a table cell border and border-collapse is set to collapsed, this value behaves like groove.
 
 
outset
 
Displays a border that makes the element appear embossed. This value is the opposite of inset. When applied to a table cell with border-collapse set to collapsed, this value behaves like ridge.
 
 
 
Note: When is used as the value type for outline and outline-style properties, it is similar to , but does not support hidden and includes the auto value. When auto is set, the user-agent defined value is used.
 
Examples
The first example demonstrates all the keyword values. The second example demonstrates how some line style colors may display in unexpected ways.
Defining line styles
This example shows all the values as values for the CSS border-style and column-rule-style properties.
 
HTML
 
This example uses multiple elements, each with a class representing the value that is being demonstrated.
 
html
div class=""> p>line-style>p> p>a b c d e f g h i j k l m n o p q r s t u v w x y zp> div> 
 
div class="none"> p>nonep> p>a b c d e f g h i j k l m n o p q r s t u v w x y zp> div> div class="hidden"> p>hiddenp> p>a b c d e f g h i j k l m n o p q r s t u v w x y zp> div> div class="dotted"> p>dottedp> p>a b c d e f g h i j k l m n o p q r s t u v w x y zp> div> div class="dashed"> p>dashedp> p>a b c d e f g h i j k l m n o p q r s t u v w x y zp> div> div class="solid"> p>solidp> p>a b c d e f g h i j k l m n o p q r s t u v w x y zp> div> div class="double"> p>doublep> p>a b c d e f g h i j k l m n o p q r s t u v w x y zp> div> div class="groove"> p>groovep> p>a b c d e f g h i j k l m n o p q r s t u v w x y zp> div> div class="ridge"> p>ridgep> p>a b c d e f g h i j k l m n o p q r s t u v w x y zp> div> div class="inset"> p>insetp> p>a b c d e f g h i j k l m n o p q r s t u v w x y zp> div> div class="outset"> p>outsetp> p>a b c d e f g h i j k l m n o p q r s t u v w x y zp> div> 
 
CSS
 
In the CSS for this example, the border and the column-rule for all the 
 
elements is defined to have a width of 7px and the style value of double . For each paragraph, the double value is then overridden by specifying a different value for the border-style and column-rule-style properties.
 
div  display: flex; gap: 1em; list-style: none; align-items: center; > div:first-of-type  display: none; > p:first-of-type  text-align: center; line-height: 5em; > p  width: 10em; height: 5em; background-color: palegoldenrod; > 
 
p  padding: 5px; border: double 7px #bada55; > p + p  columns: 3; column-gap: 20px; column-rule: double 7px; border-color: #000000; > .none p  border-style: none; column-rule-style: none; > .hidden p  border-style: hidden; column-rule-style: hidden; > .dotted p  border-style: dotted; column-rule-style: dotted; > .dashed p  border-style: dashed; column-rule-style: dashed; > .solid p  border-style: solid; column-rule-style: solid; > .double p  border-style: double; column-rule-style: double; > .groove p  border-style: groove; column-rule-style: groove; > .ridge p  border-style: ridge; column-rule-style: ridge; > .inset p  border-style: inset; column-rule-style: inset; > .outset p  border-style: outset; column-rule-style: outset; > 
 
Result
 
Notice that the black border is not always black.
 
Defining line styles and colors
 
This example demonstrates line-style and color choice. With some keyword values, the color of the line may not be what you expect. To create the required "3D" effect of groove, ridge , inset , and outset styles when displaying these values in black or white, user agents use different color calculations than any other color-line combinations.
 
HTML
 
div style="border-color: #000000">div> 
 
div style="border-color: #000001">div> div style="border-color: #ffffff">div> div style="border-color: #ff00ff">div> div style="border-color: #ffff00">div> div style="border-color: #00ffff">div> div style="border-color: #cc33cc">div> div style="border-color: #cccc33">div> div style="border-color: #33cccc">div> div style="border-color: #ff0000">div> div style="border-color: #00ff00">div> div style="border-color: #0000ff">div> div style="border-color: #cc3333">div> div style="border-color: #33cc33">div> div style="border-color: #3333cc">div> div style="border-color: #993333">div> div style="border-color: #339933">div> div style="border-color: #333399">div> section> 
 
CSS
 
The four sides of each have a different value, and each list item has a different value. We use generated content to display the CSS declared inline.
 
section  display: flex; flex-wrap: wrap; gap: 1em; text-transform: uppercase; font-family: monospace; > 
 
div  border-width: 10px; border-style: inset groove ridge outset; padding: 5px; > div::before  content: attr(style); > 
 
Result
 
Notice that the almost-black color of #000001 may be different from the actual black, and the contrast between the dark and light edges is more noticeable when using lighter colors.
 
Specifications
 
Browser compatibility
 
BCD tables only load in the browser
 
See also
 
Found a content problem with this page?
 
This page was last modified on Jul 18, 2023 by MDN contributors.
 
Your blueprint for a better internet.
 
Источник
 
Читайте также:  Макрос libreoffice calc python