HTML для начинающих — Урок №2 «Создание каркаса страницы часть 2»

Автор Artur Merichev
HTML для начинающих — Урок №2 «Создание каркаса страницы часть 2»

Приветствую вас друзья с вами.

Дмитрий Афанасьев и мы с вами изучаем HTML и CSS в данном уроке мы продолжаем работать над каркасом главной странице будем её приводить к нормальному виду и параллельно изучать всё новое, что мы встретим на нашем пути. Итак приступим давайте займемся нашем хедером удалим слова хейтер и добавим следующий Code Tag span идентификаторы мы создаем сайт name должен тоже закрываться у нас и в центре to tick tock у которого мы хотим для него написать HTML и CSS для веб-разработки соответственно. Давайте эту же самую диктовку и поместим в наш заголовок сайта тег span — это у нас элемент срочного типа.

Чем отличается от заводов.

Как вы помните или моноблочного типа то есть если мы определили div рядом определяем второй день он будет у нас на странице располагаться непосредственно под предыдущим отзывом ананас строчные типы и соответственно если мы здесь там ещё один так. Спан сделаем то они будут располагаться друг за другом. Это основное отличие блочных типов год строчных типов давать сохраняется и посмотрим, что у нас получилось перейдём браузер на страницу вот диктовка у нас. Замени облака гидронасос появилась. Испанцы notify котором дети. Кто в доме поменялось здесь и изменил стартовал теперь. Давайте приступим к оформлению наших блоков чтобы именно страница нашего сайта выглядела не вот таким вот непонятным образом, а уже приобрела вид страница с хиджабом с левая колонка правая колонка и утром всё — это у нас есть данные блоки и соответственно для них нужно сейчас буду ждать стиля отображения показать браузеру то каким способом нужно будет отображать данные блоки. Для этого нам потребуется перейти в папку HTML CSS там где наши лежит проект и в папке Style создать файл style.css создаем его при помощи notepad-plus-plus именно в данной папке Style CSS. А в данном файле мы будем указывать правила для элементов для идентификаторов для классов каким образом их нужно будет располагать на странице и так далее и первое, что мы сделаем — это определить значение по умолчанию для наших базовых тегов для тега Body. Вот давайте посмотрим на. Баден Вот он у нас есть соответственно для тега Body и мы зададим значение по умолчанию margin и padding отступ и мы сдадим v0 шрифт по умолчанию у нас задается с помощью фонд фонд размер шрифта сам тип шрифта. Если вдруг браузер не нашёл то, тогда он поставит нам sans-serif задаем межстрочный интервал с помощью line-height задаем цвет фона background White белый у нас будет издаем, а цвет текста по умолчанию он у нас будет чёрный соответственно мы всё — это определили для тега Body. Ну вот наш так. Бади и по умолчанию — это затронет все те которые у нас находится. ВТБ все элементы тега Body соответственно если мы хотим предположим поменять текст ширину высоту для для данной текстовки нам уже нужно будет писать отдельно для него для вот этого идентификатора. Давайте сохраним ся возвращаемся в яндекс. mail и здесь нам требуется подключить данный стиль показать браузеру, что нужно использовать именно этот стиль для этого документа стили. Мы тоже будем подключать в теге Head вот таким вот способом tp-link атрибут, а шрифта есть. Где располагается. Дан у нас в папке Style. И называется он остался ссы — это у нас файл стиля. Давайте сохраним сяе, что у нас получилось при написании вот такого вот стиля при его применении обновляем страницу вот стиль применился и как его видите текст у нас до конца левой странички и кверху подполз. Для чего все — это нужно значение по умолчанию каждый он для себя вот эти вот значение по умолчанию какие-то устанавливается соответственно. Если вы эти значения по умолчанию. Установите они становятся для своей страницы то ваша страница уже начинает по разному отображается в разных браузерах поэтому на самом начале рекомендуется сразу всё обнулить именно так как нужна. Вам для того чтобы ваша страничка одинаково отображалась в разных браузерах переходим наш файл style.css и теперь давайте задать значение по умолчанию для всех блоков div мы зададим данном всем блокам div Border рамочку ключевое слово border: ширина рамочки будет один пиксель она будет у нас сплошная и. Света у нас будет решётка CC. Это означает, что он нас будет серенький все цвета они вот таким способом кодируется либо можно задать его в шестнадцатеричном видео таким способом либо если у какого-то цвета есть словесное обозначение соответственно задать его словесному обозначению и так давайте перейдем браузера мою страницу. А вот посмотрите для каждого блока у нас появилась рамочка тоже самое мы можем наблюдать и fireboy то есть мы выделяем какой-либо блок в правой стороне мы видим в стиле которые принадлежат данному блоку во-первых на него действует его главной стиль Border на вот он и на него он то есть данный блок который мы сейчас рассмотрим блог о нас ещё унаследует свойства от тега Body этот цвет текста и значение шрифта соответственно здесь мы можем посмотреть. Что было бы если данные данный стиль неё действовал на данный. Блок Мы просто отключаем здесь данные и соответственно у нас в браузере всё — это отображается как бы — это выглядело возвращаемся блокнот в Index HTML и, что у нас дали дали у нас наш главный контейнер div in notification эм-контейнер. Давайте дадим стиль для конкретного данного блока. Каким образом он нас должен отображаться переходим styles.css идём ниже его.

0 комментариев
0

Читайте также