Приятного просмотра

Внешний вид текста | Видеоуроки по HTML и CSS

Опубликовано: 3 месяца назад
292 просмотров
👎 1
Скопируйте и вставте на Ваш сайт

Описание

Полный курс по HTML, CSS и вёрстке сайтов с упражнениями: https://srs.myrusakov.ru/makeup2?utm_source=YouTube&utm_campaign=makeup2&utm_content=freemakeup2&utm_term=kR6D6seG2Xs
Отзывы и комментарии оставляйте в моей группе: https://vk.com/rusakovmy
Вопросы задавайте сюда: https://support.myrusakov.ru/ask

Субтитры

В этом видео мы с вами поговорим про внешний вид текста как его можно задавать через css первое свойство мужа с вами рассмотрели еще прошлом уроке the font family шрифт которым будет этот текст выводиться вот безусловно одним свойством внешний вид текста никак не ограничивается то есть это только самое начало и давайте с вами мы качестве.

Подопытного элементы будем использовать нашу элемент п первое что приходит голову поступкам и указали шрифт это указать размер шрифта например дать сами укажем мы сто пятьдесят процентов вообще конечно мы с вами еще будем затрагивать тему единиц измерения вот но сразу хочу отметить что процент означает что у нас насколько больше относительно текущего размера.

Шрифта у данного элемента например на забыл там по умолчанию какой-нибудь шрифт пример давайте мы даже у каждому 12 пунктов вот это должен быть у нас 16 пунктов то есть это либо размер по умолчанию какой-то унаследована шли к приметам вас может это там быть что у нас получилось что для всех элементов п у нас уже 20 пунктов тогда я с вами тут мой этого элемента у кажется все.

Процентов умножаем на полтора получается 30 пунктов этот это такой относительный размер шрифта в зависимости от какого-то базового который либо по умолчанию в браузере установлен грибам и вот например в боди указали ли где-нибудь в более высоком элементе над дгп такой второй размер 2 ст 2 свойства он пожалуйста да то есть мы изменили сами внешний вид то есть.

Увеличили размер полтора раза следующее свойство определяет у нас толщину шрифта вот это у нас пока что значение normal это значение которое ведет нас по умолчанию также есть вариант болт видео сразу нас теперь жирного чертами из нас вариант болдер вот но опять же внимание что эти болт был рычит ничуть не изменилась есть например лайта.

На самом деле вот это все определяется симптом который вы использовать например он может не поддерживать такие вот свифт и да например даже бывают что для одного и того же шрифта есть же разные файлы вот это пример отвечает за обычное отображение а за жирной будет другой файл печать из тот же самый спросом будет другой файл иметь он будет там.

Именно только жирные символы отображать данные у нас конечно street бы такой более удачно увидеть все в одном файле отец вот но у него нет болдер лайтер и так далее еще не увидеть есть определенные ограничения но тем не менее такое свойство есть и притих правило болта используется то есть либо normal если бы на ход пример хотим убрать один жирное начертание у кого-то элемента.

Либо вот болт вот и примеру давайте мы с вами тут на напишу где-нибудь культа же блока div создадим текст в strong вот смотрим видео strong по умолчанию выделяется для того чтобы отобрать фонд white и normal пишем все раз исчез хотя хоть и в браузере стоит по умолчанию строк должен быть жирным выделяться а мы можем через спокойно эту брать проще я об этом уже говорил когда.

Мы проходили этот элемент и многие другие то есть через css можем делать менять любой вообще внешний вид до что тот который уже изначально был прописан в браузере также есть возможность задать например курсивный начертанием давайте вот этого стронга его и зададим делать это с помощью font style и значение и дельта есть стиль шрифта.

Курсив ведь он стал видите курсивом то есть мы жирное начертание убрали но добавили курсив к этому вот слову безусловно и запустим изначально слова уже в курсе we например у ты если мы будем с вами использовать ткм ведь он уже в курсе видят мы можем без проблем это все убрать м font style normal вот раз убрали процент плохо.

Видно но еще еще раз с вами посмотрим что убедились сделать я убрал увидите повернулся чуть-чуть простак увидишь это как бы уже чуть чуть чуть наклонил уже сам по себе шрифт изначально поэтому тот курсе как бы не очень хорошо заметен но вы сейчас я думаю заметили до что у нас уже он менялся поэтому этот свойство вас прекрасно работать мы можем легко курсив.

Отменить также мы можем безусловно менять например цвет текста делается с помощью свойства color начала к все раздается свет например вот такой вот вариант в принципе есть у нас и такие стандартные до варианты рея том грин вот но они вообще говоря не используются я их очень давно уже не использовал то есть их можно использовать так.

Быстренько взять ряд поставить ее все нет цвета до задается в css выше надцать и речной формате что это такое началом такую няшку теорию нас любой цвет который вы можете видеть где-либо имеет всегда три составляющие это красную red зеленую грин и синюю blu кары составляющая может принимать значения от 0 до 255 то же самое это вот это же самое будет у нас у синего цвета.

При этом у нас вот это число является десятичным то есть например 100 там 205 все десятичные числа но гораздо удобней и принципе редакторе все так и вам будет и снова показывать части фотошопе там это сразу же показывается и более удобно это статичная форма то есть когда у нас тут эти числа преобразуются и десятичной системы шестнадцатеричную систему например у нас.

Есть 55 соответствует и речной системе ф.ф. там 0 например 0 но и другие там числа тоже все это переводится значит совершенно не принципиально ответственным примеру смысле хотим задать такой ярко красный мы указываем ff дальше 0000 то я скажу при получается по 2 цифры по две цифры на каждую составляющую цвета цифр из нас через system f это та же цифра считается.

Это как сети как 15 вот это 17 rich система счисления опять же нибудь что это все мы углубляться здесь мы укажем ff 0000 мы с вами получим ярко-красный цвет что такое c00 это просто такая сокращенная запись cc 0000 могли бы так например написать это это был тоже самоцвет что у нас вот тут один в один просто я так вот можно со короче когда.

Детка это повтор так просто сделали c00 это же все это прекрасно обрабатываться мы можем например указать давайте как еще произвольный цвет давайте например cd cd 90 50 примеру вот ведь такой низкой быть свет датчиком лучше чтобы нас это лучше было видно на h1 это применим это свойство вот на такой вид такой золотистый цвет с например мы укажем cc 0000 то это будет такой.

Красный укажем цену но это тоже будет так хочет находит свет абсолютно вот можно примерно 0 цена будь такой зеленый нос цвет то есть это вот нас те системы счисления в принципе вы как верстальщик не обязаны тут знать все эти цвета как кафе задать с опытом и будет запоминать на самом деле потихонечку но на самом деле когда вы wear стоите вы просто берете пипетку в редакторе ну фотошопе.

Есть пипетка там раз ткнули и вам сразу же так открылась как бы окошечком там кликните тоже тут окошечко откроется вот и тут прям в воде лимб текстовом поле фотошопе 16-ричный код будет написан вы прям его копируете тот кот это цвета и сюда прямо так через контур control вы вставляете и все вставили у вас получился нужный цвет поэтому я рекомендую вам даже ошибка сок.

Может даже не разбираться на самом деле всех этих нюансах цветах как они задаются какой код мы когда сами будем верстать странице вы увидите что там не нужно никаких знаний общений канули пипеткой цветом photoshop выдал вы его скопирую сюда вставили и все больше вам ничего не нужно сразу же нужен цвет будет уже установлен но свойство важнейшие сами понимаете да то цвета там.

Текста каких-нибудь там элементов на странице они конечно же меняются постоянно окажется тяни свои потру конечно ковров будете использовать постоянно просто ещё одно свойство чтобы нам рассмотреть нам нужно тут сделать какой-нибудь очень длинный текст напишем очень длинный текст буквам такой вообще длиннющий.

Определению щит вмещался вот так вот очень длинный текст вот обратите внимание на вот этот вот это расстояние между строками вот это вот расстояние мы можем спокойно регулировать с помощью свойства line хайд а затем поставим например 200 процентов последует триста процентов а вот пить сразу строился все хорошо стало изменилось все это все line хай он.

Отвечает за высоту строки собственно так оно переводится ответствен если мы увеличиваем размер нас получает что например шрифтом условно говоря 10 пикселей а если мы поставим ставится на 200 процентов вас получится что высота строки будет 20 пикселей и если это вас получается что отступы между строками больше вот то есть например у нас шрифт и 10.

Пикселей мы поставили 200 процент вас получил высота строки 20 пикселей это нас тоже секс тоже нас 20 пикселей то есть по сути мы можем с помощью line хоть регулировать отступ между строками тогда конечно же ты еще раз говорю это высота строки но богаты как бы такой элемент из которого следует изменение расстояния между строками полезный элемент.

Встречается очень часто поэтому его нужно обязательно знать есть такой еще как бы свойства весьма полезная для каких-нибудь длинных текстов это когда мы хотим знать какой то определенный отступ у каждого абзаца ну например вот у нас есть элемент p давайте мы например прямоту него укажем текст intent 10 пикселей например видите у нас.

Все элементы п чуточку сдвинулись может до чуть побольше сделать пример 20 пикселей получается что увидите абзац у нас сдвигается предвидеть пока салфетку лишь первой строке и все последующие строки у нас никак не меняется но это примеру в любой книге нормальный до всегда каждый абзац начинается со в небольшого отступа от края это вот так вы можете делать это.

Все css давайте сам теперь мы еще он еще один абзац добавим мы сделаем его с атрибутом класс например декор назовем это уже селектор класса опять же мы сами селекторе будем все знакомиться вот ну давайте потихонечку же будем изучать мы с вами изучаем самые такие вот основные селектору час мы сами все время использовали все лекторы элемента это.

Самый основной а следующий по популярности это класс селектор класса очень просто к нему обращается то есть мы указываем начале . ощущение тошноты тайна селектор класса дальше название класс вот например класс декор и давайте с вами мы сейчас тут напишем текст decoration underline написать.

Вот идти с вами получилось что у нас underline кстати говоря нас ведь как бы отступ есть перешел из за того что у нас ко всем элементы вот эти вот свойство у нас как раз этот отступы указан вот осудил запустит мы не хотим чтобы это вот элемента который класс декор был такой отступ для этого мы все делаем очень просто текст intent 0 этника вот ступа уже не то есть.

Именно вот с берге у других элементов отступ есть а вот тут класса декор этих отступов не то есть мы его отменили то есть у нас по наследование это передалось но никто смысле последовательно конечно это не имеет никого тоже них наследование поскольку мы просто ко всем элементам п и его это свойство применяем вот но мы можем в классе этого элемента вот спокойно.

Совершенно это свойство отменить у данного элемента вот и так называются подчёркивание также кстати говоря можно например сделать лайн ну давайте как-нибудь пусть это будет очень даже назовем его underline вот подчёркнутый текст она примеру у класс лассо strike мы сделаем light show.

Вот ведь и распыли получился он так сохраняем и вот видите у нас получилось что у нас текст получился зачёркнуты вот как раз это вот и есть значение свойства тексте correction line фрау вот так же есть там и другие свойства значение этого свойства например вот есть bling bling такое да будет мерцать он по идее или машине мерцают эти текста есть ну.

Раньше пример это вот работа он был очень давно я этот свойства не использовала за очень черн когда короче видимо браузер это убрали вот так же там есть over life который тоже общем то используется красочно очень даже редко тоже главное это вот underline илайн фрау безусловно по умолчанию текст decoration normal вот например у давайте мы сами да.

Спросите зачем его до нужность по умолчанию всегда normal самом деле нет у некоторых элементов например вот у ссылки да и ссылка обычно вот у нее виде есть черта подчёркивания нижняя как выбрать для этого ты есть текст decoration значение normal мы убираем ее без проблем пока я ошибся не не normal она тут но он то есть из пример томат фонд white style to normal у нас идут.

Мультика раньше просто нет нет никаких декораций текста вот так только убирается также пример можем the matter поменять по умолчанию сделать например красным вот тут уже как вам угодно можно фонд сайт добавить так видите мы часами уже ссылку изменили вот то есть ну вот поняли то что есть у нас underline line фрол но на есть еще оверлок который.

Используется редко и блин который раньше работал с уже вообще не работает видимо того что я его вот ни разу своей практике не использовал что никогда про знаешь что существует такое значение свойств вот ну абсолютно бессмысленная штука на мой взгляд в общем ладно так вот вам roussos получая вот что мы с вами можем спокойно убрать у ссылки черту подчёркивания также нас.

Есть возможность например указать чтобы у нас все символы были заглавными буквами либо наоборот в нижнем регистре той все были маленькие буквы прервите мы записали заглавные буквы подтолкну все маленькие мы можем пример dos мира тоже мы написали маленькие булку все но не будут верхнем регистре they это делать с помощью свойства текст transform и например у тапир а при.

Кейс ведь мастер все заглавными буквами написано есть у нас также лавор кейс да у нас будет все с маленьким с маленькой буковки вот например можем поставить класс ab or lower или пред указать опор лавр пуститься он у нас а пакистан то есть вот так это все ведь нас выглядит теперь также есть такая вещь как например вот общие свойства для всех элементов например на свете тут а а.

При alawar встречайте только лишь одним единственным свойствам в этом случае абсолютно всегда надо вот эти всеобщее свойство выводить над расскажем какой-то определенный верхний уровень мы ко всем элементам применяют этими свойствах аллах тем элементом а у которых close up our мы ставим вот это свойство если.

Глаз лавр то мы ставим вот это вот устройство это будет то же самое что и сейчас но видите уже написано гораздо меньший гораздо проще имеет парами хотим и принять цвет ссылок сделать например такой вот образ и и сделали без каких-либо проблем у всех ссылок не нужно в каждый отдельный класс заходить а также например мы хотим например указать разные свойства для.

Одинаковые свойства для разных селекторов ну например у там не знаю давайте мы с вами добавим тут еще не заголовка пример h2 сделаем вот заголовок представите у нас выровнен по левому краю а мы хотим чтобы вот этот вот это заголовки с были оба выровнены по центру мы как можем написать можно написать тут.

Аж два текст line центр можно так написать но лучше раз у нас одинаковые свойства для двух разных селекторов мы можем просто h1 , h2 и дальше the textile and центр указать данном то это вообще уже не нужно раз и все ведь все то же самое у нас то есть мы с вами сразу же одним селектором после перечислением разных селекторов.

Указали одинаковые свойства у них тогда я тут ведь и мы стерли еще тут мы стерли то есть это тоже позволяет сделать код более грамотно вот такие нюансы мы таких нюансов они вообще говоря изучать еще много в процессе изучения css также мы сами можем задавать еще тень у текста день вообще стало возможно задавать только лишь css3 благодаря замечательному свойству текст.

Среду раньше чтобы сделать тени то нужно было вытворять просто и немыслимые вещи сложнейшие поэтому обычно верстальщики всегда делали вид что никакой тени нету в дизайне у текста поэтому конечно же это было сложно но теперь все очень чисто легко узнать самим допустим тут добавим ещё один элемент по и сделаем у него класс шедоу текст.

С тенью выдавайте самим и большой еду напиши можно просто shadow написать на давайте даже может просто сша этого напишем свойство называется текст шедоу и принимает оно одно значение но состоит из нескольких параметров это смещение по горизонтали смещение по вертик по вертикали радиус размытия по сути какой-то размер до которым ограниченный тень и.

Собственно цвет тени давайте мы сделали сами например у нашего текста например 5 пикселей смещение по горизонтали четыре пикселя по вертикали 5 пикселей радиус и например такой серый цвет возьму вот принципе он такой дар получает почти белый давайте могу часами вот такой темно-серый возьму йоту сами видим он-то ведь небольшое смещение 5 пикселей чуточку видеть детей назовем это вниз.

Это размещение по вертикали радиус размытия получается ведь и 5 пикселей вот эти вот это 5 пикселей тут у нас идет такой размерчик до радиус размытия ну и цвет понятно да вот такой вот можно например цвет задать вот такой зеленый нас будет цвет тени вот обычно всегда используют серые тона хотя конечно же все зависит от дизайна.

То есть вот так делается тень стала очень-очень уговорю раньше это просто вот но фактически чуть ли там не брали вот так вот картинкой вырезали и вставляли на страницу это было конечно не очень удобно в плане редактирования вот но зато было хоть как-то можно было вставить тень были там другие другие вообще говоря варианты вот но это говорит и было все очень сложно.

Некрасивость это смотрелось ужасно просто нос благодаря css3 вам повезло что вы сейчас уже css3 уже вам не нужно мучиться как у вас уже это проблема решена вот очень полезное свойство используется очень часто то что что дизайнеры любите kitty они там с git закругленные рамки какие-то тени облаков тени баку сами будем проходить но тень текста тоже используется часто.

Кстати говоря с негативным примеры тень была у нас не тут дина привычно по умолчанию gate например у там слева то пожалуйста нет проблем да можно вот так вот поставить просто минус другую как бы сторону вы пойдете если мы увеличиваем там идет вниз если мы идем на минус там и по как у поднимаемся тоска берет такая каша такая один отсюда идет плюс туда нас идет как бы минус тут у нас нолик.

Вот это вот такой нюанс он придумывает разберетесь и когда видит примеру вас тень находится как тот не тут начну просто ошиблись со знаком вы сильно не ту сторону просто напросто пошли то же самое тут например вот так это делается и последних я бы рассказать это про выравнивание текста мы в принципе с ним уже познакомились просто я хочу отметить что есть и другой способ выравнивать и.

Только по центру можно выравнивать как по левому краю так и по правам окна давайте с вами мы например у нашего шедоу сделаем тут напишу это тексты line прайд вот видимости перрон выровнены по правому краю ответственно по молчании они все идут на свете по левому краю то есть у нас получается по умолчанию тут лифт стоит в браузере прописан.

А мы можем звуку пример задать райт отсутствует по центру суд принципе всего лишь три свойства лифт центр и рай еще есть 6 фай тоже как бы встречается вот но присмотрись столько нарком то большому тексту давайте с вами сделаем right а вот это вот очень длинного текста вот точнее выдавать им простоту всех тексты line steve vai ведь а получается такой как бы.

Моноширинный шрифт она растягивается на всю страницу опять же это лед если вы там в ворде хоть раз работали там точно такой же выравнивание станут есть по левому краю текст можно выразить по праву по центру и такую моноширинный то есть именно вот на всю ширину страницы прямота растягивается нам взгляд смотрится очень хорошо но тем не менее значит такое тоже у нас.

Существует на этом все как видите зачем много всяких свой причем и сам даже не все надо смотрели потому что все уже затем я даже не могу вспомнить я вам сказал абсолютно все которые использую я сам его того что мы часто понаписали уверяю вас вам хватит абсолютно но учти любой верстки вам хватит вот точно совершенно учета команд такой отмечу я важный это вот как видите я вам прямо.

Withers взял пример вот отсюда я вот переставил вот сюда почему это сделал потому что я стараюсь жены еще не обязательно но я стараюсь все свойства располагать по алфавиту от меня такой вот за то что визит просто вот ну мне нравится порядка весь какая-то система какая-то логе какая-то структура я люблю ты меня все было по алфавиту я.

Прям беру все свои сюда располагая по алфавиту мне так просто комфортнее жить савина вы вы можете этого не делать просто я рекомендую вам тоже кое-что позвал порядок то есть всегда располагайте все названия свойств по алфавиту то есть у нас вот эти все эти блоки селектор это спроса по порядочку вот ск условно говоря сверху вниз так же.

И тут сверху вниз а то вот именно свойства внутри 1 элемент 1 селектора тут именно строго по алфавиту на этом у меня все спасибо за внимание

Комментарии

Нет комментариев!