По принцип хоризонталните линии се използват за декориране на HTML страниците на сайта, придавайки им по-привлекателен вид. Но те могат също така визуално да разграничат информацията от съседните раздели, като добавят удобство за читателите при изучаването й. Като цяло, нарисувайте хоризонтални линии, където трябва, това е всичко.
Как да начертая хоризонтална линия?
Има специален таг за рисуване на хоризонтални линии в HTML
... Освен това той е блоков маркер, тоест създава прекъсвания на редове преди и след себе си, така че редът винаги се получава на отделен ред. Съответно може да се посочи само вътре в тагове, които могат да съдържат блокови елементи, например или
... Но себе си
не може да има съдържание, тъй като просто няма краен маркер, тоест е празен.Пример за рисуване на хоризонтални линии в HTML
Начертайте хоризонтални линии
Параграф.
Параграф.
Параграф.
Резултат в браузъра
Параграф.
Параграф.
Параграф.
Както можете да видите, линиите са много тънки, невзрачни и начертани до цялата налична ширина, така че сега ще научим как да ги променим, за да изглеждат по-привлекателни.
Как да променя цвета, дебелината и ширината на хоризонталните линии?
В по-старите версии на HTML маркерът
имаше специални атрибути, с които беше възможно да се променят цвета, дебелината и ширината на хоризонталните линии. Това са съответно цвят, размер и ширина. Но в по-новите версии те бяха изхвърлени в полза на каскадните стилови таблици (CSS), така че, както се досещате, отново ще използваме любимия си атрибут за стил. Общият синтаксис е:
style = "фон: цвят">- цвят на линията (или по-скоро нейния фон).
style = "височина: размер">- дебелина на линията.
style = "ширина: размер">- ширина на линията.
стил = "фон: цвят; височина: размер; ширина: размер"> - но можете да посочите всички параметри наведнъж, просто не забравяйте за точката и запетаята (;).Цвят може да бъде определен чрез името си на английски или чрез HEX-кода на цвета, предшестван от хеш (#). Е, вие вече знаете за това от урока нататък промяна на цвета на текста и фона.
Но ще говорим за преоразмеряването по-подробно. Спомняте ли си от урок за смяна на шрифтове, има около десет единици в CSS, но ширина на линиятаможе да се посочи само в пиксели (px) и проценти (%) и дебелинаобикновено само в пиксели. Ако предоставите други единици, това няма да е грешка, но браузърите просто ще ги игнорират.
Ако посочите размери в пиксели, тогава дебелината и ширината на линията ще зависят от разделителната способност на монитора, на който се гледа вашият сайт (колкото по-висока е разделителната способност на екрана, толкова по-тънка и по-тясна е линията).
Както казах, само ширината на линията може да бъде определена като процент. Процентните размери винаги зависят и се изчисляват въз основа на размера на родителския елемент на контейнера, вътре в който се намира етикетът
... В този случай размерът на родителя се приема за 100%. Например, ако поставим етикета
style = "ширина: 50%">вътрешен елемент, тогава без значение как преоразмеряваме прозореца на браузъра или резолюцията на монитора - ширината на линията винаги ще бъде половината от ширината на блока.Пример за промяна на цвета, дебелината и ширината на хоризонталните линии.
Променете цвета, дебелината и ширината на хоризонталните линии.
Резултат в браузъра
Промяна на позицията на хоризонталните линии
Когато промените ширината на хоризонтална линия, става ясно, че браузърите винаги я поставят в центъра. Ако искате да промените позицията му, просто използвайте вътре
подравнете атрибута със следните стойности:
- център- линията е подравнена към центъра (стойност по подразбиране).
- наляво- притиснат към левия ръб.
- право- притиснат към десния ръб.
Пример за подравняване на хоризонтални линии.
Променете позицията на хоризонталните линии.
Резултат в браузъра
Как да премахна границата около линията?
Обърнете внимание на първия пример от този урок. Какъв цвят според вас имат тези линии? И тук е погрешно. Те са прозрачни, като всички елементи на страницата, които нямат цвят на фона! Не ми вярвате? След това разгледайте пример, в който променихме цвета на линиите. За първия не зададохме цвета, а само му увеличихме размера и тази линия не е ли прозрачна? Така че!
сега ще обясня. По подразбиране браузърите рисуват рамки около линии, които създават триизмерен ефект. Така че, когато не увеличаваме дебелината на хоризонталните линии, браузърите ни показват само тези рамки, тъй като дебелината на самата линия е 0px.
За да премахнем границата около линията, която често само разваля външния вид, ще приложим отново атрибута style. И е написано така:
Домашна работа.
- Създайте заглавия на статия, раздел и подраздел. Центрирайте ги всички.
- Задайте цялата страница на Arial и Courier за заглавки.
- Нека размерът на шрифта за цялата страница е 85% от размера на браузъра по подразбиране. А заглавията имат съответно 145%, 125% и 110% от размера на шрифта на страницата.
- Напишете параграф под първото заглавие, дълъг цитат под второто и стихотворение под третото. И нека стихотворението е центрирано на страницата.
- Поставете три думи с удебелен шрифт във вашия цитат.
- Под заглавието на статията нарисувайте трипиксела червена хоризонтална линия по цялата ширина на страницата.
- В горната и долната част на стихотворението нарисувайте черни линии от един пиксел. Нека ширината на горния ред е приблизително равна на ширината на стиха, а на долния ред наполовина по-малко.
- Премахнете ненужните рамки от линиите.
За да подчертаете някои особено важни елементи на сайта, не би било лошо да използвате всякакви CSS стилове и свойства, предвидени за това. Разбира се, не е нужно да се занимавате много с текста и да го подчертавате, например с удебелен шрифт или курсив, да смените фона или да направите рамка около текста. Но не винаги един от представените методи е подходящ. Да приемем, че имате текст, който трябва да бъде отделен поради спецификата на неговото семантично натоварване. Тук идват свойствата на HTML и CSS.
Как да направите ред в текста с помощта на CSS
За да изпълним плановете си, трябва да се обърнем към style.css файлкато в него напише съответния имот граница... Това ще създаде ред над, под или от определена страна на текста. От своя страна има няколко свойства, които са отговорни за показването на реда, а именно:
- граница-отгоре- хоризонтална линия над текста;
- граница вдясно- вертикална линия вдясно от текста;
- граница отдолу- хоризонтална линия под текста;
- граница-ляво- вертикалната линия вляво.
Как да направя ред в html
Използвайки свойствата на CSS, можете да напишете всички необходими стойности, като редактирате HTML кода. За да направите това, трябва да отидете в административната част на сайта. Изберете един от публикуваните материали, превключете текстовия редактор в режим на редактиране на HTML код и добавете CSS свойства. Проба може да се види по-долу.
Как да направя пунктирана или права линия?
Предписвайки тези свойства, ще можете да подчертаете важността на представения материал, параграф или заглавие?
Кратко обяснение на командите
- ширина- дължина на линията;
- твърдо- плътна линия;
- пунктирана- пунктирана линия.
За по-задълбочено запознаване със стиловете препоръчвам да прочетете този.
Трябва да разберете, че в процеса на извършване на промени в кода на сайта, свойствата, които определят вида на линията, нейната дебелина и цвят, са изброени, разделени с интервал.
Този метод има няколко предимства:
Широка гама от възможности, с които можете да направите почти всяка линия.
Лесно извършване на всички необходими промени директно в HTML кода. Това значително опростява задачата за неопитни създатели на сайтове.
Как да направите права хоризонтална линия с помощта на HTML таг
Първото нещо, на което бих искал да ви обърна внимание е, че този таг, въпреки всички тънкости и принципи на html, няма затварящ таг. Може да се използва навсякъде в html кода, между таговете
и
.Атрибути на маркера
- ширина- отговаря за дължината на линията. Може да се посочи както в проценти, така и в пиксели.
- размер- дебелина на линията. Посочено в пиксели.
- цвят- определя цвета на линията.
- подравнете- атрибут, отговорен за подравняването на линиите. От своя страна екипът се позовава на него.
Задача
Направете хоризонтална линия на страницата.
Решение
Хоризонталните линии са добри за разделяне на един блок текст от друг. Малък текст с хоризонтални линии в горната и долната част привлича повече внимание на читателя от обикновения текст.
Използване на етикета
можете да начертаете хоризонтална линия, чийто вид зависи от използваните атрибути, както и от браузъра. Тагът се отнася до блокови елементи, така че редът винаги започва от нов ред и след това всички елементи се показват на следващия ред. Благодарение на многото атрибути на етикета
линията, създадена чрез този таг, е лесна за манипулиране. В комбинация със силата на стиловете, добавянето на ред към вашия документ става лесно.Ред по подразбиране
показва се в сиво и с ефект на обем. Този тип линия не винаги отговаря на дизайна на сайта, така че желанието на разработчиците да променят цвета и другите параметри на линията чрез стилове е разбираемо. Въпреки това, браузърите са двусмислени по отношение на този проблем, поради което ще трябва да използвате няколко свойства на стил наведнъж. По-специално, по-старите версии на Internet Explorer използват свойството color за цвят на линията, докато други браузъри използват фонов цвят. Но това не е всичко, в този случай не забравяйте да посочите дебелина на линията (свойство височина), различна от нула, и премахнете границата около линията, като зададете свойството на границата на none. Обединявайки всички свойства за селектора на hr, получаваме универсално решение за популярни браузъри (пример 1).Пример 1. Хоризонтална линия
HTML5 CSS 2.1 IE Cr Op Sa Fx
Цвят на хоризонтална линия
Текстов низ
Резултатът от този пример е показан на фиг. 1.
Ориз. 1. Цветна хоризонтална линия
Когато създавате HTML страница, оформлението играе съществена роля. Особено когато говорим за различни символи и декоративен дизайн: тези малки неща помагат да направите „езика“ на вашата страница по-достъпен и ясен, освен това те значително променят нейното възприятие и външния вид като цяло. Един от най-важните елементи за дизайна е хоризонталната линия и по-нататък ще научим по-подробно как да работим с нея и как да направим хоризонтална линия в html.
Какво е хоризонтална линия и за какво е тя
Хоризонталната линия в html е елемент за дизайн на страница, който изпълнява редица функции:
- Декоративна... Помага за добавяне на привлекателност към страницата.
- Разделяне... Насърчава ефективно разделяне на информация с различни значения.
- Подчертаване или подчертаване... Привлича вниманието на гостите на страницата към необходимата и най-важна информация.
Именно хоризонталната линия се счита за най-достъпния начин за изпълнение на редица функции. Много е лесно да го създадете, но външно изглежда много печелившо. Чрез прости промени в html-кода можете да коригирате:
- дължина;
- ширина;
- цветови характеристики;
- подравняване към единия или другия ръб.
Имайте предвид, че хоризонталната линия се отнася до блокови елементи. Това означава, че той заема нов ред на страницата, а текстът след него ще отиде по-долу.
Как да създадете хоризонтална линия в HTML
Можете да зададете линия с помощта на обикновен таг - hr в триъгълни скоби. То е съкратено от "Хоризонтално правило" и дефинира класическите външни параметри. Той се различава от много други по това, че не се нуждае от краен етикет и може да съществува самостоятелно. Можете да промените външните характеристики на елемент, като използвате допълнителни стойности в етикета:
- Дължина... Ако не искате дължината на реда да се простира върху цялата страница, тогава можете да зададете желания размер в пиксели или проценти. Това става с помощта на допълнителна дума "width" в тага и цифров индикатор за дължина, посочен след знака "=" в кавички.
Изглежда така. Например, ако искаме дължина от 100 пиксела, ще зададем етикет като този: hr width = "100"
- Подравняване... Подравняването е възможно по левия или десния ръб, а също и в центъра. Тази функция е валидна само ако вече сте посочили параметъра за ширина, тъй като редът на цяла страница не може да бъде подравнен. За подравняване задайте допълнителен атрибут в тага "align" и добавете посока към него: център - за центъра, ляво - за ляво и дясно - за дясно подравняване.
Готовият етикет в този случай ще изглежда така. Например, ако трябва да зададем централно подравняване за хоризонтална линия с дължина 150 пиксела, тогава готовият таг ще изглежда така: hr align = "center" width = "150".
Имайте предвид, че "align", мярката за подравняване, се поставя на позиция 1, въпреки че атрибутът зависи от ширината на мярката за дължина.
- широчина... По желание можете също да посочите ширината, като създадете удебелено или тънко подчертаване. Този критерий не зависи от нищо и може да се използва самостоятелно, без да се посочва дължината или подравняването. За него използваме атрибута size в тага и числова стойност, равна на желаната ширина в пиксели. Числото е посочено в кавички след атрибута size и символа "=".
По този начин, ако трябва да създадем линия с ширина 15 пиксела, трябва да създадем следния таг: hr size = "15".
- Цвят... Задава се и като независим индикатор. За да го промените, използвайте атрибута color в комбинация с името на цвета под формата на код или на английски. Цветът е посочен в кавички след символа "=".
По този начин, етикетът за стандартна бяла линия може да бъде написан по два начина: hr color = "#FFFFF" или hr color = "white"
Черното може да бъде създадено с код # 000000.
- Приберете сянка... Ако имате нужда от елемент, който не съдържа сянка, тогава атрибутът noshade трябва да се използва в тага. Може да се използва самостоятелно или в комбинация с други елементи. Таг за стандартен ред, използващ го, ще изглежда така: hr noshade
Създайте хоризонтална линия с помощта на видео
И ако искате да получите информация в по-визуален формат, тогава вижте следващото видео, което описва подробно възможностите за работа с хоризонтална линия.
След като определите необходимите размери на хоризонталната линия, можете да проектирате страниците на сайта по такъв начин, че информацията да е структурирана и визуално компетентно рамкирана. Това помага на посетителите да възприемат по-лесно представената информация и да откроят вашия сайт от останалите.
Изглежда, защо може да имате нужда от четири метода? В крайна сметка почти всеки човек използва един метод, с който е свикнал. Например, натиснах Shift и клавиша "тире" няколко пъти и това е резултат от хоризонтална линия.
Но какво ще стане, ако това доведе до пунктирана линия, но имате нужда от плътна?
- Най-вероятно клавишът Shift на клавиатурата е дефектен. Тук на помощ ще дойдат други методи.Може би най-често срещаният начин да направите ред в Word е да използвате няколко клавиша на клавиатурата.
I Тънка, дебела, двойна, пунктирана линия от клавиатура
По-долу е снимка на клавиатура с английска, но без руска подредба, но това няма значение, защото ни интересуват само три клавиша: Shift, тире и Enter.
Ориз. 1. Три клавиша на клавиатурата: Shift, тире и Enter за непрекъсната хоризонтална линия в Word
С тези три клавиша можете да начертаете непрекъсната хоризонтална линия в Word: пунктирана или плътна, тънка или дебела, дълга или къса.
1) Когато натиснете клавиша "-" (тире) няколко пъти в редактора на Word, получаваме пунктирана линия с произволна дължина.
Да направя тънъкдълъг ред по цялата ширина на страницата:
- На клавиатурата намираме клавиша "тире" (вдясно от клавиша "нула", в зелената рамка на фиг. 1).
- С нов (!) ред в Word, натиснете този клавиш няколко пъти: -
- След това натиснете клавиша "Enter" (). Няколко тирета, които са били отпечатани, изведнъж ще се превърнат в непрекъсната, хоризонтална, тънка линия по цялата ширина на страницата.
2) Когато Shift и "-" (тире) се натиснат едновременно, НЕ се отпечатва тире, а подчертаване _________. По този начин можете да направите непрекъснат ред с произволна дължина навсякъде в документа.
Ориз. 2. Тънка и дебела хоризонтална линия в Word
Сега печатаме дебелхоризонтална линия по цялата ширина на страницата:
- Отново намираме същия клавиш "тире", както и клавиша Shift (наляво или надясно, както желаете). Натиснете Shift, задръжте и не пускайте.
- И сега с нов (!) Ред няколко пъти (например 3-4 пъти) натиснете върху тирето (без да отпускате Shift): ___. Пуснете Shift.
- Сега натиснете клавиша Enter. Ще видите плътна хоризонтална плътна линия.
Хоризонтална тънка, дебела, пунктирана и двойна линия в Word с помощта на клавиатура
II Ред в Word с помощта на таблица
Хоризонтална линия може да се получи чрез използване на таблица от една клетка (1 × 1), в която само горната или долната граница е оцветена (ще се вижда), а другите три страни на таблицата имат неоцветени граници (те ще бъдат невидим).
Поставяме курсора на мястото, където трябва да бъде реда. В горното меню на Word щракнете върху:
- Вложка (1 на фиг. 3),
- Таблица (2 на фиг. 3),
- Една клетка (3 на фиг. 3).
Ориз. 3. Как да вмъкнете таблица 1x1 в Word (от една клетка)
Резултатът ще бъде таблица от една голяма клетка (1x1):
Остава да премахнете границите от три страни в таблицата 1x1. За това
- отидете в раздела "Начало" (1 на фиг. 4),
- след това до "Шрифт" намираме "Абзац" и граници (2 на фиг. 4),
- премахнете всички граници, като щракнете върху "Без граница" (3 на фиг. 4),
- изберете "Горна граница" или "Долна граница" (4 на фиг. 4).
Ориз. 4. Как да премахнете избора на граници в таблицата на Word (направете границите невидими)
Демонстрирам това ясно във видеото (в края на статията).
Между другото, на фиг. 3 показва, че има по-лесен начин. Можете да поставите курсора в началото на реда в Word и да кликнете върху "Хоризонтална линия" (5 на фиг. 4):
III Ред в Word чрез рисуване
Insert (1 на фиг. 5) - Shapes (2 на фиг. 5) е друг начин да получите хоризонтална линия в Word.
За да запазите линията строго хоризонтална, задръжте натиснат клавиша Shift и начертайте линията едновременно.
Ориз. 5. Как да нарисувате линия в Word
IV Ред в Word с помощта на екранната клавиатура
За Windows 10 можете също да намерите екранната клавиатура, като напишете „екранна клавиатура“ в лентата за търсене.
Ориз. 6. Екранна клавиатура
Ще създадем хоризонтална линия по същия начин, както в първата версия с обикновена клавиатура. На екранната клавиатура имате нужда от три бутона: тире, Shift и Enter.
1 Тире и Enter
От нов ред в Word няколко пъти щракнете върху тирето (1 на фиг. 6) и натиснете Enter. Това ще създаде тънка хоризонтална линия.
2 Shift, Dash и Enter
От нов ред в Word първо щракнете върху Shift (2 на фиг. 6), след това върху Dash (1 на фиг. 6). Резултатът е подчертаване. Така че повтаряме още 2 пъти и след това натискаме Enter. В резултат на това ще видим дебела хоризонтална линия.
