Основы CSS. Стилизация основных тегов HTML

21.03.2024 #Bootstrap, #class, #CSS, #H2, #H3, #html

Основные HTML теги и примеры стилей CSS для них

Тег <div> — используется для создания блочных элементов и группировки содержимого.

<div class="example-div">
   <p>TExt</p>
</div>

.example-div {
    background-color: #f0f0f0;
    padding: 20px;
    border: 1px solid #ccc;
}

2. Тег <p> — предназначен для отображения текста в абзаце.

<p class="example-paragraph">Пример текста в абзаце.</p>

.example-paragraph {
    font-size: 16px;
    line-height: 1.5;
    color: #333;
}

3. Тег <a> — для создания ссылок.

<a href="#" class="example-link">Пример ссылки</a>

.example-link {
    color: #007bff;
    text-decoration: none;
}

.example-link:hover {
    text-decoration: underline;
}

example-link:hover — свойства CSS отображаются при наведений на элемент

4. Тег <img> — для вставки изображений.

<img src="example.jpg" alt="Пример изображения" class="example-image">

.example-image {
max-width: 100%;
height: auto;
}

5. Тег <ul> и <li> — для создания маркированного списка.

<ul class="example-list">
    <li>Пункт 1</li>
    <li>Пункт 2</li>
    <li>Пункт 3</li>
</ul>

.example-list {
    list-style-type: circle;
}

.example-list li {
    margin-bottom: 5px;
}

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