Главная страница » CSS » 5. Базовые стили тегов

5. Базовые стили тегов

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

Стили текста

Текстовые стили часто применяются к тегам, таким как <p>, <h1> - <h6>, <span>, <a> и т.д.

Пример:

				
					<!DOCTYPE html>
<html>
<head>
    <title>Стили текста</title>
    <style>
        p {
            font-size: 16px;
            color: #333;
            line-height: 1.5;
        }
        h1 {
            font-size: 32px;
            color: navy;
            text-align: center;
        }
        h2 {
            font-size: 24px;
            color: darkblue;
        }
        a {
            color: blue;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <h1>Заголовок 1 уровня</h1>
    <h2>Заголовок 2 уровня</h2>
    <p>Это пример параграфа. <a href="#">Ссылка</a> внутри параграфа.</p>
</body>
</html>

Стили списков

Стили для списков применяются к тегам <ul>, <ol>, <li>.

Пример:

				
					<!DOCTYPE html>
<html>
<head>
    <title>Стили списков</title>
    <style>
        ul {
            list-style-type: disc;
            margin-left: 20px;
        }
        ol {
            list-style-type: decimal;
            margin-left: 20px;
        }
        li {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <h2>Ненумерованный список</h2>
    <ul>
        <li>Элемент списка 1</li>
        <li>Элемент списка 2</li>
        <li>Элемент списка 3</li>
    </ul>
    <h2>Нумерованный список</h2>
    <ol>
        <li>Элемент списка 1</li>
        <li>Элемент списка 2</li>
        <li>Элемент списка 3</li>
    </ol>
</body>
</html>

Стили изображений

Стили для изображений применяются к тегу <img>.

Пример:

				
					<!DOCTYPE html>
<html>
<head>
    <title>Стили изображений</title>
    <style>
        img {
            width: 100%;
            height: auto;
            border: 2px solid #ccc;
        }
    </style>
</head>
<body>
    <h2>Пример изображения</h2>
    <img decoding="async" src="example.jpg" alt="Пример изображения">
</body>
</html>

Стили таблиц

Стили для таблиц применяются к тегам <table>, <th>, <td>, <tr>.

Пример:

				
					<!DOCTYPE html>
<html>
<head>
    <title>Стили таблиц</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f4f4f4;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <h2>Пример таблицы</h2>
    <table>
        <tr>
            <th>Заголовок 1</th>
            <th>Заголовок 2</th>
            <th>Заголовок 3</th>
        </tr>
        <tr>
            <td>Данные 1</td>
            <td>Данные 2</td>
            <td>Данные 3</td>
        </tr>
        <tr>
            <td>Данные 4</td>
            <td>Данные 5</td>
            <td>Данные 6</td>
        </tr>
    </table>
</body>
</html>

Стили для блоков и контейнеров

Стили для блоков и контейнеров применяются к тегам <div>, <section>, <header>, <footer>, <nav> и другим блочным элементам.

Пример:

				
					<!DOCTYPE html>
<html>
<head>
    <title>Стили блоков</title>
    <style>
        .container {
            width: 80%;
            margin: 0 auto;
            padding: 20px;
            background-color: #f9f9f9;
            border: 1px solid #ccc;
        }
        .header, .footer {
            background-color: #333;
            color: #fff;
            padding: 10px 0;
            text-align: center;
        }
        .content {
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Шапка сайта</h1>
        </div>
        <div class="content">
            <p>Основное содержимое страницы.</p>
        </div>
        <div class="footer">
            <p>Подвал сайта</p>
        </div>
    </div>
</body>
</html>

Распространённые ошибки

Неправильный синтаксис: Пропущенные точки с запятой или фигурные скобки.
- Неверно: color: blue
- Верно: color: blue;
Неправильное использование свойств: Убедитесь, что используете правильные свойства для нужных элементов.
- Неверно: font-size для <img>
- Верно: width для <img>
Конфликты стилей: Убедитесь, что приоритеты стилей установлены правильно и не конфликтуют друг с другом.
- Важно понимать приоритеты и специфичность CSS.

Заключение

Базовые стили тегов в CSS позволяют управлять внешним видом основных HTML-элементов. Понимание этих стилей помогает создавать более структурированные и стильные веб-страницы.

Тестовое задание

Создайте HTML-документ с заголовком, несколькими параграфами, списками (ненумерованным и нумерованным), изображением и таблицей.
Примените базовые стили к этим элементам, используя тег <style>.

HTML-документ:

				
					<!DOCTYPE html>
<html>
<head>
    <title>Тестовое задание</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            color: #333;
        }
        h1, h2 {
            text-align: center;
            color: navy;
        }
        p {
            font-size: 16px;
            line-height: 1.5;
        }
        ul {
            list-style-type: disc;
            margin-left: 20px;
        }
        ol {
            list-style-type: decimal;
            margin-left: 20px;
        }
        li {
            margin-bottom: 10px;
        }
        img {
            width: 100%;
            height: auto;
            border: 2px solid #ccc;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f4f4f4;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <h1>Тестовое задание</h1>
    <h2>Стили текста</h2>
    <p>Это пример параграфа с базовыми стилями.</p>
    <h2>Стили списков</h2>
    <ul>
        <li>Элемент ненумерованного списка 1</li>
        <li>Элемент ненумерованного списка 2</li>
        <li>Элемент ненумерованного списка 3</li>
    </ul>
    <ol>
        <li>Элемент нумерованного списка 1</li>
        <li>Элемент нумерованного списка 2</li>
        <li>Элемент нумерованного списка 3</li>
    </ol>
    <h2>Стили изображений</h2>
    <img decoding="async" src="example.jpg" alt="Пример изображения">
    <h2>Стили таблиц</h2>
    <table>
        <tr>
            <th>Заголовок 1</th>
            <th>Заголовок 2</th>
            <th>Заголовок 3</th>
        </tr>
        <tr>
            <td>Данные 1</td>
            <td>Данные 2</td>
            <td>Данные 3</td>
        </tr>
        <tr>
            <td>Данные 4</td>
            <td>Данные 5</td>
            <td>Данные 6</td>
        </tr>
    </table>
</body>
</html>

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