Разделителна линия на етикета. Хоризонтални линии. Вертикални линии в HTML

По принцип хоризонталните линии се използват за декориране на HTML страници на уебсайт, придавайки им по-привлекателен вид. Но те също могат визуално да разграничат информацията от съседните секции, добавяйки удобство за читателите, когато я изучават. По принцип начертайте хоризонтални линии, където имате нужда, това е всичко.

Как да начертаете хоризонтална линия?

Има специален таг за рисуване на хоризонтални линии в HTML

. И той е блокиращ етикет, тоест създава прекъсвания на редове преди и след себе си, така че редът винаги завършва на отделен ред. Съответно, може да се посочи само вътре в тагове, които могат да съдържат блокови елементи, например или
. Но ето ме тук
не може да има съдържание, защото просто няма затварящ етикет, което означава, че е празен.

Пример за рисуване на хоризонтални линии в HTML

Рисуване на хоризонтални линии

Параграф.

Параграф.

Параграф.

Резултат в браузъра

Параграф.

Параграф.

Параграф.

Както можете да видите, линиите се оказват много тънки, непривлекателни и изтеглени до цялата налична ширина, така че сега ще научим как да ги променяме, за да изглеждат по-привлекателни.

Как да промените цвета, дебелината и ширината на хоризонталните линии?

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

имаше специални атрибути, с които можете да промените цвета, дебелината и ширината на хоризонталните линии. Това са съответно цвят, размер и ширина. Но в новите версии те бяха изоставени в полза на Cascading Style Sheets (CSS), така че, както може би се досещате, ние отново ще използваме нашия любим стилов атрибут. Общият синтаксис е:

style="background:color" >- цвета на линията (или по-скоро нейния фон).

style="height:size" >- дебелина на линията.

style="width:size" >- ширина на линията.

стил= "фон:цвят; височина:размер; ширина:размер"> - или можете да посочите всички параметри наведнъж, просто не забравяйте за точката и запетая (;).

Цвят може да бъде определен чрез името му на английски или чрез HEX кода на цвета, предшестван от решетка (#). Е, вече знаете за това от урока нататък промяна на цвета на текста и фона.

Но ще говорим повече за преоразмеряването. Както си спомняте от урок за смяна на шрифтове, има около десет мерни единици в CSS, но ширина на линиятаможе да се посочи само в пиксели (px) и проценти (%), и дебелинаобикновено само в пиксели. Ако поставите други мерни единици, няма да е грешка, но браузърите просто ще ги игнорират.

Ако посочите размери в пиксели, тогава дебелината и ширината на линията ще зависят от резолюцията на монитора, на който се гледа вашия сайт (колкото по-висока е разделителната способност на екрана, толкова по-тънка и тясна е линията).

Както вече казах, само ширината на линията може да бъде зададена като процент. Процентните размери винаги зависят и се изчисляват въз основа на размера на родителския контейнерен елемент, в който се намира етикетът

. В този случай размерите на родителя се приемат за 100%. Например, ако поставим етикета
style="width:50%" >вътрешен елемент
, тогава без значение как променяме размера на прозореца на браузъра или разделителната способност на монитора, ширината на линията винаги ще бъде половината от ширината на блока
.

Пример за промяна на цвета, дебелината и ширината на хоризонталните линии.

Променете цвета, дебелината и ширината на хоризонталните линии.

Резултат в браузъра

Промяна на позицията на хоризонталните линии

Когато промените ширината на хоризонталната линия, можете ясно да видите, че браузърите винаги я поставят в центъра. Ако искате да промените позицията му, просто използвайте вътре

подравнете атрибут със следните стойности:

  • център- линията е подравнена към центъра (стойност по подразбиране).
  • наляво- притиска към левия ръб.
  • точно- притиска десния ръб.

Пример за подравняване на хоризонтална линия.

Променете позицията на хоризонталните линии.

Резултат в браузъра

Как да премахнете рамката около линия?

Вижте първия пример от този урок. Какъв цвят мислите, че са тези линии? Но това не е вярно. Те са прозрачни, като всички елементи на страницата, които нямат указание фонов цвят! не ми вярваш След това вижте примера, в който променихме цвета на линиите. За първия не зададохме цвета, а само увеличихме размера му, а тази линия не е ли прозрачна? това е!

Сега ще обясня. По подразбиране браузърите рисуват рамки около линии, които създават триизмерен ефект. Така че, когато не увеличаваме дебелината на хоризонталните линии, браузърите ни показват само тези рамки, тъй като дебелината на самата линия е 0px.

За да премахнете рамката около линията, която често само се разваля външен вид, ще приложим отново атрибута style. И е написано така:

домашна работа.

  1. Създайте заглавия на статии, раздели и подраздели. Поставете ги всички в центъра.
  2. Задайте шрифта Arial за цялата страница и Courier за заглавията.
  3. Нека размерът на шрифта на цялата страница е 85% от размера на браузъра по подразбиране. А заглавията имат съответно 145%, 125% и 110% от размера на шрифта на страницата.
  4. Напишете параграф под първото заглавие, дълъг цитат под второто и стихотворение под третото. И нека стихотворението се намира в центъра на страницата.
  5. Маркирайте в удебелен шрифттри думи в цитат.
  6. Под заглавието на статията начертайте червена хоризонтална линия с три пиксела по цялата ширина на страницата.
  7. В горната и долната част на стихотворението начертайте линии с дебелина един пиксел в черно. Нека ширината на горния ред е приблизително равна на ширината на стиха, а долната - наполовина.
  8. Премахнете ненужните рамки от линиите.

Хоризонтални линииобразуван от несдвоен (не е необходим затварящ етикет) таг

и могат да бъдат доста уникални дизайнерски елементи. Форматиране на текст с добавяне хоризонтален HTMLредовете ще придадат на страницата определена логика на представяне на текста и също така ще улеснят читателя да подчертае блокове от информация, които трябва да бъдат изучавани последователно. Етикет
може да образува хоризонтални линии с различни цветове, дебелини и дължини. И това е доста лесно да се направи, както е показано в примерите по-долу.

Между другото, можете също да използвате свойствата на стила на блока

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

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

А вертикални линии се формират всъщност в едни и същи блокове

И
.
Единственото неудобство е, че етикетът не е наличен във всички браузъри.
работи по същия начин, но тук трябва да опитате
и коригирайте страницата или използвайте актуализирани браузъри.

Оформяне на хоризонтални линии:

Етикет
вмъква хоризонтална линия в страницата и има следните атрибути:

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

Примери за хоризонтални линии в HTML:

Примери за вертикални линии в HTML:

Ето пример за червена вертикална линия вляво.

Ето пример за червена вертикална линия вдясно.

Ето пример за хоризонтална червена линия в горната част.

Ето пример за хоризонтална линия в червено по-долу.

Ето пример за хоризонтални и вертикални линии.

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

обърнете внимание на атрибута стил
граница- ляво (-дясно): 4px плътно #FF0000;:

Кръг, образуван с помощта на етикет

Ето пример за червена вертикална линия вляво.

Ето пример за червена вертикална линия вдясно.

Ето пример за хоризонтална линия в червено по-долу.

Ето пример за хоризонтални и вертикални линии.

И ако анализираме тези примери, можем да направим доста просто заключение, че вертикалните линии се оформят най-добре с помощта, а опциите за междинни линии могат да бъдат направени с етикет

Но всичко зависи от въображението и исканията. Така че изберете и оформете.

От автора:Поздравявам те. Необходимостта да се представят няколко блока на уеб страница в един ред е много често срещана задача, пред която са изправени дизайнерите на оформление. Това се случва по време на оформлението на почти всеки шаблон, така че във всеки случай всички трябва да знаем и прилагаме основните начини за промяна на поведението на блоковете.

Преди да разгледаме най-често срещаните техники, бих искал да си припомня малко теория. Елементите на уеб страницата са разделени на блокови и вградени елементи. И разликата между тях е много проста - малките букви могат да бъдат поставени на един ред, но блоковите не могат. Разбира се, разликите не свършват дотук, но това е основната разлика. Блоковете вече могат да имат отстъпи в горната и долната част (вградените нямат) и към тях могат да се прилагат повече свойства.

Основни начини за подреждане на блокове в CSS

Няма да усложняваме нищо, има 3 основни начина:

Преобразувайте блокове във вградени елементи. В този случай свойствата на блока се губят, така че тази опция почти никога не се използва

Направете необходимите елементи блок-линия. Това е специален тип, при който елементът запазва свойствата си, но в същото време позволява други блокове да бъдат разположени наблизо.

Направете елементите плаващи, като използвате свойството float.

Нека се съсредоточим върху тези опции. Няма да разглеждаме Flexbox, табличен дисплей и други аспекти. И така, да кажем, че имаме 3 подзаглавия.

Заглавие 1

Заглавие 2

Заглавие 3

Естествено, всички свойства на css трябва да бъдат записани отделен файл(style.css), който трябва да бъде свързан с html документа. В този файл ще напиша минимален стил, така че нашите подзаглавия да се виждат лесно.

h3 (фон: #EEDDCD; )

h3 (

фон: #EEDDCD;

Ето ги на страницата:

Те се държат като блокове. Всяка е разположена на собствен ред, между тях има отстъпи. Ако желаете, можете също да зададете всякакви вътрешни подложки и да правите каквото искате.

Нека го преобразуваме в редове и веднага да добавим отстъпи. За да направите това, h3 селекторът трябва да добави следните свойства:

дисплей: вграден; подложка: 30px;

Има 2 основни проблема, които възникват при използването на тази техника. Първият е минималният отстъп. Образува се поради факта, че в кода има едно пространство между блоковете, което образува тази вдлъбнатина. Ако този проблем се нуждае от решение, има 2 основни възможности:

В html поставете кода на необходимите блокове в един ред без интервали

Добавете отрицателно поле отдясно на -4 пиксела. Толкова отнема едно място.

Вторият проблем е, че ако елементите имат различна височина, може да възникнат проблеми с дисплея. всичко на всичко най-добър вариант- плаващи блокове. Вместо display: inline-block пишем това:

Блокове в една линия с помощта на рамката

Веднага ще кажа, че ако ще използвате нормална CSS рамка (например Bootstrap), тогава всичко е много по-просто. Целият CSS код, отговорен за подреждането на елементите, вече е написан и всичко, което трябва да направите, е да зададете правилните класове. За да направите това, просто научете мрежовата система и ще можете да правите адаптивни шаблони с няколко колони без много затруднения. Най-малкото ще бъде много по-лесно, отколкото да пишете css от нулата.

Друго предизвикателство да пишете код от нулата идва, когато имате нужда от адаптивен дизайн. Разбира се, можете да го внедрите сами, като притежавате медийни заявки, но ще бъде много по-трудно, ако имате сложен шаблон.

Например, когато имате големи екранитрябва да има 4 колони, на средните - 3 и нататък мобилни телефони— 2. С помощта на рамки като Bootstrap, или по-скоро с помощта на неговата мрежа, внедряването на нещо подобно е само за няколко минути.

Гладко превеждайки темата в рамката на Bootstrap, още веднъж ще отбележа, че ако сте изправени пред задачата да изложите сложен адаптивен шаблон, тогава е просто грях да не използвате мрежата. Дори не е необходимо да се свързвате, за да направите това. пълна версиярамка - можете да я персонализирате и да спрете там само това, от което наистина се нуждаете.

Можете да научите как да работите с рамката, като използвате . Там се обяснява теорията, но най-важното е, че има практика. Вие измисляте 3 адаптивен шаблони получете страхотно изживяване, което ще ви позволи да проектирате уебсайтове по поръчка или за себе си. И ако искате да се запознаете безплатно с предимствата и възможностите на рамката, предлагам ви да прегледате нашата поредица от статии за Bootstrap, както и за прост дизайн на оформление. Пожелавам ви успех в оформлението и изграждането на уебсайт като цяло.

Задача

Направете хоризонтална линия на страницата.

Решение

Хоризонталните линии са добри за разделяне на един блок текст от друг. Малък текст с хоризонтални линии отгоре и отдолу привлича повече вниманието на читателя от обикновения текст.

Използване на етикет

можете да начертаете хоризонтална линия, чийто външен вид зависи от използваните атрибути, както и от браузъра. Тагът е блоков елемент, така че редът винаги започва с нов ред, а след него всички елементи се показват на следващ ред. Благодарение на многото атрибути на етикета
линията, създадена чрез този етикет, е лесна за управление. Ако свържете и силата на стиловете, тогава добавянето на ред към документ става проста задача.

Линия по подразбиране

показва се в сив цвят и с обемен ефект. Този тип линия не винаги отговаря на дизайна на сайта, така че желанието на разработчиците да променят цвета и други параметри на линията чрез стилове е разбираемо. Браузърите обаче имат смесени подходи към този проблем, което означава, че ще трябва да използвате няколко стилови свойства наведнъж. По-специално по-старите версииИнтернет браузър

Explorer използва свойството color за цвят на линията, а други браузъри използват background-color. Но това не е всичко, трябва също така да посочите дебелина на линията (свойство за височина), различна от нула, и да премахнете рамката около линията, като зададете свойството border на none.

Като съберем всички свойства заедно за hr селектора, получаваме универсално решение за популярни браузъри (пример 1).

Пример 1: Хоризонтална линия

HTML5 CSS 2.1 IE Cr Op Sa Fx

Цвят на хоризонталната линия Текстов низРезултат

този пример

показано на фиг. 1. ориз. 1. Цветна хоризонтална линияПоздрави на всички читатели. От време на време майсторите се сблъскват с проблема как да направят хоризонтална или вертикална линия с помощта на HTML или

използвайки CSS

. За това ще ви разкажа днес.

Редове в CSS

Има няколко начина да направите линии. Един такъв начин е да използвате CSS. Или по-скоро с помощта на Border. Нека разгледаме един пример.

И ето какво ще се случи в резултат.

Хоризонтална и вертикална линия с помощта на css.

  • Линиите могат да бъдат начертани в CSS с помощта на оператора Border. Ако имате нужда само от правоъгълник с фиксирана ширина на рамката, тогава можете просто да използвате този оператор и да му дадете стойност. Например border:5px solid #000000; ще означава, че границите на блока имат ширина, равна на 5 пиксела черен цвят.
  • Ако обаче трябва да зададете не всички граници, а само някои, тогава трябва да посочите кои граници са необходими и каква стойност ще има всяка от тях. Това са операторите:
  • border-top – задава стойността на горната граница
  • border-bottom – задава стойността на долната граница

border-left – задава стойността на лявата граница

border-right – задава стойността на дясната граница.

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

Но на този етикет могат да се дадат и някои стойности.

  • ширина– задава стойността на ширината на линията.
  • Цвят– задава цвета на линията.
  • Подравнете– задава подравняване вляво, в центъра, вдясно
  • Размер– задава стойността на дебелината на линията в пиксели.

Използвайки hr тага, можете също да зададете вертикална линия. Но в този случай ще трябва отново да прибягвате до стилове.

В този случай ще бъде начертана вертикална линия със сто пиксела височина, един пиксел дебелина и пет пиксела с отстъп.

Заключение.

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

Е, ако имате още въпроси, задайте ги в коментарите.