Что такое HTML и CSS

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

Правильное использование HTML позволяет создавать удобные и доступные веб-страницы, которые будут корректно отображаться в различных браузерах и устройствах.

Основы CSS

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

Селекторы могут быть различными. Например, вы можете использовать селектор тега, чтобы применить стиль ко всем элементам этого типа (например, p для всех абзацев). Другие типы селекторов включают классы, идентификаторы, псевдоклассы и псевдоэлементы.

Пример объявления стиля:

• Селектор: p

  Объявление: color: blue;

Этот стиль применится ко всем абзацам на странице и задаст им синий цвет текста.

В CSS также можно задавать стили внутри элементов с помощью атрибута style. Например, вы можете добавить атрибут style="color: red;" к тегу p для того, чтобы задать красный цвет текста для этого абзаца.

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

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

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

Примеры HTML-разметки

Заголовки

Заголовки используются для определения структуры документа. Они обозначают важность текста и являются ключевыми элементами на странице.


<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>


Параграфы

Параграфы используются для разделения текста на логические блоки и упрощения его чтения. Параграфы отделены друг от друга пустой строкой.


<p>Это первый параграф.</p>
<p>Это второй параграф.</p>


Выделение текста

Для выделения текста в HTML можно использовать теги и . гарантирует полужирное начертание, а — курсивное.


<p>Это текст, <strong>который будет выделен полужирным шрифтом</strong>.</p>
<p>А это <em>курсивный текст</em>.</p>


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

Примеры CSS-стилей

Страницы HTML могут быть стилизованы с помощью CSS. Это позволяет разработчикам создавать уникальный дизайн и улучшать пользовательский интерфейс.

Вот некоторые примеры CSS-стилей:

Цвета текста

Чтобы изменить цвет текста, используйте свойство color:

p { color: red; }

Этот пример изменит цвет текста абзаца на красный.

Шрифты

С помощью свойств font-family и font-size вы можете изменить шрифты на странице:

body { font-family: Arial, sans-serif; }
h1 { font-size: 24px; }

В этом примере установлен шрифт Arial для всего текста страницы и размер заголовка первого уровня 24 пикселя.

Рамки

С помощью свойства border вы можете добавить рамку к элементам:

img { border: 1px solid black; }

Этот пример добавляет черную рамку толщиной 1 пиксель к изображениям на странице.

Фон

С помощью свойства background вы можете изменить фон элементов:

body { background: #f2f2f2; }

В этом примере фон всей страницы станет светло-серым цветом.

Анимация

CSS позволяет добавлять анимацию к элементам:

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
div {
animation: spin 2s linear infinite;
}

В этом примере элемент div будет вращаться два раза в секунду до бесконечности.

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