FrontendBook | HTML Стили - CSS

HTML Стили - CSS

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

Каскадные таблицы стилей (CSS) используются для форматирования макета веб-страницы.

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

Каскадное слово означает, что стиль, примененный к родительскому элементу, также будет применяться ко всем дочерним элементам в родительском элементе. Итак, если вы установите цвет основного текста на «синий», все заголовки, абзацы и другие текстовые элементы в теле также получат тот же цвет (если вы не укажете что-то еще)!

Использование CSS

CSS можно добавить в документы HTML тремя способами:

  • Встроенный — с использованием атрибута стиля внутри HTML-элементов.
  • Внутренний — с помощью элемента <style> в разделе <head>
  • Внешний — с помощью элемента <link> для ссылки на внешний файл CSS.

Самый распространенный способ добавить CSS — сохранить стили во внешних файлах CSS. Однако в этом уроке мы будем использовать встроенные и внутренние стили, потому что это легче продемонстрировать, и вам проще попробовать это самостоятельно.

Встроенное добавление

Встроенный CSS используется для применения уникального стиля к одному элементу HTML. Встроенный CSS использует атрибут style HTML-элемента. В следующем примере цвет текста элемента <h1> задается синим, а цвет текста элемента <p> — красным:

Внутреннее добавление

Внутренний CSS используется для определения стиля отдельной HTML-страницы. Внутренний CSS определяется в разделе <head> HTML-страницы внутри элемента <style>. В следующем примере цвет текста ВСЕХ элементов <h1> (на этой странице) устанавливается синим, а цвет текста ВСЕХ элементов <p> — красным. Кроме того, страница будет отображаться с фоновым цветом «голубой»:

Внешнее добавление

Внешняя таблица стилей используется для определения стиля многих HTML-страниц. Чтобы использовать внешнюю таблицу стилей, добавьте ссылку на нее в разделе <head> каждой HTML-страницы:

С помощью внешней таблицы стилей вы можете изменить внешний вид всего веб-сайта, изменив один файл!