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


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

Краткое описание видео: .продолжаем изучение css данном уроке мы.пройдем важную часть которая связана с.рамками если посмотреть например.рамки очень часто используются на сайтах.сегодня на видеть да еле заметная рамка.пошла затем вот рамка сделана кнопка.обведена рамкой введен импорт для ввода.текста на здесь вот тоже рамка идет есть.очень много аром.используется для придания внешнего вида.и для разграничения каких-то элементов.вот перед тем как мы приступим к.созданию рамок да вы должны понять.следующий момент рамки делать.необязательно каким-то таблицам там или.кнопкам картинкам и так далее на рамка.может быть практически у любого элемента.html страницы то есть по сути вы должны.понять что допустим вот абзац на на.самом деле абзац это такой же как бы.объект это по сути такой контейнер какой.который имеет прозрачный фон не в.котором размещается текст вот но это не.значит что мы не можем придать этому.контейнеру.рамку есть мы точно так же как и таблица.допустим как и картинки можем придать.этому абзацу.рамку давайте на примере сейчас.посмотрим и попробуем создать.какой-нибудь стиль который будет.придавать рамку так создаем стиль и.допустим назовем его рамка на откроем.для него горную скобку и понижена крон и.так как придать какому-нибудь и элементу.рамку на на самом деле за рамку отвечает.три свойства первое это ширина рамки.border виз а второе это цвет рамки.border cауна и последний момент это.стиль рамки либо это сплошная линия.либо это какие-то точки либо это.черточки давайте их сейчас и пропишем.во-первых напишем border with.и ширину рампе.возьмем допустим 1 пиксель ширину к.тоненькая рамка а на следующий момент.это стиль.border стиль мы возьмем сплошную.сплошная рамка имеет значения соли и.последний момент этот свет ран и пишем.можно каун и указываем цвет допустим мы.хотим серую рамку грей отлично вот у нас.есть стиль рамка у которого прописаны.все три составляющих сохраняем переходим.в исходный код и допустим находим тут.абзаца там на западе на.и придадим ему класс рамка естественного.stex другой вы любому другому своему.абзацу придавайте этот стиль так.пропишем класс рамка сохраняем обновляем.и видим что у нас абзац действительно.получил рамку следующий момент который.нам нужно уяснить это как писать вот это.все дело в сокращенном виде есть обычно.таким образом как я сейчас написал это.не пишется ведь это очень громоздко.обычно пишется намного проще просто.берется слова border ставится двоеточие.и через пробел как обычно в сокращенном.виде указываются значение во первых.ширина указывается обычно мы пишем 1.пиксель и дальше допустим стиль в данном.случае у нас был solid давайте попробуем.на точечный стиль точечный стиль пишет.таким образом и цвет был серый.давайте сделаем обычный зеленый ; а вот.эти.удаляем весь мы сократили 3 статьи.обновляем и видим что у нас появилась.точечная рамка.зеленого цвета шириной в 1 пиксель вот.так работает.сокращенное применение этого стиля до.для рамок следующий момент который мы.должны здесь выяснить это предание рамки.определенного вида.на каждом краю то есть если сейчас у нас.и сверху и снизу и слева и справа одна и.та же точечная зеленая рамка шириной в 1.петель до то сейчас мы с вами научимся.делать любой цвет размер и стиль для.каждой из сторон.допустим мы хотим поменять нижнюю рамку.нижнюю составляющие этой рамке на.допустим сплошную да и черную поэтому.возвращаемся и стилей и здесь ниже пишем.border ти работам работа над означает.нижняя часть рамки да и пишем 1 пиксель.сплошная и черная ставим точку запятой.сохраняем таблицу стилей возвращаемся в.нашу страницу обновляем и видим что у.нас нижняя часть рамки стал сплошной и.черный понятно да здесь теперь давайте.попробуем изменить левую часть для этого.как вы уже догадались скорее всего да мы.должны прописать барнер влад : давайте.попробуем для левого края сделать два.пикселя допустим сплошного и.кто-нибудь светло-серую до 6 букв c на.английском так сохраняем обновляем и.видим что у нас слева появилось сплошная.рамка серого цвета шириной в 2 пикселя.то же самое сделан давайте для правого.края гордо рай.перебор ярлык и здесь просто меняем на.night the covers не сделаем такой же как.и нижнюю поэтому бежим годом топ-топ это.верхняя : и прописаны такие же параметры.до крик ему верхней и нижней точнее так.теперь когда мы определили все четыре.стороны нам вот это базовая составляющая.общая для всех не нужно на все четыре.стороны определены мы можем ту.то свойство удалить сохраняем обновляем.и видим что у нас сверху и снизу ставали.черные сплошные винни да а слева и.справа два пикселя шириной сплошная сера.вот так работает свойства border вот.потренируетесь обязательно с рамками.потому что мы будем очень часто.использовать на практике и вот этот.момент вы должны знать очень хорошо.особенно сокращенное а использование на.стене надпись обычно мы будем вот так.писать то есть аромка она со всех сторон.будет у нас одинаковое и будет.предаваться цвет размер кисти.так я на этом данный урок заканчиваю вы.обязательно потренируйтесь с рамками.попробуйте придать рамку допустим.изображению тот апельсин который у нас.был на html курсе да попробуйте ему.предать рамку здесь допустим попробуйте.вот этому заголовку дать рамку на.попробуйте.ссылки дать рамку и так далее то есть.не должны у вас закрепиться очень хорошо

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

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