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


43 просмотра.

Краткое описание видео: .продолжаем изучение css сейчас мы.затронем также очень важную тему эту.тему отступов с чего начать начнем мы.как раз таки с того же самого абзаца для.которого мы сделали рамки в предыдущем.уроке как я вам уже начинал говорить да.абзац это такой же как бы объект по сути.тот же прямоугольник который имеет.прозрачный фон и используется на html.страниц как такой объект.соответственно мы можем вот этому абзацу.отдельному каком туда дать свойства.ширины и высоты то есть смотрите если у.нас из мы войдем стилинга и вот в этот.стиль пропишем ширину а ширина допустим.500 пикселей да то наш абзац он по идее.станет шириной 500 пикселей видно да то.есть вы должны понять что абзац это.такой же как бы элемент как и любой.другой это такой же блок.соответственно теперь мы можем.переходить уже к супам что такое вот вот.сейчас если мы посмотрим у нас есть.определенные размеры.то есть вот здесь вот ступа идет вот так.вот верхнего элемента от заголовка да и.отступ от следующего абзаца.так вот это называется внешние отступы.есть каждый объект на html страницы.имеет свой.свое значение вот этих внешних вот спав.до соответственно если мы допустим.захотим увеличить их или уменьшить нам.нужно использовать какое-то свойство вот.давайте это свойство сейчас и изучим.допустим нам надо сделать отступ от.левого края ну пусть 40 пикселей на вот.как это делается делается это очень.просто делается это с помощью свойствами.джин.то есть мы можно написать major : 40.пикселей но это будет означать что.элемент получит отступы не с левого края.точнее не только с левого края а со всех.сторон и со всех сторон он получит 40.давайте посмотрим видно да то есть у нас.этому элементу дали отступы с каждой.стороны ес по 40 пикселей то есть как вы.помните марджан мы уже начинали как бы.изучать уроки по вставке фона мы здесь.сделали для того видел такой отступ там.опять таки был использован и так вот.здесь мы как бы продолжаем его изучения.то есть видно да если мы задаем.какому-то объекту наш темы странице.свойств нами джен не задаем его значения.этому объекту.со всех сторон дается такой отступ.теперь с нам нужен конкретно левый.отступ.здесь просто пишем тире в сохраняем.обновляем и видим что у нас теперь.только остался левый отступ 45 остальные.два как обычно остались то есть понятно.да так же как и с рамками если там.описали border и давали какие-то.значения готовит у нас была вся рамка.таких цветов таких стилей да то когда.нам нужен конкретный.угол d конкретная страна мы пишем уже на.jin love допустимость нам нужно верхнюю.мы пишем наш джин топ допустим верхней.пусть будет 60x имена и допустим нижней.между бортом допустим 25 5 будет везде.разные но если мы уберем эту ширину еще.то мы можем также задать и правый вот.тогда давайте еще и правый manager right.ну допустим 30 xp.сохраняем обновляем вот то есть мы.конкретно задали до сверху на 60 слева.сколько у нас там 40 снизу 25 справа 30.до здесь вот эти внешние от вот я.надеюсь вы поняли как это все устроено.да ничего сложного здесь нет из.следующий момент это внутренние отступы.то есть внешние мы уже знаем что то что.такое внутреннее от внутреннего чтобы.это вот эти вот чтобы который начинается.от края элемента при данном случае от.края абзаца до его содержимого до этого.текста на данном случае нас внутри него.тупо равен нулю то есть везде текст.прилегает.краям нашего абзаца практически вплотную.год чтобы добавить внутренних отступов.мы должны написать свойства padding тоже.очень часто используемые свойства.поэтому обязательно запишите запомните и.хорошо потренируйтесь и в его.использовании.весь поединка если мы допустим.укажем здесь 50 пикселей и посмотрим что.у нас произойдет мы увидим что у нас с.каждый из сторон добавился внутренний.отступ.50 пикселей точно также и с конкретными.значениями до причислен ужином конкретно.левый отступ режим конкретно левый и все.у нас будет отступ только слева.остальные будут выбраны.вот таким образом работает внутри него.тупо вот их можно использовать для.картинок для любого элемента на html.страницы дальше что он здесь еще нужно.рассказать это такой элемент как.плавающий объект.то есть данном случае мы видим что у нас.абзац как бы в любом положении как а ему.мы ему размер не дали давайте напишем.уже один вид.ну пусть будет 300 пикселей на так.пойдем пусть во всех сторон него будет.10 петель вот мы видим что он любой как.был момент у нас находится как бы.обособлены.то есть абзац мадам идет следующий абзац.идет следующий абзац следующий то есть.они как бы друг друга не обтекают так.вот если мы хотим допустим сделать так.чтобы все оставшиеся абзацы и оптика ли.вот этот то есть грубо говоря чтобы они.перешли вот сюда да то нам нужно вот.этому абзацу придать определенное.свойство вот используется она конечно не.очень часто обычно при создании таких.каких-то сложных макетов но вы все равно.должны знать как это делается как.сделать так чтобы другие допустим абзаце.optika ли какой-то один определенный вот.и не только абзац допустимо заголовок и.так далее делается это очень просто вот.этому.абзаца мы должны придать такое свойство.как плохо то есть мы здесь напишем слово.это будет означать что этот абзац как бы.не жестко закрепленный а плавающий если.мы ему зададим вот right to для браузера.это будет означать что вот этот абзац.нужно обтекать как бы следующими.элементами.с левого края давайте посмотрим.обновляем и видим что у нас как бы сам.образ ушел направо как мы прописали до.всей абзаце обтекает его слева если нам.нужно тот вариант который мы изначально.хотели да мы должны здесь прописать пол.и обновляем и видим что у нас идет.зацепки уже с правой стороны самому.ходит налево причем вот этот внешний.отступ он естесно сохраняется какой мы.там прописаны мэри-джен right вот он 33.семена он здесь от и сохраняет также.страницы и внутренней всего имейте ввиду.с помощью обычного хатам или это сделать.достаточно сложно режим даже скорее.всего не возможно единственный вариант.который я вижу ты сделать за место.подмазаться.табличку уже там лица обтекать по.правому краю чисто абзаца чтобы был и.оптика ли другие абзаца самом там или.сделать невозможно так что имейте ввиду.вот этот момент если вы хотите сделать.элемент таким плавающим как бы то это у.нас свойства флот на этом я данный урок.заканчиваю для вас здесь основная задача.это натренировать вот эти внутренние и.внешние отступы их мы будем использовать.очень часто поэтому именно им уделяйте.больше внимание

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

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