CSS — Базовый курс 8


38 просмотров.

Краткое описание видео: .продолжаем обучение каскадных таблиц.стилей в этом уроке мы поговорим о.свойствах которые отвечают за внешний.вид текста то есть это выравнивание.текста подчёркивания отступы различные.трансформации отдали и сейчас мы это все.изучим итак первое самое используемое.свойства связанные с текстом это.выравнивание текста в данном случае мы.видим что у нас весь текст все абзацы.выровнены по левому краю на html мы.знали что с помощью атрибута align можно.было выровнять текст.допустим по правому краю по центру и так.далее да так вот все с тоже есть.свойство которое отвечает за.выравнивание текста и сейчас мы узнаем.как оно пишется для этого давайте.создадим новый совершенно новый стиль.давайте назовем его как-нибудь пустим.текст потому что мы сейчас изучаем по.текстам пусть этот стиль называется.текст открываем для него.фигурную скобку и сразу где-нибудь.закрываем отлично итак свойства.отвечающие за выравнивание текста это.свойство текст оnline очень похожи на.атрибут html тега пэда выравнивание.онлайн вот здесь то же самый текст.оnline.и она может принимать 4 значения либо.лифт либо райт либо центр либо g степой.то есть первое это по левому краю но.стоит по умолчанию его даже не нужно.указывать 2 райт по правому центр по.центру тяжести по я это выравнивание по.обоим троян сразу то есть растягивание.текста так давайте попробуем сделать так.чтобы данный стиль выравнивал текст по.правому х опишем рай на точку ,.сохраняем открываем исходный код.страницы не убей . html.и прописываем здесь каком-нибудь абзацу.выравнивание по правому краю конкретнее.это класс текст и виду они кавычках.глазыньки.сохраняем данную страницу переходим.браузер и видим что у нас абзац.действительно выровнился по правому краю.вот так работает это свойство текст.оnline если мы попробуем вы раните по.центру он у нас станет.и последнее выравнивание тотже степой.сохраняем видим что у нас текст как бы.выравнивается сразу по обоим краям.за счет вот таких растяжек пробелов да.то есть видно на белом восстановится.чуть больше и текст на ранец сразу по.правому краю и q ли он отлично идем.дальше следующее свойство которое мы.здесь изучим этом отступы то есть проще.говоря это красная строка потому что мы.видим что здесь у нас у всех абзацев как.бы красный строки нет если мы хотим.сделать красную строку мы должны.подписать новое свойство для давайте.выравним обратно по левому краю.не свойства отвечающие за красную строку.пишем таким образом текст there in den.внимательно и с этим свойством в нем.часто допускаются ошибки особенно в этом.слое.in dem это красная строка и здесь мы.указываем либо в пикселях либо в.сантиметрах либо.единицах и м значение красной строки.давайте попробуем пикселем допустим 30.пикселей сохраняем обновляем и видим что.у нас появилась красная строка шириной.30 пикселей.отлично то же самое можно было прописать.допустим 2 сантиметра таким образом.сохраняем.теперь у нас вот два сантиметра можно.было прописать в таких единицы как я м.как я уже сказал что это за единицы.сейчас я вам расскажу 4 м можно даже так.и м это ширина буквы м здесь в данном.случае мы прописали что он должен быть.равен четырем значением ширины буквы н.сознанием это именно для данного шрифта.и видим что у нас произошло стук если мы.возьмем букву м для данного шрифта на.если мы подставим сюда 4 таких вот у нас.получится такая ширина но обычно.применяется либо сантиметр или либо пик.7 можно указать миллиметр.идем дальше следующее свойство которое.вам нужно знать это свойство текст.decoration.который мы здесь прошли у него было еще.одно значение это значение зачеркивания.текста то есть мы уже знаем как делать.подчёркивание да надо черт его не и.когда мы нажимаем у нас происходит на от.чуркина нее и соответственно мы не знаем.только как делать зачеркивания текста.это используется обычно при написании.цен будем идет акция нужно вычеркнуть.одну цену на роя стоит нормально.соответственно сейчас мы посмотрим как.зачеркивать текст и сейчас найти нам.очень удобно будет изучить еще один тег.который мы курсе html пока не.затрагивали этот тег span для чего нужен.текст пан сейчас мы посмотрим вот у нас.стоит задача зачеркнуть вот это слово.регистрируете на то есть как нам его.зачеркнуть мы же не можем как бы.прописать здесь вот здесь до.всему абзацу вот класс где будет.зачеркивается текст нет нам нужно как бы.зачеркнуть только вот это слово.соответственно для этого нам нужен.специальный тег которым которому мы.пропишем.вот этот класс зачёркивают текст начала.давайте создадим этот новый стиль.который будет зачеркивать текст допустим.мы назовем его черта.или фигурных скобках как обычно пропишем.что в данном случае у нас должно.придаваться свойство текст decoration со.значением.line сруб лишь над ним образом желаем.приз это как бы переводится как через.это переводится как линии с через линию.грубо говоря на через текст пойдет линию.тогда же и так мы создали новый стиль.дали ему название четко и прописали в.нем свойство text decorations значением.лайкнул зачерпну текст соответственно мы.сохраняем таблицу стилей и возвращаемся.к исходному коду нам нужно зачеркнуть.только слова регистрировать.соответственно для этого нам понадобится.специальный тег span.пишется таким образом это так который.сам по себе никакой нагрузки не несёт.лишь смотрите да мы напишем спам спам.сохраним.обновим страницу и видим что у нас.слова регистрируете никак не изменилось.на себя так как раз таки такой.логический так который используется для.придания какого-то стиля и сам по себе.он не чего не изменяет а зато если он.пропишем ему какой-нибудь класс и дадим.название данном случае нас это черта да.то здесь уже начинается действие вот.этого стиля и вот этому слову будет.предан такой вид который мы пропишем в.таблице stilet этому стилю часто.сохраняем обновляем и видим что у нас.слова регистрируется регистрируете.зачеркнуто вот так работает во первых.свойства текст decoration лампу и.xpaмe отлично идем дальше на следующие.свойства которые мы изучим это свойство.текст transform.то есть это свойство которое позволяет.делать над абзацами некие трансформации.пример допустим нам нужно сделать так.чтобы каждое слово вот этого абзаца.начинал с большой буквы мы можем это.сделать вручную до html-коде прописать.каждому слову первую букву заглавная а.можно сделать с помощью таблиц или.делается с помощью как я уже сказал.свойства текста transform поэтому давай.создадим новое какой-нибудь стиль будет.называться теперь и ему пропишем это.свойство текст transform.и после : укажем значение то есть если.мы хотим чтобы каждая буква каждого.слова глаза главный надо же написать.здесь к питались качестве и моммзен.теперь если мы предадим данный класс.этому абзацу вот он теперь я сейчас.пропишем класс и напишем сохраняем видим.что у нас каждая первая буква каждого.каждого слова стала заглавной вот так.работает вот это свойство текст.transform со значением капиталец если.нам хочется чтобы у нас вообще все буквы.во всех словах были заглавными тогда мы.должны здесь прописать такое значение.как upper кейс можно пишется сохраняем и.видим что у нас все буквы стали.заглавными если хотим чтобы все буквы.были маленькими.на мы должны прописать вот здесь кейс.видим что все буквы стали маленький вот.что касалось свойства текст transform.следующие свойства это свойство хорд.spacing.данном случае у нас у всех слов идет.одинаковый от тут между ними на лад на.прошло слова идет о прошу слова единство.и везде он одинаково не если вы хотите.сделать этот вот там допустим каком там.за побольше то делается это с помощью.такого свойства.как арт spacing давайте сюда же мы.пропишем rising.не здесь указываем сколько между словами.должно быть расстояние обычно 10.пикселей.сохраняем и видим что у нас по.этого абзаца между словами по 10.пикселей.теперь следующий момент если мы хотим.изменить расстояние между буквами везде.у нас расстояние одинаковой да то же.самое возвращаемся в таблице стилей и.уже не вор spacing.а ветер spacing расстояние между буквами.между таким образом допустим пусть между.буквами у нас будет четыре пикселя.сохраняем меня что у нас между каждой.буквы появилась расстоянии 4 пикселя.возможно где то это вам пригодится так.что знать нужно и последнее свойство.которое мы здесь изучим это расстояние.между строками как мы видим у нас везде.идет одно и то же расстояние между.строками.если мы хотим его увеличить то не.используем еще одно свойство align эйдж.то есть высота строки.решить таким образом и допустим 10.пикселей между строками хотим сделать.именно в данном абзаца сохраняем 1 и.видим что у нас расстояние в 10 пикселей.по ее.ты здесь считается так высота самой.буквы и отцом до следующей строке нам.случае нас высота допустим 7 пикселей и.3 пикселя до следующих строки в итоге.будет 10 если мы здесь напишем допустим.30 увидим уже более значительные разрывы.от нас 30 до вот они 3 пикселей вот все.к что касалось работы с текстом через с.из как вы видите здесь намного больше.возможностей для работы чем в том же.html здесь мы можем управлять этими.буквами.строками текстом красной строкой.зачеркивания мы так далее через месяц.это делается очень просто на этом данный.урок заканчиваем благодарю за внимание.увидимся в следующем

CSS — Базовый курс 8

Как? Вы еще не смотрели? Ну это зря...