Задать стиль css блока

Содержание

Стилизация HTML-элемента
Требования
Blue
Red
Yellow
Blue
Red
Yellow
Заключение
How To Style the HTML element with CSS
Prerequisites
Exploring the Element in Practice
Adding and Styling Text in a Container

Стилизация HTML-элемента

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

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

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

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

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

Требования

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

Читайте также: Setting Font Size

Краткий обзор элемента

Давайте посмотрим на практике, как работает элемент . Сотрите все, что есть в файле styles.css (если вы добавляли в него код из предыдущих мануалов серии). Затем добавьте следующее CSS правило для селектора тега :

div background-color: green;
height: 100px;
width: 100px;
>

Сохраните файл styles.css. Затем откройте файл index.html, сотрите все, что там есть (кроме первой строки кода: ), и добавьте следующий фрагмент:

Обратите внимание, элемент состоит из открывающего и закрывающего тега, но не требует какого-либо контента.

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

На вашей веб-странице должно появиться зеленое поле шириной 100 пикселей и высотой 100 пикселей, согласно CSS-правилу:

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

Чтобы попрактиковаться в создании классов для , удалите из файла 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. Сотрите только что созданный элемент и добавьте три новых элемента, применив к каждому из них класс, который соответствует селекторам CSS из файла styles.css:

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

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

Добавление и стилизация текста в контейнере

Вы можете поместить в контейнер текст, вставив его между открывающим и закрывающим тегами . Попробуйте добавить текст в каждый из трех элементов в файле index.html:

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

В текст внутри элементов можно добавить дополнительные HTML-элементы. Для примера попробуйте добавить к вашему тексту внутри тегов в файле index.html теги заголовков (от до ):

Blue

Red

Yellow

Сохраните файл и перезагрузите его в браузере. Текст внутри контейнеров теперь будет оформлен в соответствии со свойствами тегов:

Blue

Red

Yellow

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

Чтобы стилизовать текст внутри , вы можете указать значения свойств текста в наборах правил для классов . Попробуйте добавить свойства в свои наборы правил в файле 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 в браузере. Текст внутри контейнеров теперь будет оформлен в соответствии с CSS правилами в файле styles.css:

Заключение

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

Источник

How To Style the HTML element with CSS

This tutorial will introduce you to styling the HTML Content Division element—or element—using CSS. The element can be used to structure the layout of a page and break up a webpage into separate components for individual styling. In this tutorial, you will create and style elements, as well as learn how to add and style other elements inside a container. These skills will prepare you to use elements as layout tools later on in the series when you begin recreating the demonstration website.

The

element is used by adding opening and closing

tags to an HTML document. On its own, the

element typically has little visual effect on the presentation of a webpage. To specify the size, color, and other properties of a

element, you can assign it style rules using CSS.

Prerequisites

To follow this tutorial, make sure you have set up the necessary files and folders as instructed in a previous tutorial in this series How To Set Up You CSS and HTML Practice Project.

Exploring the Element in Practice

Let’s try a hands-on exercise to study how the element works. Erase everything in your styles.css file (if you added content from previous tutorials). Next, add the following CSS rule for the tag selector:

div  background-color: green; height: 100px; width: 100px; >

Save the styles.css file. Next, return to your index.html file, erase everything that’s there (except for the first line of code: ) and add the following code snippet:

Notice that the element has opening and closing tags but does not require any content. Save the index.html file and reload it in your browser. (For instructions on loading an HTML file, please visit our tutorial step How To View An Offline HTML File In Your Browser).

Your webpage should display a green box 100 pixels wide and 100 pixels tall as specified by the CSS rule:

Webpage with green <div data-lazy-src=

box.»/>

Now that you have a styling rule for your element, every element you add to your page will be styled in the precisely the same manner. However, when creating a website, it is unlikely that you will want all of your HTML elements to be styled in the same way. For this reason, developers often create classes that they can use to style elements in different ways.

To practice creating classes for elements, erase the CSS rule you just created and add the following new three CSS rulesets to the styles.css file:

.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; >

In this code snippet, you have created styling rules for three different classes: div-1 , div-2 , and div-3 . Note that you have added a . before the class selector as required when declaring CSS rules for classes.

Save the styles.css file and return to your index.html file. Erase the element you just created and, add the three elements to your index.html file, applying a class to each one that corresponds to the CSS class selectors that you defined in styles.css :

div class="div-1">div> div class="div-2">div> div class="div-3">div>

Note that you have added the class as an attribute to the tag by adding the class attribute and class name to each opening tag. Save the file and reload it in your browser. You should receive something like this:

Adding and Styling Text in a Container

You can put text inside a container by inserting text in between the opening and closing tags. Try adding text inside each of the elements in your index.html file:

div class="div-1">Bluediv> div class="div-2">Reddiv> div class="div-3">Yellowdiv>

Save the file and reload it in your browser. You should now have text displayed in each of your containers:

You can add additional HTML elements to your text inside the elements. For example, try adding the HTML heading tags ( to ) to your text inside the tags in your index.html file:

div class="div-1">h2>Blueh2>div> div class="div-2">h3>Redh3>div> div class="div-3">h4>Yellowh4>div>

Save the file and reload it in your browser. The text inside the containers should now be styled according to the default properties of the to tags:

Note that the elements have also adjusted their positions slightly. This repositioning is caused by the default margin properties of the through elements. You’ll learn more about margins in the next tutorial on the CSS Box Model, but for now it is fine to ignore them

To style text inside the containers, you can specify text property values in the rulesets for your classes. Try adding the properties and values to your rulesets in your styles.css file as highlighted in the in the following code snippet:

.div-1  background-color: blue; height: 50px; width: 50px; font-size: 10px; color: white; iu > .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; >

Save your styles.css file and reload the index.html file in your browser. The text inside the containers should now be styled according to the CSS rules in your styles.css file:

containers»/>

Conclusion

In this tutorial you explored how to style the color and size of a element and how to add and style text inside a element. You will use the element to control the layout of a page when you begin building the website. In the next tutorial, you will learn about the CSS Box Model, and how to use it to adjust the size of an element’s content, padding, borders, and margin.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Tutorial Series: How To Build a Website With CSS

This tutorial is part of a series on creating and customizing this website with CSS, a stylesheet language used to control the presentation of websites. You may follow the entire series to recreate the demonstration website and gain familiarity with CSS or use the methods described here for other CSS website projects.

Before proceeding, we recommend that you have some knowledge of HTML, the standard markup language used to display documents in a web browser. If you don’t have familiarity with HTML, you can follow the first ten tutorials of our series How To Build a Website With HTML before starting this series.