В этом видео я расскажу вам о нескольких базовых свойствах для работы с текстом. Но прежде чем я это сделаю, хотелось бы по старой доброй традиции ответить на вопрос: что же такое текст? А текст — это зафиксированная на каком-либо материальном носителе человеческая мысль, в общем плане связная и полная последовательность символов. Теперь мы можем приступать. Хотелось бы начать с выравнивания, которое осуществляется с помощью свойства text-align и имеет следующие значения: left, start, right, end, center и justify. О каждом из них в отдельности. text-align: left — это выравнивание по левому краю, и вы видите на примере, что текст слева. По краю начала текста, то есть text-align: start, тоже находится слева, так как в браузере по умолчанию чтение left-to-right, слева направо. По правому краю выравнивается текст и находится справа. По краю, противоположному краю началу текста, end, также находится справа по той же причине, что и край начала текста находится слева. По центру — text-align: center, и по всей ширине — text-align: justify, но он не сработал. Почему же? А все потому, что нужно больше одной строки текста, тогда это сработает. Чтобы сравнить, как это выглядит с выравниванием слева, я добавил еще один абзац, и вы видите, что справа есть промежуток, который был скрашен text-align: justify. Если мы поменяем направление текста на rtl, получим немного другие результаты. По левому краю станет слева, по краю начала текста — справа, потому что начало текста начинается справа, так как направление текста — rtl. По правому краю — справа, по краю, противоположному краю начала текста — слева, по той же причине, что и по краю начала текста находится справа. По центру останется по центру, ну и justify также встанет в правую сторону. Следующее свойство — это так называемое «украшение» текста, или text-decoration, у которого может быть три значения: overline, line-through или underline, и оно позволяет нам сделать примерно такие вещи. Overline — это надчеркивание, line-through — это перечеркивание, и underline — это подчеркивание. Подчеркивание используется чаще всего для ссылок. Также стоит иметь в виду, что text-decoration не наследуется дочерними элементами, и им нельзя отменить украшение, которое было применено к родителю. Например, у нас есть параграф с text-decoration: overline, то есть надчеркнутый, а также есть span, который лежит внутри этого параграфа, у которого мы пытаемся сбросить это надчеркивание, но у нас ничего не получается. А все потому, что надчеркивание применилось ко всему родителю, в том числе и над ребенком. Следующее свойство, text-transform, позволяет трансформировать текст, то есть позволяет менять регистр букв с помощью трех значений: capitalize, lowercase и uppercase. Capitalize позволяет начинать каждое новое слово в строке с заглавной буквы, как это показано в первом параграфе в примере. Lowercase устанавливает регистр букв на нижний, даже если они в html написаны заглавными буквами, и uppercase делает противоположное, то есть все строчные буквы становятся прописными. Следующее немаловажное свойство — text-indent, которое устанавливает абзацный отступ для параграфов. Можно использовать любые единицы измерения длины и отрицательные значения в качестве значений данного свойства. В нашем примере были два параграфа, у первого абзацный отступ — 5 %, то есть это будет происходить слева направо отступ, а у второго отрицательное значение, −1em, получается, текст будет как бы выступать влево от абзаца или справа, в зависимости от направления текста. И в примере видим, что в первом параграфе абзацный отступ равен 5 % от его ширины, а во втором — −1em, и текст как бы вылезает слева за параграф, либо справа, если направление текста rtl. Одним из самых важных свойств для работы с текстом и не только является свойство color, но я расскажу о нем лишь в контексте именно текста. Вообще, я советую использовать hex значения, то есть шестнадцатеричные для сплошных цветов и rgba для полупрозрачных, если вы хотите их использовать. Например, у нас есть заголовок первого уровня, для которого мы устанавливаем цвет с помощью свойства color: #f00, что соответствует красному цвету в шестнадцатеричной записи, и получаем примерно такой результат. Вообще, в дополнительных материалах к лекции будет ссылка на исчерпывающую статью о цвете в web в принципе и о многих других вещах. Но, как всегда в web, есть нюансы, о которых я обязательно должен сказать, потому что color устанавливает так называемый «цвет переднего плана», а не текста. Все это в противовес другому свойству — background-color, то есть цвету фона. Поэтому это свойство, color, имеет влияние на многие другие свойства. Сейчас мы разберем простейший пример. Не пугайтесь того, что вы не знаете каких-то свойств, все будет очень просто. У нас есть параграф, которому мы установили цвет «зеленый», #0f0. Затем установили рамку, два пикселя, сплошную. Ниже установили тень для блока, а еще ниже — тень для самого текста. И видим в примере то, что абсолютно все стало зеленым, потому что все три свойства, указанные после свойства color, наследуют этот цвет, если им специально его не указать. Следующий нюанс заключается в том, что свойства, которые не наследуют цвет от color автоматически, могут это сделать с помощью ключевого слова currentColor. Выглядит это примерно так. У нас есть заголовок первого уровня, которому я установил цвет текста «пурпурный», #f0f, а также цвет фона такой же, как цвет текста. Получаем такой результат. Спрашивается: зачем ты это сделал? А вот зачем. Как добиться такого эффекта? А очень просто: с помощью тени текста. Тень устанавливается с помощью свойста text-shadow с такой записью: сдвиг по x, сдвиг по y, радиус размытия и цвет. Обязательными являются только сдвиг по x и сдвиг по y. Цвет унаследуется от родителя, а blur-radius будет равен 0 по умолчанию. Давайте немного попрактикуемся. Создадим тень со сдвигом четыре пикселя вправо и вниз и не будем указывать цвет. Цвет будет такой же, как и цвет текста, то есть белый. Далее закрасим тень красным цветом, просто добавив после четырех пикселей запись #f00. Далее размываем нашу тень на 10 пикселей, видим новый результат. А дальше мы можем добавить еще одну тень со сдвигом влево вверх зеленого цвета. Добавляем просто еще одну запись, похожую на первую, через запятую, где указываем сдвиг −4 пикселя по x, −4 пикселя по y, размытие такое же, но цвет зеленый, и видим примерно такой результат. Как видите, совершенно ничего сложного. И при определенной доле творческого мышления можно добиться примерно таких эффектов. Найдено на просторах интернета, выглядит код вот так. Либо что-то типа такого, код выглядит вот так. На этом список базовых свойств, о которых я хотел поведать вам, закончен, а в следующем видео мы с вами разберем, что такое многоколоночность и как ее добиться с помощью css.
