Стилизация HTML-элемента с помощью CSS
8 января, 2021 12:14 пп
4 770 views
| Комментариев нет
Development
| Комментировать запись
Эта серия мануалов покажет вам, как создать и настроить веб-сайт с помощью CSS, языка таблиц стилей, используемого для управления внешним видом сайтов. Вы можете выполнить все мануалы по порядку, чтобы создать тестовый веб-сайт и познакомиться с CSS, или вразброс использовать описанные здесь методы для оптимизации других проектов CSS.
Примечание: Найти все мануалы этой серии можно по тегу CSS-practice
Для работы с CSS вам нужно иметь базовые знания по HTML, стандартному языку разметки, который используется для отображения документов в браузере. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.
Элемент <div> добавляется в HTML-документ при помощи открывающих и закрывающих тегов. Сам по себе этот элемент обычно мало влияет на представление веб-страницы. Если присвоить ему набор CSS правил, вы сможете изменить размер, цвет и другие его свойства.
В данном руководстве мы поговорим о стилизации HTML элемента разделения контента – элемента <div> – с помощью CSS. Элемент <div> можно использовать для структурирования макета и разбиения страницы на отдельные компоненты для создания индивидуального стиля. Сможете понять, как создавать и стилизовать элементы <div>, а также научитесь добавлять и стилизовать другие элементы внутри контейнера <div>. Навык работы с элементом <div> как с инструментом компоновки пригодится вам позже, когда вы начнете создавать свой тестовый сайт.
Требования
Чтобы следовать этому мануалу, нужно подготовит среду по мануалу Подготовка проекта CSS и HTML с помощью Visual Studio Code.
Краткий обзор элемента <div>
Давайте посмотрим на практике, как работает элемент <div>. Сотрите все, что есть в файле styles.css (если вы добавляли в него код из предыдущих мануалов серии). Затем добавьте следующее CSS правило для селектора тега <div>:
div {
background-color: green;
height: 100px;
width: 100px;
}
Сохраните файл styles.css. Затем откройте файл index.html, сотрите все, что там есть (кроме первой строки кода: <link rel=”stylesheet” href=”css/styles.css”>), и добавьте следующий фрагмент:
<div></div>
Обратите внимание, элемент <div> состоит из открывающего и закрывающего тега, но не требует какого-либо контента.
Сохраните файл index.html и перезагрузите его в браузере. Если вы не знаете, как просматривать оффлайн-файл HTML, пожалуйста, обратитесь к нашему мануалу по работе с HTML-элементами (раздел «Просмотр оффлайн HTML-файла в браузере»).
На вашей веб-странице должно появиться зеленое поле шириной 100 пикселей и высотой 100 пикселей, согласно CSS-правилу:
Теперь, когда у вас есть правило стиля для элемента <div>, каждый элемент <div> на вашей странице будет оформлен точно так же. Но чаще всего на элементы <div> должны быть стилизованы по-разному. По этой причине для стилизации элементов <div> разработчики часто используют классы.
Чтобы попрактиковаться в создании классов для <div>, удалите из файла styles.css только что созданное CSS-правило и добавьте следующие три новых набора правил:
.div-1 {
background-color: blue;
height: 50px;
width: 50px;
}
.div-2 {
background-color: red;
height: 100px;
width: 100px;
}
.div-3 {
background-color: yellow;
height: 200px;
width: 200px;
}
В этом фрагменте содержатся правила стиля для трех разных классов: div-1, div-2 и div-3. Обратите внимание, имена селекторов классов начинаются с точки.
Сохраните файл styles.css и перейдите в файл index.html. Сотрите только что созданный элемент <div> и добавьте три новых элемента, применив к каждому из них класс, который соответствует селекторам CSS из файла styles.css:
<div class="div-1"></div>
<div class="div-2"></div>
<div class="div-3"></div>
Обратите внимание, класс добавляется в качестве атрибута к тегу <div>: для этого нужно указать атрибут class и имя класса в открывающем теге <div>. Сохраните файл и перезагрузите его в своем браузере. Вы должны получить такой результат:
На вашей веб-странице будет три элемента <div>, каждый из которых отличается по цвету и размеру в соответствии с присвоенным ему правилом стиля. Обратите внимание, каждый элемент <div> указывается с новой строки, поскольку элементы <div> являются блочными элементами и это их поведение по умолчанию.
Читайте также: Строчные и блочные элементы HTML
Добавление и стилизация текста в контейнере <div>
Вы можете поместить в контейнер <div> текст, вставив его между открывающим и закрывающим тегами <div>. Попробуйте добавить текст в каждый из трех элементов <div> в файле index.html:
<div class="div-1">Blue</div>
<div class="div-2">Red</div>
<div class="div-3">Yellow</div>
Сохраните файл и загрузите его в браузере. Теперь в каждом из контейнеров <div> должен отображаться текст:
Blue
Red
Yellow
В текст внутри элементов <div> можно добавить дополнительные HTML-элементы. Для примера попробуйте добавить к вашему тексту внутри тегов <div> в файле index.html теги заголовков (от <h2> до <h4>):
<div class="div-1"><h2>Blue</h2></div>
<div class="div-2"><h3>Red</h3></div>
<div class="div-3"><h4>Yellow</h4></div>
Сохраните файл и перезагрузите его в браузере. Текст внутри контейнеров <div> теперь будет оформлен в соответствии со свойствами тегов:
Blue
Red
Yellow
Обратите внимание, элементы <div> также немного изменили свои позиции. Это смещение вызвано стандартными свойствами полей для элементов с тегами <h2> по <h4>. Больше о полях вы узнаете в следующем мануале, посвященном блоковой модели CSS (пока что мы проигнорируем эти поля).
Чтобы стилизовать текст внутри <div>, вы можете указать значения свойств текста в наборах правил для классов <div>. Попробуйте добавить свойства в свои наборы правил в файле styles.css, как в следующем фрагменте кода:
.div-1 {
background-color: blue;
height: 50px;
width: 50px;
font-size: 10px;
color: white;
}
.div-2 {
background-color: red;
height: 100px;
width: 100px;
font-size: 20px;
color: yellow;
}
.div-3 {
background-color: yellow;
height: 200px;
width: 200px;
font-size:30px;
color: blue;
}
Сохраните файл styles.css и перезагрузите index.html в браузере. Текст внутри контейнеров <div> теперь будет оформлен в соответствии с CSS правилами в файле styles.css:
Blue
Red
Yellow
Заключение
В этом мануале вы узнали, как изменить цвет и размер элемента <div>, а также как добавить и стилизовать текст внутри такого элемента. Позже – когда мы начнем создавать веб-сайт – мы будем использовать элемент <div> для управления макетом страницы. В следующем мануале мы поговорим о блоковой модели CSS и о том, как ее использовать для настройки свойств контента, отступов, границ и полей элементов.
Tags: CSS, CSS-practice, HTML
Development | Комментировать запись
Эта серия мануалов покажет вам, как создать и настроить веб-сайт с помощью CSS, языка таблиц стилей, используемого для управления внешним видом сайтов. Вы можете выполнить все мануалы по порядку, чтобы создать тестовый веб-сайт и познакомиться с CSS, или вразброс использовать описанные здесь методы для оптимизации других проектов CSS.
Примечание: Найти все мануалы этой серии можно по тегу CSS-practice
Для работы с CSS вам нужно иметь базовые знания по HTML, стандартному языку разметки, который используется для отображения документов в браузере. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.
Элемент <div> добавляется в HTML-документ при помощи открывающих и закрывающих тегов. Сам по себе этот элемент обычно мало влияет на представление веб-страницы. Если присвоить ему набор CSS правил, вы сможете изменить размер, цвет и другие его свойства.
В данном руководстве мы поговорим о стилизации HTML элемента разделения контента – элемента <div> – с помощью CSS. Элемент <div> можно использовать для структурирования макета и разбиения страницы на отдельные компоненты для создания индивидуального стиля. Сможете понять, как создавать и стилизовать элементы <div>, а также научитесь добавлять и стилизовать другие элементы внутри контейнера <div>. Навык работы с элементом <div> как с инструментом компоновки пригодится вам позже, когда вы начнете создавать свой тестовый сайт.
Требования
Чтобы следовать этому мануалу, нужно подготовит среду по мануалу Подготовка проекта CSS и HTML с помощью Visual Studio Code.
Краткий обзор элемента <div>
Давайте посмотрим на практике, как работает элемент <div>. Сотрите все, что есть в файле styles.css (если вы добавляли в него код из предыдущих мануалов серии). Затем добавьте следующее CSS правило для селектора тега <div>:
div {
background-color: green;
height: 100px;
width: 100px;
}
Сохраните файл styles.css. Затем откройте файл index.html, сотрите все, что там есть (кроме первой строки кода: <link rel=”stylesheet” href=”css/styles.css”>), и добавьте следующий фрагмент:
<div></div>
Обратите внимание, элемент <div> состоит из открывающего и закрывающего тега, но не требует какого-либо контента.
Сохраните файл index.html и перезагрузите его в браузере. Если вы не знаете, как просматривать оффлайн-файл HTML, пожалуйста, обратитесь к нашему мануалу по работе с HTML-элементами (раздел «Просмотр оффлайн HTML-файла в браузере»).
На вашей веб-странице должно появиться зеленое поле шириной 100 пикселей и высотой 100 пикселей, согласно CSS-правилу:
Теперь, когда у вас есть правило стиля для элемента <div>, каждый элемент <div> на вашей странице будет оформлен точно так же. Но чаще всего на элементы <div> должны быть стилизованы по-разному. По этой причине для стилизации элементов <div> разработчики часто используют классы.
Чтобы попрактиковаться в создании классов для <div>, удалите из файла styles.css только что созданное CSS-правило и добавьте следующие три новых набора правил:
.div-1 {
background-color: blue;
height: 50px;
width: 50px;
}
.div-2 {
background-color: red;
height: 100px;
width: 100px;
}
.div-3 {
background-color: yellow;
height: 200px;
width: 200px;
}
В этом фрагменте содержатся правила стиля для трех разных классов: div-1, div-2 и div-3. Обратите внимание, имена селекторов классов начинаются с точки.
Сохраните файл styles.css и перейдите в файл index.html. Сотрите только что созданный элемент <div> и добавьте три новых элемента, применив к каждому из них класс, который соответствует селекторам CSS из файла styles.css:
<div class="div-1"></div>
<div class="div-2"></div>
<div class="div-3"></div>
Обратите внимание, класс добавляется в качестве атрибута к тегу <div>: для этого нужно указать атрибут class и имя класса в открывающем теге <div>. Сохраните файл и перезагрузите его в своем браузере. Вы должны получить такой результат:
На вашей веб-странице будет три элемента <div>, каждый из которых отличается по цвету и размеру в соответствии с присвоенным ему правилом стиля. Обратите внимание, каждый элемент <div> указывается с новой строки, поскольку элементы <div> являются блочными элементами и это их поведение по умолчанию.
Читайте также: Строчные и блочные элементы HTML
Добавление и стилизация текста в контейнере <div>
Вы можете поместить в контейнер <div> текст, вставив его между открывающим и закрывающим тегами <div>. Попробуйте добавить текст в каждый из трех элементов <div> в файле index.html:
<div class="div-1">Blue</div>
<div class="div-2">Red</div>
<div class="div-3">Yellow</div>
Сохраните файл и загрузите его в браузере. Теперь в каждом из контейнеров <div> должен отображаться текст:
В текст внутри элементов <div> можно добавить дополнительные HTML-элементы. Для примера попробуйте добавить к вашему тексту внутри тегов <div> в файле index.html теги заголовков (от <h2> до <h4>):
<div class="div-1"><h2>Blue</h2></div>
<div class="div-2"><h3>Red</h3></div>
<div class="div-3"><h4>Yellow</h4></div>
Сохраните файл и перезагрузите его в браузере. Текст внутри контейнеров <div> теперь будет оформлен в соответствии со свойствами тегов:
Blue
Red
Yellow
Обратите внимание, элементы <div> также немного изменили свои позиции. Это смещение вызвано стандартными свойствами полей для элементов с тегами <h2> по <h4>. Больше о полях вы узнаете в следующем мануале, посвященном блоковой модели CSS (пока что мы проигнорируем эти поля).
Чтобы стилизовать текст внутри <div>, вы можете указать значения свойств текста в наборах правил для классов <div>. Попробуйте добавить свойства в свои наборы правил в файле styles.css, как в следующем фрагменте кода:
.div-1 {
background-color: blue;
height: 50px;
width: 50px;
font-size: 10px;
color: white;
}
.div-2 {
background-color: red;
height: 100px;
width: 100px;
font-size: 20px;
color: yellow;
}
.div-3 {
background-color: yellow;
height: 200px;
width: 200px;
font-size:30px;
color: blue;
}
Сохраните файл styles.css и перезагрузите index.html в браузере. Текст внутри контейнеров <div> теперь будет оформлен в соответствии с CSS правилами в файле styles.css:
Заключение
В этом мануале вы узнали, как изменить цвет и размер элемента <div>, а также как добавить и стилизовать текст внутри такого элемента. Позже – когда мы начнем создавать веб-сайт – мы будем использовать элемент <div> для управления макетом страницы. В следующем мануале мы поговорим о блоковой модели CSS и о том, как ее использовать для настройки свойств контента, отступов, границ и полей элементов.
Tags: CSS, CSS-practice, HTML