Уеб ресурс се оценява от потребителите за външната му привлекателност. Ето защо дори информативно полезен текст може да бъде прочетен поради факта, че той е лошо проектиран. Заключението - трябва внимателно и внимателно да подходите не само към семантичното съдържание на страниците на сайта, но и към неговото визуално представяне. Появата на CSS технологията разшири възможността за създаване на атрактивни статии. Едно от свойствата, предназначени да улеснят възприемането на написаното - отстъп на текста CSS.
Полета и тирета: каква е разликата?
Преди да започнете да форматирате текста, трябва да разберете какво са полетата и отстъпките. Независимо от факта, че тези маркиращи елементи в редица случаи изглеждат еднакви за потребителя, между тях съществуват фундаментални разлики:
полето се определя от свойствата padding, indent - margin;
Полето се определя от пространството между съдържанието и границата на блока, пропастта между границите на съседни блокове;
Полетата могат да бъдат взети под внимание в елементите на елемента (ширина и височина), а не.
маржова собственост
Така че, за да зададете хоризонтално или вертикално разстояние на текста на CSS, използвайте марджин конструкта. Това свойство се прилага към маркера на предписания параграф на документа. В най-простия случай той се записва като: margin: 12px. Тази линия означава, че около блока от текст (или всеки друг блок) 12 пиксела ще бъдат отстъпени от всички страни. За да увеличите пропастта, например три пъти, достатъчно е да напишете: margin: 36px. Но какво да правя, акоинтервалът между блоковете трябва да е различен от всяка страна? Разработчиците на уеб страници използват няколко форми на писане:
margin: 11px 22px.
марж: 11px 22px 33px.
марж: 11px 22px 33px 44px.
В първия пример от долната и горната граница на блока, отстъпите ще бъдат направени на 11 пиксела, на страните на блока - с 22 пиксела. Според втората форма на запис, между горния ръб на блока и съдържанието ще бъде 11 пиксела, между дъното - 33 пиксела, отстрани - 22 пиксела. В третия случай отместването на CSS текста ще бъде 11 пиксела по-горе, 22 пиксела надясно, 33 пиксела на дъното и 44 пиксела вляво.
Съществува и възможност за записване на разстоянието до границата на блока само от едната страна: margin-top margin-bottom, margin-left, margin-right. Чрез прехвърляне на имената на имоти на руския език е лесно да се отгатне тяхната цел. Например, този запис казва, че десният марж ще бъде 22px: margin-right: 22px. За останалата част от разстоянието се приема, че разстоянието около блока е равно на стойността на родителския елемент. Свойството марж има функция, която разработчикът трябва да запомни, когато използва отстъп на CSS текст вертикално. Интервалите на съседните елементи не се сумират, а се припокриват. Например, нека някой от блоковете да има марж-дъно: 15px, а съседният-отгоре до дъното му: 35px. Училищната аритметика и здравият разум предполагат, че общото разстояние между тях ще бъде 50 пиксела. На практика това не е така. Блок с голяма стойност на маржин имота ще "абсорбира" своя съсед. Резултатът е интервал между елементите от 35 пиксела.
Червена линия
Когато пишете документ в текстов редактор, потребителите предпочитат да поставят всеки нов параграф с "червена" линия. С помощта на CSS, е лесно да се направи отместване на текста вляво - използва се конструкцията text-indent. Записва се както следва: text-indent: 11px. Това означава, че първият ред на абзаца ще бъде изместен с относителния ляв край с 11 пиксела. За да направите текста на уеб страницата по-привързан към документа в редактора, трябва допълнително да настроите подравняването по ширина, т.е. да напишете: text-indent: 11px; text-align: justify В допълнение към пикселите, при описанието на маркирането е позволено да се използват други единици - инчове, точки, проценти. Нека блокът има отстъп на CSS текста, равен на 10%. При ширина на блока от 500 пиксела червената линия ще бъде 50 пиксела (10% от 500).
За това свойство може да бъде зададена наследената стойност. Такъв запис казва, че блокът използва подобно свойство на основния блок. text-indent: наследи Изненадващо, абзацът на абзаца може да приеме отрицателни стойности! В този случай се формират т. Нар. Изпълнения, т.е. основният текст остава на място, а първият ред се измества в ляво 22 пиксела: text-indent: -22px. За да предотвратите пресичането на буквите от лявата граница на браузъра, в допълнение към текста-отстъп трябва да използвате конструкцията за полевата задача: padding-left: 22px.
Полезни съвети
Разглеждат се основните свойства на CSS за форматиране на текст. А практиката ще им помогне да ги консолидират. Ето някои последни съвети как да приложите учебния материал при проектирането на уеб сайтове:
червена линия и тиретекст - различни понятия и за тяхното ориентиране се използват различни свойства;
за вертикални отклонения правилата на математиката не се прилагат - интервалите се припокриват, "печели" елемента с голяма стойност;
Отрицателен абзац на абзаца се използва за обозначаване на първия параграф на параграфа с изображението.
