Создание заголовка сайта с помощью CSS

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

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

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

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

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

Требования

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

Добавление заголовка и подзаголовка на страницу сайта

Начнем работу над нашим сайтом. Сегодня мы добавим заголовок «My First Site», подзаголовок «I DID EVERYTHING MYSELF!» и маленькую аватарку. Все эти элементы помещаются в контейнер <div>, который оформляется при помощи класса CSS.

Итак, нам нужно создать класс для контейнера <div>, а затем поместить содержимое – текст и изображения – в контейнер <div>, для которого предназначен новый класс.

Чтобы добавить заголовок и подзаголовок на свой сайт, откройте файл index.html поместите следующий выделенный фрагмент кода между открывающим и закрывающим тегами <body>. Замените нашу информацию своей собственной, если хотите:

. . .

<body>

<!--Header content-->

   <h1>My First Site<h1>

   <h5>I DID EVERYTHING MYSELF!<h5>

</body>

Вы добавили заголовок My First Site и присвоили ему тег заголовка <h1>, поскольку это – самый важный заголовок этой веб-страницы. Вы также добавили подзаголовок I DID EVERYTHING MYSELF! и присвоили ему тег <h5>, так как это менее важный заголовок.

Обратите внимание, непосредственно перед заголовком мы также добавили комментарий <!—Header content—>. Комментарии позволяют оставлять пояснительные примечания к коду и не отображаются браузером (посетители сайта не увидят комментарии, если они не будут просматривать исходный код веб-страницы). В HTML комментарии записываются между тегами <!— и —> , как показано выше. Не забудьте закрыть свой комментарий (—>), иначе весь ваш контент будет закомментирован.

Добавление и стилизация изображения профиля

Теперь давайте добавим в раздел заголовка аватарку – небольшое изображение профиля. Выберите фото профиля, которое вы хотите разместить на своем сайте. Если у вас нет фотографии, вы можете использовать любое изображение (например, наш логотип) или создать аватар на Getavataaars.com.

После того как вы выбрали изображение, сохраните его в папке images как small-profile.jpeg.

Теперь добавьте изображение профиля на веб-страницу с помощью тега <img> и атрибута src, который задает путь к файлу изображения вашего профиля. Добавьте следующий выделенный фрагмент кода в файл index.html между комментарием <!— Header content —> и строкой <h1>My First Site<h1>:

. . .

  <body>

  <!--Header content-->

       <img src="images/small-profile.jpeg" alt="This is an 8host logo, the black 8 symbol and the word host in front of a blue cloud.">

       <h1>My First Site</h1>

       <h5>I DID EVERYTHING MYSELF!</h5>

   </body>

</html>

Сохраните файл и загрузите его в браузере. Теперь ваша веб-страница должна содержать заголовок, подзаголовок, картинку профиля:

This is an 8host logo, the black 8 symbol and the word host in front of a blue cloud.

My First Site

I DID EVERYTHING MYSELF!

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

. . .

/*Top header profile image*/

.profile-small {

   height:150px;

   border-radius: 50%;

   border: 10px solid #FEDE00;

}

Прежде чем двигаться дальше, давайте подробно рассмотрим каждую добавленную строку кода:

  • /*Top header profile image*/ — CSS-комментарий для маркировки кода.
  • .profile-small ссылается на имя класса, который мы определяем с помощью набора правил. Этот класс будет применен к изображению профиля на следующем шаге.
  • Объявление height:150px; устанавливает высоту изображения в 150 пикселей и автоматически регулирует ширину, чтобы сохранить пропорции изображения.
  • border-radius: 50%; закругляет края изображения.
  • border: 10px solid #FEDE00; добавляет изображению сплошную границу шириной 10 пикселей и устанавливает заданный цвет (здесь его выражает цветовой код HTML #FEDE00).

Сохраните файл и вернитесь к файлу index.html, чтобы добавить класс profile-small в тег <img>:

       <img src="images/small-profile.jpeg" class="profile-small" alt="This is an 8host logo, the black 8 symbol and the word host in front of a blue cloud.">

Сохраните файл и перезагрузите его в своем браузере. Изображение вашего профиля изменится: теперь оно будет иметь высоту 150 пикселей и желтую рамку со скругленными углами:

This is an 8host logo, the black 8 symbol and the word host in front of a blue cloud.

My First Site

I DID EVERYTHING MYSELF!

На следующем этапе мы настроим единую стилизацию заголовка, подзаголовка и изображения профиля.

Стилизация и размещение заголовка с помощью CSS

Теперь мы определим специальный класс CSS для стилизации и размещения содержимого заголовка.

Читайте также: Селекторы классов в CSS

Вернитесь к файлу styles.css и создайте класс header, добавив следующий набор CSS-правил:

<!-- wp:paragraph -->
<p><code>/* Header Title */</code></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><code>.header {</code></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><code>&nbsp; padding: 40px;</code></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><code>&nbsp; text-align: center;</code></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><code>&nbsp; background: #f9f7f7;</code></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><code>&nbsp; margin:30px;</code></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><code>&nbsp; font-size:20px;</code></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><code>}</code></p>
<!-- /wp:paragraph -->

. . .

Давайте сделаем небольшую паузу, чтобы рассмотреть каждую строку только что добавленного кода:

  • /* Header Title */ — это комментарий, который не отображается в браузере.
  • .header – это имя селектора класса, который мы создаем и определяем с помощью этого набора правил.
  • Объявление padding: 40px; создает отступ в 40 пикселей между контентом и границей элемента.
  • Объявление text-align: center; перемещает контент в центр элемента. Вы также можете использовать значения left и right, чтобы соответственно выровнять текст.
  • Объявление background: #f9f7f7; устанавливает цвет фона согласно указанному цветовому коду HTML. В этом руководстве мы не будем подробно останавливаться на цветовых кодах HTML; но знайте, что вместо кодов вы также можете использовать названия цветов (black, white, gray, silver, purple, red, fuchsia, lime, olive, green, yellow, teal, navy, blue, maroon, и aqua), чтобы изменить значение цвета этого свойства.
  • Объявление margin:30px; создает поле в 30 пикселей между периметром элемента и периметром области просмотра и любых окружающих элементов.
  • font-size:20px; увеличивает размер заголовка и подзаголовка.

Сохраните файл styles.css. Затем мы применим класс header к нашему контенту. Вернитесь на страницу index.html и поместите контент заголовка (его вы уже добавили в свой файл) в тег <div>, которому присвоен класс header:

. . .

<!--Section 1: Header content-->

   <div class="header">

     <img src="images/small-profile.jpeg" class="small-profile.jpeg" alt="This is an 8host logo, the black 8 symbol and the word host in front of a blue cloud.">

     <h1>My First Site<h1>

     <h5>I DID EVERYTHING MYSELF!<h5>

   </div>

  </body>

</html>

Сохраните файл index.html и перезагрузите его в браузере. Теперь ваш заголовок, подзаголовок и изображение профиля должны быть стилизованы внутри контейнера <div> в соответствии с правилами, которые вы объявили в классе header.

This is an 8host logo, the black 8 symbol and the word host in front of a blue cloud.

My First Site

I DID EVERYTHING MYSELF!

Заключение

В этом мануале мы создали заголовок своей веб-страницы с помощью HTML и CSS. Мы добавили и оформили заголовок, подзаголовок и аватарку с помощью контейнеров <div> и классов CSS. Если вам интересно, вы можете самостоятельно поэкспериментировать с возможностями CSS: измените CSS- правила для контента класса header.

Теперь вы можете перейти к следующему мануалу этой серии.

Tags: , ,

Добавить комментарий