Уроки по css и html: Уроки по HTML и CSS

Открываем блочную модель | WebReference

Мы познакомились с HTML и CSS, знаем как они выглядят и как выполнить некоторые основы. Теперь мы собираемся погрузиться немного глубже и подробно рассмотреть, как элементы отображаются на странице и задаются их размеры.

В процессе мы обсудим тему, известную как блочная модель и как она работает с HTML и CSS. Мы также рассмотрим несколько новых свойств CSS и используем некоторые значения размеров, о которых рассказывали в уроке 3. Давайте начнём.

Как отображаются элементы?

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

display

Как именно отображаются элементы — как блочные или строчные или как-то ещё, определяется свойством display. Каждый элемент содержит значение свойства display по умолчанию, но как и с любым другим значением свойств, это значение может быть переписано. Есть немало значений для свойства display, но наиболее распространённые это block, inline, inline-block и none.

Мы можем изменить значение свойства display элемента, выбрав этот элемент в CSS и задав новое значение свойства display. Значение block сделает этот элемент блочным.

p {
  display: block;
}

Значение inline сделает этот элемент строчным.

p {
  display: inline;
}

Самое интересное это значение inline-block. Его использование позволит элементу вести себя как блочный, включая все свойства блочной модели (которые мы вскоре рассмотрим). Однако, элемент будет отображаться на строке с другими элементами, а не будет начинаться с новой строки по умолчанию.

p {
  display: inline-block;
}

Демонстрация inline-block

Пространство между строчно-блочными элементами

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

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

div {
  display: none;
}

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

Что такое блочная модель?

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

Это стоит повторить: Каждый элемент на странице представляет собой прямоугольный блок.

Рис. 4.01. Когда мы смотрим на каждый элемент по отдельности, то можем увидеть, что все они прямоугольны, независимо от их представленных форм

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

Работа с блочной моделью

Каждый элемент представляет собой прямоугольный блок и есть несколько свойств, которые устанавливают размер этого блока. Внутренность блока определяется шириной и высотой элемента, который может быть задан свойством display, содержимым элемента или свойствами width и height. padding и затем border расширяют размеры блока наружу от ширины и высоты элемента. Наконец, любой указанный margin идёт за пределами рамки.

Каждая часть блочной модели соответствует свойству CSS: width, height, padding, border и margin.

Взглянем на эти свойства внутри некоторого кода:

div {
  border: 6px solid #949599;
  height: 100px;
  margin: 20px;
  padding: 20px;
  width: 400px;
}

В соответствии с блочной моделью общая ширина элемента может быть рассчитана по следующей формуле:

margin-right + border-right + padding-right + width + padding-left + border-left + margin-left

Для сравнения, в соответствии с блочной моделью общая высота элемента может быть рассчитана по следующей формуле:

margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

Рис. 4.02. Блочная модель включает базовую высоту и ширину плюс padding, border и margin

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

Ширина: 492px = 20px + 6px + 20px + 400px + 20px + 6px + 20px
Высота: 192px = 20px + 6px + 20px + 100px + 20px + 6px + 20px

Блочная модель, без сомнения, одна из наиболее запутанных частей HTML и CSS. Мы устанавливаем значение свойства width как 400 пикселей, но фактическая ширина нашего элемента 492 пикселя. По умолчанию блочная модель коробка аддитивна. Таким образом, для определения фактического размера блока мы должны принять во внимание поля, границы и отступы для всех четырёх сторон блока. Наша ширина включает не только значение свойства width, но и размер левого и правого поля, левую и правую границу, левые и правые отступы.

Пока многие из этих свойств не несут большого смысла и это нормально. Для уточнения давайте поближе посмотрим на все эти свойства width, height, padding, border и margin, которые формируют блочную модель.

width и height

У каждого элемента есть ширина и высота по умолчанию. Эта ширина и высота может быть равна нулю, но браузеры по умолчанию отображают каждый элемент с размером. В зависимости от того, как отображается элемент, ширина и высота по умолчанию может быть соответствующей. Если элемент является ключевым в макете страницы, для него может потребоваться задать определённые значения свойств width и height. В этом случае значения свойств для не строчных элементов могут быть указанными.

width

По умолчанию ширина элемента основана на значении display. У блочных элементов ширина по умолчанию 100% и занимает всё доступное горизонтальное пространство. Строчные и строчно-блочные элементы расширяются и сжимаются горизонтально для размещения их содержимого. Строчные элементы не могут иметь фиксированный размер, таким образом, ширина и высота относятся только к не строчным элементам. Чтобы задать определённую ширину для не строчных элементов, используйте свойство width:

div {
  width: 400px;
}

height

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

div {
  height: 100px;
}

Размеры строчно-блочных элементов

Пожалуйста, помните, что строчные элементы не принимают свойства width и height и любые их значения. Блочные и строчно-блочные элементы, однако, принимают свойства width и height и соответствующие им значения.

margin и padding

В зависимости от элемента, браузеры могут применять отступы и поля по умолчанию для элемента, чтобы помочь с удобочитаемостью. Мы, как правило, видим это на текстовых элементах. Поля и отступы по умолчанию для этих элементов могут отличаться от браузера к браузеру и от элемента к элементу. В уроке 1 мы обсуждали использование сброса CSS чтобы все эти значения по умолчанию стали нулевыми. Это позволяет нам работать с нуля и задать собственные значения.

margin

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

div {
  margin: 20px;
}

Одной из причуд margin являются вертикальные значения, сверху и снизу, они не применяются к строчным элементам, но применяются к блочным и строчно-блочным элементам.

padding

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

div {
  padding: 20px;
}

Свойство padding в отличие от margin работает вертикально для строчных элементов. Вертикальный padding может сливаться со строкой выше или ниже данного элемента, но будет отображаться.

margin и padding для строчных элементов

Строчные элементы ведут себя немного по-другому, чем блочные и строчно-блочные элементы, когда дело доходит до отступов и полей. Для строчных элементов margin работает только горизонтально — слева и справа от элементов. padding работает на всех четырёх сторонах строчных элементов, однако вертикальные поля сверху и снизу могут выходить за пределы строки выше и ниже элемента.

Отступы и поля работают как обычно для блочных и строчно-блочных элементов.

Установка margin и padding

В CSS существует несколько способов установить значения определённых свойств. Мы можем использовать обычную запись, в которой перечисляется несколько свойств и значений одно за другим, в котором у каждого значения есть собственное свойство. Или мы можем использовать сокращённую запись, перечисляя несколько значений одного свойства. Не у всех свойств есть сокращённый вариант, таким образом, мы должны убедиться что используем правильное свойство и структуру значений.

Свойства margin и padding существуют в обычном и сокращённом виде. При использовании сокращённого свойства margin, чтобы установить одно значение для всех четырёх сторон элемента мы задаём одно значение:

div {
  margin: 20px;
}

Чтобы установить одно значение для верхней и нижней стороны, а другое значение для левой и правой стороны элемента, укажите два значения: вначале сверху и снизу, затем слева и справа. Здесь для <div> мы задаём отступы 10 пикселей сверху и снизу и 20 пикселей слева и справа:

div {
  margin: 10px 20px;
}

Чтобы установить уникальные значения для всех четырёх сторон элемента, укажите эти значения в следующем порядке: сверху, справа, снизу и слева, двигаясь по часовой стрелке. Здесь мы задаём для <div> отступы 10 пикселей сверху, 20 пикселей справа, 0 пикселей снизу и 15 пикселей слева.

div {
  margin: 10px 20px 0 15px;
}

Использование свойства margin или padding с любым числом значений считается сокращением. В обычной записи мы можем установить значение только для одной стороны используя уникальные свойства. После имени каждого из свойств (margin или padding в данном случае) идёт дефис и сторона блока, к которой должно применяться значение: top, right, bottom или left. Например, свойство padding-left принимает только одно значение и установит левое поле для этого элемента, свойство margin-top принимает только одно значение и установит верхний отступ для этого элемента.

div {
  margin-top: 10px;
  padding-left: 6px;
}

Когда мы хотим определить только одно значение margin или padding, то лучше использовать обычную запись. Это сохраняет наш код наглядным и помогает избежать путаницы по пути вниз. Например, вы действительно хотите установить margin в 0 сверху, справа и слева элемента или же на самом деле хотите установить margin снизу в 10 пикселей? Использование обычной записи для свойств и значений помогает нам это делать осмысленно. С другой стороны, когда имеешь дело с тремя или более значениями, сокращение невероятно полезно.

Цвет отступов и полей

Свойства margin и padding полностью прозрачны и не принимают какие-либо цветовые значения. Но будучи прозрачными они показывают цвет фона связанных элементов. Для margin мы видим цвет фона родительского элемента, а для padding видим цвет фона элемента, к которому применяется padding.

Границы

Границы располагаются между отступами и полями, создавая рамку вокруг элемента. Для свойства border требуется три значения: ширина, стиль и цвет. Сокращённая запись для border задаётся этом же порядке — ширина, стиль, цвет. В обычной записи эти три значения могут быть разбиты по свойствам border-width, border-style и border-color. Обычная запись полезна для изменения или переписывания отдельного значения границы.

Ширина и цвет границ могут быть определены с помощью обычных единиц размера и цвета CSS, как описано в уроке 3.

У границ может быть различный внешний вид. Наиболее распространённые значения solid, double, dashed, dotted и none, но есть и несколько других на выбор.

Вот код для сплошной серой границы толщиной 6 пикселей для всех четырёх сторон <div>:

div {
  border: 6px solid #949599;
}

Демонстрация border

Границы для отдельных сторон

Как и со свойствами margin и padding границы могут быть размещены на одной стороне элемента за раз при желании. Это требует новых свойств: border-top, border-right, border-bottom и border-left. Значения для этих свойств такие же, как и для border: ширина, стиль и цвет. При желании можно сделать так, чтобы граница появлялась только внизу элемента:

div {
  border-bottom: 6px solid #949599;
}

Кроме того, стилями для отдельных сторон можно управлять на ещё более тонком уровне. Например, если мы хотим изменить только ширину нижней границы, то можем использовать следующий код:

div {
  border-bottom-width: 12px;
}

Такое довольно специфичное свойство границы включают в себя ряд разделённых дефисом слов, начинающихся с border, затем идёт выбранная сторона — top, right, bottom или left, а затем width, style или color, в зависимости от желаемого свойства.

Радиус границы

Пока мы рассматриваем границы и их разные свойств, нам нужно изучить свойство border-radius, которое позволяет нам закруглять углы элемента.

Свойство border-radius принимает единицы размера, в том числе проценты и пиксели, которые определяют радиус скругления углов элемента. Единственное значение закругляет все четыре угла элемента в равной степени; два значения закругляют левый верхний/правый нижний и правый верхний/левый нижний углы в таком порядке; четыре значения закругляют левый верхний, правый верхний, правый нижний и левый нижний углы в таком порядке.

При рассмотрении порядка, когда несколько значений применяются к свойству border-radius (заодно к margin и padding), помните, что они идут по часовой стрелке, начиная с левого верхнего угла элемента.

div {
  border-radius: 5px;
}

Демонстрация border-radius

Свойство border-radius также может быть разбито на ряд свойств, которые позволяют нам изменить радиусы отдельных углов элемента. Эти свойства начинается с border, продолжаются с положения угла по вертикали (top или bottom) и горизонтали (left или right) и завершаются radius. Например, для изменения правого верхнего угла <div> может быть использовано свойство border-top-right-radius.

div {
  border-top-right-radius: 5px;
}

Размеры блока

До сих пор блочная модель была аддитивной. Если вы установили для width 400 пикселей, затем добавили 20 пикселей padding и border 10 пикселей на каждой стороне, фактическая полная ширина элемента становится 460 пикселей. Помните, мы должны сложить значения свойств width, padding и border вместе, чтобы получить реальную полную ширину элемента.

Блочная модель, однако, может быть изменена, чтобы вычисления происходили иначе. CSS3 ввёл свойство box-sizing, которое позволяет нам точно менять, как блочная модель работает и как вычисляются размеры элемента. Это свойство принимает три основных значения — content-box, padding-box и border-box, каждое из которых оказывает несколько разное влияние на вычисление размера блока.

content-box

Значение content-box является значением по умолчанию, оставляя блочную модель в качестве аддитивной. Если мы не используем свойство box-sizing, то это будет значением по умолчанию для всех элементов. Размер элемента начинается со свойств width и height, далее к ним добавляются значения свойств padding, border или margin .

div {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

Свойства и значения специфичные для браузера

Что означают все эти дефисы и буквы в свойстве box-sizing?

Когда был представлен CSS3, браузеры постепенно начали поддерживать разные свойства и значения, включая свойство box-sizing, путём добавления вендорных префиксов. Когда части спецификации CSS3 будут завершены и выпущены новые версии браузеров, эти префиксы станут всё менее и менее актуальными. Со временем префиксы вряд ли будут проблемой, однако, они всё ещё обеспечивают поддержку некоторых старых браузеров. Мы можем работать с ними время от времени и, возможно, даже захотим использовать их, если нам нужна поддержка старых браузеров.

Вендорные префиксы можно увидеть для свойств и значений, всё зависит от спецификации CSS. Здесь они показаны для свойства box-sizing. Разработчики браузеров были свободны в выборе, когда использовать префикс, а когда нет. Таким образом, одни свойства и значения требуют префиксы для некоторых браузеров, а другие нет.

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

Для справки, наиболее распространённые префиксы изложены здесь:

• Mozilla Firefox: -moz-
• Microsoft Internet Explorer: -ms-
• Webkit (Google Chrome и Apple Safari): -webkit-

padding-box

Значение padding-box изменяет блочную модель путём включения всех значений свойства padding внутри width и height элемента. При использовании значения padding-box, если у элемент width равно 400 пикселей и padding 20 пикселей вокруг всех сторон, фактическая ширина останется 400 пикселей. При увеличении padding на любое значение, размер содержимого внутри элемента сжимается пропорционально.

Если мы добавим border или margin, эти значения будут добавлены к свойствам width или height для вычисления полного размера блока. Например, если мы добавим border 10 пикселей и padding 20 пикселей вокруг всех сторон элемента, у которого width 400 пикселей, фактическая полная ширина будет 420 пикселей.

div {
  box-sizing: padding-box;
}

border-box

Наконец, значение border-box изменяет блочную модель так, чтобы любые значения свойств border или padding включались внутри width и height элемента. При использовании значения border-box, если для элемента указаны width 400 пикселей, padding 20 пикселей и border 10 пикселей вокруг всех сторон, фактическая ширина останется 400 пикселей.

Если мы добавим margin, эти значения должны учитываться для расчёта полного размера блока. Независимо от того, какое значение свойства box-sizing применяется, любые значения margin не будут добавляться в вычисления полного размера элемента.

div {
  box-sizing: border-box;
}

Рис. 4.03. Различные значения box-sizing позволяют по разному вычислять ширину элемента и блока целиком

Выбор размера блока

Вообще говоря, лучшее значение box-sizing для применения — это border-box. Это значение намного упрощает нам математику. Если мы хотим, чтобы весь элемент был 400 пикселей в ширину, он останется 400 пикселей в ширину, независимо от того, какие значения padding или border мы к нему добавляем.

Кроме того, мы можем легко смешивать значения длины. Скажем, мы хотим, чтобы наш блок занимал 40% в ширину. Добавление padding 20 пикселей и border 10 пикселей для всех сторон элемента не сложно и мы по-прежнему можем гарантировать, что фактическая ширина нашего блока останется 40%, несмотря на использование пикселей в другом месте.

Единственный недостаток свойства box-sizing в том, что как часть спецификации CSS3 она не поддерживается во всех браузерах, особенно не хватает поддержки в старых версиях. К счастью, это становится всё менее и менее актуальным, поскольку выходят новые версии. Скорее всего, мы можем безопасно использовать свойство box-sizing, но если вы заметили какие-то проблемы, стоит посмотреть с каким браузером они связаны.

Инструменты разработчика

В большинстве браузеров есть то, что известно как Инструменты разработчика. Эти инструменты позволяют нам проверить элемент на странице, увидеть, где этот элемент живёт в HTML-документе и посмотреть, какие свойства и значения CSS к нему применяются. Большинство из этих инструментов также включают в себя схему блочной модели, чтобы показать вычисленный размер элемента.

Чтобы увидеть Инструменты разработчика в Google Chrome, откройте меню, выберите «Дополнительные инструменты», а затем «Инструменты разработчика». После этого откроется панель в нижней части окна браузера, которая предлагает несколько инструментов для проверки нашего кода.

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

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

Поиграйте с инструментами разработчика, будь они в Google Chrome, Mozilla Firefox, Apple Safari или других браузерах; можно многое узнать просматривая наш код. Я вообще оставляю панель инструментов всегда открытыми при написании HTML и CSS. И также часто проверяю код других сайтов, чтобы увидеть, как они сделаны.

Рис. 4.04. Инструменты разработчика Google Chrome, которые помогают нам проверять HTML и CSS на любой странице

Блочная модель является одной из самых запутанных частей при изучении HTML и CSS. Она также является одной из самых мощных частей HTML и CSS и как только мы это освоим, практически всё остальное, вроде позиционирования содержимого, пойдёт довольно легко.

На практике

Давайте перепрыгнем обратно к нашему сайту Styles Conference к центральной части страницы и добавим ещё немного содержимого.

1. Начнём настройку размера нашего блока с версии border-box, которая упростит установку размеров всех наших элементов. В нашем файле main.css, чуть ниже сброса, добавим комментарий, чтобы определить код для создания нашей сетки и макета сайта. Мы положим всё это ниже сброса, чтобы они шли в правильном порядке в каскаде.
   

   Отсюда мы можем использовать универсальный селектор *, наряду с универсальными псевдоэлементами *:before и *:after для выбора всех мыслимых элементов и изменения box-sizing на border-box. Помните, что мы собираемся включить вендорные префиксы для свойства box-sizing, так как это относительно новое свойство.

   /*
     ========================================
     Сетка
     ========================================
   */
   
   *,
   *:before,
   *:after {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
   }

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

   Чуть ниже набора универсальных селекторов создадим селектор класса container. В этом селекторе зададим width как 960 пикселей, padding слева и справа по 30 пикселей, margin сверху и снизу как 0, а слева и справа как auto.

   Установка width сообщает браузеру какая ширина элемента с классом container однозначно должна быть. Использование margin слева и справа как auto в сочетании с width позволяет браузеру автоматически выставить равные левые и правые поля для элемента, таким образом, выровняв его по центру на странице. Наконец, padding слева и справа гарантирует, что наше содержимое не занимает непосредственно края элемента и обеспечивает небольшое пространство для содержимого.

   .container {
     margin: 0 auto;
     padding-left: 30px;
     padding-right: 30px;
     width: 960px;
   }




3. Теперь у нас есть класс container доступный для использования, пойдём вперёд и применим этот класс в HTML к элементам <header> и <footer> на каждой странице, включая файлы index.html, speakers.html, schedule.html, venue.html и register.html.

   <header>...</header>
   
   <footer>...</footer>




4. Пока мы здесь, давайте расположим по центру остальное содержимое наших страниц. На главной странице (файл index.html) добавим класс container к каждому элементу <section> на странице, по одному на героя нашего раздела (раздел, который представляет нашу конференцию) и одному для раздела тизеров.

   <section>...</section>

   Кроме того, обернём все элементы <h2> на каждой странице элементом <section> с классом container.

   <section>
     <h2>...</h2>
   </section>

   Мы позже вернёмся и настроим эти элементы и классы, но сейчас движемся в правильном направлении.




5. Теперь, когда всё наше содержимое выровнено по центру, установим некоторое вертикальное пространство между элементами. Для начала разместим 22-пиксельный нижний margin для некоторых заголовков и абзацев. Мы добавим и прокомментируем стили ниже стилей сетки.

   /*
     ========================================
     Типографика
     ========================================
   */
   
   h2, h4, h5, h5, p {
     margin-bottom: 22px;
   }

   Мы намеренно пропустили <h3> и <h6>, так как по дизайну не требуются отступы для элементов <h3> и мы не будем использовать любые элементы <h6> в данный момент.




6. Давайте также попробуем наши силы в создании границ и некоторых закругленных уголков. Мы начнём с размещения кнопки в верхней части элемента <section> на главной странице, чуть ниже заголовка.

   Ранее мы добавили элемент <a> внутри <section>. Давайте добавим классы btn и btn-alt к этой ссылке.

   <a>...</a>

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

   Для начала добавим класс btn и применим некоторые общие стили, которые будут для всех кнопок. Мы хотим, чтобы у всех кнопок был border-radius 5 пикселей. Кнопки должны отображаться как inline-block, поэтому мы можем добавить поля со всех четырёх сторон без проблем и уберём все margin.

   /*
     ========================================
     Кнопки
     ========================================
   */
   
   .btn {
     border-radius: 5px;
     display: inline-block;
     margin: 0;
   }

   Мы также хотим включить стили, характерные для этой кнопки, которые делаем с помощью класса btn-alt. Сюда добавим однопиксельную рамку серого цвета, padding 10 пикселей сверху и снизу и padding 30 пикселей слева и справа от кнопки.

   .btn-alt {
     border: 1px solid #dfe2e5;
     padding: 10px 30px;
   }

   Применение двух классов btn и btn-alt к одному элементу <a> позволяет накладывать эти стили, отображая их для одного элемента.

7. Поскольку мы работаем с главной страницей, давайте также добавим небольшой padding к элементу <section>, содержащий наш элемент <a> с классами btn и btn-alt. Мы сделаем это путём добавления атрибута class со значением hero к элементу <section>, наряду с классом container, так как это будет ведущий раздел нашего сайта.

   <section>
     ...
   </section>

   Далее мы хотим создать новый раздел в файле CSS для стилей главной страницы и как только будем готовы, станем использовать класс hero, чтобы установить padding для всех четырёх сторон элемента <section>.

   /*
     ========================================
     Главная страница
     ========================================
   */
   
   .hero {
     padding: 22px 80px 66px 80px;
   }

Наш сайт начинает складываться воедино, особенно главная страница.

Рис. 4.05. Главная страница Styles Conference постепенно принимает форму после нескольких обновлений

Демонстрация и исходный код

Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

Просмотр сайта Styles Conference или Скачать исходный код

Универсальный селектор

На первом этапе данного упражнения мы представили универсальный селектор. В CSS звёздочка (*) это универсальный селектор, который выбирает каждый элемент. Вместо перечисления всех отдельных элементов мы можем использовать звёздочку для выбора всех элементов.

Псевдоэлементы :before и :after также упомянутые на этом этапе — это элементы, которые могут динамически генерироваться через CSS. Мы не станем применять эти элементы в нашем проекте, однако, при упоминании универсального селектора также хорошим тоном будет включить эти псевдоэлементы на случай, если они когда-нибудь появятся.

Резюме

Возьмите пирожок и погладьте себя по голове. Я подожду.

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

Вкратце, в этом уроке мы говорили о следующем:

• Как отображаются разные элементы.
• Что такое блочная модель и почему она так важна.
• Как изменить размер элементов с учётом высоты и ширины.
• Как добавить к элементам margin, padding и border.
• Как изменить размер элементов и влияние блочной модели.

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

Ресурсы и ссылки

Автор и редакторы

Автор: Шэй Хоу

Последнее изменение: 11.08.2018

Редакторы: Влад Мержевич

Видео курс HTML и CSS. Урок теги div и span

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

Здравствуйте, уважаемые слушатели.

Мы с вами продолжаем курс лекций по HTML. Сегодня поговорим о тегах div span. Посмотрим на тег div. Давайте посмотрим, как можно сделать такую вот разметку страницы. Вы помните наш предыдущий урок, там мы изучали таблицы, и вы наверно думаете, что такую разметку можно сделать как раз с их помощью. Вот здесь можно создать и объединить их и здесь тоже. Давайте подумаем, какие могут быть недостатки в таком способе создания данной страницы.

Я создаю первую строку, за ней вторую. Создаю в них ячейки. Что, если я захочу создать вот здесь ячейку шире? Верхняя ячейка автоматически расширится до нижней. Если я захочу создать вложенную ячейку. Должен быть какой-то механизм, позволяющий делать такие вещи проще и быстрее. Таким тегом и является тег div.

С его помощью мы легко можем создавать такие страницы без использования таблиц. Тег <div> предназначен для создания слоя.

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

Открываем первый пример начинаем наше знакомство.

Вот мы видим атрибут <style> , задающий какой-то стиль, background задает фон и т.д. Давайте запустим пример и посмотрим. Здесь мы видим желтую полосу – это и есть наш контейнер. Давайте еще посмотрим примеры.

Здесь мы видим три контейнера. Давайте запустим. Они выводятся в порядке очередности.

Поговорим более детально о данном теге.

Тег <div> более гибкий тега <table>.

Размеры блока задают с помощью свойств <width> и <height>.

Точка с запятой обязательно.

Давайте посмотрим на примерах.

Вот у нас тег <div>. Запустим пример. Вот вывелся такой квадрат. Думаю, понятно, что ширину и высоту мы задали и получили вот такой пример.

Давайте посмотрим дальше. Вот у нас три контейнера. Вот у нас был похожий пример. Только тут мы не задавали ширину и высоту.

Давайте поговорим о вложенности, что мы можем размещать в теге <div>.

Давайте поговорим о позиционировании слоев.

Эти слои расположены друг за другом. При этом мы задали им какие-то размеры: ширину и высоту. Вот здесь мы еще видим отступ. Размер слоя по вертикали определяется содержимым.

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

Мы можем наш элемент разместить как с правого края страницы, так и с левого. Свойство может принимать 3 значения.

Давайте посмотрим, как это все работает.

Сразу же запустим данный пример. Вот у нас тег. Этот текст находится в контейнере. В теле <body> у нас есть тег <div>, в котором свойству float присвоено значение right. В данном случае обтекания у нас не видно, но выравнивание мы можем наблюдать. Давайте попробуем изменить. Напишем left. Вот что у нас получится. Обратите внимание. Высота текста указывает, какая должна быть высота нашего элемента. Ширина нашего элемента также может задаваться.

Видите, когда не указываем свойство float или задаем ему значение NULL, результат один и тот же.

Посмотрим дальше. На 9, 10, 11 строках мы указываем тег div, в свойстве указано, что элемент будет находиться справа страницы. Заметим, что наш элемент будет обтекаем. Как только выполнится 10 строка, новый тег будет изображен вот так, потому что желтый обтекаем с левой стороны.

Далее зеленый также обтекаем с левой стороны.

Запустим и посмотрим. Вот наши элементы.

Давайте посмотрим еще пример. Последний на свойство float. Отличие с предыдущим примером – это выравнивание по левой стороне. Давайте предположим, как они будут расположены в нашем браузере. Наши элементы теперь будут обтекаемы справа.

Давайте с вами посмотрим, правильно ли мы предположили.

Посмотрим теперь на свойство clear. Оно отменяет обтекание или запрещает обтекание элемента с указанной стороны.

Посмотрим на наш рисунок. Допустим, мы хотим отменить обтекание вот этого нижнего элемента.

Для этого нам нужно использовать свойство clear. Наиболее используемым его значением является both, которое убирает обтекание с обеих сторон нашего слоя.

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

Мы хотим добиться отмены обтекания с двух сторон. Давайте посмотрим, как это будет выглядеть. Обтекание по правой стороне разрешено, поэтому зеленый сразу за желтым и расположился. На третьей строке отменено обтекание. Давайте уберем свойство clear. Вот что у нас получается.

Поговорим теперь о вложенности слоев. С помощью таблиц – это довольно трудоемко.

Вот мы видим три вложенных слоя. Синий, желтый и т.д. давайте посмотрим, как это все реализовать.

Очевидно мы можем нарисовать такой вот один слой, далее следующий, а далее внутри них разместить еще слои.

Для этого нужно нарисовать два базовых слоя и разместить в них еще по два слоя.

Мы указываем ширину, высоту, фон. Вот у нас еще один тег. Все то же самое: ширина, высота, фон. Посмотрим, как это сработает. Видите, высота каждой по 200 пикселей, в сумме выходит 400, и ширина также 400 пикселей. Теперь в каждом из этих элементов разместим квадраты.

Давайте разбираться, как это можно сделать.

Розкоментируем вот эту строку и эту. Что у нас получится. В нашем теге div мы указали еще два таких же тега div. И здесь также. Давайте посмотрим, что получилось.

Вот этот тег отработал, вот этот и т.д.

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

Свойство padding. Желтым у нас показано содержимое элемента, синим – сам наш элемент. Давайте смотреть, как это реализуется. Запустим и посмотрим. Вот у нас появился такой квадрат. Текст в нем размещен на расстоянии 30 пикселей сверху, слева и справа. Вниз больше потому, что мы так задали размер нашего слоя.

Давайте нажмем F12. У нас появилось такое вот дополнительное меню. Что мы можем увидеть? Знакомую нам разметку. Давайте выберем ее и справа у нас появляется такая вот подсказка, которая укажет мне, где находится мой слой. Зеленым у меня подсвечен отступ – padding. Будем еще изучать свойство margin. Оно отвечает за отступы от границ элемента до границ соседних либо родительских элементов.

Вот представьте себе, что вот это наш слой, стрелками обозначены отступы. Это как раз и есть отступы до соседних или родительских элементов.

Здесь у нас дано два слоя. Первый 200 на 200 пикселей, margin – 0 пикселей. В следующем — margin – 0 пикселей. Запустим и посмотрим. Вот здесь у нас 0 пикселей. Вот это расстояние 30 пикселей, вот это – тоже 30 пикселей.

Вот у нас 200 на 200, padding – 0, margin – 0.

Здесь margin – 30 пикселей.

Познакомимся немного детальней с темой отступов.

Можете заметить, что у нас здесь есть новый параметр auto. Он говорит о том, что отступы следует сделать равными с обеих сторон.

Посмотрим на примере, как это работает.

Если задаем 4 параметра, то порядок будет по часовой стрелке.

Посмотрим на примерах.

На 13 строке у нас указан слой синего цвета. В нем вложен слой, который будет желтым. Ему передано два параметра — 200 пикселей и auto. Вот слой, который нас интересует. Вот у нас 200 пикселей. Нажмем F12 и посмотрим, что нас такое auto. Я выбрал желтый цвет. Тут указан margin 200 пикселей, и с помощью параметра auto указано расстояние 100 пикселей.

Вот здесь у нас осталось по 100 пикселей.

Давайте смотреть следующий пример.

Давайте посмотрим, как это будет выглядеть в браузере.

Здесь у нас передано 4 параметра. По часовой стрелке у нас указано 10, 20, 30 пикселей.

Также можно создать отступы для конкретной стороны с помощью свойств padding-top, padding-bottom и т.д.

Если укажите padding-top, то будет отступ только сверху и т.д.

Вот наш слой. Padding – это отступ от нашего содержимого до границ слоя. В данном случае кругом 40.

Давайте изменим пример и запустим. Сверху, слева и справа у меня стали нули, а снизу у меня 40 пикселей. Попробуем еще раз изменить. Вот 40 пикселей справа.

Рассмотрим теперь следующий тег <span> </span>.

Он применяется для форматирования текста.

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

Следует отметить, что вот эту рекомендацию относительно аккуратности использования нужно учитывать.

Видео курс HTML и CSS. Таблицы стилей CSS.

На этом видео уроке Вы познакомитесь со специальным языком для описания внешнего вида веб-страницы — CSS (Cascading Style Sheets). На уроке будут рассмотрены основные способы интеграции CSS в создаваемую веб-страницу, а также семантика CSS и особенности применения стилей. На практических примерах будут продемонстрированы наиболее часто используемые селекторы для задания стиля определенным частям документа, продемонстрирован приоритет между различными подходами при задании стилей и многое другое. Этот урок позволит наполнить Вашу страницу красками и придать ей желаемого Вами вида.

Здравствуйте, уважаемые слушатели. Меня зовут Александр Петрик. Я сотрудник компании CyberBionicSystematics. Мы с вами продолжаем цикл лекций по языку HTML. Сегодня мы рассмотрим такую важную вещь как CSS.

CSS – это специальный язык для описания внешнего вида документа, который создан с использованием языка разметки. CSS является акронимом от слов Cascading Style Sheet/ Каскадные таблицы стилей. Этот термин был предложен норвежским инженером Хоакин Виум Ли.

Помните, мы писали с вами такое свойство как style, указывали фон и т.д. Это все и является элементами CSS.

Давайте посмотрим, как можно использовать CSS на нашей странице. С первым мы с вами знакомы.

В теге <head> указываем тег < style >. На этот пример посмотрим более детально на примере.

Давайте посмотрим на семантику языка, на особенности его применения. Она достаточно проста. Мы просто указываем селектор и в нем задаем значения. Самым простым использованием CSS является использование атрибута style. В теге <body> мы указываем атрибут style. Segoe UI значит, что вот этому тексту будет установлен этот шрифт. Тексту мы также задаем размер и цвет.

Запустим и посмотрим. Давайте попробуем что-нибудь поменять. Теперь шрифт у нас увеличился.

Посмотрим на следующий пример. Тег style мы используем в теге head. В теге style мы используем селектор. Чтобы не писать везде одни и те же значения, я вынес их в тег р один раз и смогу его использовать по всей программе. Давайте запустим. Мы применили эти значения ко всем тегам <p> программы (также и вложенным).

Вот третий пример. Здесь речь идет о вложенном файле CSS. Давайте найдем его. В этом примере все то же, что и в предыдущем, только тег <р> вырезал и перенес его в текст отдельного файла CSS. Чтобы его использовать в нашем HTML документе нужно его подключить с помощью тега link. Он указывает нашем браузеру, где находится наш CSS файл. В href указываем название подключаемого документа, в атрибуте rel указываем stylesheet. Этот атрибут показывает браузеру, какого рода этот файл. В данном случае это файл стилей. Также указываем, что он имеет расширение .css. запустим и посмотрим. Вот мы видим, что результат тот же. Вот такой(второй) подход является более правильным. При загрузке большой страницы таким образом будет снижена нагрузка на браузер.

Давайте посмотрим, что будет , если мы начнем комбинировать три описанных выше подхода.

На 9 строке мы выносим таблицу стилей в отдельный документ, также записываем тег <style> в тег <head>. Запустим и посмотрим. Наивысшим приоритетом среди трех способов указания стиля для вашей страницы есть использование такого атрибута style в конкретном теге. Давайте попробуем его убрать и посмотрим, что же у нас получится. Запускаем. Теперь фраза, содержимое параграфа, отображается красным цветом. Вывод: средним приоритетом обладает способ указания стиля с использованием тега style, который вынесен в заголовок head. Давайте здесь также уберем свойство color. Запустим. Мы видим, что нисший приоритет у третьего, рассмотренного нами способа. Всегда нужно помнить такую вот градацию.

Поговорим о выражениях селектора. Ко всем параграфам нашего документа будет применен такой вот стиль.

Второй вид селектора – селектор – класс. Чтобы использовать класс в нашем документе, мы ставим точку-имя класса – в фигурных скобках указываем таблицу стилей.

При использовании классов мы просто указываем в необходимом теге слово class и его имя.

Посмотрим на селектор – идентификатор. Для использования указываем #, имя идентификатора и в фигурных скобках таблицу стилей.

В необходимом теге указываем атрибут id, имя идентификатора. После этого данный стиль будет применен к этому параграфу.

Переходим к примерам. Первый пример показывает использование селектора, в качестве которого выступает имя стиля.

Обратите внимание, я не пишу таким образом, я просто указываю имя тега.

Я хочу, чтобы все слои имели вот такой вот стиль.

У этого параграфа будет вот этот стиль. На строке 40 тег р является вложенным. Какой же стиль будет вот здесь вот. Давайте запустим пример, чтобы разобраться. Все три параграфа имеют один и тот же стиль. Значение стиля в теге дочернего элемента имеет высший приоритет над родительским. Вот здесь уберем цвет шрифта. Вот здесь шрифт стал черного цвета, фон – красного, а здесь мы ничего на видим. Потому, что у нас шрифт стал красного цвета. Давайте посмотрим, почему. Тег div отдал свой цвет вот этому тексу. Имеет место перекрытие значений в том случае, если теге (в данном случае) <p> не указан какой-либо из атрибутов.

Рассмотрим селектор класс. Здесь использован селектор тег, и здесь. А здесь использован селектор класс. давайте посмотрим, как он у нас используется. Мы говорим, что вот этому тегу <p> мы хотим придать какой-нибудь стиль. Очевидно тот, который указан в селекторе класса. Давайте посмотрим, не будет ли у нас какого-нибудь перекрытия между значениями в теге <р> и <class>. У нас есть подсказка: селектор класса доминирует над тегом класса. Те свойства, которые совпадают, то приоритет будет тому, который указан в селекторе класса. Вот здесь он у нас доминирует над тегом <p>, а здесь над тегом <div>. Давайте посмотрим. Вот смотрите, у нас размер — 20 пикселей, а 36 вот здесь зачеркнуто. Мы можем изменить, и у нас автоматически будет указано свойство в теге <p>.

Еще один простой параграф. Вот он. У него есть вот такой стиль.

Здесь у нас в теге <div> указан селектор класса, цвет у текста красный, а фон aqua. Давайте смоделируем перекрытие. Здесь укажем Green. Видите, ничего не изменилось, т.к. селектор класс доминирует над тегом <div>.

И третий пример. Здесь мы посмотрим на использование идентификаторов. По умолчанию предполагается, что такой селектор у нас один.

На 48 строке мы указываем id. Это значит, что мы подключаем вот этот вот идентификатор.

Мы ожидаем, что здесь вот будет такой стиль. Вот у нас первая строка. Тег <p> у нас никак не определен и поэтому он у нас черного цвета.

Вот вторая строка. Мы видим, что вот этот текст получил вот этот стиль.

Здесь мы ожидаем, что вот этот текст будет красного цвета.

Давайте используем идентификатор дважды. Программа нам подсказывает, что мы уже использовали данный идентификатор. Смотрите, результат тот же, но такая запись яявляется плохим тоном.

Давайте посмотрим, какой из вариантов является приоритетным. В данном случае наиболее приоритетным является идентификатор.

Поговорим о конструкции селектора. Будем говорить о сложных селекторах. Поговорим о вложенных селекторах, мультиклассах и соседних селекторах.

Вложенный селектор. На эту конструкцию посмотрим более детально на примерах.

Мультиселекторы. При их записи следует использовать такую вот конструкцию. Посмотрим, как они работают, на примерах.

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

Посмотрим на примеры.

Рассмотрим вложенные селекторы. На 25 строке используем тег <div>. Далее. На строке 32 указано, что если у нас будет элемент, вложенный в тег <div>, то он будет отображен синим цветом.

На 37 строке у нас также вложенный селектор в качестве дочернего элемента. Если у нас тег <div> будет вложен в тег <p>, то тег <p> у нас будет отображен вот в таком стиле.

Давайте посмотрим, какой будет стиль у тега на 45 строке. Это не будет работать на 45 строке.

На 47 строке тег <p> вложен в тег <div>. Во-первых, у нас сработает вот этот стиль. Но мы с вами используем здесь еще и вложенный селектор. Вот он на 37 строке. Мы с вами говорили, что ели тег <p> вложен в тег <div>, то мы хотим, чтобы он был красного цвета. Все остальные свойства будут здесь присутствовать.

На 51 строке есть тег <div>. он вложенный. Вот у нас указано, что если тег <div> вложен в еще один тег <div>, то мы хотим задать вот этот стиль. Мы с вами говорим, что вот здесь вот мы увидим цвет шрифта – синий. Что у нас получается. В теге <div> мы указывали цвет зеленый, но вот здесь вот он у нас переопределен. Это значение будет преобладать. Давайте запустим и посмотрим. Вторая строка зеленого цвета на красном фоне. Почему? Тег <div> у нас зеленый, а вот здесь вот у нас переопределен только цвет фона. Это еще можно увидеть , нажав F12. Мы вот здесь определили фон. Мы его можем выключить.

Смотрим далее. Стиль у нас здесь такой: шрифт синий, фон зеленый. Приоритет имеет сложный вложенный селектор над обычным селектором.

Давайте напишем здесь фон и посмотрим, как это отработает.

Вот у нас доминирование сложного селектора над обычным.

Посмотрим на мультиселекторы. селектор класс и мультикласс очень близкие понятия. На 24 строке у нас указан селектор класс, указана таблица стилей. На 30 строке у нас указан мультикласс. Здесь указан как-бы первый селектор, в данном случае тег <p>, далее точка и указан class2 и указана для него вот такая таблица стилей.

На 36 строке у нас также указан мультикласс. И вот здесь у нас указан просто селектор тег <p>. На 50 строке, подключаем селектор class1. Давайте посмотрим, как это сработает. Вот наша строка зеленого цвета на черном фоне и ее шрифт явно больше, чем стандартный. Давайте посмотрим, почему так получилось. Мы хотим для начала понять, почему фон черный. Мы подключаем class1, а в нем указан черный цвет фон. Почему цвет зеленый? Потому что, color = Green. Также смотрите, мы тегу <p> задали вот такой вот стиль. Это значит, что очертание нашего шрифта будет жирным. Да, смотрите, это действительно так.

Вот у нас указан на 52 строке тег <span>, мы ему с помощью атрибута <class> задаем какой-то стиль – стиль, указанный с помощью селектора класса class1. Тег <span> у нас нигде не определен, поэтому у нас на второй строке нету жирного очертания. Все остальное такое же, как и на строке 50.

На 54 строке у нас есть тег <p>, у него есть атрибут <class> и подключен селектор class2. Давайте посмотрим. Отдельно селектора class2 у нас нету. У нас есть вот такой вот мультикласс. Мы написали p.class2. Это значит, что если у нас где-то в теге <p> используется class2, то нужно установить какой-то стиль. Вот у нас большие буквы и без фона. Буквы красный потому, что у нас указано color = Red, а размер – 50 пикселей.

Вот у нас определение нашего мультикласса. У нас здесь не задается фон, поэтому мы его и не видим. Начертание нашего шрифта – жирное. Если вот здесь мы поставим class1, то у нас получится то же самое, что и в первом варианте. Вот у нас первая и третья строки совпали.

Посмотрим на 56 строку. У нас здесь подключение class2. Данный селектор нигде не определен. Мы видим на экране простую строку. Т.е. такой класс мы не определяли. Он есть в контексте мультикласса, но не самостоятельно.

Мы не описывали также стиль для селектора тега <span>, поэтому мы видим простую строку на белом фоне.

Посмотрим на 58 строку. У нас здесь использование мультикласса. На 36 строке мы его описывали, и на 58 строке мы его подключаем. Вот что у нас получилось (нижняя строка).

Синий шрифт вот где задается, фон – вот здесь вот. Где же у нас устанавливается шрифт ? нажмем F12 и посмотрим вот сюда. У нас есть класс1 с зеленым цветом и т.д. но мы его как-бы зачеркнули, т.к. переопределили. Мы не переопределяли размер шрифта. Также у нас используется жирное начертание.

Давайте теперь поставим здесь class2. Сохраним и запустим.

Запустим. Есть какие-то изменения. У нас теперь отработал другой мультикласс – p.class1.Он перекрыл определение селектора .class1. Давайте посмотрим почему.

Мультиклассы перекрывают обычные классы, поэтому вот это вот определение было перекрыто вот этим вот классом.

Я вам советую зайти в этот пример самостоятельно, прочувствовать это все богатство мультикласса, поменять что-нибудь, и, думаю, этот материал у вас окончательно закрепится.

Давайте поговорим теперь о соседних селекторах. Если вам нужно установить стиль соседнего элемента. Например, тегу <div>установить какой-то стиль. Например, я хочу, чтобы где-бы не встречался тег <span>, если после него идет тег <div>, отображать фон красного цвета.

Запустим. Здесь фона нет. Нам требуется соблюсти определенную последовательность. Давайте поменяем. Теперь у нас появился красный фон.

Переходим к третей части урока.

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

Если название шрифта состоит из нескольких слов, то оно помещается в кавычки.

Вот мы формируем такую таблицу.

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

Идем далее.

Поговорим о том, какие есть способы задания различных элементов в CSS. Это абсолютные и относительные единицы.

Относительные единицы: проценты, пиксели, относительно х и т.д.

Абсолютные единицы: дюймы, см, мм, и т.д. в абсолютных единицах не всегда комфортно задавать размеры.

Посмотрим на наш новый пример. Указываем hr – линия, clear – отмена обтекания. Вот на странице 45 мы посмотрим, как используются абсолютные единицы. Small, large и т.д. – это константы. Вот пики.

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

Вот мы задаем стили параграфам. Запустим и посмотрим. Вот у нас абсолютные единицы

Давайте теперь посмотрим на относительные единицы. Чаще всего вы можете встретить процентные соотношения.

Поговорим о свойстве font-weight. Оно устанавливает насыщенность шрифта.

Здесь у нас указан заголовок. На 101 строке мы формируем слой, указываем ему стиль. На 102 строке мы подключаем какой-то стиль с использованием класса. Давайте посмотрим, что за стиль. Это нормальное начертание нашего шрифта.

Bold будет у нас иметь полужирное очертание. Обратим внимание на строку 107. Посмотрим, что находится в three. Здесь задано нормальное начертание.

На 41 строке задан стиль для тега <span>, если он вложен в тег <p>.

Посмотрим далее. Обратим внимание на строку 110. Нам нужно посмотреть на класс four. Внутри тега <p>, если в нем используется класс four, то текст примет полужирное начертание. Если же в таком теге еще используется тег <span>, то текст в последнем будет light. Запустим.

Вот это просто заголовок.

Здесь не совсем корректно, т.к. шрифт у нас все-таки жирный.

Каждому классу мы указываем какие-то стили. Ничего необычного в этой части мы не видим – обычный шрифт. Выключаем и ничего не изменяется. А 600 – пропадает жирное начертание. Вывод: в значениях от 100 до 500 разницы мы не видим.

Рассмотрим свойство font-style. Оно может принимать три значения: normal, italic и oblique.

На строке 28 пример их использования.

На 20 строке у нас определено, какие классы какое значение font-style свойства принимают.

Запустим и посмотрим в чем между ними разница.

Следующий пример показывает нам свойство font-variant. Оно определяет, как мы можем использовать строчные буквы.

На 32 строке вот этот вот шрифт будет соответствовать тому, который установлен в теге <p>, у нас указан тег <span> и ему присвоен класс smallcaps.

Запустим и посмотрим.

Давайте смотреть дальше. Font-color. Мы уже с ним знакомы, давайте его вспомним.

Вот здесь мы увидим стандартный стиль. Вот здесь мы с помощью класса задаем тегу какой-то стиль.

Решетка – указание цвета в шестнадцатеричной системе счисления.

Полезная возможность Visual Studio: если поставить сюда курсор, нажать Ctrl + пробел, то появляется вот такое вот меню и я могу менять цвета. Запустим пример.

Заголовок, обычный текст.

Следующий пример. Свойство text-align. Свойство text-align применяется для выравнивания текста. Может принимать четыре значения: left, right, center, justify. Justify означает выравнивание по ширине.

Сейчас посмотрим, как это все работает.

Заголовок нашей страницы.

Margin — это у нас внешние отступы. Вот у нас показаны margin. Посмотрим, какие у нас были размеры. Вот у нас 500 пикселей его ширина. Вот она. Вот таким вот образом у нас задан отступ и слои.

Вот первый слой и выравнивание по левому краю. Далее второй – выравнивание по правому краю. Третий – выравнивание по центру, и четвертый – по ширине.

Давайте выключим свойство width. Текст автоматически растянулся на всю страницу и эти края выровнены – текст растянулся по ширине.

Посмотрим на следующий пример. Свойство text-decoration. Значение blink устаревшее и работает не во всех браузерах, поэтому рекомендуется использовать другие, более новые, техники вместо него.

Вот с помощью класса задается параграфу какой-то стиль. Мы увидим здесь подчеркивание. Здесь – надчеркнутый текст, а здесь – перечеркнутый.

Давайте добавим еще одно свойство. Сначала создадим его. Запустим. Мигания не наблюдается. Сменим браузер на Firefox. Снова не работает.

Посмотрим на следующий пример. Свойство text-indent.

Также демонстрировать его работу мы будем с помощью стиля. Здесь вот мы подключили этот класс.

Запускаем. Вот эта строка записана без отступа, а вот эта с отступом.

Посмотрим на следующий пример и поговорим о свойстве text-transform. Это свойство может принимать четыре значения.

Задаем заголовок нашей странице. Задаю стиль каждому и параграфов с помощью классов.

Вот наше свойство и разными параметрами.

Вот здесь мы не увидим никаких изменений. Здесь все первые буквы будут в верхнем регистре. Здесь все буквы будут в верхнем регистре. Здесь все буквы будут в нижнем регистре. Давайте проверим это.

Вот просто обычный текст.

Вот все первые буквы в верхнем регистре и т.д.

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

Следующее свойство — word-spacing.

У нас здесь есть три класса. Вот что мы увидим в результате выполнения кода.

Вот здесь у нас 20 пикселей. Давайте изменим отрицательное значение, чтобы было нагляднее. Сделаем его равным -3.

Поговорим о псевдо-свойствах.

Наводим , например, курсор на какую-то строку и она у нас светится. Вот это и есть hover.

Мы указываем вот это псевдо-свойство. Здесь делаем то же самое. Ту ссылку, которую посетим, будет зеленого цвета, а ту, на которую наведем курсор – красного.

Давайте выполним этот пример. Первые две ссылки зеленые потому, что я их уже посещал. Давайте перейдем на ссылку Контакты и посмотрим, что у нас произойдет. Теперь данная ссылка также стала зеленого цвета.

Здесь есть один нюанс, о котором следует помнить. Есть обязательная последовательность. Например, я не могу вот так вот указывать (поменять местами) hover и visited потому, что у меня перестанет все корректно работать и я не буду видеть этого подсвечивания. Для корректной работы сначала нужно указывать visited, а потом hover.

На этом наш урок подошел к концу. Напомним слушателям, что обязательно нужно проходить тесты, делать домашние задания для закрепления материала.

На этом наш урок закончен. Всем спасибо за внимание. Всего доброго, до свиданья.

Уроки обучения работе с HTML и CSS верстке для начинающих, — базовые онлайн-курсы «Смотри Учись»

» УРОК 1. СТРУКТУРА HTML ДОКУМЕНТА

Перед началом работы создадим файл index.html, который будем редактировать в блокноте (Notepad++). 

Задаем тип документа с помощью <doctype>

Строка  <!DOCTYPE html> идет первой в файле HTML и перед ней не должно быть пробелов и пустых с трок.

<html>

Внутри элемента <html> помещается весь код

В теге html указываем атрибут lang, который определяет язык содержимого в документе

<head> — голова

Внутри тега определяются: заголовок страницы, кодировка символов, мета-теги, ссылки на внешние файлы, содержащие стили, сценарии и т.д.

Содержимое тега, за исключением заголовка, не отображается в браузере.

<body> — тело

<meta> — метатеги

Кодировка символов  в теге head указывается следующим через метатэг <meta charset=»utf-8″>

В description и keywords указывается описание сайта (description) и ключевые слова (keywords)

<title> — заголовок страницы

Чрезвычайно важный тег.

Заголовок указывается в теге head:

<title>Разработка сайтов с помощью HTML5</title>

<link> — ссылка на style.css

Тэг используется для подключения к документу стилей, сценариев и т.д.    

     <link rel=»stylesheet» href=»style.css»> 

В итоге код страницы будет выглядеть следующим образом:

Таблица стилей — это набор правил форматирования, по­зволяющий менять внешний вид документа, например размер и цвет текста. Без таких правил текст и другие элементы отображаются на экране с использованием стандартных стилей браузера. Стили представляют собой простые правила, занимающие обычно всего несколько строк кода, и их можно объявить в самом документе HTML. Загрузка стилей CSS из внешнего файла упрощает структуру основного документа, увеличивает скорость загрузки веб-сайта, а также позволя­ет воспользоваться преимуществами новых возможностей HTML5.[1]

В HTML5 не нужно указывать тип подключаемой таблицы стилей (атрибут type больше не используется). Достаточно двух атрибутов: rel и href. Название атрибута rel происходит от англ. relation (отно­шение), и его значение определяет, чем для нашего документа является подключаемый файл. В данном случае атрибуту rel присвоено значение stylesheet, то есть мы сообщаем браузеру, что styles.css — это CSS-файл со стилями.

[1] Гоше X. Д. HTML5. Для профессионалов. — СПб.: Питер, 2013. — 496 с

Уроки CSS | bookhtml.ru

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

И так что же это такое — каскадные таблицы стилей CSS, где они применяются, какие имеют преимущества — все это мы сейчас и рассмотрим.

Смысл каскадных таблиц стилей будет очень просто понять на следующем примере.

Допустим мы имеем на странице нашего сайта несколько абзацев, текст которых написан шрифтом Verdana, размером — двойка и цветом — темно-серым. Все эти атрибуты и параметры мы должны прописать в HTML-коде для всех абзацев. А если у нас на сайте много страниц с такими параметрами, то и для всех страниц.

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

Если же объем нашего сайта имеет более ста страниц, и на каждой странице нам необходимо будет изменить параметры абзацев, то это заберет у нас много нашего драгоценного времени.

Вот в решении этой проблемы нам и поможет таблица стилей CSS.

Смысл таблицы в том, что в ней задаются различные правила в которых прописываются параметры для тегов. Таблица стилей подключается к html-странице в области тега <head> с помощью тега link и соответственно подключаются эти правила.

Пример правила для абзацев:

p {

font-family: Verdana;

font-size: 12px;

color: #000000;

}

Это единое правило для всех тегов <p> (для всех абзацев). Вот как это облегчает нашу работу — уже нет необходимости каждому тегу <p> прописывать атрибуты с параметрами. Все это прописываем в таблице стилей.

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

Пример правила для отдельного абзаца:

.sk {

font-weight: bold;

color: #424242;

}

С помощью атрибута class мы можем любому тегу <p> прописать правило .sk с другими параметрами.

Пример:

<p>Текст абзаца</p>

И так, что бы произвести какие либо изменения на страницах сайта, нам достаточно открыть таблицу стилей и прописать изменения параметров в правилах CSS-таблицы.

Вот такое удобное для web-дизайнеров изобретение — таблицы стилей CSS.

Продолжим изучение уроков css.

Знакомство с CSS. Основы CSS для начинающих. Урок №1

Знакомство с CSS. Основы CSS для начинающих. Урок №1

Всем привет!
В этом первом уроке я хотел бы познакомить вас, начинающих веб-мастеров, с основами CSS.
Здесь ничего сложного нет, для начала нужно просто понять, что такое CSS и для чего вообще он нужен.
Попробую все объяснить поэтапно и нормальным, доступным языком для начинающих.

○ Что такое CSS?
CSS (от англ. Cascading Style Sheets) – это каскадные таблицы стилей, позволяющие управлять внешним видом сайта (цвет фона, размер и цвет текста, оформление ссылок, позиция блоков на сайте и др.).
Другими словами можно сказать так, что CSS это инструмент позволяющий сделать полный ремонт в вашем доме (покраска потолков и полов, клейка обоев, перестановка мебели).
Метафору вы поняли.
В общем, если дело касается оформления сайта, то в этом ваш лучший помощник CSS.

○ Чем же хорош CSS, если оформление веб-документа можно осуществить и с помощью HTML?
Если оформлять документ только с помощью HTML, то в случае каких-либо изменений, например, замена цвета заголовка в статье, вам придется угробить на это массу времени, так как по отдельности на 1000 страницах веб-документа нужно будет внести исправления.
В CSS же все довольно просто.  Достаточно указать в одном css файле цвет к заголовкам, и на всех 1000 страницах веб-документа он изменится автоматически. Да, да, это огромноя экономия времени, и риск на инфаркт уменьшается.

Не буду вас нагружать с первого урока, скажу только, что css файл имеет расширение «*.css» и зачастую файлу присваивают название «style.css» (но это не обязательно).
Еще скажу, что файл CSS работает только в паре с HTML. Сам по себе CSS работать не будет. Так что если вы не знаете основ HTML, рекомендую с ними ознакомиться прежде, чем вы откроете урок №2.

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

Предыдущая запись
Основы HTML для начинающих – «Моя первая страничка на HTML». Урок №2
Следующая запись
Коротко о PHP. Основы PHP с нуля. Урок №1

Введение в HTML, CSS, JavaScript и как работают веб-сайты? | Учебники по веб-разработке # 1

Я начал этот курс как попытку научить вас веб-разработке в увлекательной и простой форме! Цель этого курса — научить вас создавать качественный, адаптивный и современный веб-сайт с использованием HTML, CSS и JavaScript.

В этом курсе вы узнаете обо всех технологиях, используемых в веб-разработке. Все видео будут загружены на мой канал YouTube CodeWithHarry в разделе плейлистов, к которому вы можете перейти из описания видео на YouTube.Этот курс будет полезен всем тем студентам, которые ничего не знают и являются новичками в этой области. Вы получите полные знания HTML, CSS и JavaScript . Вы получите полную информацию о веб-разработке с нуля. Кроме того, те, у кого уже есть некоторые знания, могут пройти курс, чтобы узнать еще больше, поскольку есть много продвинутых веб-сайтов, которые мы рассмотрим к концу этого курса.

Теперь давайте сначала разберемся, для чего нужны HTML, CSS и Javascript? HTML ( HyperText Markup Language ) является обязательным для разработки каждого веб-сайта.Это каркас веб-сайта. Без него ни один веб-сайт не может работать. CSS ( Cascading Style Sheets ) добавляет красоту этому веб-сайту, а JavaScript добавляет мозг, позволяющий этому веб-сайту функционировать. Следовательно, CSS и JavaScript добавляют красоту и интеллектуальность конкретному веб-сайту соответственно.

Давайте теперь возьмем другой пример автомобиля. HTML действует как металлический корпус автомобиля, а CSS действует как цвет и дизайн автомобиля. Наконец, двигатель автомобиля похож на JavaScript на веб-сайте для добавления функциональности.

Обычно клиент или пользователь отправляет запрос на веб-сервер веб-сайта, который он хочет посетить. Веб-сервер, имеющий собственный IP-адрес, хранит все файлы в бэкэнде, которые могут быть написаны на PHP, Python или Node.js. Веб-сервер отправляет ответ клиенту в форме HTML, CSS и JavaScript.

Наконец, разобраться —

• HTML используется как стандартный язык для любого дизайна веб-сайтов. Он действует как статический каркас веб-приложения.Это хорошо стандартизированная система.
• CSS используется для обработки представления веб-страницы. Это делает сайт привлекательным и красивым.
• JavaScript позволяет создавать сценарии на вашем веб-сайте и делает его полностью динамичным по своей природе. Он предоставляет интерфейсные сценарии для вашего веб-сайта и представляет собой высокоуровневый динамический интерпретируемый язык программирования.

Итак, HTML, CSS и JavaScript содержат множество концепций, которые мы рассмотрим на протяжении всего курса.Следовательно, его нельзя выучить сразу. Если вы новичок, изучения HTML до 80% , CSS до 40-60% и JavaScript до 50-70% будет более чем достаточно, чтобы начать создавать веб-сайты. Это то, о чем никто в индустрии веб-разработки не говорит, и поэтому я решил поделиться этим личным советом со всеми вами. Пожалуйста, не поймите меня неправильно, когда я это скажу. После того, как вы усвоили и поняли минимум для создания веб-сайта, вы можете вернуться к курсу и снова начать его смотреть, чтобы усовершенствовать и отточить уже изученные концепции.Иногда бывает трудно следовать этой практике, но хорошая новость заключается в том, что как только вы начнете смотреть эти видео и освоите основы HTML, CSS и JavaScript, остальному вы постепенно научитесь, основываясь на своей практике и опыте с помощью проектов I были разработаны в рамках этого курса. Вам нужно изучить все концепции одновременно и связать все друг с другом, практикуя их.

Итак, это была вводная часть, где мы изучили основные концепции HTML, CSS и JavaScript.Пройдя курс, вы изучите некоторые сложные концепции и создадите свой веб-сайт. Поэтому пройдите курс и начните свой путь, чтобы стать лучшим веб-разработчиком.

15 руководств на основе проектов для отработки навыков HTML и CSS · Dev Practical

Вы можете создавать реальные проекты с помощью руководств по HTML и CSS на основе проектов. Все, что вам нужно сделать, это выбрать один из 15 проектов и, следуя инструкциям, создать его.

Есть много онлайн-курсов по HTML и CSS.Однако большинство из них обычно обучают на основе особенностей языков.

Я ничего не имею против этого метода обучения. Оно работает. Но не для всех.

Если вы научитесь лучше, создавая продукты, вам понадобится учебное пособие на основе проекта.

Я создал этот список руководств, чтобы помочь вам в процессе обучения, создавая реальные проекты.

Курс

Dash Assembly научит вас навыкам HTML и CSS, создав 3 проекта. Курс приведет вас от ничего не знающего к:

• Создание личного сайта
• Создание адаптивной tumblr-темы
• Создание веб-сайта для малого бизнеса.
• создание робота на веб-странице с использованием CSS
• Создание игры Madlib

Последний проект, создание игры Madlib, познакомит вас с миром Javascript. В этот проект викторины, который вы будете делать, можно играть в браузере.

Однажды я учил класс детей 8-12 лет созданию веб-сайтов на основе материалов этого курса, и им это очень понравилось. Им особенно понравилось создание робота с использованием проекта CSS.

Просмотрите 5 проектов, которые вы будете строить на Dash.Сайт сборки
Цена: Бесплатно

2. Создайте отзывчивый веб-сайт | HTML, CSS Grid, Flexbox и многое другое, Брэд Трэверси (Youtube)

Предварительный просмотр проекта

3. HTML и CSS для начинающих: Создайте 3 проекта с нуля (Udemy)

С этим курсом вы будете строить:

• a Сайт рецептов
• сайт колледжа
• Сайт гостиничного бизнеса

Этот курс также доступен на Skillshare

4.Адаптивная целевая страница с использованием HTML и CSS (немного jQuery) (Youtube)

Предварительный просмотр финального проекта

5. Создание и развертывание целевой страницы продукта HTML и CSS (Youtube)

В этом руководстве по HTML и CSS вы создадите веб-страницу для наушников. Вы можете использовать такую ​​веб-страницу, чтобы продемонстрировать особенности продукта. Мне нравится объем работы, затраченный на создание аккуратного дизайна страницы.

Предварительный просмотр проекта, над которым вы будете работать.

Предварительный просмотр проекта

6. Клонирование страницы входа в Pluralsight HTML и CSS (Youtube)

7. Полноэкранный фон видео с HTML и CSS (Youtube)

Предварительный просмотр финального проекта

8. Изучите HTML и CSS на примерах

Вы будете создавать:

• Визитка цифровая
• Адаптивный заголовок блога
• Цифровое меню ресторана

9.Гамбургерное меню и оверлей на чистом CSS (Youtube)

Предварительный просмотр проекта

10. Следуйте инструкциям и создайте этот проект веб-сайта acme (Youtube)

Следуйте инструкциям и создайте этот проект веб-сайта acme

11. Контактная форма для первого адаптивного дизайна для мобильных устройств (Youtube)

12. Техническая документация, стр.

Вы можете попробовать воспроизвести или использовать веб-сайт Swift для вдохновения.

13.Эффект параллакса от Traversy mediaYoutube

14. Проект посадочного модуля Eduonix

Вы создадите целевую страницу, которую сможете использовать как часть своего портфолио.

15. Создание адаптивного макета веб-сайта на CSS в виде сетки с нуля, Брэд Трэверси (Youtube)

Вы будете создавать тему веб-сайта на основе сетки: вы можете увидеть результат создания веб-сайта на Codepen

.

16. Проект макета сетки CSS от traversy media

Поделитесь или поддержите на:

Твиттер

Facebook

Ко-фи

CSS 101 | Учебник | Институт передовых средств массовой информации Беркли

Начать с базовой HTML-страницы

Используйте индекс .html из учебника HTML в качестве отправной точки. Мы внесем одно небольшое изменение в ваш файл: сразу после открывающего тега мы добавим тег

.

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

  

    
        
        
        
        
        
    
    
        

            <заголовок>
                
 Джереми Рю 
                
 Моя первая веб-страница 
            
            
            <статья>
                
 Фотографии с моего последнего отпуска 
                
                
 Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, загорелся in culpa qui officia deserunt mollit anim id est Laborum.
                
 Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, загорелся in culpa qui officia deserunt mollit anim id est Laborum. 
                
 Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, загорелся in culpa qui officia deserunt mollit anim id est Laborum.