Development | Amber | Комментировать запись

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

Примечание: Найти все мануалы этой серии можно по тегу CSS-practice

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

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

Все описанные здесь методы можно применить и к другим проектам, разработанным на CSS/HTML.

Второй раздел нашего тестового сайта состоит из двух полей контента: одно поле – текстовое, а второе содержит большую фотографию профиля.

Требования

Чтобы следовать этому мануалу, нужно подготовит среду согласно мануалу Подготовка проекта CSS и HTML с помощью Visual Studio Code.

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

Чтобы загрузить это изображение профиля, перейдите по этой ссылке, нажмите CTRL и кликните левой кнопкой (на Mac) или правой кнопкой мыши (в Windows) по изображению, выберите «Сохранить изображение как» и сохраните его как large-profile.jpeg в своей папке images.

Создание правил стиля для блоков контента

Чтобы создать эти два блока контента, сначала мы определим в файле styles.css класс column, который стилизует блоки соответствующим образом. Затем мы добавитм текст и изображение в документ HTML.

Откройте файл styles.css, скопируйте и вставьте следующие наборы правил в конец файла:

. . .

/* Include padding and border in total box size*/

* {

  box-sizing: border-box;

}

/* Create two equal columns that float next to each other */

.column-2 {

  float: left;

  width: 45%;

  padding: 40px;

  padding-left:70px;

  padding-right: 70px;

  height: 475px;

  margin:30px;

  margin-right:30px;

  margin-bottom: 70px;

  background-color: #FEDE00;

  line-height:2;

}

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

Первый набор правил использует селектор *, который указывает, что набор должен применяться ко всем элементам и классам HTML. Этот набор правил объявляет значение свойства box-sizing как border-box – оно регулирует общую вычисленную ширину и высоту элемента CSS, включая отступы и границы. По умолчанию параметры ширины и высоты элемента относятся только к контенту этого элемента. Благодаря свойству box-sizing со значением border-box настройка общей ширины и высоты элемента и компоновка контента на странице становятся проще.

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

• Блоковая модель CSS: настройка контента, внутренних полей, рамок и внешних отступов HTML-элементов
• Селекторы классов в CSS

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

Некоторые значения и свойства в этом наборе правил ранее не рассматривались. Вот они:

• Объявление float:left; размещает элемент в левой части контейнера, внутри которого он находится (в данном случае, в самом окне просмотра), позволяя окружающему контенту обтекать его правую сторону. Вы также можете установить для свойства float значение right или none.
• Объявление width: 45%; устанавливает ширину элемента в 45% от ширины его контейнера, которым в данном случае является само окно просмотра. Если вы хотите, чтобы размер элемента изменялся в соответствии с размером контейнера, в котором он расположен, лучше устанавливать размеры (например, ширину) в процентах, а не в пикселях. Обратите внимание: динамическое определение размеров может оказаться сложным процессом – существует несколько методов создания отзывчивых элементов, которые можно реализовать после создания основы в CSS.
• background-color: #FEDE00; устанавливает цвет фона элемента (здесь это цветовой код #FEDE00).
• line-height:2; увеличивает интервал между строками.

Добавление поля «About me»

Затем мы добавим на веб-страницу поле «About me», используя только что созданный класс column-2. Сохраните файл styles.css и вернитесь к файлу index.html. Добавьте следующий код после закрывающего тега </div> раздела header, но перед закрывающим тегом </body>:

. . .

<!--Section 2: About me-->

        <div class="column-2">

            <h1>About me</h1>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."<a href="https://www.8host.com/blog/tag/css-practice/">CSS-practice</a>," Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

        </div>

. . .

Сохраните файл, а затем загрузите его в браузере. Если вы не знаете, как просматривать оффлайн-файл HTML, пожалуйста, обратитесь к нашему мануалу по работе с HTML-элементами (раздел «Просмотр оффлайн HTML-файла в браузере»).

Теперь в левой части страницы должно появиться желтое поле, содержащее текст:

Обратите внимание, ваша веб-страница должна по-прежнему содержать заголовок, который вы добавили в предыдущем руководстве этой серии, Создание заголовка сайта с помощью CSS.

Давайте кратко рассмотрим, как работает этот HTML-код:

• Первая строка в этом фрагменте кода (<!–Section 2: About me–>) – это комментарий, который помогает организовать содержимое HTML. Он не будет отображаться в браузере, он нужен только для удобства работы с кодом.
• Следующая строка (<div class=”column-2″ style=”background-color:#FEDE00;”>) создает контейнер <div>, присваивая ему класс column-2, который вы определили в styles.css, и использует встроенный HTML атрибут style для определения цвета фона (#FEDE00).
• Следующие теги <h1> и <p> содержат текст, который вы вставляете в текстовое поле «About me». Обратите внимание, что контейнер <div> закрывается в конце этого текста. Вы можете заменить Lorem ipsum настоящим текстом, если хотите.

Добавление поля изображения

Затем мы добавим второе поле, содержащее большое изображение профиля. Есть несколько способов добавить блок для изображения. Чтобы сделать это в этом руководстве, мы добавим его в качестве фонового изображения другого контейнера <div>, которому присвоен класс column-2.

Вернитесь к файлу styles.css и добавьте следующий фрагмент кода в конец документа:

. . .

/* Large profile image */

.large-profile {

  background: url('../images/large-profile.jpeg');

  background-size: cover;

  background-position: center;

}

В этом фрагменте кода мы добавили комментарий для организации кода CSS, а затем определили новый класс large-profile, который мы используем для стилизации поля, содержащего большое изображение профиля. В этом наборе правил есть объявление background: url(‘images/large-profile.jpeg’);, которое позволяет браузеру использовать изображение, размещенное по указанному пути, в качестве фонового изображения элемента. Объявление background-size: cover позволяет изображению покрыть пространство контейнера, в котором оно расположено; объявление background-position: center центрирует изображение внутри контейнера.

Затем мы добавим контейнер <div>, которому присвоим классы column-2 и large-profile, чтобы создать блок с большим изображением профиля.

Сохраните файл styles.css и вернитесь к файлу index.html. Добавьте следующий фрагмент кода под закрывающим тегом </div> вашего первого столбца и перед закрывающим тегом </body>:

. . .

  <div class="column-2 large-profile">

  </div>

Этот фрагмент кода создает контейнер <div>, стилизованный в соответствии с правилами, объявленными в классе column-2 и profile-picture.

Сохраните оба файла и перезагрузите index.html в своем браузере. Теперь ваша веб-страница должна содержать текстовое поле и поле с изображением, как показано ниже. Обратите внимание, ваша веб-страница также должна включать заголовок, который вы создали в предыдущем руководстве.

Вы можете самостоятельно поэкспериментировать с объявленными значениями в классах column-2 и profile-large, чтобы изучить различные возможности CSS.

Заключение

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